UTable: row dividers and sticky headers are achievable when virtualized

[JustusBaumhove]

Package

v4.x

Description

Row dividers

As said in the docs borders are not working well with virtualization, but using a css after element works fine. I've implemented row dividers in my library similar to:

• <tr>: 'relative after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-(--ui-border)'
• <tbody>: 'last:[&>tr]:after:hidden'

Sticky headers

The issue here is that the scrollable element and the table element have different heights, we simply need to append another after element which is the cheapest to compute for the browser to extend the height. Issue and solution properly explained here:

• Sticky header in a useReactTable table with useVirtualizer disappears when scrolling TanStack/virtual#640 (comment)

I grab the height of the tbody element via useElementSize and calculate the difference like:

const tableBodyRef = useTemplateRef('tableBodyRef')
const { height: tableBodyHeight } = useElementSize(tableBodyRef)
const tableStyle = computed(() => {
  const tableAfterHeight = virtualizer.value.getTotalSize() - tableBodyHeight.value
  return { '--after-height': `${tableAfterHeight}px` }
})

// Theme:
virtualize: {
  false: {
    base: 'overflow-clip',
    ...
  },
  true: {
    base: 'after:inline-block after:h-(--after-height)',
    ...
  },
},

In the template I was able to get rid of the reusable table template and extra div by setting that calculated style on the table element itself.

I am aware of the PR for the ScrollArea component and was wondering if it solves these two issues already or if I should try myself on a PR if these workarounds are wanted?

Additional context

No response

[teajaymars]

[Updated] I've got a version of this working in my client code, without modifying the Nuxt UI source and without direct access to the virtualizer instance. Here's the gist of it, extracted from my code:

<script setup lang="ts">
// ...
const tableRef = useTemplateRef('tableRef')

const tableStyle = computed((): Record<string, string> => {
  const wrappingDiv = tableRef.value?.$el?.children[0]
  const tbody = wrappingDiv?.querySelector('tbody')
  if (!wrappingDiv || !tbody) return {}
  const tableOuterHeight = useElementSize(wrappingDiv).height.value
  const tbodyHeight = useElementSize(tbody).height.value
  return {
    '--after-height': `${tableOuterHeight - tbodyHeight}px`,
  }
})
</script>

<template>
  <UTable
    ref="tableRef"
    :virtualize="{ estimateSize: 42, overscan: 5 }"
    // ...
    :ui="{
      base: 'table-fixed w-full after:inline-block after:h-(--after-height)',
      thead: 'sticky top-0 z-10 bg-white',
    }"
    :style="tableStyle"
  />
</template>

This seems to reliably hold a sticky header over a virtualized table.

[JustusBaumhove]

I've made a working example here https://github.com/JustusBaumhove/ui/tree/table-sticky-virtualized just run the playground, it's on the index page of that.

Keep in mind that it's a proof of concept and not meant to work well with the default Table playground page at this point.