@raystack/apsara 0.56.7 → 1.0.0-rc.1

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

@@ -1,10 +1,14 @@
-import { SearchProps } from '../../search/search';
-export interface DataTableSearchProps extends SearchProps {
+import { type ComponentProps } from 'react';
+import { Search } from '../../search';
+export interface DataTableSearchProps extends ComponentProps<typeof Search> {
     /**
      * Automatically disable search in zero state (when no data and no filters/search applied).
      * @defaultValue true
      */
     autoDisableInZeroState?: boolean;
 }
-export declare const TableSearch: import("react").ForwardRefExoticComponent<DataTableSearchProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function TableSearch({ autoDisableInZeroState, disabled, ...props }: DataTableSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TableSearch {
+    var displayName: string;
+}
 //# sourceMappingURL=search.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/search.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,mHA8CvB,CAAC"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/search.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,OAAO,MAAM,CAAC;IACzE;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,EAC1B,sBAA6B,EAC7B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA2CtB;yBA/Ce,WAAW"}

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

@@ -1,10 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
 import { Search } from '../../search/search.js';
 import { useDataTable } from '../hooks/useDataTable.js';
 
-const TableSearch = forwardRef(({ autoDisableInZeroState = true, disabled, ...props }, ref) => {
+function TableSearch({ autoDisableInZeroState = true, disabled, ...props }) {
     const { updateTableQuery, tableQuery, shouldShowFilters = false } = useDataTable();
     const handleSearch = (e) => {
         const value = e.target.value;
@@ -27,9 +26,9 @@ const TableSearch = forwardRef(({ autoDisableInZeroState = true, disabled, ...pr
     // Once search is applied, keep it enabled (even if shouldShowFilters is false)
     const hasSearch = Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
     const isDisabled = disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);
-    return (jsx(Search, { ...props, ref: ref, onChange: handleSearch, value: tableQuery?.search, onClear: handleClear, disabled: isDisabled }));
-});
-TableSearch.displayName = 'TableSearch';
+    return (jsx(Search, { ...props, onChange: handleSearch, value: tableQuery?.search, onClear: handleClear, disabled: isDisabled }));
+}
+TableSearch.displayName = 'DataTable.Search';
 
 export { TableSearch };
 //# sourceMappingURL=search.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"search.js","sources":["../../../../components/data-table/components/search.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport { Search } from '../../search';\nimport { SearchProps } from '../../search/search';\nimport { useDataTable } from '../hooks/useDataTable';\n\nexport interface DataTableSearchProps extends SearchProps {\n  /**\n   * Automatically disable search in zero state (when no data and no filters/search applied).\n   * @defaultValue true\n   */\n  autoDisableInZeroState?: boolean;\n}\n\nexport const TableSearch = forwardRef<HTMLInputElement, DataTableSearchProps>(\n  ({ autoDisableInZeroState = true, disabled, ...props }, ref) => {\n    const {\n      updateTableQuery,\n      tableQuery,\n      shouldShowFilters = false\n    } = useDataTable();\n\n    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n      updateTableQuery(query => {\n        return {\n          ...query,\n          search: value\n        };\n      });\n    };\n\n    const handleClear = () => {\n      updateTableQuery(query => {\n        return {\n          ...query,\n          search: ''\n        };\n      });\n    };\n\n    // Auto-disable in zero state if enabled, but allow manual override\n    // Once search is applied, keep it enabled (even if shouldShowFilters is false)\n    const hasSearch = Boolean(\n      tableQuery?.search && tableQuery.search.trim() !== ''\n    );\n    const isDisabled =\n      disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);\n\n    return (\n      <Search\n        {...props}\n        ref={ref}\n        onChange={handleSearch}\n        value={tableQuery?.search}\n        onClear={handleClear}\n        disabled={isDisabled}\n      />\n    );\n  }\n);\n\nTableSearch.displayName = 'TableSearch';\n"],"names":[],"mappings":";;;;;;;AAiBI;AAMA;AACE;;;AAGI;AACA;;AAEJ;AACF;;;;AAKM;AACA;;AAEJ;AACF;;;AAIA;AAGA;AAGA;AAUF;AAGF;;"}
+{"version":3,"file":"search.js","sources":["../../../../components/data-table/components/search.tsx"],"sourcesContent":["'use client';\n\nimport { ChangeEvent, type ComponentProps } from 'react';\nimport { Search } from '../../search';\nimport { useDataTable } from '../hooks/useDataTable';\n\nexport interface DataTableSearchProps extends ComponentProps<typeof Search> {\n  /**\n   * Automatically disable search in zero state (when no data and no filters/search applied).\n   * @defaultValue true\n   */\n  autoDisableInZeroState?: boolean;\n}\n\nexport function TableSearch({\n  autoDisableInZeroState = true,\n  disabled,\n  ...props\n}: DataTableSearchProps) {\n  const {\n    updateTableQuery,\n    tableQuery,\n    shouldShowFilters = false\n  } = useDataTable();\n\n  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    updateTableQuery(query => {\n      return {\n        ...query,\n        search: value\n      };\n    });\n  };\n\n  const handleClear = () => {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        search: ''\n      };\n    });\n  };\n\n  // Auto-disable in zero state if enabled, but allow manual override\n  // Once search is applied, keep it enabled (even if shouldShowFilters is false)\n  const hasSearch = Boolean(\n    tableQuery?.search && tableQuery.search.trim() !== ''\n  );\n  const isDisabled =\n    disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);\n\n  return (\n    <Search\n      {...props}\n      onChange={handleSearch}\n      value={tableQuery?.search}\n      onClear={handleClear}\n      disabled={isDisabled}\n    />\n  );\n}\n\nTableSearch.displayName = 'DataTable.Search';\n"],"names":[],"mappings":";;;;;AAcgB;AAKd;AAMA;AACE;;;AAGI;AACA;;AAEJ;AACF;;;;AAKM;AACA;;AAEJ;AACF;;;AAIA;AAGA;;AAYF;AAEA;;"}

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

@@ -16,6 +16,7 @@ function Toolbar({ className }) {
     }
     return (jsxRuntime.jsxs(flex.Flex, { className: classVarianceAuthority.cx(dataTable_module.default['toolbar'], className), justify: 'between', align: 'center', children: [jsxRuntime.jsx(filters.Filters, {}), jsxRuntime.jsx(displaySettings.DisplaySettings, {})] }));
 }
+Toolbar.displayName = 'DataTable.Toolbar';
 
 exports.Toolbar = Toolbar;
 //# sourceMappingURL=toolbar.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.cjs","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  const { shouldShowFilters = false } = useDataTable();\n\n  if (!shouldShowFilters) {\n    return null;\n  }\n\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AASgB;;;AAIZ;;AAGF;AAUF;;"}
+{"version":3,"file":"toolbar.cjs","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  const { shouldShowFilters = false } = useDataTable();\n\n  if (!shouldShowFilters) {\n    return null;\n  }\n\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n\nToolbar.displayName = 'DataTable.Toolbar';\n"],"names":[],"mappings":";;;;;;;;;;;AASgB;;;AAIZ;;AAGF;AAUF;AAEA;;"}

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

@@ -1,4 +1,7 @@
 export declare function Toolbar<TData, TValue>({ className }: {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Toolbar {
+    var displayName: string;
+}
 //# sourceMappingURL=toolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/toolbar.tsx"],"names":[],"mappings":"AASA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAiB3E"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/toolbar.tsx"],"names":[],"mappings":"AASA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAiB3E;yBAjBe,OAAO"}

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

@@ -14,6 +14,7 @@ function Toolbar({ className }) {
     }
     return (jsxs(Flex, { className: cx(styles['toolbar'], className), justify: 'between', align: 'center', children: [jsx(Filters, {}), jsx(DisplaySettings, {})] }));
 }
+Toolbar.displayName = 'DataTable.Toolbar';
 
 export { Toolbar };
 //# sourceMappingURL=toolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  const { shouldShowFilters = false } = useDataTable();\n\n  if (!shouldShowFilters) {\n    return null;\n  }\n\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AASgB;;;AAIZ;;AAGF;AAUF;;"}
+{"version":3,"file":"toolbar.js","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  const { shouldShowFilters = false } = useDataTable();\n\n  if (!shouldShowFilters) {\n    return null;\n  }\n\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n\nToolbar.displayName = 'DataTable.Toolbar';\n"],"names":[],"mappings":";;;;;;;;;AASgB;;;AAIZ;;AAGF;AAUF;AAEA;;"}

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

@@ -13,6 +13,7 @@ var emptyState = require('../../empty-state/empty-state.cjs');
 var flex = require('../../flex/flex.cjs');
 var skeleton = require('../../skeleton/skeleton.cjs');
 var dataTable_module = require('../data-table.module.css.cjs');
+var dataTable_types = require('../data-table.types.cjs');
 var useDataTable = require('../hooks/useDataTable.cjs');
 var index = require('../utils/index.cjs');
 
@@ -56,11 +57,25 @@ function VirtualLoaderRows({ columns, rowHeight, count }) {
 }
 const DefaultEmptyComponent = () => (jsxRuntime.jsx(emptyState.EmptyState, { icon: jsxRuntime.jsx(reactIcons.TableIcon, {}), heading: 'No Data' }));
 function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, loadMoreOffset = 100, emptyState, zeroState, classNames = {} }) {
-    const { onRowClick, table, isLoading, loadMoreData, tableQuery, defaultSort, loadingRowCount = 3 } = useDataTable.useDataTable();
+    const { onRowClick, table, isLoading, loadMoreData, tableQuery, defaultSort, loadingRowCount = 3, stickyGroupHeader = false } = useDataTable.useDataTable();
     const headerGroups = table?.getHeaderGroups();
     const rowModel = table?.getRowModel();
     const { rows = [] } = rowModel || {};
     const scrollContainerRef = React.useRef(null);
+    const headerRef = React.useRef(null);
+    const [stickyGroup, setStickyGroup] = React.useState(null);
+    const [headerHeight, setHeaderHeight] = React.useState(40);
+    const groupBy = tableQuery?.group_by?.[0];
+    const isGrouped = Boolean(groupBy) && groupBy !== dataTable_types.defaultGroupOption.id;
+    const groupHeaderList = React.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 = reactVirtual.useVirtualizer({
         count: rows.length,
@@ -72,15 +87,47 @@ function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, l
         },
         overscan
     });
+    const updateStickyGroup = React.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 = React.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();
+    React.useLayoutEffect(() => {
+        if (headerRef.current) {
+            setHeaderHeight(headerRef.current.getBoundingClientRect().height);
+        }
+    }, [headerGroups]);
+    React.useLayoutEffect(() => {
+        if (stickyGroupHeader)
+            updateStickyGroup();
+    }, [stickyGroupHeader, updateStickyGroup, groupHeaderList, isGrouped]);
     const hasData = rows?.length > 0 || isLoading;
     const hasChanges = index.hasActiveQuery(tableQuery || {}, defaultSort);
     const isZeroState = !hasData && !hasChanges;
@@ -94,10 +141,11 @@ function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, l
         return jsxRuntime.jsx("div", { className: classNames.root, children: stateToShow });
     }
     const visibleColumns = table.getVisibleLeafColumns();
-    return (jsxRuntime.jsxs("div", { ref: scrollContainerRef, className: classVarianceAuthority.cx(classNames.root, dataTable_module.default.scrollContainer), onScroll: handleVirtualScroll, children: [jsxRuntime.jsxs("div", { role: 'table', className: classVarianceAuthority.cx(dataTable_module.default.virtualTable, classNames.table), children: [jsxRuntime.jsx(VirtualHeaders, { headerGroups: headerGroups, className: classVarianceAuthority.cx(dataTable_module.default.stickyHeader, classNames.header) }), jsxRuntime.jsx("div", { role: 'rowgroup', className: classVarianceAuthority.cx(dataTable_module.default.virtualBodyGroup, classNames.body), style: { height: totalHeight }, children: jsxRuntime.jsx(VirtualRows, { rows: rows, virtualizer: virtualizer, onRowClick: onRowClick, classNames: {
+    return (jsxRuntime.jsxs("div", { ref: scrollContainerRef, className: classVarianceAuthority.cx(classNames.root, dataTable_module.default.scrollContainer), onScroll: handleVirtualScroll, children: [jsxRuntime.jsxs("div", { role: 'table', className: classVarianceAuthority.cx(dataTable_module.default.virtualTable, classNames.table), children: [jsxRuntime.jsx("div", { ref: headerRef, children: jsxRuntime.jsx(VirtualHeaders, { headerGroups: headerGroups, className: classVarianceAuthority.cx(dataTable_module.default.stickyHeader, classNames.header) }) }), stickyGroupHeader && isGrouped && stickyGroup && (jsxRuntime.jsx("div", { role: 'row', className: dataTable_module.default.stickyGroupAnchor, style: { top: headerHeight }, children: jsxRuntime.jsxs(flex.Flex, { gap: 3, align: 'center', children: [stickyGroup.label, stickyGroup.showGroupCount ? (jsxRuntime.jsx(badge.Badge, { variant: 'neutral', children: stickyGroup.count })) : null] }) })), jsxRuntime.jsx("div", { role: 'rowgroup', className: classVarianceAuthority.cx(dataTable_module.default.virtualBodyGroup, classNames.body), style: { height: totalHeight }, children: jsxRuntime.jsx(VirtualRows, { rows: rows, virtualizer: virtualizer, onRowClick: onRowClick, classNames: {
                                 row: classNames.row
                             } }) })] }), showLoaderRows && (jsxRuntime.jsx(VirtualLoaderRows, { columns: visibleColumns, rowHeight: rowHeight, count: loadingRowCount }))] }));
 }
+VirtualizedContent.displayName = 'DataTable.VirtualizedContent';
 
 exports.VirtualizedContent = VirtualizedContent;
 //# sourceMappingURL=virtualized-content.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"virtualized-content.cjs","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';\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            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    defaultSort,\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 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        <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":";;;;;;;;;;;;;;;;;;AAsBA;;AAgBY;;;AAuBZ;AAEA;;AAiBA;AAEA;AAWE;;;AAIE;AAAU;AAEV;;AAEA;;AAGA;;;;;AAME;;AASF;AAeM;;AAkBF;AAGN;AACF;AAEA;AAWE;AAUU;;;AAuBZ;AAEA;AAIM;;AAmBJ;AACA;;AAGA;;;;AAME;;AAEE;AACA;AACA;;;AAGH;AAED;AACE;;;;AAIE;;;AAIJ;;;AAMA;AACA;;;AAIE;AACE;;;;;AAOJ;;;;AAqCF;;"}
+{"version":3,"file":"virtualized-content.cjs","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\nVirtualizedContent.displayName = 'DataTable.VirtualizedContent';\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;AAEA;;"}

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

@@ -1,3 +1,6 @@
 import { VirtualizedContentProps } from '../data-table.types';
 export declare function VirtualizedContent({ rowHeight, groupHeaderHeight, overscan, loadMoreOffset, emptyState, zeroState, classNames }: VirtualizedContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace VirtualizedContent {
+    var displayName: string;
+}
 //# sourceMappingURL=virtualized-content.d.ts.map

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;AA8L7B,wBAAgB,kBAAkB,CAAC,EACjC,SAAc,EACd,iBAAiB,EACjB,QAAY,EACZ,cAAoB,EACpB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,uBAAuB,2CA+FzB"}
+{"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;yBAzKe,kBAAkB"}

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

@@ -4,13 +4,14 @@ 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';
 
@@ -54,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, defaultSort, 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,
@@ -70,15 +85,47 @@ 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 hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);
     const isZeroState = !hasData && !hasChanges;
@@ -92,10 +139,11 @@ 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 }))] }));
 }
+VirtualizedContent.displayName = 'DataTable.VirtualizedContent';
 
 export { VirtualizedContent };
 //# sourceMappingURL=virtualized-content.js.map

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';\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            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    defaultSort,\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 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        <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":";;;;;;;;;;;;;;;;AAsBA;;AAgBY;;;AAuBZ;AAEA;;AAiBA;AAEA;AAWE;;;AAIE;AAAU;AAEV;;AAEA;;AAGA;;;;;AAME;;AASF;AAeM;;AAkBF;AAGN;AACF;AAEA;AAWE;AAUU;;;AAuBZ;AAEA;AAIM;;AAmBJ;AACA;;AAGA;;;;AAME;;AAEE;AACA;AACA;;;AAGH;AAED;AACE;;;;AAIE;;;AAIJ;;;AAMA;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\nVirtualizedContent.displayName = 'DataTable.VirtualizedContent';\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;AAEA;;"}

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

@@ -14,7 +14,7 @@ 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 }) {
+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);
@@ -57,6 +57,7 @@ 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 || [],
@@ -123,7 +124,8 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
             defaultSort,
             loadingRowCount,
             onRowClick,
-            shouldShowFilters
+            shouldShowFilters,
+            stickyGroupHeader
         };
     }, [
         table,
@@ -137,10 +139,12 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
         defaultSort,
         loadingRowCount,
         onRowClick,
-        shouldShowFilters
+        shouldShowFilters,
+        stickyGroupHeader
     ]);
-    return (jsxRuntime.jsx(context.TableContext.Provider, { value: contextValue, children: children }));
+    return jsxRuntime.jsx(context.TableContext, { value: contextValue, children: children });
 }
+DataTableRoot.displayName = 'DataTable';
 const DataTable = Object.assign(DataTableRoot, {
     Content: content.Content,
     VirtualizedContent: virtualizedContent.VirtualizedContent,

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  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}: 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    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;;AAkBE;;AAKA;;AAGM;AACA;AACA;AACF;AACF;;AAOF;AAEA;AAKA;AACE;AACE;AACA;;AAEA;AACD;;AAEH;;;;;AAKC;;;;;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 <TableContext value={contextValue}>{children}</TableContext>;\n}\n\nDataTableRoot.displayName = 'DataTable';\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;;AAGH;AAEA;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}

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

@@ -1,15 +1,19 @@
 import { Content } from './components/content';
 import { DisplaySettings } from './components/display-settings';
 import { Filters } from './components/filters';
+import { TableSearch } from './components/search';
 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;
+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;
+declare namespace DataTableRoot {
+    var displayName: string;
+}
 export declare const DataTable: typeof DataTableRoot & {
     Content: typeof Content;
     VirtualizedContent: typeof VirtualizedContent;
     Toolbar: typeof Toolbar;
-    Search: import("react").ForwardRefExoticComponent<import("./components/search").DataTableSearchProps & import("react").RefAttributes<HTMLInputElement>>;
+    Search: typeof TableSearch;
     Filters: typeof Filters;
     DisplayControls: typeof DisplaySettings;
 };

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,EACzB,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,2CAuKxD;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;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,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,2CAsKxD;kBArLQ,aAAa;;;AAyLtB,eAAO,MAAM,SAAS;;;;;;;CAOpB,CAAC"}

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

@@ -12,7 +12,7 @@ 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 }) {
+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);
@@ -55,6 +55,7 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
     const table = useReactTable({
         data: groupedData,
         columns: columnsWithFilters,
+        getRowId,
         getCoreRowModel: getCoreRowModel(),
         getExpandedRowModel: getExpandedRowModel(),
         getSubRows: row => row?.subRows || [],
@@ -121,7 +122,8 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
             defaultSort,
             loadingRowCount,
             onRowClick,
-            shouldShowFilters
+            shouldShowFilters,
+            stickyGroupHeader
         };
     }, [
         table,
@@ -135,10 +137,12 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
         defaultSort,
         loadingRowCount,
         onRowClick,
-        shouldShowFilters
+        shouldShowFilters,
+        stickyGroupHeader
     ]);
-    return (jsx(TableContext.Provider, { value: contextValue, children: children }));
+    return jsx(TableContext, { value: contextValue, children: children });
 }
+DataTableRoot.displayName = 'DataTable';
 const DataTable = Object.assign(DataTableRoot, {
     Content: Content,
     VirtualizedContent: VirtualizedContent,