@raystack/apsara 0.55.0 → 0.56.0

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

@@ -0,0 +1,93 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactIcons = require('@radix-ui/react-icons');
+var reactTable = require('@tanstack/react-table');
+var reactVirtual = require('@tanstack/react-virtual');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var table_module = require('../../table/table.module.css.cjs');
+var badge = require('../../badge/badge.cjs');
+var emptyState = require('../../empty-state/empty-state.cjs');
+var flex = require('../../flex/flex.cjs');
+var dataTable_module = require('../data-table.module.css.cjs');
+var useDataTable = require('../hooks/useDataTable.cjs');
+
+function VirtualHeaders({ headerGroups = [], className = '' }) {
+    return (jsxRuntime.jsx("div", { role: 'rowgroup', className: classVarianceAuthority.cx(dataTable_module.default.virtualHeaderGroup, className), children: headerGroups?.map(headerGroup => (jsxRuntime.jsx("div", { role: 'row', className: dataTable_module.default.virtualHeaderRow, children: headerGroup?.headers?.map(header => {
+                const columnDef = header.column.columnDef;
+                return (jsxRuntime.jsx("div", { role: 'columnheader', className: classVarianceAuthority.cx(table_module.default.head, dataTable_module.default.virtualHead, columnDef.classNames?.header), style: columnDef.styles?.header, children: reactTable.flexRender(columnDef.header, header.getContext()) }, header.id));
+            }) }, headerGroup?.id))) }));
+}
+function VirtualGroupHeader({ data, style }) {
+    return (jsxRuntime.jsx("div", { role: 'row', className: dataTable_module.default.virtualSectionHeader, style: style, children: jsxRuntime.jsxs(flex.Flex, { gap: 3, align: 'center', children: [data?.label, data.showGroupCount ? (jsxRuntime.jsx(badge.Badge, { variant: 'neutral', children: data?.count })) : null] }) }));
+}
+function VirtualRows({ rows, virtualizer, onRowClick, classNames }) {
+    const items = virtualizer.getVirtualItems();
+    return items.map((item, idx) => {
+        const row = rows[item.index];
+        if (!row)
+            return null;
+        const isSelected = row.getIsSelected();
+        const cells = row.getVisibleCells() || [];
+        const isGroupHeader = row.subRows && row.subRows.length > 0;
+        const rowKey = row.id + '-' + item.index;
+        const positionStyle = {
+            height: item.size,
+            top: item.start
+        };
+        if (isGroupHeader) {
+            return (jsxRuntime.jsx(VirtualGroupHeader, { data: row.original, style: positionStyle }, rowKey));
+        }
+        return (jsxRuntime.jsx("div", { role: 'row', className: classVarianceAuthority.cx(dataTable_module.default.virtualRow, dataTable_module.default['row'], onRowClick ? dataTable_module.default['clickable'] : '', classNames?.row), style: positionStyle, "data-state": isSelected && 'selected', onClick: () => onRowClick?.(row.original), children: cells.map(cell => {
+                const columnDef = cell.column.columnDef;
+                return (jsxRuntime.jsx("div", { role: 'cell', className: classVarianceAuthority.cx(table_module.default.cell, dataTable_module.default.virtualCell, columnDef.classNames?.cell), style: columnDef.styles?.cell, children: reactTable.flexRender(columnDef.cell, cell.getContext()) }, cell.id));
+            }) }, rowKey));
+    });
+}
+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 } = useDataTable.useDataTable();
+    const headerGroups = table?.getHeaderGroups();
+    const rowModel = table?.getRowModel();
+    const { rows = [] } = rowModel || {};
+    const scrollContainerRef = React.useRef(null);
+    const virtualizer = reactVirtual.useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => scrollContainerRef.current,
+        estimateSize: index => {
+            const row = rows[index];
+            const isGroupHeader = row?.subRows && row.subRows.length > 0;
+            return isGroupHeader ? (groupHeaderHeight ?? rowHeight) : rowHeight;
+        },
+        overscan
+    });
+    const handleVirtualScroll = React.useCallback(() => {
+        if (!scrollContainerRef.current || isLoading)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+        if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {
+            loadMoreData();
+        }
+    }, [isLoading, loadMoreData, loadMoreOffset]);
+    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 stateToShow = isZeroState
+        ? (zeroState ?? emptyState ?? jsxRuntime.jsx(DefaultEmptyComponent, {}))
+        : isEmptyState
+            ? (emptyState ?? jsxRuntime.jsx(DefaultEmptyComponent, {}))
+            : null;
+    if (!hasData) {
+        return jsxRuntime.jsx("div", { className: classNames.root, children: stateToShow });
+    }
+    return (jsxRuntime.jsx("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: virtualizer.getTotalSize() }, children: jsxRuntime.jsx(VirtualRows, { rows: rows, virtualizer: virtualizer, onRowClick: onRowClick, classNames: {
+                            row: classNames.row
+                        } }) })] }) }));
+}
+
+exports.VirtualizedContent = VirtualizedContent;
+//# sourceMappingURL=virtualized-content.cjs.map

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

@@ -0,0 +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 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\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 { onRowClick, table, isLoading, loadMoreData, tableQuery } =\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 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 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  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: virtualizer.getTotalSize() }}\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    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoBA;;AAgBY;;;AAuBZ;AAEA;;AAiBA;AAEA;AAWE;;;AAIE;AAAU;AAEV;;AAEA;;AAGA;;;;;AAME;;AASF;AAeM;;AAkBF;AAGN;AACF;AAEA;AAIM;AASJ;AAGA;AACA;;AAGA;;;AAIE;;AAEE;AACA;AACA;;;AAGH;AAED;AACE;;;;AAIE;;;;AAMJ;AAEE;AAEF;AACA;;;AAIE;AACE;;;;;;;AA6BO;AAMb;;"}

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

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

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

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

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

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 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 styles from '../data-table.module.css.js';
+import { useDataTable } from '../hooks/useDataTable.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 => {
+                const columnDef = header.column.columnDef;
+                return (jsx("div", { role: 'columnheader', className: cx(tableStyles.head, styles.virtualHead, columnDef.classNames?.header), style: columnDef.styles?.header, children: flexRender(columnDef.header, header.getContext()) }, header.id));
+            }) }, headerGroup?.id))) }));
+}
+function VirtualGroupHeader({ data, style }) {
+    return (jsx("div", { role: 'row', className: styles.virtualSectionHeader, style: style, children: jsxs(Flex, { gap: 3, align: 'center', children: [data?.label, data.showGroupCount ? (jsx(Badge, { variant: 'neutral', children: data?.count })) : null] }) }));
+}
+function VirtualRows({ rows, virtualizer, onRowClick, classNames }) {
+    const items = virtualizer.getVirtualItems();
+    return items.map((item, idx) => {
+        const row = rows[item.index];
+        if (!row)
+            return null;
+        const isSelected = row.getIsSelected();
+        const cells = row.getVisibleCells() || [];
+        const isGroupHeader = row.subRows && row.subRows.length > 0;
+        const rowKey = row.id + '-' + item.index;
+        const positionStyle = {
+            height: item.size,
+            top: item.start
+        };
+        if (isGroupHeader) {
+            return (jsx(VirtualGroupHeader, { data: row.original, style: positionStyle }, rowKey));
+        }
+        return (jsx("div", { role: 'row', className: cx(styles.virtualRow, styles['row'], onRowClick ? styles['clickable'] : '', classNames?.row), style: positionStyle, "data-state": isSelected && 'selected', onClick: () => onRowClick?.(row.original), children: cells.map(cell => {
+                const columnDef = cell.column.columnDef;
+                return (jsx("div", { role: 'cell', className: cx(tableStyles.cell, styles.virtualCell, columnDef.classNames?.cell), style: columnDef.styles?.cell, children: flexRender(columnDef.cell, cell.getContext()) }, cell.id));
+            }) }, rowKey));
+    });
+}
+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 } = useDataTable();
+    const headerGroups = table?.getHeaderGroups();
+    const rowModel = table?.getRowModel();
+    const { rows = [] } = rowModel || {};
+    const scrollContainerRef = useRef(null);
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => scrollContainerRef.current,
+        estimateSize: index => {
+            const row = rows[index];
+            const isGroupHeader = row?.subRows && row.subRows.length > 0;
+            return isGroupHeader ? (groupHeaderHeight ?? rowHeight) : rowHeight;
+        },
+        overscan
+    });
+    const handleVirtualScroll = useCallback(() => {
+        if (!scrollContainerRef.current || isLoading)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+        if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {
+            loadMoreData();
+        }
+    }, [isLoading, loadMoreData, loadMoreOffset]);
+    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 stateToShow = isZeroState
+        ? (zeroState ?? emptyState ?? jsx(DefaultEmptyComponent, {}))
+        : isEmptyState
+            ? (emptyState ?? jsx(DefaultEmptyComponent, {}))
+            : null;
+    if (!hasData) {
+        return jsx("div", { className: classNames.root, children: stateToShow });
+    }
+    return (jsx("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: virtualizer.getTotalSize() }, children: jsx(VirtualRows, { rows: rows, virtualizer: virtualizer, onRowClick: onRowClick, classNames: {
+                            row: classNames.row
+                        } }) })] }) }));
+}
+
+export { VirtualizedContent };
+//# sourceMappingURL=virtualized-content.js.map

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

@@ -0,0 +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 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\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 { onRowClick, table, isLoading, loadMoreData, tableQuery } =\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 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 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  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: virtualizer.getTotalSize() }}\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    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAoBA;;AAgBY;;;AAuBZ;AAEA;;AAiBA;AAEA;AAWE;;;AAIE;AAAU;AAEV;;AAEA;;AAGA;;;;;AAME;;AASF;AAeM;;AAkBF;AAGN;AACF;AAEA;AAIM;AASJ;AAGA;AACA;;AAGA;;;AAIE;;AAEE;AACA;AACA;;;AAGH;AAED;AACE;;;;AAIE;;;;AAMJ;AAEE;AAEF;AACA;;;AAIE;AACE;;;;;;;AA6BO;AAMb;;"}

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

@@ -2,25 +2,25 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index$1 = require('../../node_modules/.pnpm/@tanstack_react-table@8.9.2_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@tanstack/react-table/build/lib/index.cjs');
+var reactTable = require('@tanstack/react-table');
 var React = require('react');
 var content = require('./components/content.cjs');
 var displaySettings = require('./components/display-settings.cjs');
 var filters = require('./components/filters.cjs');
 var search = require('./components/search.cjs');
 var toolbar = require('./components/toolbar.cjs');
+var virtualizedContent = require('./components/virtualized-content.cjs');
 var context = require('./context.cjs');
 var dataTable_types = require('./data-table.types.cjs');
 var index = require('./utils/index.cjs');
-var index$2 = require('../../node_modules/.pnpm/@tanstack_table-core@8.9.2/node_modules/@tanstack/table-core/build/lib/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, }) {
     const defaultTableQuery = index.getDefaultTableQuery(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,12 @@ 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 }));
         handleColumnVisibilityChange(initialColumnVisibility);
     }, [
         defaultTableQuery,
         initialColumnVisibility,
-        handleColumnVisibilityChange
+        handleColumnVisibilityChange,
     ]);
     const group_by = tableQuery.group_by?.[0];
     const columnsWithFilters = React.useMemo(() => index.getColumnsWithFilterFn(columns, tableQuery.filters), [columns, tableQuery.filters]);
@@ -43,47 +43,47 @@ 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;
         }
     }, [tableQuery, onTableQueryChange]);
-    const table = index$1.useReactTable({
+    const table = reactTable.useReactTable({
         data: groupedData,
         columns: columnsWithFilters,
-        getCoreRowModel: index$2.getCoreRowModel(),
-        getExpandedRowModel: index$2.getExpandedRowModel(),
-        getSubRows: row => row?.subRows || [],
-        getSortedRowModel: mode === 'server' ? undefined : index$2.getSortedRowModel(),
-        getFilteredRowModel: mode === 'server' ? undefined : index$2.getFilteredRowModel(),
-        manualSorting: mode === 'server',
-        manualFiltering: mode === 'server',
+        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",
         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]);
@@ -117,7 +117,7 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
             defaultSort,
             loadingRowCount,
             onRowClick,
-            shouldShowFilters
+            shouldShowFilters,
         };
     }, [
         table,
@@ -131,16 +131,17 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
         defaultSort,
         loadingRowCount,
         onRowClick,
-        shouldShowFilters
+        shouldShowFilters,
     ]);
     return (jsxRuntime.jsx(context.TableContext.Provider, { value: contextValue, children: children }));
 }
 const DataTable = Object.assign(DataTableRoot, {
     Content: content.Content,
+    VirtualizedContent: virtualizedContent.VirtualizedContent,
     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  VisibilityState,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  useReactTable\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 { TableContext } from './context';\nimport {\n  DataTableProps,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn,\n  defaultGroupOption\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  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters,\n  DisplayControls: DisplaySettings\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoCA;;AAeE;;AAKA;;AAGM;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;AACD;;"}
+{"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;;"}

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

@@ -1,11 +1,13 @@
-import { Content } from './components/content';
-import { DisplaySettings } from './components/display-settings';
-import { Filters } from './components/filters';
-import { Toolbar } from './components/toolbar';
-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, }: React.PropsWithChildren<DataTableProps<TData, TValue>>): import("react/jsx-runtime").JSX.Element;
 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>>;
     Filters: typeof Filters;

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;AAE/C,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,2CA8JxD;AAED,eAAO,MAAM,SAAS;;;;;;CAMpB,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,GACzB,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,2CA8JxD;AAED,eAAO,MAAM,SAAS;;;;;;;CAOpB,CAAC"}

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

@@ -1,24 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useReactTable } from '../../node_modules/.pnpm/@tanstack_react-table@8.9.2_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@tanstack/react-table/build/lib/index.js';
+import { useReactTable, getCoreRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel } from '@tanstack/react-table';
 import { useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import { Content } from './components/content.js';
 import { DisplaySettings } from './components/display-settings.js';
 import { Filters } from './components/filters.js';
 import { TableSearch } from './components/search.js';
 import { Toolbar } from './components/toolbar.js';
+import { VirtualizedContent } from './components/virtualized-content.js';
 import { TableContext } from './context.js';
 import { defaultGroupOption } from './data-table.types.js';
 import { getDefaultTableQuery, getInitialColumnVisibility, queryToTableState, getColumnsWithFilterFn, groupData, hasQueryChanged, transformToDataTableQuery } from './utils/index.js';
-import { getCoreRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel } from '../../node_modules/.pnpm/@tanstack_table-core@8.9.2/node_modules/@tanstack/table-core/build/lib/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, }) {
     const defaultTableQuery = getDefaultTableQuery(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,12 @@ 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 }));
         handleColumnVisibilityChange(initialColumnVisibility);
     }, [
         defaultTableQuery,
         initialColumnVisibility,
-        handleColumnVisibilityChange
+        handleColumnVisibilityChange,
     ]);
     const group_by = tableQuery.group_by?.[0];
     const columnsWithFilters = useMemo(() => getColumnsWithFilterFn(columns, tableQuery.filters), [columns, tableQuery.filters]);
@@ -41,7 +41,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;
         }
@@ -51,37 +51,37 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
         columns: columnsWithFilters,
         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]);
@@ -115,7 +115,7 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
             defaultSort,
             loadingRowCount,
             onRowClick,
-            shouldShowFilters
+            shouldShowFilters,
         };
     }, [
         table,
@@ -129,16 +129,17 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
         defaultSort,
         loadingRowCount,
         onRowClick,
-        shouldShowFilters
+        shouldShowFilters,
     ]);
     return (jsx(TableContext.Provider, { value: contextValue, children: children }));
 }
 const DataTable = Object.assign(DataTableRoot, {
     Content: Content,
+    VirtualizedContent: VirtualizedContent,
     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  VisibilityState,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  useReactTable\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 { TableContext } from './context';\nimport {\n  DataTableProps,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn,\n  defaultGroupOption\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  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters,\n  DisplayControls: DisplaySettings\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAoCA;;AAeE;;AAKA;;AAGM;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;AACD;;"}
+{"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;;"}