@raystack/apsara 0.56.5 → 1.0.0-rc.0

package/dist/components/data-table/components/virtualized-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtualized-content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAGL,uBAAuB,EACxB,MAAM,qBAAqB,CAAC;AA6L7B,wBAAgB,kBAAkB,CAAC,EACjC,SAAc,EACd,iBAAiB,EACjB,QAAY,EACZ,cAAoB,EACpB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,uBAAuB,2CAgGzB"}
+{"version":3,"file":"virtualized-content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAIL,uBAAuB,EACxB,MAAM,qBAAqB,CAAC;AA8L7B,wBAAgB,kBAAkB,CAAC,EACjC,SAAc,EACd,iBAAiB,EACjB,QAAY,EACZ,cAAoB,EACpB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,uBAAuB,2CAiKzB"}

package/dist/components/data-table/components/virtualized-content.js

@@ -4,14 +4,16 @@ import { TableIcon } from '@radix-ui/react-icons';
 import { flexRender } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { cx } from 'class-variance-authority';
-import { useRef, useCallback } from 'react';
+import { useRef, useState, useMemo, useCallback, useLayoutEffect } from 'react';
 import tableStyles from '../../table/table.module.css.js';
 import { Badge } from '../../badge/badge.js';
 import { EmptyState } from '../../empty-state/empty-state.js';
 import { Flex } from '../../flex/flex.js';
 import { Skeleton } from '../../skeleton/skeleton.js';
 import styles from '../data-table.module.css.js';
+import { defaultGroupOption } from '../data-table.types.js';
 import { useDataTable } from '../hooks/useDataTable.js';
+import { hasActiveQuery } from '../utils/index.js';
 
 function VirtualHeaders({ headerGroups = [], className = '' }) {
     return (jsx("div", { role: 'rowgroup', className: cx(styles.virtualHeaderGroup, className), children: headerGroups?.map(headerGroup => (jsx("div", { role: 'row', className: styles.virtualHeaderRow, children: headerGroup?.headers?.map(header => {
@@ -53,11 +55,25 @@ function VirtualLoaderRows({ columns, rowHeight, count }) {
 }
 const DefaultEmptyComponent = () => (jsx(EmptyState, { icon: jsx(TableIcon, {}), heading: 'No Data' }));
 function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, loadMoreOffset = 100, emptyState, zeroState, classNames = {} }) {
-    const { onRowClick, table, isLoading, loadMoreData, tableQuery, loadingRowCount = 3 } = useDataTable();
+    const { onRowClick, table, isLoading, loadMoreData, tableQuery, defaultSort, loadingRowCount = 3, stickyGroupHeader = false } = useDataTable();
     const headerGroups = table?.getHeaderGroups();
     const rowModel = table?.getRowModel();
     const { rows = [] } = rowModel || {};
     const scrollContainerRef = useRef(null);
+    const headerRef = useRef(null);
+    const [stickyGroup, setStickyGroup] = useState(null);
+    const [headerHeight, setHeaderHeight] = useState(40);
+    const groupBy = tableQuery?.group_by?.[0];
+    const isGrouped = Boolean(groupBy) && groupBy !== defaultGroupOption.id;
+    const groupHeaderList = useMemo(() => {
+        const list = [];
+        rows.forEach((row, i) => {
+            if (row.subRows && row.subRows.length > 0) {
+                list.push({ index: i, data: row.original });
+            }
+        });
+        return list;
+    }, [rows]);
     const showLoaderRows = isLoading && rows.length > 0;
     const virtualizer = useVirtualizer({
         count: rows.length,
@@ -69,20 +85,51 @@ function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, l
         },
         overscan
     });
+    const updateStickyGroup = useCallback(() => {
+        if (!stickyGroupHeader || !isGrouped || groupHeaderList.length === 0) {
+            setStickyGroup(null);
+            return;
+        }
+        const items = virtualizer.getVirtualItems();
+        const firstIndex = items[0]?.index ?? 0;
+        const current = groupHeaderList
+            .filter(g => g.index <= firstIndex)
+            .pop()?.data;
+        setStickyGroup(current ?? null);
+    }, [stickyGroupHeader, isGrouped, groupHeaderList, virtualizer]);
     const handleVirtualScroll = useCallback(() => {
-        if (!scrollContainerRef.current || isLoading)
+        const el = scrollContainerRef.current;
+        if (!el)
             return;
-        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+        if (stickyGroupHeader)
+            updateStickyGroup();
+        if (isLoading)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = el;
         if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {
             loadMoreData();
         }
-    }, [isLoading, loadMoreData, loadMoreOffset]);
+    }, [
+        stickyGroupHeader,
+        isLoading,
+        loadMoreData,
+        loadMoreOffset,
+        updateStickyGroup
+    ]);
     const totalHeight = virtualizer.getTotalSize();
+    useLayoutEffect(() => {
+        if (headerRef.current) {
+            setHeaderHeight(headerRef.current.getBoundingClientRect().height);
+        }
+    }, [headerGroups]);
+    useLayoutEffect(() => {
+        if (stickyGroupHeader)
+            updateStickyGroup();
+    }, [stickyGroupHeader, updateStickyGroup, groupHeaderList, isGrouped]);
     const hasData = rows?.length > 0 || isLoading;
-    const hasFiltersOrSearch = (tableQuery?.filters && tableQuery.filters.length > 0) ||
-        Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
-    const isZeroState = !hasData && !hasFiltersOrSearch;
-    const isEmptyState = !hasData && hasFiltersOrSearch;
+    const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);
+    const isZeroState = !hasData && !hasChanges;
+    const isEmptyState = !hasData && hasChanges;
     const stateToShow = isZeroState
         ? (zeroState ?? emptyState ?? jsx(DefaultEmptyComponent, {}))
         : isEmptyState
@@ -92,7 +139,7 @@ function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, l
         return jsx("div", { className: classNames.root, children: stateToShow });
     }
     const visibleColumns = table.getVisibleLeafColumns();
-    return (jsxs("div", { ref: scrollContainerRef, className: cx(classNames.root, styles.scrollContainer), onScroll: handleVirtualScroll, children: [jsxs("div", { role: 'table', className: cx(styles.virtualTable, classNames.table), children: [jsx(VirtualHeaders, { headerGroups: headerGroups, className: cx(styles.stickyHeader, classNames.header) }), jsx("div", { role: 'rowgroup', className: cx(styles.virtualBodyGroup, classNames.body), style: { height: totalHeight }, children: jsx(VirtualRows, { rows: rows, virtualizer: virtualizer, onRowClick: onRowClick, classNames: {
+    return (jsxs("div", { ref: scrollContainerRef, className: cx(classNames.root, styles.scrollContainer), onScroll: handleVirtualScroll, children: [jsxs("div", { role: 'table', className: cx(styles.virtualTable, classNames.table), children: [jsx("div", { ref: headerRef, children: jsx(VirtualHeaders, { headerGroups: headerGroups, className: cx(styles.stickyHeader, classNames.header) }) }), stickyGroupHeader && isGrouped && stickyGroup && (jsx("div", { role: 'row', className: styles.stickyGroupAnchor, style: { top: headerHeight }, children: jsxs(Flex, { gap: 3, align: 'center', children: [stickyGroup.label, stickyGroup.showGroupCount ? (jsx(Badge, { variant: 'neutral', children: stickyGroup.count })) : null] }) })), jsx("div", { role: 'rowgroup', className: cx(styles.virtualBodyGroup, classNames.body), style: { height: totalHeight }, children: jsx(VirtualRows, { rows: rows, virtualizer: virtualizer, onRowClick: onRowClick, classNames: {
                                 row: classNames.row
                             } }) })] }), showLoaderRows && (jsx(VirtualLoaderRows, { columns: visibleColumns, rowHeight: rowHeight, count: loadingRowCount }))] }));
 }

package/dist/components/data-table/components/virtualized-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtualized-content.js","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useRef } from 'react';\nimport tableStyles from '~/components/table/table.module.css';\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  GroupedData,\n  VirtualizedContentProps\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction VirtualHeaders<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <div role='rowgroup' className={cx(styles.virtualHeaderGroup, className)}>\n      {headerGroups?.map(headerGroup => (\n        <div\n          role='row'\n          key={headerGroup?.id}\n          className={styles.virtualHeaderRow}\n        >\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <div\n                role='columnheader'\n                key={header.id}\n                className={cx(\n                  tableStyles.head,\n                  styles.virtualHead,\n                  columnDef.classNames?.header\n                )}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction VirtualGroupHeader<TData>({\n  data,\n  style\n}: {\n  data: GroupedData<TData>;\n  style?: React.CSSProperties;\n}) {\n  return (\n    <div role='row' className={styles.virtualSectionHeader} style={style}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </div>\n  );\n}\n\nfunction VirtualRows<TData>({\n  rows,\n  virtualizer,\n  onRowClick,\n  classNames\n}: {\n  rows: Row<TData>[];\n  virtualizer: ReturnType<typeof useVirtualizer>;\n  onRowClick?: (row: TData) => void;\n  classNames?: { row?: string };\n}) {\n  const items = virtualizer.getVirtualItems();\n\n  return items.map((item, idx) => {\n    const row = rows[item.index];\n    if (!row) return null;\n\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const rowKey = row.id + '-' + item.index;\n\n    const positionStyle: React.CSSProperties = {\n      height: item.size,\n      top: item.start\n    };\n\n    if (isGroupHeader) {\n      return (\n        <VirtualGroupHeader\n          key={rowKey}\n          data={row.original as GroupedData<unknown>}\n          style={positionStyle}\n        />\n      );\n    }\n\n    return (\n      <div\n        role='row'\n        key={rowKey}\n        className={cx(\n          styles.virtualRow,\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        style={positionStyle}\n        data-state={isSelected && 'selected'}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            unknown,\n            unknown\n          >;\n          return (\n            <div\n              role='cell'\n              key={cell.id}\n              className={cx(\n                tableStyles.cell,\n                styles.virtualCell,\n                columnDef.classNames?.cell\n              )}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </div>\n          );\n        })}\n      </div>\n    );\n  });\n}\n\nfunction VirtualLoaderRows({\n  columns,\n  rowHeight,\n  count\n}: {\n  columns: ReturnType<\n    ReturnType<typeof useDataTable>['table']['getVisibleLeafColumns']\n  >;\n  rowHeight: number;\n  count: number;\n}) {\n  return (\n    <div className={styles.stickyLoaderContainer}>\n      {Array.from({ length: count }).map((_, rowIndex) => (\n        <div\n          role='row'\n          key={'loading-row-' + rowIndex}\n          className={cx(styles.virtualRow, styles['row'], styles.loaderRow)}\n          style={{ height: rowHeight }}\n        >\n          {columns.map((col, colIndex) => {\n            const columnDef = col.columnDef as DataTableColumnDef<\n              unknown,\n              unknown\n            >;\n            return (\n              <div\n                role='cell'\n                key={'loading-column-' + colIndex}\n                className={cx(\n                  tableStyles.cell,\n                  styles.virtualCell,\n                  columnDef.classNames?.cell\n                )}\n                style={columnDef.styles?.cell}\n              >\n                <Skeleton containerClassName={styles['flex-1']} />\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function VirtualizedContent({\n  rowHeight = 40,\n  groupHeaderHeight,\n  overscan = 5,\n  loadMoreOffset = 100,\n  emptyState,\n  zeroState,\n  classNames = {}\n}: VirtualizedContentProps) {\n  const {\n    onRowClick,\n    table,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    loadingRowCount = 3\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const scrollContainerRef = useRef<HTMLDivElement | null>(null);\n\n  const showLoaderRows = isLoading && rows.length > 0;\n\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: index => {\n      const row = rows[index];\n      const isGroupHeader = row?.subRows && row.subRows.length > 0;\n      return isGroupHeader ? (groupHeaderHeight ?? rowHeight) : rowHeight;\n    },\n    overscan\n  });\n\n  const handleVirtualScroll = useCallback(() => {\n    if (!scrollContainerRef.current || isLoading) return;\n    const { scrollTop, scrollHeight, clientHeight } =\n      scrollContainerRef.current;\n    if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {\n      loadMoreData();\n    }\n  }, [isLoading, loadMoreData, loadMoreOffset]);\n\n  const totalHeight = virtualizer.getTotalSize();\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasFiltersOrSearch =\n    (tableQuery?.filters && tableQuery.filters.length > 0) ||\n    Boolean(tableQuery?.search && tableQuery.search.trim() !== '');\n\n  const isZeroState = !hasData && !hasFiltersOrSearch;\n  const isEmptyState = !hasData && hasFiltersOrSearch;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  if (!hasData) {\n    return <div className={classNames.root}>{stateToShow}</div>;\n  }\n\n  const visibleColumns = table.getVisibleLeafColumns();\n\n  return (\n    <div\n      ref={scrollContainerRef}\n      className={cx(classNames.root, styles.scrollContainer)}\n      onScroll={handleVirtualScroll}\n    >\n      <div role='table' className={cx(styles.virtualTable, classNames.table)}>\n        <VirtualHeaders\n          headerGroups={headerGroups}\n          className={cx(styles.stickyHeader, classNames.header)}\n        />\n        <div\n          role='rowgroup'\n          className={cx(styles.virtualBodyGroup, classNames.body)}\n          style={{ height: totalHeight }}\n        >\n          <VirtualRows\n            rows={rows}\n            virtualizer={virtualizer}\n            onRowClick={onRowClick}\n            classNames={{\n              row: classNames.row\n            }}\n          />\n        </div>\n      </div>\n      {showLoaderRows && (\n        <VirtualLoaderRows\n          columns={visibleColumns}\n          rowHeight={rowHeight}\n          count={loadingRowCount}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA;;AAgBY;;;AAuBZ;AAEA;;AAiBA;AAEA;AAWE;;;AAIE;AAAU;AAEV;;AAEA;;AAGA;;;;;AAME;;AASF;AAeM;;AAkBF;AAGN;AACF;AAEA;AAWE;AAUU;;;AAuBZ;AAEA;AAIM;AASJ;AASA;AACA;;AAGA;;;;AAME;;AAEE;AACA;AACA;;;AAGH;AAED;AACE;;;;AAIE;;;AAIJ;;AAIA;AAEE;AAEF;AACA;;;AAIE;AACE;;;;;AAOJ;;;;AAqCF;;"}
+{"version":3,"file":"virtualized-content.js","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport tableStyles from '~/components/table/table.module.css';\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  defaultGroupOption,\n  GroupedData,\n  VirtualizedContentProps\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction VirtualHeaders<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <div role='rowgroup' className={cx(styles.virtualHeaderGroup, className)}>\n      {headerGroups?.map(headerGroup => (\n        <div\n          role='row'\n          key={headerGroup?.id}\n          className={styles.virtualHeaderRow}\n        >\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <div\n                role='columnheader'\n                key={header.id}\n                className={cx(\n                  tableStyles.head,\n                  styles.virtualHead,\n                  columnDef.classNames?.header\n                )}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction VirtualGroupHeader<TData>({\n  data,\n  style\n}: {\n  data: GroupedData<TData>;\n  style?: React.CSSProperties;\n}) {\n  return (\n    <div role='row' className={styles.virtualSectionHeader} style={style}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </div>\n  );\n}\n\nfunction VirtualRows<TData>({\n  rows,\n  virtualizer,\n  onRowClick,\n  classNames\n}: {\n  rows: Row<TData>[];\n  virtualizer: ReturnType<typeof useVirtualizer>;\n  onRowClick?: (row: TData) => void;\n  classNames?: { row?: string };\n}) {\n  const items = virtualizer.getVirtualItems();\n\n  return items.map((item, idx) => {\n    const row = rows[item.index];\n    if (!row) return null;\n\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const rowKey = row.id + '-' + item.index;\n\n    const positionStyle: React.CSSProperties = {\n      height: item.size,\n      top: item.start\n    };\n\n    if (isGroupHeader) {\n      return (\n        <VirtualGroupHeader\n          key={rowKey}\n          data={row.original as GroupedData<unknown>}\n          style={positionStyle}\n        />\n      );\n    }\n\n    return (\n      <div\n        role='row'\n        key={rowKey}\n        className={cx(\n          styles.virtualRow,\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        style={positionStyle}\n        data-state={isSelected && 'selected'}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            TData,\n            unknown\n          >;\n          return (\n            <div\n              role='cell'\n              key={cell.id}\n              className={cx(\n                tableStyles.cell,\n                styles.virtualCell,\n                columnDef.classNames?.cell\n              )}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </div>\n          );\n        })}\n      </div>\n    );\n  });\n}\n\nfunction VirtualLoaderRows({\n  columns,\n  rowHeight,\n  count\n}: {\n  columns: ReturnType<\n    ReturnType<typeof useDataTable>['table']['getVisibleLeafColumns']\n  >;\n  rowHeight: number;\n  count: number;\n}) {\n  return (\n    <div className={styles.stickyLoaderContainer}>\n      {Array.from({ length: count }).map((_, rowIndex) => (\n        <div\n          role='row'\n          key={'loading-row-' + rowIndex}\n          className={cx(styles.virtualRow, styles['row'], styles.loaderRow)}\n          style={{ height: rowHeight }}\n        >\n          {columns.map((col, colIndex) => {\n            const columnDef = col.columnDef as DataTableColumnDef<\n              unknown,\n              unknown\n            >;\n            return (\n              <div\n                role='cell'\n                key={'loading-column-' + colIndex}\n                className={cx(\n                  tableStyles.cell,\n                  styles.virtualCell,\n                  columnDef.classNames?.cell\n                )}\n                style={columnDef.styles?.cell}\n              >\n                <Skeleton containerClassName={styles['flex-1']} />\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function VirtualizedContent({\n  rowHeight = 40,\n  groupHeaderHeight,\n  overscan = 5,\n  loadMoreOffset = 100,\n  emptyState,\n  zeroState,\n  classNames = {}\n}: VirtualizedContentProps) {\n  const {\n    onRowClick,\n    table,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    defaultSort,\n    loadingRowCount = 3,\n    stickyGroupHeader = false\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const scrollContainerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const [stickyGroup, setStickyGroup] = useState<GroupedData<unknown> | null>(\n    null\n  );\n  const [headerHeight, setHeaderHeight] = useState(40);\n\n  const groupBy = tableQuery?.group_by?.[0];\n  const isGrouped = Boolean(groupBy) && groupBy !== defaultGroupOption.id;\n\n  const groupHeaderList = useMemo(() => {\n    const list: { index: number; data: GroupedData<unknown> }[] = [];\n    rows.forEach((row, i) => {\n      if (row.subRows && row.subRows.length > 0) {\n        list.push({ index: i, data: row.original as GroupedData<unknown> });\n      }\n    });\n    return list;\n  }, [rows]);\n\n  const showLoaderRows = isLoading && rows.length > 0;\n\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: index => {\n      const row = rows[index];\n      const isGroupHeader = row?.subRows && row.subRows.length > 0;\n      return isGroupHeader ? (groupHeaderHeight ?? rowHeight) : rowHeight;\n    },\n    overscan\n  });\n\n  const updateStickyGroup = useCallback(() => {\n    if (!stickyGroupHeader || !isGrouped || groupHeaderList.length === 0) {\n      setStickyGroup(null);\n      return;\n    }\n    const items = virtualizer.getVirtualItems();\n    const firstIndex = items[0]?.index ?? 0;\n    const current = groupHeaderList\n      .filter(g => g.index <= firstIndex)\n      .pop()?.data;\n    setStickyGroup(current ?? null);\n  }, [stickyGroupHeader, isGrouped, groupHeaderList, virtualizer]);\n\n  const handleVirtualScroll = useCallback(() => {\n    const el = scrollContainerRef.current;\n    if (!el) return;\n    if (stickyGroupHeader) updateStickyGroup();\n    if (isLoading) return;\n    const { scrollTop, scrollHeight, clientHeight } = el;\n    if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {\n      loadMoreData();\n    }\n  }, [\n    stickyGroupHeader,\n    isLoading,\n    loadMoreData,\n    loadMoreOffset,\n    updateStickyGroup\n  ]);\n\n  const totalHeight = virtualizer.getTotalSize();\n\n  useLayoutEffect(() => {\n    if (headerRef.current) {\n      setHeaderHeight(headerRef.current.getBoundingClientRect().height);\n    }\n  }, [headerGroups]);\n\n  useLayoutEffect(() => {\n    if (stickyGroupHeader) updateStickyGroup();\n  }, [stickyGroupHeader, updateStickyGroup, groupHeaderList, isGrouped]);\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n  const isZeroState = !hasData && !hasChanges;\n  const isEmptyState = !hasData && hasChanges;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  if (!hasData) {\n    return <div className={classNames.root}>{stateToShow}</div>;\n  }\n\n  const visibleColumns = table.getVisibleLeafColumns();\n\n  return (\n    <div\n      ref={scrollContainerRef}\n      className={cx(classNames.root, styles.scrollContainer)}\n      onScroll={handleVirtualScroll}\n    >\n      <div role='table' className={cx(styles.virtualTable, classNames.table)}>\n        <div ref={headerRef}>\n          <VirtualHeaders\n            headerGroups={headerGroups}\n            className={cx(styles.stickyHeader, classNames.header)}\n          />\n        </div>\n        {stickyGroupHeader && isGrouped && stickyGroup && (\n          <div\n            role='row'\n            className={styles.stickyGroupAnchor}\n            style={{ top: headerHeight }}\n          >\n            <Flex gap={3} align='center'>\n              {stickyGroup.label}\n              {stickyGroup.showGroupCount ? (\n                <Badge variant='neutral'>{stickyGroup.count}</Badge>\n              ) : null}\n            </Flex>\n          </div>\n        )}\n        <div\n          role='rowgroup'\n          className={cx(styles.virtualBodyGroup, classNames.body)}\n          style={{ height: totalHeight }}\n        >\n          <VirtualRows\n            rows={rows}\n            virtualizer={virtualizer}\n            onRowClick={onRowClick}\n            classNames={{\n              row: classNames.row\n            }}\n          />\n        </div>\n      </div>\n      {showLoaderRows && (\n        <VirtualLoaderRows\n          columns={visibleColumns}\n          rowHeight={rowHeight}\n          count={loadingRowCount}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBA;;AAgBY;;;AAuBZ;AAEA;;AAiBA;AAEA;AAWE;;;AAIE;AAAU;AAEV;;AAEA;;AAGA;;;;;AAME;;AASF;AAeM;;AAkBF;AAGN;AACF;AAEA;AAWE;AAUU;;;AAuBZ;AAEA;AAIM;;AAoBJ;AACA;;AAGA;AACA;;;;AAOA;AAEA;;;AAGI;AACE;;AAEJ;AACA;AACF;;;;AAME;;AAEE;AACA;AACA;;;AAGH;AAED;AACE;;;;AAIA;;;;;AAKA;;AAGF;AACE;AACA;;AACA;AAAuB;AACvB;;;;AAGE;;AAEJ;;;;;;AAMC;AAED;;AAGE;;;AAGF;;AAGE;AAAuB;;;;AAOzB;AACA;;;AAIE;AACE;;;;;AAOJ;AAEA;;;AAmDF;;"}

package/dist/components/data-table/data-table.cjs

@@ -14,13 +14,13 @@ var context = require('./context.cjs');
 var dataTable_types = require('./data-table.types.cjs');
 var index = require('./utils/index.cjs');
 
-function DataTableRoot({ data = [], columns, query, mode = "client", isLoading = false, loadingRowCount = 3, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, onColumnVisibilityChange, }) {
-    const defaultTableQuery = index.getDefaultTableQuery(defaultSort, query);
+function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading = false, loadingRowCount = 3, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, onColumnVisibilityChange, stickyGroupHeader = false, getRowId }) {
+    const defaultTableQuery = React.useMemo(() => index.getDefaultTableQuery(defaultSort, query), [defaultSort, query]);
     const initialColumnVisibility = index.getInitialColumnVisibility(columns);
     const [columnVisibility, setColumnVisibility] = React.useState(initialColumnVisibility);
     const handleColumnVisibilityChange = React.useCallback((value) => {
-        setColumnVisibility((prev) => {
-            const newValue = typeof value === "function" ? value(prev) : value;
+        setColumnVisibility(prev => {
+            const newValue = typeof value === 'function' ? value(prev) : value;
             onColumnVisibilityChange?.(newValue);
             return newValue;
         });
@@ -29,12 +29,18 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
     const oldQueryRef = React.useRef(null);
     const reactTableState = React.useMemo(() => index.queryToTableState(tableQuery), [tableQuery]);
     const onDisplaySettingsReset = React.useCallback(() => {
-        setTableQuery((prev) => ({ ...prev, ...defaultTableQuery }));
+        setTableQuery(prev => ({
+            ...prev,
+            ...defaultTableQuery,
+            sort: [defaultSort],
+            group_by: [dataTable_types.defaultGroupOption.id]
+        }));
         handleColumnVisibilityChange(initialColumnVisibility);
     }, [
+        defaultSort,
         defaultTableQuery,
         initialColumnVisibility,
-        handleColumnVisibilityChange,
+        handleColumnVisibilityChange
     ]);
     const group_by = tableQuery.group_by?.[0];
     const columnsWithFilters = React.useMemo(() => index.getColumnsWithFilterFn(columns, tableQuery.filters), [columns, tableQuery.filters]);
@@ -43,7 +49,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
         if (tableQuery &&
             onTableQueryChange &&
             index.hasQueryChanged(oldQueryRef.current, tableQuery) &&
-            mode === "server") {
+            mode === 'server') {
             onTableQueryChange(index.transformToDataTableQuery(tableQuery));
             oldQueryRef.current = tableQuery;
         }
@@ -51,39 +57,40 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
     const table = reactTable.useReactTable({
         data: groupedData,
         columns: columnsWithFilters,
+        getRowId,
         getCoreRowModel: reactTable.getCoreRowModel(),
         getExpandedRowModel: reactTable.getExpandedRowModel(),
-        getSubRows: (row) => row?.subRows || [],
-        getSortedRowModel: mode === "server" ? undefined : reactTable.getSortedRowModel(),
-        getFilteredRowModel: mode === "server" ? undefined : reactTable.getFilteredRowModel(),
-        manualSorting: mode === "server",
-        manualFiltering: mode === "server",
+        getSubRows: row => row?.subRows || [],
+        getSortedRowModel: mode === 'server' ? undefined : reactTable.getSortedRowModel(),
+        getFilteredRowModel: mode === 'server' ? undefined : reactTable.getFilteredRowModel(),
+        manualSorting: mode === 'server',
+        manualFiltering: mode === 'server',
         onColumnVisibilityChange: handleColumnVisibilityChange,
-        globalFilterFn: mode === "server" ? undefined : "auto",
+        globalFilterFn: mode === 'server' ? undefined : 'auto',
         initialState: {
-            columnVisibility: initialColumnVisibility,
+            columnVisibility: initialColumnVisibility
         },
         filterFromLeafRows: true,
         state: {
             ...reactTableState,
             columnVisibility: columnVisibility,
-            expanded: group_by && group_by !== dataTable_types.defaultGroupOption.id ? true : undefined,
-        },
+            expanded: group_by && group_by !== dataTable_types.defaultGroupOption.id ? true : undefined
+        }
     });
     function updateTableQuery(fn) {
-        setTableQuery((prev) => fn(prev));
+        setTableQuery(prev => fn(prev));
     }
     const loadMoreData = React.useCallback(() => {
-        if (mode === "server" && onLoadMore) {
+        if (mode === 'server' && onLoadMore) {
             onLoadMore();
         }
     }, [mode, onLoadMore]);
     const searchQuery = query?.search;
     React.useEffect(() => {
         if (searchQuery) {
-            updateTableQuery((prev) => ({
+            updateTableQuery(prev => ({
                 ...prev,
-                search: searchQuery,
+                search: searchQuery
             }));
         }
     }, [searchQuery]);
@@ -118,6 +125,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
             loadingRowCount,
             onRowClick,
             shouldShowFilters,
+            stickyGroupHeader
         };
     }, [
         table,
@@ -132,6 +140,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
         loadingRowCount,
         onRowClick,
         shouldShowFilters,
+        stickyGroupHeader
     ]);
     return (jsxRuntime.jsx(context.TableContext.Provider, { value: contextValue, children: children }));
 }
@@ -141,7 +150,7 @@ const DataTable = Object.assign(DataTableRoot, {
     Toolbar: toolbar.Toolbar,
     Search: search.TableSearch,
     Filters: filters.Filters,
-    DisplayControls: displaySettings.DisplaySettings,
+    DisplayControls: displaySettings.DisplaySettings
 });
 
 exports.DataTable = DataTable;

package/dist/components/data-table/data-table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.cjs","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Updater,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  useReactTable,\n  VisibilityState,\n} from \"@tanstack/react-table\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Content } from \"./components/content\";\nimport { DisplaySettings } from \"./components/display-settings\";\nimport { Filters } from \"./components/filters\";\nimport { TableSearch } from \"./components/search\";\nimport { Toolbar } from \"./components/toolbar\";\nimport { VirtualizedContent } from \"./components/virtualized-content\";\nimport { TableContext } from \"./context\";\nimport {\n  DataTableProps,\n  defaultGroupOption,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn,\n} from \"./data-table.types\";\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery,\n} from \"./utils\";\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = \"client\",\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick,\n  onColumnVisibilityChange,\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = getDefaultTableQuery(defaultSort, query);\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const handleColumnVisibilityChange = useCallback(\n    (value: Updater<VisibilityState>) => {\n      setColumnVisibility((prev) => {\n        const newValue = typeof value === \"function\" ? value(prev) : value;\n        onColumnVisibilityChange?.(newValue);\n        return newValue;\n      });\n    },\n    [onColumnVisibilityChange]\n  );\n\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery((prev) => ({ ...prev, ...defaultTableQuery }));\n    handleColumnVisibilityChange(initialColumnVisibility);\n  }, [\n    defaultTableQuery,\n    initialColumnVisibility,\n    handleColumnVisibilityChange,\n  ]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === \"server\"\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: (row) => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === \"server\" ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === \"server\" ? undefined : getFilteredRowModel(),\n    manualSorting: mode === \"server\",\n    manualFiltering: mode === \"server\",\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    globalFilterFn: mode === \"server\" ? undefined : \"auto\",\n    initialState: {\n      columnVisibility: initialColumnVisibility,\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined,\n    },\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery((prev) => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === \"server\" && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery((prev) => ({\n        ...prev,\n        search: searchQuery,\n      }));\n    }\n  }, [searchQuery]);\n\n  // Determine if filters should be visible\n  // Filters should be visible if there is data OR if filters are applied (empty state)\n  // Filters should NOT be visible if no data AND no filters (zero state)\n  // Note: Search alone does not show the filter bar\n  const shouldShowFilters = useMemo(() => {\n    const hasFilters = tableQuery?.filters && tableQuery.filters.length > 0;\n\n    try {\n      const rowModel = table.getRowModel();\n      const hasData = (rowModel?.rows?.length ?? 0) > 0;\n      return hasData || hasFilters;\n    } catch {\n      // If table is not ready yet, check if we have initial data\n      // If no filters and no data, don't show filters\n      return hasFilters || data.length > 0;\n    }\n  }, [table, tableQuery, data.length]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick,\n      shouldShowFilters,\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick,\n    shouldShowFilters,\n  ]);\n\n  return (\n    <TableContext.Provider value={contextValue}>\n      {children}\n    </TableContext.Provider>\n  );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  VirtualizedContent: VirtualizedContent,\n  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters,\n  DisplayControls: DisplaySettings,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqCA;;AAeE;;AAKA;AAEI;AACE;AACA;AACA;AACF;AACF;;AAOF;AAEA;AAKA;AACE;;AAEF;;;;AAIC;;;;;AAeC;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;AAIA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;;;;;AAMA;AACE;AAEA;AACE;AACA;;;AAEA;;;AAGA;;;AAIJ;;;;;;;;;;;;;;;AAeA;;;;;;;;;;;;;AAaC;AAED;AAKF;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"data-table.cjs","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  Updater,\n  useReactTable,\n  VisibilityState\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { DisplaySettings } from './components/display-settings';\nimport { Filters } from './components/filters';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { VirtualizedContent } from './components/virtualized-content';\nimport { TableContext } from './context';\nimport {\n  DataTableProps,\n  defaultGroupOption,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn\n} from './data-table.types';\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = 'client',\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick,\n  onColumnVisibilityChange,\n  stickyGroupHeader = false,\n  getRowId\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = useMemo(\n    () => getDefaultTableQuery(defaultSort, query),\n    [defaultSort, query]\n  );\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const handleColumnVisibilityChange = useCallback(\n    (value: Updater<VisibilityState>) => {\n      setColumnVisibility(prev => {\n        const newValue = typeof value === 'function' ? value(prev) : value;\n        onColumnVisibilityChange?.(newValue);\n        return newValue;\n      });\n    },\n    [onColumnVisibilityChange]\n  );\n\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery(prev => ({\n      ...prev,\n      ...defaultTableQuery,\n      sort: [defaultSort],\n      group_by: [defaultGroupOption.id]\n    }));\n    handleColumnVisibilityChange(initialColumnVisibility);\n  }, [\n    defaultSort,\n    defaultTableQuery,\n    initialColumnVisibility,\n    handleColumnVisibilityChange\n  ]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === 'server'\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n    manualSorting: mode === 'server',\n    manualFiltering: mode === 'server',\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    globalFilterFn: mode === 'server' ? undefined : 'auto',\n    initialState: {\n      columnVisibility: initialColumnVisibility\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined\n    }\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery(prev => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === 'server' && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery(prev => ({\n        ...prev,\n        search: searchQuery\n      }));\n    }\n  }, [searchQuery]);\n\n  // Determine if filters should be visible\n  // Filters should be visible if there is data OR if filters are applied (empty state)\n  // Filters should NOT be visible if no data AND no filters (zero state)\n  // Note: Search alone does not show the filter bar\n  const shouldShowFilters = useMemo(() => {\n    const hasFilters = tableQuery?.filters && tableQuery.filters.length > 0;\n\n    try {\n      const rowModel = table.getRowModel();\n      const hasData = (rowModel?.rows?.length ?? 0) > 0;\n      return hasData || hasFilters;\n    } catch {\n      // If table is not ready yet, check if we have initial data\n      // If no filters and no data, don't show filters\n      return hasFilters || data.length > 0;\n    }\n  }, [table, tableQuery, data.length]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick,\n      shouldShowFilters,\n      stickyGroupHeader\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick,\n    shouldShowFilters,\n    stickyGroupHeader\n  ]);\n\n  return (\n    <TableContext.Provider value={contextValue}>\n      {children}\n    </TableContext.Provider>\n  );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  VirtualizedContent: VirtualizedContent,\n  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters,\n  DisplayControls: DisplaySettings\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqCA;;AAoBE;;AAKA;;AAGM;AACA;AACA;AACF;AACF;;AAOF;AAEA;AAKA;AACE;AACE;AACA;;AAEA;AACD;;AAEH;;;;;AAKC;;;;;AAeC;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;;AAKA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;;;;;AAMA;AACE;AAEA;AACE;AACA;;;AAEA;;;AAGA;;;AAIJ;;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;AAcC;AAED;AAKF;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/components/data-table/data-table.d.ts

@@ -1,10 +1,10 @@
-import { Content } from "./components/content";
-import { DisplaySettings } from "./components/display-settings";
-import { Filters } from "./components/filters";
-import { Toolbar } from "./components/toolbar";
-import { VirtualizedContent } from "./components/virtualized-content";
-import { DataTableProps } from "./data-table.types";
-declare function DataTableRoot<TData, TValue>({ data, columns, query, mode, isLoading, loadingRowCount, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, onColumnVisibilityChange, }: React.PropsWithChildren<DataTableProps<TData, TValue>>): import("react/jsx-runtime").JSX.Element;
+import { Content } from './components/content';
+import { DisplaySettings } from './components/display-settings';
+import { Filters } from './components/filters';
+import { Toolbar } from './components/toolbar';
+import { VirtualizedContent } from './components/virtualized-content';
+import { DataTableProps } from './data-table.types';
+declare function DataTableRoot<TData, TValue>({ data, columns, query, mode, isLoading, loadingRowCount, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, onColumnVisibilityChange, stickyGroupHeader, getRowId }: React.PropsWithChildren<DataTableProps<TData, TValue>>): import("react/jsx-runtime").JSX.Element;
 export declare const DataTable: typeof DataTableRoot & {
     Content: typeof Content;
     VirtualizedContent: typeof VirtualizedContent;

package/dist/components/data-table/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../components/data-table/data-table.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EACL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAW5B,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,EACpC,IAAS,EACT,OAAO,EACP,KAAK,EACL,IAAe,EACf,SAAiB,EACjB,eAAmB,EACnB,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,wBAAwB,GACzB,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,2CA8JxD;AAED,eAAO,MAAM,SAAS;;;;;;;CAOpB,CAAC"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../components/data-table/data-table.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EACL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAW5B,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,EACpC,IAAS,EACT,OAAO,EACP,KAAK,EACL,IAAe,EACf,SAAiB,EACjB,eAAmB,EACnB,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,wBAAwB,EACxB,iBAAyB,EACzB,QAAQ,EACT,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,2CA0KxD;AAED,eAAO,MAAM,SAAS;;;;;;;CAOpB,CAAC"}

package/dist/components/data-table/data-table.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useReactTable, getCoreRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel } from '@tanstack/react-table';
-import { useState, useCallback, useRef, useMemo, useEffect } from 'react';
+import { useMemo, useState, useCallback, useRef, useEffect } from 'react';
 import { Content } from './components/content.js';
 import { DisplaySettings } from './components/display-settings.js';
 import { Filters } from './components/filters.js';
@@ -12,13 +12,13 @@ import { TableContext } from './context.js';
 import { defaultGroupOption } from './data-table.types.js';
 import { getDefaultTableQuery, getInitialColumnVisibility, queryToTableState, getColumnsWithFilterFn, groupData, hasQueryChanged, transformToDataTableQuery } from './utils/index.js';
 
-function DataTableRoot({ data = [], columns, query, mode = "client", isLoading = false, loadingRowCount = 3, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, onColumnVisibilityChange, }) {
-    const defaultTableQuery = getDefaultTableQuery(defaultSort, query);
+function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading = false, loadingRowCount = 3, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, onColumnVisibilityChange, stickyGroupHeader = false, getRowId }) {
+    const defaultTableQuery = useMemo(() => getDefaultTableQuery(defaultSort, query), [defaultSort, query]);
     const initialColumnVisibility = getInitialColumnVisibility(columns);
     const [columnVisibility, setColumnVisibility] = useState(initialColumnVisibility);
     const handleColumnVisibilityChange = useCallback((value) => {
-        setColumnVisibility((prev) => {
-            const newValue = typeof value === "function" ? value(prev) : value;
+        setColumnVisibility(prev => {
+            const newValue = typeof value === 'function' ? value(prev) : value;
             onColumnVisibilityChange?.(newValue);
             return newValue;
         });
@@ -27,12 +27,18 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
     const oldQueryRef = useRef(null);
     const reactTableState = useMemo(() => queryToTableState(tableQuery), [tableQuery]);
     const onDisplaySettingsReset = useCallback(() => {
-        setTableQuery((prev) => ({ ...prev, ...defaultTableQuery }));
+        setTableQuery(prev => ({
+            ...prev,
+            ...defaultTableQuery,
+            sort: [defaultSort],
+            group_by: [defaultGroupOption.id]
+        }));
         handleColumnVisibilityChange(initialColumnVisibility);
     }, [
+        defaultSort,
         defaultTableQuery,
         initialColumnVisibility,
-        handleColumnVisibilityChange,
+        handleColumnVisibilityChange
     ]);
     const group_by = tableQuery.group_by?.[0];
     const columnsWithFilters = useMemo(() => getColumnsWithFilterFn(columns, tableQuery.filters), [columns, tableQuery.filters]);
@@ -41,7 +47,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
         if (tableQuery &&
             onTableQueryChange &&
             hasQueryChanged(oldQueryRef.current, tableQuery) &&
-            mode === "server") {
+            mode === 'server') {
             onTableQueryChange(transformToDataTableQuery(tableQuery));
             oldQueryRef.current = tableQuery;
         }
@@ -49,39 +55,40 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
     const table = useReactTable({
         data: groupedData,
         columns: columnsWithFilters,
+        getRowId,
         getCoreRowModel: getCoreRowModel(),
         getExpandedRowModel: getExpandedRowModel(),
-        getSubRows: (row) => row?.subRows || [],
-        getSortedRowModel: mode === "server" ? undefined : getSortedRowModel(),
-        getFilteredRowModel: mode === "server" ? undefined : getFilteredRowModel(),
-        manualSorting: mode === "server",
-        manualFiltering: mode === "server",
+        getSubRows: row => row?.subRows || [],
+        getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),
+        getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),
+        manualSorting: mode === 'server',
+        manualFiltering: mode === 'server',
         onColumnVisibilityChange: handleColumnVisibilityChange,
-        globalFilterFn: mode === "server" ? undefined : "auto",
+        globalFilterFn: mode === 'server' ? undefined : 'auto',
         initialState: {
-            columnVisibility: initialColumnVisibility,
+            columnVisibility: initialColumnVisibility
         },
         filterFromLeafRows: true,
         state: {
             ...reactTableState,
             columnVisibility: columnVisibility,
-            expanded: group_by && group_by !== defaultGroupOption.id ? true : undefined,
-        },
+            expanded: group_by && group_by !== defaultGroupOption.id ? true : undefined
+        }
     });
     function updateTableQuery(fn) {
-        setTableQuery((prev) => fn(prev));
+        setTableQuery(prev => fn(prev));
     }
     const loadMoreData = useCallback(() => {
-        if (mode === "server" && onLoadMore) {
+        if (mode === 'server' && onLoadMore) {
             onLoadMore();
         }
     }, [mode, onLoadMore]);
     const searchQuery = query?.search;
     useEffect(() => {
         if (searchQuery) {
-            updateTableQuery((prev) => ({
+            updateTableQuery(prev => ({
                 ...prev,
-                search: searchQuery,
+                search: searchQuery
             }));
         }
     }, [searchQuery]);
@@ -116,6 +123,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
             loadingRowCount,
             onRowClick,
             shouldShowFilters,
+            stickyGroupHeader
         };
     }, [
         table,
@@ -130,6 +138,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
         loadingRowCount,
         onRowClick,
         shouldShowFilters,
+        stickyGroupHeader
     ]);
     return (jsx(TableContext.Provider, { value: contextValue, children: children }));
 }
@@ -139,7 +148,7 @@ const DataTable = Object.assign(DataTableRoot, {
     Toolbar: Toolbar,
     Search: TableSearch,
     Filters: Filters,
-    DisplayControls: DisplaySettings,
+    DisplayControls: DisplaySettings
 });
 
 export { DataTable };

package/dist/components/data-table/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Updater,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  useReactTable,\n  VisibilityState,\n} from \"@tanstack/react-table\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Content } from \"./components/content\";\nimport { DisplaySettings } from \"./components/display-settings\";\nimport { Filters } from \"./components/filters\";\nimport { TableSearch } from \"./components/search\";\nimport { Toolbar } from \"./components/toolbar\";\nimport { VirtualizedContent } from \"./components/virtualized-content\";\nimport { TableContext } from \"./context\";\nimport {\n  DataTableProps,\n  defaultGroupOption,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn,\n} from \"./data-table.types\";\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery,\n} from \"./utils\";\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = \"client\",\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick,\n  onColumnVisibilityChange,\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = getDefaultTableQuery(defaultSort, query);\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const handleColumnVisibilityChange = useCallback(\n    (value: Updater<VisibilityState>) => {\n      setColumnVisibility((prev) => {\n        const newValue = typeof value === \"function\" ? value(prev) : value;\n        onColumnVisibilityChange?.(newValue);\n        return newValue;\n      });\n    },\n    [onColumnVisibilityChange]\n  );\n\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery((prev) => ({ ...prev, ...defaultTableQuery }));\n    handleColumnVisibilityChange(initialColumnVisibility);\n  }, [\n    defaultTableQuery,\n    initialColumnVisibility,\n    handleColumnVisibilityChange,\n  ]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === \"server\"\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: (row) => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === \"server\" ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === \"server\" ? undefined : getFilteredRowModel(),\n    manualSorting: mode === \"server\",\n    manualFiltering: mode === \"server\",\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    globalFilterFn: mode === \"server\" ? undefined : \"auto\",\n    initialState: {\n      columnVisibility: initialColumnVisibility,\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined,\n    },\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery((prev) => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === \"server\" && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery((prev) => ({\n        ...prev,\n        search: searchQuery,\n      }));\n    }\n  }, [searchQuery]);\n\n  // Determine if filters should be visible\n  // Filters should be visible if there is data OR if filters are applied (empty state)\n  // Filters should NOT be visible if no data AND no filters (zero state)\n  // Note: Search alone does not show the filter bar\n  const shouldShowFilters = useMemo(() => {\n    const hasFilters = tableQuery?.filters && tableQuery.filters.length > 0;\n\n    try {\n      const rowModel = table.getRowModel();\n      const hasData = (rowModel?.rows?.length ?? 0) > 0;\n      return hasData || hasFilters;\n    } catch {\n      // If table is not ready yet, check if we have initial data\n      // If no filters and no data, don't show filters\n      return hasFilters || data.length > 0;\n    }\n  }, [table, tableQuery, data.length]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick,\n      shouldShowFilters,\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick,\n    shouldShowFilters,\n  ]);\n\n  return (\n    <TableContext.Provider value={contextValue}>\n      {children}\n    </TableContext.Provider>\n  );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  VirtualizedContent: VirtualizedContent,\n  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters,\n  DisplayControls: DisplaySettings,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqCA;;AAeE;;AAKA;AAEI;AACE;AACA;AACA;AACF;AACF;;AAOF;AAEA;AAKA;AACE;;AAEF;;;;AAIC;;;;;AAeC;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;AAIA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;;;;;AAMA;AACE;AAEA;AACE;AACA;;;AAEA;;;AAGA;;;AAIJ;;;;;;;;;;;;;;;AAeA;;;;;;;;;;;;;AAaC;AAED;AAKF;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"data-table.js","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  Updater,\n  useReactTable,\n  VisibilityState\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { DisplaySettings } from './components/display-settings';\nimport { Filters } from './components/filters';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { VirtualizedContent } from './components/virtualized-content';\nimport { TableContext } from './context';\nimport {\n  DataTableProps,\n  defaultGroupOption,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn\n} from './data-table.types';\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = 'client',\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick,\n  onColumnVisibilityChange,\n  stickyGroupHeader = false,\n  getRowId\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = useMemo(\n    () => getDefaultTableQuery(defaultSort, query),\n    [defaultSort, query]\n  );\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const handleColumnVisibilityChange = useCallback(\n    (value: Updater<VisibilityState>) => {\n      setColumnVisibility(prev => {\n        const newValue = typeof value === 'function' ? value(prev) : value;\n        onColumnVisibilityChange?.(newValue);\n        return newValue;\n      });\n    },\n    [onColumnVisibilityChange]\n  );\n\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery(prev => ({\n      ...prev,\n      ...defaultTableQuery,\n      sort: [defaultSort],\n      group_by: [defaultGroupOption.id]\n    }));\n    handleColumnVisibilityChange(initialColumnVisibility);\n  }, [\n    defaultSort,\n    defaultTableQuery,\n    initialColumnVisibility,\n    handleColumnVisibilityChange\n  ]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === 'server'\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n    manualSorting: mode === 'server',\n    manualFiltering: mode === 'server',\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    globalFilterFn: mode === 'server' ? undefined : 'auto',\n    initialState: {\n      columnVisibility: initialColumnVisibility\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined\n    }\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery(prev => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === 'server' && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery(prev => ({\n        ...prev,\n        search: searchQuery\n      }));\n    }\n  }, [searchQuery]);\n\n  // Determine if filters should be visible\n  // Filters should be visible if there is data OR if filters are applied (empty state)\n  // Filters should NOT be visible if no data AND no filters (zero state)\n  // Note: Search alone does not show the filter bar\n  const shouldShowFilters = useMemo(() => {\n    const hasFilters = tableQuery?.filters && tableQuery.filters.length > 0;\n\n    try {\n      const rowModel = table.getRowModel();\n      const hasData = (rowModel?.rows?.length ?? 0) > 0;\n      return hasData || hasFilters;\n    } catch {\n      // If table is not ready yet, check if we have initial data\n      // If no filters and no data, don't show filters\n      return hasFilters || data.length > 0;\n    }\n  }, [table, tableQuery, data.length]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick,\n      shouldShowFilters,\n      stickyGroupHeader\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick,\n    shouldShowFilters,\n    stickyGroupHeader\n  ]);\n\n  return (\n    <TableContext.Provider value={contextValue}>\n      {children}\n    </TableContext.Provider>\n  );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  VirtualizedContent: VirtualizedContent,\n  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters,\n  DisplayControls: DisplaySettings\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqCA;;AAoBE;;AAKA;;AAGM;AACA;AACA;AACF;AACF;;AAOF;AAEA;AAKA;AACE;AACE;AACA;;AAEA;AACD;;AAEH;;;;;AAKC;;;;;AAeC;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;;AAKA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;;;;;AAMA;AACE;AAEA;AACE;AACA;;;AAEA;;;AAGA;;;AAIJ;;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;AAcC;AAED;AAKF;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/components/data-table/data-table.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"toolbar":"data-table-module_toolbar__SsniX","display-popover-content":"data-table-module_display-popover-content__fyCAs","display-popover-properties-container":"data-table-module_display-popover-properties-container__5d1QY","display-popover-properties-select":"data-table-module_display-popover-properties-select__XCZFA","display-popover-reset-container":"data-table-module_display-popover-reset-container__EO-tX","display-popover-sort-icon":"data-table-module_display-popover-sort-icon__qS4Tv","flex-1":"data-table-module_flex-1__bRXzB","contentRoot":"data-table-module_contentRoot__SFof5","row":"data-table-module_row__TqG9x","clickable":"data-table-module_clickable__BGrE5","head":"data-table-module_head__xUe2x","cell":"data-table-module_cell__YNzml","emptyStateCell":"data-table-module_emptyStateCell__icRK5","scrollContainer":"data-table-module_scrollContainer__eKR0-","stickyHeader":"data-table-module_stickyHeader__hWOCt","virtualTable":"data-table-module_virtualTable__GB8Q0","virtualHeaderGroup":"data-table-module_virtualHeaderGroup__dhJXA","virtualHeaderRow":"data-table-module_virtualHeaderRow__LqMog","virtualBodyGroup":"data-table-module_virtualBodyGroup__xlRy5","virtualRow":"data-table-module_virtualRow__dIERR","virtualHead":"data-table-module_virtualHead__Xt-ov","virtualCell":"data-table-module_virtualCell__8i2Lt","virtualSectionHeader":"data-table-module_virtualSectionHeader__rsMjl","stickyLoaderContainer":"data-table-module_stickyLoaderContainer__ueYwH","loaderRow":"data-table-module_loaderRow__yivkT","display___popover___content":"data-table-module_display-popover-content__fyCAs","display___popover___properties___container":"data-table-module_display-popover-properties-container__5d1QY","display___popover___properties___select":"data-table-module_display-popover-properties-select__XCZFA","display___popover___reset___container":"data-table-module_display-popover-reset-container__EO-tX","display___popover___sort___icon":"data-table-module_display-popover-sort-icon__qS4Tv","flex___1":"data-table-module_flex-1__bRXzB"};
+var styles = {"toolbar":"data-table-module_toolbar__SsniX","display-popover-content":"data-table-module_display-popover-content__fyCAs","display-popover-properties-container":"data-table-module_display-popover-properties-container__5d1QY","display-popover-properties-select":"data-table-module_display-popover-properties-select__XCZFA","display-popover-reset-container":"data-table-module_display-popover-reset-container__EO-tX","display-popover-sort-icon":"data-table-module_display-popover-sort-icon__qS4Tv","flex-1":"data-table-module_flex-1__bRXzB","contentRoot":"data-table-module_contentRoot__SFof5","row":"data-table-module_row__TqG9x","clickable":"data-table-module_clickable__BGrE5","head":"data-table-module_head__xUe2x","cell":"data-table-module_cell__YNzml","emptyStateCell":"data-table-module_emptyStateCell__icRK5","scrollContainer":"data-table-module_scrollContainer__eKR0-","stickyHeader":"data-table-module_stickyHeader__hWOCt","virtualTable":"data-table-module_virtualTable__GB8Q0","virtualHeaderGroup":"data-table-module_virtualHeaderGroup__dhJXA","virtualHeaderRow":"data-table-module_virtualHeaderRow__LqMog","virtualBodyGroup":"data-table-module_virtualBodyGroup__xlRy5","virtualRow":"data-table-module_virtualRow__dIERR","virtualHead":"data-table-module_virtualHead__Xt-ov","virtualCell":"data-table-module_virtualCell__8i2Lt","virtualSectionHeader":"data-table-module_virtualSectionHeader__rsMjl","stickyGroupAnchor":"data-table-module_stickyGroupAnchor__T-OZ3","stickyLoaderContainer":"data-table-module_stickyLoaderContainer__ueYwH","loaderRow":"data-table-module_loaderRow__yivkT","stickySectionHeader":"data-table-module_stickySectionHeader__CdMzK","display___popover___content":"data-table-module_display-popover-content__fyCAs","display___popover___properties___container":"data-table-module_display-popover-properties-container__5d1QY","display___popover___properties___select":"data-table-module_display-popover-properties-select__XCZFA","display___popover___reset___container":"data-table-module_display-popover-reset-container__EO-tX","display___popover___sort___icon":"data-table-module_display-popover-sort-icon__qS4Tv","flex___1":"data-table-module_flex-1__bRXzB"};
 
 exports.default = styles;
 //# sourceMappingURL=data-table.module.css.cjs.map

package/dist/components/data-table/data-table.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"toolbar":"data-table-module_toolbar__SsniX","display-popover-content":"data-table-module_display-popover-content__fyCAs","display-popover-properties-container":"data-table-module_display-popover-properties-container__5d1QY","display-popover-properties-select":"data-table-module_display-popover-properties-select__XCZFA","display-popover-reset-container":"data-table-module_display-popover-reset-container__EO-tX","display-popover-sort-icon":"data-table-module_display-popover-sort-icon__qS4Tv","flex-1":"data-table-module_flex-1__bRXzB","contentRoot":"data-table-module_contentRoot__SFof5","row":"data-table-module_row__TqG9x","clickable":"data-table-module_clickable__BGrE5","head":"data-table-module_head__xUe2x","cell":"data-table-module_cell__YNzml","emptyStateCell":"data-table-module_emptyStateCell__icRK5","scrollContainer":"data-table-module_scrollContainer__eKR0-","stickyHeader":"data-table-module_stickyHeader__hWOCt","virtualTable":"data-table-module_virtualTable__GB8Q0","virtualHeaderGroup":"data-table-module_virtualHeaderGroup__dhJXA","virtualHeaderRow":"data-table-module_virtualHeaderRow__LqMog","virtualBodyGroup":"data-table-module_virtualBodyGroup__xlRy5","virtualRow":"data-table-module_virtualRow__dIERR","virtualHead":"data-table-module_virtualHead__Xt-ov","virtualCell":"data-table-module_virtualCell__8i2Lt","virtualSectionHeader":"data-table-module_virtualSectionHeader__rsMjl","stickyLoaderContainer":"data-table-module_stickyLoaderContainer__ueYwH","loaderRow":"data-table-module_loaderRow__yivkT","display___popover___content":"data-table-module_display-popover-content__fyCAs","display___popover___properties___container":"data-table-module_display-popover-properties-container__5d1QY","display___popover___properties___select":"data-table-module_display-popover-properties-select__XCZFA","display___popover___reset___container":"data-table-module_display-popover-reset-container__EO-tX","display___popover___sort___icon":"data-table-module_display-popover-sort-icon__qS4Tv","flex___1":"data-table-module_flex-1__bRXzB"};
+var styles = {"toolbar":"data-table-module_toolbar__SsniX","display-popover-content":"data-table-module_display-popover-content__fyCAs","display-popover-properties-container":"data-table-module_display-popover-properties-container__5d1QY","display-popover-properties-select":"data-table-module_display-popover-properties-select__XCZFA","display-popover-reset-container":"data-table-module_display-popover-reset-container__EO-tX","display-popover-sort-icon":"data-table-module_display-popover-sort-icon__qS4Tv","flex-1":"data-table-module_flex-1__bRXzB","contentRoot":"data-table-module_contentRoot__SFof5","row":"data-table-module_row__TqG9x","clickable":"data-table-module_clickable__BGrE5","head":"data-table-module_head__xUe2x","cell":"data-table-module_cell__YNzml","emptyStateCell":"data-table-module_emptyStateCell__icRK5","scrollContainer":"data-table-module_scrollContainer__eKR0-","stickyHeader":"data-table-module_stickyHeader__hWOCt","virtualTable":"data-table-module_virtualTable__GB8Q0","virtualHeaderGroup":"data-table-module_virtualHeaderGroup__dhJXA","virtualHeaderRow":"data-table-module_virtualHeaderRow__LqMog","virtualBodyGroup":"data-table-module_virtualBodyGroup__xlRy5","virtualRow":"data-table-module_virtualRow__dIERR","virtualHead":"data-table-module_virtualHead__Xt-ov","virtualCell":"data-table-module_virtualCell__8i2Lt","virtualSectionHeader":"data-table-module_virtualSectionHeader__rsMjl","stickyGroupAnchor":"data-table-module_stickyGroupAnchor__T-OZ3","stickyLoaderContainer":"data-table-module_stickyLoaderContainer__ueYwH","loaderRow":"data-table-module_loaderRow__yivkT","stickySectionHeader":"data-table-module_stickySectionHeader__CdMzK","display___popover___content":"data-table-module_display-popover-content__fyCAs","display___popover___properties___container":"data-table-module_display-popover-properties-container__5d1QY","display___popover___properties___select":"data-table-module_display-popover-properties-select__XCZFA","display___popover___reset___container":"data-table-module_display-popover-reset-container__EO-tX","display___popover___sort___icon":"data-table-module_display-popover-sort-icon__qS4Tv","flex___1":"data-table-module_flex-1__bRXzB"};
 
 export { styles as default };
 //# sourceMappingURL=data-table.module.css.js.map

package/dist/components/data-table/data-table.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.types.cjs","sources":["../../../components/data-table/data-table.types.tsx"],"sourcesContent":["import type {\n  Column,\n  ColumnDef,\n  Table,\n  VisibilityState\n} from '@tanstack/table-core';\nimport type {\n  DataTableFilterOperatorTypes,\n  FilterOperatorTypes,\n  FilterSelectOption,\n  FilterTypes,\n  FilterValueType\n} from '~/types/filters';\nimport type { BaseSelectProps } from '../select/select-root';\n\nexport type DataTableMode = 'client' | 'server';\n\nexport const SortOrders = {\n  ASC: 'asc',\n  DESC: 'desc'\n} as const;\n\nexport interface DataTableFilterValues {\n  value: any;\n  // Only one of these value fields should be present at a time\n  boolValue?: boolean;\n  stringValue?: string;\n  numberValue?: number;\n}\n// Internal filter with UI operators and metadata\nexport interface InternalFilter extends DataTableFilterValues {\n  _type?: FilterTypes;\n  _dataType?: FilterValueType;\n  name: string;\n  operator: FilterOperatorTypes;\n}\n\n// Data table filter for backend API (no internal fields)\nexport interface DataTableFilter extends DataTableFilterValues {\n  name: string;\n  operator: DataTableFilterOperatorTypes;\n}\n\ntype SortOrdersKeys = keyof typeof SortOrders;\nexport type SortOrdersValues = (typeof SortOrders)[SortOrdersKeys];\n\nexport interface DataTableSort {\n  name: string;\n  order: SortOrdersValues;\n}\n\n// Internal query with UI operators and metadata\nexport interface InternalQuery {\n  filters?: InternalFilter[];\n  sort?: DataTableSort[];\n  group_by?: string[];\n  offset?: number;\n  limit?: number;\n  search?: string;\n}\n\n// Data table query for backend API (clean, no internal fields)\nexport interface DataTableQuery extends Omit<InternalQuery, 'filters'> {\n  filters?: DataTableFilter[];\n}\n\nexport type DataTableColumn<TData, TValue> = Omit<\n  Column<TData, TValue>,\n  'columnDef'\n> & {\n  columnDef: DataTableColumnDef<TData, TValue>;\n};\n\nexport type DataTableColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {\n  accessorKey: string;\n  header: string;\n  filterType?: FilterTypes;\n  dataType?: FilterValueType;\n  enableColumnFilter?: boolean;\n  enableSorting?: boolean;\n  enableHiding?: boolean;\n  defaultHidden?: boolean;\n  filterOptions?: FilterSelectOption[];\n  filterProps?: {\n    select?: BaseSelectProps;\n  };\n  classNames?: {\n    cell?: string;\n    header?: string;\n  };\n  styles?: {\n    cell?: React.CSSProperties;\n    header?: React.CSSProperties;\n  };\n  enableGrouping?: boolean;\n  showGroupCount?: boolean;\n  groupCountMap?: Record<string, number>;\n  groupLabelsMap?: Record<string, string>;\n  // TODO: implement these\n  icon?: React.ReactNode;\n};\n\nexport interface DataTableProps<TData, TValue> {\n  columns: DataTableColumnDef<TData, TValue>[];\n  data: TData[];\n  query?: DataTableQuery; // Initial query (will be transformed to internal format)\n  mode?: DataTableMode;\n  isLoading?: boolean;\n  loadingRowCount?: number;\n  onTableQueryChange?: (query: DataTableQuery) => void;\n  defaultSort: DataTableSort;\n  onLoadMore?: () => Promise<void>;\n  onRowClick?: (row: TData) => void;\n  onColumnVisibilityChange?: (columnVisibility: VisibilityState) => void;\n}\n\nexport type DataTableContentClassNames = {\n  root?: string;\n  table?: string;\n  header?: string;\n  body?: string;\n  row?: string;\n};\n\nexport type DataTableContentBaseProps = {\n  emptyState?: React.ReactNode;\n  zeroState?: React.ReactNode;\n  classNames?: DataTableContentClassNames;\n};\n\nexport type DataTableContentProps = DataTableContentBaseProps;\n\nexport type VirtualizedContentProps = DataTableContentBaseProps & {\n  /** Height of each row in pixels. */\n  rowHeight?: number;\n  /** Height of group header rows in pixels. Falls back to rowHeight if not set. */\n  groupHeaderHeight?: number;\n  /** Number of rows to render outside visible area. */\n  overscan?: number;\n  /** Distance in pixels from bottom to trigger load more. */\n  loadMoreOffset?: number;\n};\n\nexport type TableQueryUpdateFn = (query: InternalQuery) => InternalQuery;\n\nexport type TableContextType<TData, TValue> = {\n  table: Table<TData>;\n  columns: DataTableColumnDef<TData, TValue>[];\n  isLoading?: boolean;\n  loadMoreData: () => void;\n  mode: DataTableMode;\n  defaultSort: DataTableSort;\n  tableQuery?: InternalQuery;\n  loadingRowCount?: number;\n  onDisplaySettingsReset: () => void;\n  updateTableQuery: (fn: TableQueryUpdateFn) => void;\n  onRowClick?: (row: TData) => void;\n  shouldShowFilters?: boolean;\n};\n\nexport interface ColumnData {\n  label: string;\n  id: string;\n  isVisible?: boolean;\n}\n\ninterface SubRows<_T> {}\n\nexport interface GroupedData<T> extends SubRows<T> {\n  label: string;\n  group_key: string;\n  subRows: T[];\n  count?: number;\n  showGroupCount?: boolean;\n}\n\nexport const defaultGroupOption = {\n  id: '--',\n  label: 'No grouping'\n};\n"],"names":[],"mappings":";;AAiBa,MAAA,UAAU,GAAG;AACxB,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,IAAI,EAAE,MAAM;EACH;AA4JE,MAAA,kBAAkB,GAAG;AAChC,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,KAAK,EAAE,aAAa;;;;;;"}
+{"version":3,"file":"data-table.types.cjs","sources":["../../../components/data-table/data-table.types.tsx"],"sourcesContent":["import type {\n  Column,\n  ColumnDef,\n  Table,\n  VisibilityState\n} from '@tanstack/table-core';\nimport type {\n  DataTableFilterOperatorTypes,\n  FilterOperatorTypes,\n  FilterSelectOption,\n  FilterTypes,\n  FilterValueType\n} from '~/types/filters';\nimport type { BaseSelectProps } from '../select/select-root';\n\nexport type DataTableMode = 'client' | 'server';\n\nexport const SortOrders = {\n  ASC: 'asc',\n  DESC: 'desc'\n} as const;\n\nexport interface DataTableFilterValues {\n  value: any;\n  // Only one of these value fields should be present at a time\n  boolValue?: boolean;\n  stringValue?: string;\n  numberValue?: number;\n}\n// Internal filter with UI operators and metadata\nexport interface InternalFilter extends DataTableFilterValues {\n  _type?: FilterTypes;\n  _dataType?: FilterValueType;\n  name: string;\n  operator: FilterOperatorTypes;\n}\n\n// Data table filter for backend API (no internal fields)\nexport interface DataTableFilter extends DataTableFilterValues {\n  name: string;\n  operator: DataTableFilterOperatorTypes;\n}\n\ntype SortOrdersKeys = keyof typeof SortOrders;\nexport type SortOrdersValues = (typeof SortOrders)[SortOrdersKeys];\n\nexport interface DataTableSort {\n  name: string;\n  order: SortOrdersValues;\n}\n\n// Internal query with UI operators and metadata\nexport interface InternalQuery {\n  filters?: InternalFilter[];\n  sort?: DataTableSort[];\n  group_by?: string[];\n  offset?: number;\n  limit?: number;\n  search?: string;\n}\n\n// Data table query for backend API (clean, no internal fields)\nexport interface DataTableQuery extends Omit<InternalQuery, 'filters'> {\n  filters?: DataTableFilter[];\n}\n\nexport type DataTableColumn<TData, TValue> = Omit<\n  Column<TData, TValue>,\n  'columnDef'\n> & {\n  columnDef: DataTableColumnDef<TData, TValue>;\n};\n\nexport type DataTableColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {\n  accessorKey: string;\n  header: string;\n  filterType?: FilterTypes;\n  dataType?: FilterValueType;\n  enableColumnFilter?: boolean;\n  enableSorting?: boolean;\n  enableHiding?: boolean;\n  defaultHidden?: boolean;\n  filterOptions?: FilterSelectOption[];\n  filterProps?: {\n    select?: BaseSelectProps;\n  };\n  classNames?: {\n    cell?: string;\n    header?: string;\n  };\n  styles?: {\n    cell?: React.CSSProperties;\n    header?: React.CSSProperties;\n  };\n  enableGrouping?: boolean;\n  showGroupCount?: boolean;\n  groupCountMap?: Record<string, number>;\n  groupLabelsMap?: Record<string, string>;\n  // TODO: implement these\n  icon?: React.ReactNode;\n};\n\nexport interface DataTableProps<TData, TValue> {\n  columns: DataTableColumnDef<TData, TValue>[];\n  data: TData[];\n  query?: DataTableQuery; // Initial query (will be transformed to internal format)\n  mode?: DataTableMode;\n  isLoading?: boolean;\n  loadingRowCount?: number;\n  onTableQueryChange?: (query: DataTableQuery) => void;\n  defaultSort: DataTableSort;\n  onLoadMore?: () => Promise<void>;\n  onRowClick?: (row: TData) => void;\n  onColumnVisibilityChange?: (columnVisibility: VisibilityState) => void;\n  /** When true, group headers stick under the table header while scrolling. Default is false. */\n  stickyGroupHeader?: boolean;\n  /** Return a stable unique id for each row (used as React key). Use for sortable/filterable tables. */\n  getRowId?: (row: TData, index: number) => string;\n}\n\nexport type DataTableContentClassNames = {\n  root?: string;\n  table?: string;\n  header?: string;\n  body?: string;\n  row?: string;\n};\n\nexport type DataTableContentBaseProps = {\n  emptyState?: React.ReactNode;\n  zeroState?: React.ReactNode;\n  classNames?: DataTableContentClassNames;\n};\n\nexport type DataTableContentProps = DataTableContentBaseProps;\n\nexport type VirtualizedContentProps = DataTableContentBaseProps & {\n  /** Height of each row in pixels. */\n  rowHeight?: number;\n  /** Height of group header rows in pixels. Falls back to rowHeight if not set. */\n  groupHeaderHeight?: number;\n  /** Number of rows to render outside visible area. */\n  overscan?: number;\n  /** Distance in pixels from bottom to trigger load more. */\n  loadMoreOffset?: number;\n};\n\nexport type TableQueryUpdateFn = (query: InternalQuery) => InternalQuery;\n\nexport type TableContextType<TData, TValue> = {\n  table: Table<TData>;\n  columns: DataTableColumnDef<TData, TValue>[];\n  isLoading?: boolean;\n  loadMoreData: () => void;\n  mode: DataTableMode;\n  defaultSort: DataTableSort;\n  tableQuery?: InternalQuery;\n  loadingRowCount?: number;\n  onDisplaySettingsReset: () => void;\n  updateTableQuery: (fn: TableQueryUpdateFn) => void;\n  onRowClick?: (row: TData) => void;\n  shouldShowFilters?: boolean;\n  stickyGroupHeader?: boolean;\n};\n\nexport interface ColumnData {\n  label: string;\n  id: string;\n  isVisible?: boolean;\n}\n\ninterface SubRows<_T> {}\n\nexport interface GroupedData<T> extends SubRows<T> {\n  label: string;\n  group_key: string;\n  subRows: T[];\n  count?: number;\n  showGroupCount?: boolean;\n}\n\nexport const defaultGroupOption = {\n  id: '--',\n  label: 'No grouping'\n};\n"],"names":[],"mappings":";;AAiBa,MAAA,UAAU,GAAG;AACxB,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,IAAI,EAAE,MAAM;EACH;AAiKE,MAAA,kBAAkB,GAAG;AAChC,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,KAAK,EAAE,aAAa;;;;;;"}