perf(data-table): improve data table layout and badge display

web/default/src/components/data-table/core/badge-list-cell.tsx

@@ -0,0 +1,74 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import * as React from 'react'
+import { StatusBadgeList } from '@/components/status-badge'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+interface BadgeListCellProps {
+  items: React.ReactNode[]
+  max?: number
+  tooltipClassName?: string
+}
+
+/**
+ * Table cell renderer for a list of badges with overflow tooltip.
+ * Displays up to `max` badges inline; remaining items appear in a tooltip.
+ * Applies -ml-1.5 to compensate for badge px-1.5 and align with column header.
+ */
+export function BadgeListCell({
+  items,
+  max = 2,
+  tooltipClassName,
+}: BadgeListCellProps) {
+  if (items.length === 0) {
+    return <span className='text-muted-foreground text-xs'>-</span>
+  }
+
+  const showTooltip = items.length > max
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger render={<div className='-ml-1.5' />}>
+          <StatusBadgeList
+            items={items}
+            max={max}
+            renderItem={(item) => item}
+          />
+        </TooltipTrigger>
+        {showTooltip && (
+          <TooltipContent
+            side='top'
+            className={
+              tooltipClassName ??
+              'border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
+            }
+          >
+            <div className='flex flex-wrap gap-1'>{items}</div>
+          </TooltipContent>
+        )}
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

web/default/src/components/data-table/core/column-pinning.ts

@@ -63,8 +63,8 @@ function getPinnedColumnClassName(
     pinnedColumn.side === 'left' ? 'left-0' : 'right-0',
     edgeClassName,
     kind === 'header'
-      ? 'bg-background z-30'
-      : 'bg-background z-10 group-hover:bg-muted group-data-[state=selected]:bg-muted',
+      ? '[background-color:var(--table-header-bg,var(--background))] group-hover:[background-color:color-mix(in_oklch,var(--muted)_50%,var(--background))] z-30'
+      : 'bg-background z-10 group-hover:[background-color:color-mix(in_oklch,var(--muted)_50%,var(--background))] group-data-[state=selected]:bg-muted',
     pinnedColumn.className,
     kind === 'header'
       ? pinnedColumn.headerClassName

web/default/src/components/data-table/core/data-table-colgroup.tsx

@@ -23,10 +23,21 @@ export function DataTableColgroup<TData>({
 }: {
   table: TanstackTable<TData>
 }) {
+  const columns = table.getVisibleLeafColumns()
+  const totalSize = columns.reduce((sum, col) => sum + col.getSize(), 0)
+
   return (
     <colgroup>
-      {table.getVisibleLeafColumns().map((column) => (
-        <col key={column.id} style={{ width: column.getSize() }} />
+      {columns.map((column) => (
+        <col
+          key={column.id}
+          style={{
+            width:
+              totalSize > 0
+                ? `${(column.getSize() / totalSize) * 100}%`
+                : undefined,
+          }}
+        />
       ))}
     </colgroup>
   )

web/default/src/components/data-table/core/data-table-header.tsx

@@ -16,8 +16,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { flexRender, type Table as TanstackTable } from '@tanstack/react-table'
+import { flexRender, type Header, type Table as TanstackTable } from '@tanstack/react-table'
 import { TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { DataTableColumnHeader } from './column-header'
 import type { DataTableColumnClassName } from './types'
 
 type DataTableHeaderProps<TData> = {
@@ -46,16 +47,27 @@ export function DataTableHeader<TData>({
               className={getColumnClassName?.(header.column.id, 'header')}
               style={applyHeaderSize ? { width: header.getSize() } : undefined}
             >
-              {header.isPlaceholder
-                ? null
-                : flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
+              {renderHeaderContent(header)}
             </TableHead>
           ))}
         </TableRow>
       ))}
     </TableHeader>
   )
 }
+
+function renderHeaderContent<TData>(header: Header<TData, unknown>) {
+  if (header.isPlaceholder) return null
+  const { header: headerDef, meta } = header.column.columnDef
+  // A string header means the user wrote e.g. `header: t('Name')` — auto-render
+  // with DataTableColumnHeader so sorting works without boilerplate.
+  // A function (including TanStack's default accessor-key fallback) is passed
+  // through as-is. meta.label is kept as a fallback for legacy columns.
+  if (typeof headerDef === 'string') {
+    return <DataTableColumnHeader column={header.column} title={headerDef} />
+  }
+  if (meta?.label) {
+    return <DataTableColumnHeader column={header.column} title={meta.label} />
+  }
+  return flexRender(headerDef, header.getContext())
+}

web/default/src/components/data-table/core/data-table-row.tsx

@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import type * as React from 'react'
+import * as React from 'react'
 import { flexRender, type Row } from '@tanstack/react-table'
 import { TableCell, TableRow } from '@/components/ui/table'
 import type { DataTableColumnClassName } from './types'
@@ -27,7 +27,7 @@ type DataTableRowProps<TData> = {
   getColumnClassName?: DataTableColumnClassName
 } & Omit<React.ComponentProps<typeof TableRow>, 'children'>
 
-export function DataTableRow<TData>({
+function DataTableRowInner<TData>({
   row,
   className,
   getColumnClassName,
@@ -50,3 +50,14 @@ export function DataTableRow<TData>({
     </TableRow>
   )
 }
+
+export const DataTableRow = React.memo(DataTableRowInner, (prev, next) => {
+  // Skip re-render when only the getColumnClassName reference changed but the
+  // row identity and selection state are the same — callers rarely stabilize
+  // this callback, so excluding it from comparison avoids unnecessary renders.
+  return (
+    prev.row === next.row &&
+    prev.className === next.className &&
+    prev.row.getIsSelected() === next.row.getIsSelected()
+  )
+}) as typeof DataTableRowInner

web/default/src/components/data-table/core/data-table-view.tsx

@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import * as React from 'react'
-import { type Row } from '@tanstack/react-table'
+import { type Row, type Table as TanstackTable } from '@tanstack/react-table'
 import { cn } from '@/lib/utils'
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
 import {
@@ -46,8 +46,12 @@ export { DataTableRow } from './data-table-row'
 
 export function DataTableView<TData>(props: DataTableViewProps<TData>) {
   const rows = props.rows ?? props.table.getRowModel().rows
-  const colSpan = props.table.getVisibleLeafColumns().length
+  const colSpan = React.useMemo(
+    () => props.table.getVisibleLeafColumns().length,
+    [props.table]
+  )
   const columnClassName = useResolvedColumnClassName(
+    props.table,
     props.getColumnClassName,
     props.pinnedColumns
   )
@@ -120,32 +124,8 @@ function SplitHeaderTableView<TData>({
   colSpan: number
   getColumnClassName: DataTableColumnClassName
 }) {
-  const headerHostRef = React.useRef<HTMLDivElement>(null)
-  const bodyHostRef = React.useRef<HTMLDivElement>(null)
   const tableSizing = getTableSizing(props)
 
-  React.useEffect(() => {
-    const headerScroller = headerHostRef.current?.querySelector<HTMLElement>(
-      '[data-slot=table-container]'
-    )
-    const bodyScroller = bodyHostRef.current?.querySelector<HTMLElement>(
-      '[data-slot=table-container]'
-    )
-
-    if (!headerScroller || !bodyScroller) return
-
-    const syncHeaderScroll = () => {
-      headerScroller.scrollLeft = bodyScroller.scrollLeft
-    }
-
-    syncHeaderScroll()
-    bodyScroller.addEventListener('scroll', syncHeaderScroll, { passive: true })
-
-    return () => {
-      bodyScroller.removeEventListener('scroll', syncHeaderScroll)
-    }
-  }, [rows.length, props.tableClassName, props.colgroup])
-
   return (
     <div
       className={cn(
@@ -155,49 +135,49 @@ function SplitHeaderTableView<TData>({
     >
       <div
         className={cn(
-          'flex min-h-0 flex-1 flex-col overflow-hidden',
-          props.splitHeaderScrollClassName
+          'min-h-0 flex-1 overflow-auto',
+          '[&_[data-slot=table-header]]:[--table-header-bg:color-mix(in_oklch,var(--muted)_30%,var(--background))]',
+          '[&_[data-slot=table-header]]:[background-color:var(--table-header-bg)]',
+          props.splitHeaderScrollClassName,
+          props.bodyContainerClassName
         )}
       >
-        <div
-          ref={headerHostRef}
-          className='[scrollbar-gutter:stable] overflow-hidden [&_[data-slot=table-container]]:overflow-x-hidden'
-        >
-          <Table className={props.tableClassName} style={tableSizing.style}>
-            {tableSizing.colgroup}
-            <DataTableHeader
-              table={props.table}
-              applyHeaderSize={props.applyHeaderSize}
-              className={props.tableHeaderClassName}
-              rowClassName={props.tableHeaderRowClassName}
-              getColumnClassName={getColumnClassName}
-            />
-          </Table>
-        </div>
-        <div
-          ref={bodyHostRef}
+        <table
+          data-slot='table'
           className={cn(
-            'min-h-0 flex-1 [scrollbar-gutter:stable] overflow-y-auto',
-            props.bodyContainerClassName
+            'w-full caption-bottom text-sm tabular-nums [&_td]:text-sm [&_td_*]:text-sm [&_th]:text-sm [&_th_*]:text-sm',
+            props.tableClassName
           )}
+          style={tableSizing.style}
         >
-          <Table className={props.tableClassName} style={tableSizing.style}>
-            {tableSizing.colgroup}
-            {renderTableBody(props, rows, colSpan, getColumnClassName)}
-          </Table>
-        </div>
+          {tableSizing.colgroup}
+          <DataTableHeader
+            table={props.table}
+            applyHeaderSize={props.applyHeaderSize}
+            className={cn('sticky top-0 z-10', props.tableHeaderClassName)}
+            rowClassName={props.tableHeaderRowClassName}
+            getColumnClassName={getColumnClassName}
+          />
+          {renderTableBody(props, rows, colSpan, getColumnClassName)}
+        </table>
       </div>
     </div>
   )
 }
 
-function useResolvedColumnClassName(
+function useResolvedColumnClassName<TData>(
+  table: TanstackTable<TData>,
   getColumnClassName?: DataTableColumnClassName,
   pinnedColumns?: DataTablePinnedColumn[]
 ) {
+  const allPinnedColumns = React.useMemo(() => {
+    const metaPinnedColumns = getMetaPinnedColumns(table)
+    return mergePinnedColumns(pinnedColumns, metaPinnedColumns)
+  }, [table, pinnedColumns])
+
   const pinnedColumnById = React.useMemo(
-    () => getPinnedColumnMap(pinnedColumns),
-    [pinnedColumns]
+    () => getPinnedColumnMap(allPinnedColumns),
+    [allPinnedColumns]
   )
 
   return React.useMemo(
@@ -207,6 +187,41 @@ function useResolvedColumnClassName(
   )
 }
 
+function getMetaPinnedColumns<TData>(
+  table: TanstackTable<TData>
+): DataTablePinnedColumn[] {
+  return table.getAllColumns().flatMap((column) => {
+    const side = column.columnDef.meta?.pinned
+    if (!side) return []
+
+    return [{ columnId: column.id, side }]
+  })
+}
+
+function mergePinnedColumns(
+  explicitPinnedColumns: DataTablePinnedColumn[] | undefined,
+  metaPinnedColumns: DataTablePinnedColumn[]
+): DataTablePinnedColumn[] | undefined {
+  if (!metaPinnedColumns.length) {
+    return explicitPinnedColumns
+  }
+
+  if (!explicitPinnedColumns?.length) {
+    return metaPinnedColumns
+  }
+
+  const explicitColumnIds = new Set(
+    explicitPinnedColumns.map((column) => column.columnId)
+  )
+
+  return [
+    ...explicitPinnedColumns,
+    ...metaPinnedColumns.filter(
+      (column) => !explicitColumnIds.has(column.columnId)
+    ),
+  ]
+}
+
 function getTableSizing<TData>(props: DataTableViewProps<TData>): {
   colgroup?: React.ReactNode
   style?: React.CSSProperties

web/default/src/components/data-table/hooks/use-debounced-column-filter.ts

@@ -41,6 +41,8 @@ export function useDebouncedColumnFilter({
   const [pendingValue, setPendingValue] = React.useState(value)
   const isComposingRef = React.useRef(false)
   const debouncedValue = useDebounce(pendingValue, delay)
+  const onColumnFiltersChangeRef = React.useRef(onColumnFiltersChange)
+  onColumnFiltersChangeRef.current = onColumnFiltersChange
 
   React.useEffect(() => {
     // Keep the input aligned when URL state changes outside the local field.
@@ -55,13 +57,13 @@ export function useDebouncedColumnFilter({
   React.useEffect(() => {
     if (debouncedValue === value) return
 
-    onColumnFiltersChange((previous) => {
+    onColumnFiltersChangeRef.current((previous) => {
       const filters = previous.filter((filter) => filter.id !== columnId)
       return debouncedValue
         ? [...filters, { id: columnId, value: debouncedValue }]
         : filters
     })
-  }, [columnId, debouncedValue, onColumnFiltersChange, value])
+  }, [columnId, debouncedValue, value])
 
   const updateInputValue = React.useCallback((nextValue: string) => {
     setInputValue(nextValue)

web/default/src/components/data-table/index.ts

@@ -18,6 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 export { DataTablePagination } from './core/pagination'
 export { DataTableColumnHeader } from './core/column-header'
+export { BadgeListCell } from './core/badge-list-cell'
 export { DataTableViewOptions } from './toolbar/view-options'
 export { DataTableToolbar } from './toolbar/toolbar'
 export { DataTableBulkActions } from './toolbar/bulk-actions'