whiffleball99 Posts - Answer Overflow

whiffleball99

•Created by whiffleball99 on 6/13/2024 in #❓・help

How to create sticky table headers in a Nuxt UI Table Component?

I am trying to create "sticky table headers" so that way when the user scrolls a long list of table data rows, the headers stick to the top and visible in the viewport and keep the user informed of what the columns are. I am using [NuxtUI Table component][1] in Nuxt3 and can not figure out how to get the headers to stick to the top. I tried doing the following:

  <section class="relative">
  <UTable
    :ui="{ th: { base: 'sticky top-0' } }"
    :columns="columns"
    :rows="people"
  />
  </section>

  <section class="relative">
  <UTable
    :ui="{ th: { base: 'sticky top-0' } }"
    :columns="columns"
    :rows="people"
  />
  </section>

But, that did not work. Here's my reproduction link: https://stackblitz.com/edit/nuxt-ui-hg5dsj?file=app.vue Anyone got a solution? [1]: https://ui.nuxt.com/components/table

5 replies

NNuxt

•Created by whiffleball99 on 3/15/2023 in #❓・help

how to correctly use `useServerSeoMeta()` ? Meta data not updated when navigating between pages

I have a blog-app where each page is a blog post. So, on the index page for each blog post page, I am using useServerSeoMeta like so:

const { data: post } = await useFetch(`/api/posts/${route.params.id}`, {
  key: `/post/${route.params.id}`
})

useServerSeoMeta({
  title: () => `${post.value.data?.title} - APP NAME`,
  ogTitle: () => `${post.value.data?.title} - APP NAME`,
  description: () => post.value.data?.content,
  ogDescription: () => post.value.data?.content,
  image: () =>
    config.public.imagekitBaseURL +
    post.value.data?.imagePath +
    '&tr=w-1200,fo-auto,dpr-auto',
  ogImage: () =>
    config.public.imagekitBaseURL +
    post.value.data?.imagePath +
    '&tr=w-1200,fo-auto,dpr-auto',
  twitterCard: 'summary_large_image'
})

const { data: post } = await useFetch(`/api/posts/${route.params.id}`, {
  key: `/post/${route.params.id}`
})

useServerSeoMeta({
  title: () => `${post.value.data?.title} - APP NAME`,
  ogTitle: () => `${post.value.data?.title} - APP NAME`,
  description: () => post.value.data?.content,
  ogDescription: () => post.value.data?.content,
  image: () =>
    config.public.imagekitBaseURL +
    post.value.data?.imagePath +
    '&tr=w-1200,fo-auto,dpr-auto',
  ogImage: () =>
    config.public.imagekitBaseURL +
    post.value.data?.imagePath +
    '&tr=w-1200,fo-auto,dpr-auto',
  twitterCard: 'summary_large_image'
})

Accessing the blog post page directly into URL works well, and the relevant title, description, etc is displayed. However, when navigating to and from different pages of the app, the above data is "stuck" for each page and doesn't change unless I do a manual refresh for each page. I guess that is because I am not using useHead? So, should I be using BOTH useServerSeoMeta and useHead on my pages together? If so, would I not be negating the performance benefit of using userServerSeoMeta ?

1 replies

Gaming

Programming