@bsol-oss/react-datatable5 12.0.0-beta.88 → 12.0.0-beta.89

package/dist/index.mjs

@@ -582,12 +582,104 @@ const Pagination = () => {
         }, children: jsxs(HStack, { children: [jsx(PaginationPrevTrigger, {}), jsx(PaginationItems, {}), jsx(PaginationNextTrigger, {})] }) }));
 };
 
+/**
+ * Custom selector utilities to replace TanStack table selector primitives.
+ * These work directly with rowSelection state instead of using table's built-in selectors.
+ */
+/**
+ * Get all selected rows from the table based on rowSelection state
+ */
+function getSelectedRows(table, rowSelection) {
+    const selectedRowIds = Object.keys(rowSelection).filter((id) => rowSelection[id] === true);
+    return table
+        .getRowModel()
+        .rows.filter((row) => selectedRowIds.includes(row.id));
+}
+/**
+ * Get the count of selected rows
+ */
+function getSelectedRowCount(table, rowSelection) {
+    return getSelectedRows(table, rowSelection).length;
+}
+/**
+ * Check if a specific row is selected
+ */
+function isRowSelected(rowId, rowSelection) {
+    return rowSelection[rowId] === true;
+}
+/**
+ * Check if all rows in the table are selected
+ */
+function areAllRowsSelected(table, rowSelection) {
+    const rows = table.getRowModel().rows;
+    if (rows.length === 0)
+        return false;
+    return rows.every((row) => isRowSelected(row.id, rowSelection));
+}
+/**
+ * Check if all rows on the current page are selected
+ */
+function areAllPageRowsSelected(table, rowSelection) {
+    const pageRows = table.getRowModel().rows;
+    if (pageRows.length === 0)
+        return false;
+    return pageRows.every((row) => isRowSelected(row.id, rowSelection));
+}
+/**
+ * Create a toggle handler for a specific row
+ */
+function createRowToggleHandler(row, rowSelection, setRowSelection) {
+    return () => {
+        setRowSelection((old) => {
+            const newSelection = { ...old };
+            if (newSelection[row.id]) {
+                delete newSelection[row.id];
+            }
+            else {
+                newSelection[row.id] = true;
+            }
+            return newSelection;
+        });
+    };
+}
+/**
+ * Create a toggle handler for all rows
+ */
+function createToggleAllRowsHandler(table, rowSelection, setRowSelection) {
+    return () => {
+        const allSelected = areAllRowsSelected(table, rowSelection);
+        if (allSelected) {
+            // Deselect all
+            setRowSelection({});
+        }
+        else {
+            // Select all
+            const newSelection = {};
+            table.getRowModel().rows.forEach((row) => {
+                newSelection[row.id] = true;
+            });
+            setRowSelection(newSelection);
+        }
+    };
+}
+/**
+ * Reset row selection (clear all selections)
+ */
+function resetRowSelection(setRowSelection) {
+    setRowSelection({});
+}
+/**
+ * Check if a row can be selected (always true for now, can be extended)
+ */
+function canRowSelect(row) {
+    return row.getCanSelect?.() ?? true;
+}
+
 const ResetSelectionButton = () => {
-    const { table } = useDataTableContext();
-    const { tableLabel } = useDataTableContext();
+    const { tableLabel, setRowSelection } = useDataTableContext();
     const { resetSelection } = tableLabel;
     return (jsx(Button$1, { onClick: () => {
-            table.resetRowSelection();
+            resetRowSelection(setRowSelection);
         }, children: resetSelection }));
 };
 
@@ -2663,20 +2755,20 @@ const GlobalFilter = () => {
                 } }) }) }));
 };
 
-const SelectAllRowsToggle = ({ selectAllIcon = jsx(MdOutlineChecklist, {}), clearAllIcon = jsx(MdClear, {}), selectAllText = "", clearAllText = "", }) => {
-    const { table } = useDataTableContext();
-    return (jsxs(Fragment, { children: [!!selectAllText === false && (jsx(IconButton, { variant: "ghost", "aria-label": table.getIsAllRowsSelected() ? clearAllText : selectAllText, onClick: (event) => {
-                    table.getToggleAllRowsSelectedHandler()(event);
-                }, children: table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon })), !!selectAllText !== false && (jsxs(Button$1, { variant: "ghost", onClick: (event) => {
-                    table.getToggleAllRowsSelectedHandler()(event);
-                }, children: [table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon, table.getIsAllRowsSelected() ? clearAllText : selectAllText] }))] }));
+const SelectAllRowsToggle = ({ selectAllIcon = jsx(MdOutlineChecklist, {}), clearAllIcon = jsx(MdClear, {}), selectAllText = '', clearAllText = '', }) => {
+    const { table, rowSelection, setRowSelection } = useDataTableContext();
+    const allRowsSelected = areAllRowsSelected(table, rowSelection);
+    const toggleHandler = createToggleAllRowsHandler(table, rowSelection, setRowSelection);
+    return (jsxs(Fragment, { children: [!!selectAllText === false && (jsx(IconButton, { variant: 'ghost', "aria-label": allRowsSelected ? clearAllText : selectAllText, onClick: toggleHandler, children: allRowsSelected ? clearAllIcon : selectAllIcon })), !!selectAllText !== false && (jsxs(Button$1, { variant: 'ghost', onClick: toggleHandler, children: [allRowsSelected ? clearAllIcon : selectAllIcon, allRowsSelected ? clearAllText : selectAllText] }))] }));
 };
 
 const TableSelector = () => {
-    const { table } = useDataTableContext();
-    return (jsxs(Fragment, { children: [table.getSelectedRowModel().rows.length > 0 && (jsxs(Button$1, { onClick: () => { }, variant: "ghost", display: "flex", gap: "0.25rem", children: [jsx(Box, { fontSize: "sm", children: `${table.getSelectedRowModel().rows.length}` }), jsx(IoMdCheckbox, {})] })), !table.getIsAllPageRowsSelected() && jsx(SelectAllRowsToggle, {}), table.getSelectedRowModel().rows.length > 0 && (jsx(IconButton, { variant: "ghost", onClick: () => {
-                    table.resetRowSelection();
-                }, "aria-label": "reset selection", children: jsx(MdClear, {}) }))] }));
+    const { table, rowSelection, setRowSelection } = useDataTableContext();
+    const selectedCount = getSelectedRowCount(table, rowSelection);
+    const allPageRowsSelected = areAllPageRowsSelected(table, rowSelection);
+    return (jsxs(Fragment, { children: [selectedCount > 0 && (jsxs(Button$1, { onClick: () => { }, variant: 'ghost', display: 'flex', gap: "0.25rem", children: [jsx(Box, { fontSize: 'sm', children: `${selectedCount}` }), jsx(IoMdCheckbox, {})] })), !allPageRowsSelected && jsx(SelectAllRowsToggle, {}), selectedCount > 0 && (jsx(IconButton, { variant: 'ghost', onClick: () => {
+                    resetRowSelection(setRowSelection);
+                }, "aria-label": 'reset selection', children: jsx(MdClear, {}) }))] }));
 };
 
 const TableFilterTags = () => {
@@ -2873,7 +2965,7 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
 });
 
 const TableBody = ({ showSelector = false, canResize = true, }) => {
-    "use no memo";
+    'use no memo';
     const { table } = useDataTableContext();
     const SELECTION_BOX_WIDTH = 20;
     const [hoveredRow, setHoveredRow] = useState(-1);
@@ -2884,9 +2976,9 @@ const TableBody = ({ showSelector = false, canResize = true, }) => {
         const tdProps = cell.column.getIsPinned()
             ? {
                 left: showSelector
-                    ? `${cell.column.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
-                    : `${cell.column.getStart("left")}px`,
-                position: "relative",
+                    ? `${cell.column.getStart('left') + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
+                    : `${cell.column.getStart('left')}px`,
+                position: 'relative',
             }
             : {};
         return tdProps;
@@ -2897,37 +2989,40 @@ const TableBody = ({ showSelector = false, canResize = true, }) => {
         }
         if (hoveredRow === index) {
             return {
-                opacity: "1",
+                opacity: '1',
             };
         }
         return {
-            opacity: "0.8",
+            opacity: '0.8',
         };
     };
     return (jsx(Table$1.Body, { children: table.getRowModel().rows.map((row, index) => {
-            return (jsxs(Table$1.Row, { display: "flex", zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), ...getTrProps({ hoveredRow, index }), children: [showSelector && (jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow })), row.getVisibleCells().map((cell, index) => {
+            return (jsxs(Table$1.Row, { display: 'flex', zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), ...getTrProps({ hoveredRow, index }), children: [showSelector && (jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow })), row.getVisibleCells().map((cell, index) => {
                         return (jsx(Table$1.Cell, { padding: `${table.getDensityValue()}px`, 
                             // styling resize and pinning start
-                            flex: `${canResize ? "0" : "1"} 0 ${cell.column.getSize()}px`, 
+                            flex: `${canResize ? '0' : '1'} 0 ${cell.column.getSize()}px`, 
                             // this is to avoid the cell from being too wide
                             minWidth: `0`, color: {
-                                base: "colorPalette.900",
-                                _dark: "colorPalette.100",
+                                base: 'colorPalette.900',
+                                _dark: 'colorPalette.100',
                             },
-                            bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, ...getTdProps(cell), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-rowcell-${cell.id}-${index}`));
+                            bg: { base: 'colorPalette.50', _dark: 'colorPalette.950' }, ...getTdProps(cell), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-rowcell-${cell.id}-${index}`));
                     })] }, `chakra-table-row-${row.id}`));
         }) }));
 };
-const TableRowSelector = ({ row, }) => {
-    const { table } = useDataTableContext();
+const TableRowSelector = ({ row }) => {
+    const { table, rowSelection, setRowSelection } = useDataTableContext();
     const SELECTION_BOX_WIDTH = 20;
-    return (jsx(Table$1.Cell, { padding: `${table.getDensityValue()}px`, display: "grid", color: {
-            base: "colorPalette.900",
-            _dark: "colorPalette.100",
+    const isSelected = isRowSelected(row.id, rowSelection);
+    const canSelect = canRowSelect(row);
+    const toggleHandler = createRowToggleHandler(row, rowSelection, setRowSelection);
+    return (jsx(Table$1.Cell, { padding: `${table.getDensityValue()}px`, display: 'grid', color: {
+            base: 'colorPalette.900',
+            _dark: 'colorPalette.100',
         },
-        bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, checked: row.getIsSelected(),
-            disabled: !row.getCanSelect(),
-            onCheckedChange: row.getToggleSelectedHandler() }) }));
+        bg: { base: 'colorPalette.50', _dark: 'colorPalette.950' }, justifyItems: 'center', alignItems: 'center', children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, checked: isSelected,
+            disabled: !canSelect,
+            onCheckedChange: toggleHandler }) }));
 };
 
 const TableCardContainer = ({ children, variant = "", gap = "1rem", gridTemplateColumns = "repeat(auto-fit, minmax(20rem, 1fr))", direction = "row", ...props }) => {
@@ -2941,16 +3036,16 @@ const DefaultCardTitle = () => {
     return jsx(Fragment, {});
 };
 const TableCards = ({ isSelectable = false, showDisplayNameOnly = false, renderTitle = DefaultCardTitle, cardBodyProps = {}, }) => {
-    const { table } = useDataTableContext();
+    const { table, rowSelection, setRowSelection } = useDataTableContext();
     return (jsx(Fragment, { children: table.getRowModel().rows.map((row) => {
-            return (jsx(Card.Root, { flex: "1 0 20rem", children: jsxs(Card.Body, { display: "flex", flexFlow: "column", gap: "0.5rem", ...cardBodyProps, children: [isSelectable && (jsx(Checkbox, { isChecked: row.getIsSelected(),
-                            disabled: !row.getCanSelect(),
+            return (jsx(Card.Root, { flex: '1 0 20rem', children: jsxs(Card.Body, { display: 'flex', flexFlow: 'column', gap: '0.5rem', ...cardBodyProps, children: [isSelectable && (jsx(Checkbox, { isChecked: isRowSelected(row.id, rowSelection),
+                            disabled: !canRowSelect(row),
                             // indeterminate: row.getIsSomeSelected(),
-                            onChange: row.getToggleSelectedHandler() })), renderTitle(row), jsx(Grid, { templateColumns: "auto 1fr", gap: "1rem", children: row.getVisibleCells().map((cell) => {
-                                return (jsxs(Fragment, { children: [jsxs(Box, { children: [showDisplayNameOnly && (jsx(Text, { fontWeight: "bold", children: cell.column.columnDef.meta?.displayName ??
+                            onChange: createRowToggleHandler(row, rowSelection, setRowSelection) })), renderTitle(row), jsx(Grid, { templateColumns: 'auto 1fr', gap: '1rem', children: row.getVisibleCells().map((cell) => {
+                                return (jsxs(Fragment, { children: [jsxs(Box, { children: [showDisplayNameOnly && (jsx(Text, { fontWeight: 'bold', children: cell.column.columnDef.meta?.displayName ??
                                                         cell.column.id })), !showDisplayNameOnly && (jsx(Fragment, { children: flexRender(cell.column.columnDef.header, 
                                                     // @ts-expect-error Assuming the CellContext interface is the same as HeaderContext
-                                                    cell.getContext()) }))] }, `chakra-table-cardcolumnid-${row.id}`), jsx(Box, { justifySelf: "end", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-cardcolumn-${row.id}`)] }));
+                                                    cell.getContext()) }))] }, `chakra-table-cardcolumnid-${row.id}`), jsx(Box, { justifySelf: 'end', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-cardcolumn-${row.id}`)] }));
                             }) })] }) }, `chakra-table-card-${row.id}`));
         }) }));
 };
@@ -2963,7 +3058,7 @@ const TableComponent = ({ render = () => {
 };
 
 const TableFooter = ({ showSelector = false, alwaysShowSelector = true, }) => {
-    const table = useDataTableContext().table;
+    const { table, rowSelection, setRowSelection } = useDataTableContext();
     const SELECTION_BOX_WIDTH = 20;
     const [hoveredCheckBox, setHoveredCheckBox] = useState(false);
     const handleRowHover = (isHovered) => {
@@ -2973,7 +3068,7 @@ const TableFooter = ({ showSelector = false, alwaysShowSelector = true, }) => {
         if (alwaysShowSelector) {
             return true;
         }
-        if (table.getIsAllRowsSelected()) {
+        if (areAllRowsSelected(table, rowSelection)) {
             return true;
         }
         if (hoveredCheckBox) {
@@ -2981,22 +3076,22 @@ const TableFooter = ({ showSelector = false, alwaysShowSelector = true, }) => {
         }
         return false;
     };
-    return (jsx(Table$1.Footer, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Table$1.Row, { display: "flex", children: [showSelector && (jsxs(Table$1.Header, { padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsx(Box, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
-                                // indeterminate: table.getIsSomeRowsSelected(),
-                                onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }))] })), footerGroup.headers.map((header) => (jsx(Table$1.Cell, { padding: "0", columnSpan: `${header.colSpan}`, 
+    return (jsx(Table$1.Footer, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Table$1.Row, { display: 'flex', children: [showSelector && (jsxs(Table$1.Header, { padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: 'grid', children: [isCheckBoxVisible() && (jsx(Box, { margin: '0rem', display: 'grid', justifyItems: 'center', alignItems: 'center', children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: areAllRowsSelected(table, rowSelection),
+                                // indeterminate: areSomeRowsSelected(table, rowSelection),
+                                onChange: createToggleAllRowsHandler(table, rowSelection, setRowSelection) }) })), !isCheckBoxVisible() && (jsx(Box, { as: "span", margin: '0rem', display: 'grid', justifyItems: 'center', alignItems: 'center', width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }))] })), footerGroup.headers.map((header) => (jsx(Table$1.Cell, { padding: '0', columnSpan: `${header.colSpan}`, 
                     // styling resize and pinning start
-                    maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, display: "grid", children: jsx(MenuRoot$1, { children: jsx(MenuTrigger$1, { asChild: true, children: jsx(Box, { padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
+                    maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, display: 'grid', children: jsx(MenuRoot$1, { children: jsx(MenuTrigger$1, { asChild: true, children: jsx(Box, { padding: `${table.getDensityValue()}px`, display: 'flex', alignItems: 'center', justifyContent: 'start', borderRadius: '0rem', children: jsxs(Flex, { gap: "0.5rem", alignItems: 'center', children: [header.isPlaceholder
                                             ? null
-                                            : flexRender(header.column.columnDef.footer, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && jsx(Fragment, {}), header.column.getIsSorted() === "asc" && (jsx(BiUpArrow, {})), header.column.getIsSorted() === "desc" && (jsx(BiDownArrow, {}))] })) })] }) }) }) }) }, `chakra-table-footer-${header.column.id}-${footerGroup.id}`)))] }, `chakra-table-footergroup-${footerGroup.id}`))) }));
+                                            : flexRender(header.column.columnDef.footer, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && jsx(Fragment, {}), header.column.getIsSorted() === 'asc' && (jsx(BiUpArrow, {})), header.column.getIsSorted() === 'desc' && (jsx(BiDownArrow, {}))] })) })] }) }) }) }) }, `chakra-table-footer-${header.column.id}-${footerGroup.id}`)))] }, `chakra-table-footergroup-${footerGroup.id}`))) }));
 };
 
 // Default text values
 const DEFAULT_HEADER_TEXTS = {
-    pinColumn: "Pin Column",
-    cancelPin: "Cancel Pin",
-    sortAscending: "Sort Ascending",
-    sortDescending: "Sort Descending",
-    clearSorting: "Clear Sorting",
+    pinColumn: 'Pin Column',
+    cancelPin: 'Cancel Pin',
+    sortAscending: 'Sort Ascending',
+    sortDescending: 'Sort Descending',
+    clearSorting: 'Clear Sorting',
 };
 /**
  * TableHeader component with configurable text strings.
@@ -3029,7 +3124,7 @@ const DEFAULT_HEADER_TEXTS = {
  * ];
  */
 const TableHeader = ({ canResize = true, showSelector = false, isSticky = true, tableHeaderProps = {}, tableRowProps = {}, defaultTexts = {}, }) => {
-    const { table } = useDataTableContext();
+    const { table, rowSelection, setRowSelection } = useDataTableContext();
     const SELECTION_BOX_WIDTH = 20;
     // Merge default texts with provided defaults
     const mergedDefaultTexts = { ...DEFAULT_HEADER_TEXTS, ...defaultTexts };
@@ -3042,58 +3137,105 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
         const thProps = header.column.getIsPinned()
             ? {
                 left: showSelector
-                    ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
-                    : `${header.getStart("left")}px`,
-                position: "sticky",
+                    ? `${header.getStart('left') + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
+                    : `${header.getStart('left')}px`,
+                position: 'sticky',
                 zIndex: 100 + 1,
             }
             : {};
         return thProps;
     };
     const stickyProps = {
-        position: "sticky",
+        position: 'sticky',
         top: 0,
     };
-    return (jsx(Table$1.Header, { ...(isSticky ? stickyProps : {}), bgColor: "transparent", ...tableHeaderProps, children: table.getHeaderGroups().map((headerGroup) => (jsxs(Table$1.Row, { display: "flex", bgColor: "transparent", ...tableRowProps, children: [showSelector && (jsx(Table$1.ColumnHeader, { padding: `${table.getDensityValue()}px`, display: "grid", color: {
-                        base: "colorPalette.900",
-                        _dark: "colorPalette.100",
+    const handleAutoSize = (header, event) => {
+        const headerElement = event.currentTarget.closest('th');
+        if (!headerElement)
+            return;
+        // Find the table container
+        const tableContainer = headerElement.closest('[role="table"]') ||
+            headerElement.closest('table') ||
+            headerElement.closest('div');
+        if (!tableContainer)
+            return;
+        // Calculate the actual column index accounting for selector column
+        const columnIndex = header.index;
+        const actualColumnIndex = showSelector ? columnIndex + 1 : columnIndex;
+        // Get all rows (header and body) - Chakra UI Table uses flex layout
+        const rows = Array.from(tableContainer.querySelectorAll('[role="row"], tr'));
+        let maxWidth = 0;
+        // Measure all cells in this column
+        rows.forEach((row) => {
+            // Get all cells in the row (td, th, or Chakra Table.Cell/Table.ColumnHeader)
+            const cells = Array.from(row.children);
+            const cell = cells[actualColumnIndex];
+            if (cell) {
+                // Create a temporary clone to measure content without constraints
+                const clone = cell.cloneNode(true);
+                clone.style.position = 'absolute';
+                clone.style.visibility = 'hidden';
+                clone.style.width = 'auto';
+                clone.style.maxWidth = 'none';
+                clone.style.whiteSpace = 'nowrap';
+                clone.style.flex = 'none';
+                document.body.appendChild(clone);
+                const width = clone.scrollWidth;
+                maxWidth = Math.max(maxWidth, width);
+                document.body.removeChild(clone);
+            }
+        });
+        // Add padding for better UX (density padding + some extra space)
+        const padding = table.getDensityValue() * 2 + 4;
+        const minSize = header.column.columnDef.minSize || 10;
+        const finalWidth = Math.max(maxWidth + padding, minSize);
+        // Set the column size - setSize exists on column but may not be fully typed in @tanstack/react-table
+        console.log('finalWidth', finalWidth);
+        table.setColumnSizing((current) => ({
+            ...current,
+            [header.id]: finalWidth,
+        }));
+    };
+    return (jsx(Table$1.Header, { ...(isSticky ? stickyProps : {}), bgColor: 'transparent', ...tableHeaderProps, children: table.getHeaderGroups().map((headerGroup) => (jsxs(Table$1.Row, { display: 'flex', bgColor: 'transparent', ...tableRowProps, children: [showSelector && (jsx(Table$1.ColumnHeader, { padding: `${table.getDensityValue()}px`, display: 'grid', color: {
+                        base: 'colorPalette.900',
+                        _dark: 'colorPalette.100',
                     },
-                    bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, checked: table.getIsAllRowsSelected(),
-                        // indeterminate: table.getIsSomeRowsSelected(),
-                        onChange: table.getToggleAllRowsSelectedHandler() }) })), headerGroup.headers.map((header) => {
+                    bg: { base: 'colorPalette.50', _dark: 'colorPalette.950' }, justifyItems: 'center', alignItems: 'center', children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, checked: areAllRowsSelected(table, rowSelection),
+                        // indeterminate: areSomeRowsSelected(table, rowSelection),
+                        onChange: createToggleAllRowsHandler(table, rowSelection, setRowSelection) }) })), headerGroup.headers.map((header) => {
                     const resizeProps = {
                         onMouseDown: header.getResizeHandler(),
                         onTouchStart: header.getResizeHandler(),
-                        cursor: "col-resize",
+                        cursor: 'col-resize',
                     };
                     return (jsxs(Table$1.ColumnHeader, { padding: 0, columnSpan: `${header.colSpan}`, 
                         // styling resize and pinning start
-                        flex: `${canResize ? "0" : "1"} 0 ${header.column.getSize()}px`, display: "grid", gridTemplateColumns: "1fr auto", zIndex: 1500 + header.index, color: {
-                            base: "colorPalette.800",
-                            _dark: "colorPalette.200",
+                        flex: `${canResize ? '0' : '1'} 0 ${header.column.getSize()}px`, display: 'grid', gridTemplateColumns: '1fr auto', zIndex: 1500 + header.index, color: {
+                            base: 'colorPalette.800',
+                            _dark: 'colorPalette.200',
                         },
-                        bg: { base: "colorPalette.100", _dark: "colorPalette.900" }, ...getThProps(header), children: [jsxs(MenuRoot, { children: [jsx(MenuTrigger, { asChild: true, children: jsx(Flex, { padding: `${table.getDensityValue()}px`, alignItems: "center", justifyContent: "start", borderRadius: "0rem", overflow: "auto", color: {
-                                                base: "colorPalette.800",
-                                                _dark: "colorPalette.200",
+                        bg: { base: 'colorPalette.100', _dark: 'colorPalette.900' }, ...getThProps(header), children: [jsxs(MenuRoot, { children: [jsx(MenuTrigger, { asChild: true, children: jsx(Flex, { padding: `${table.getDensityValue()}px`, alignItems: 'center', justifyContent: 'start', borderRadius: '0rem', overflow: 'auto', color: {
+                                                base: 'colorPalette.800',
+                                                _dark: 'colorPalette.200',
                                                 _hover: {
-                                                    base: "colorPalette.700",
-                                                    _dark: "colorPalette.300",
+                                                    base: 'colorPalette.700',
+                                                    _dark: 'colorPalette.300',
                                                 },
                                             },
                                             bg: {
-                                                base: "colorPalette.100",
-                                                _dark: "colorPalette.900",
+                                                base: 'colorPalette.100',
+                                                _dark: 'colorPalette.900',
                                                 _hover: {
-                                                    base: "colorPalette.200",
-                                                    _dark: "colorPalette.800",
+                                                    base: 'colorPalette.200',
+                                                    _dark: 'colorPalette.800',
                                                 },
-                                            }, children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
+                                            }, children: jsxs(Flex, { gap: "0.5rem", alignItems: 'center', children: [header.isPlaceholder
                                                         ? null
-                                                        : flexRender(header.column.columnDef.header, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && jsx(Fragment, {}), header.column.getIsSorted() === "asc" && (jsx(BiUpArrow, {})), header.column.getIsSorted() === "desc" && (jsx(BiDownArrow, {}))] })) }), jsx(Box, { children: header.column.getIsFiltered() && jsx(MdFilterListAlt, {}) })] }) }) }), jsxs(MenuContent, { children: [!header.column.getIsPinned() && (jsx(MenuItem, { asChild: true, value: "pin-column", children: jsxs(Button, { variant: "ghost", onClick: () => {
-                                                        header.column.pin("left");
-                                                    }, children: [jsx(MdPushPin, {}), getHeaderText(header, "pinColumn")] }) })), header.column.getIsPinned() && (jsx(MenuItem, { asChild: true, value: "cancel-pin", children: jsxs(Button, { variant: "ghost", onClick: () => {
+                                                        : flexRender(header.column.columnDef.header, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && jsx(Fragment, {}), header.column.getIsSorted() === 'asc' && (jsx(BiUpArrow, {})), header.column.getIsSorted() === 'desc' && (jsx(BiDownArrow, {}))] })) }), jsx(Box, { children: header.column.getIsFiltered() && jsx(MdFilterListAlt, {}) })] }) }) }), jsxs(MenuContent, { children: [!header.column.getIsPinned() && (jsx(MenuItem, { asChild: true, value: "pin-column", children: jsxs(Button, { variant: 'ghost', onClick: () => {
+                                                        header.column.pin('left');
+                                                    }, children: [jsx(MdPushPin, {}), getHeaderText(header, 'pinColumn')] }) })), header.column.getIsPinned() && (jsx(MenuItem, { asChild: true, value: "cancel-pin", children: jsxs(Button, { variant: 'ghost', onClick: () => {
                                                         header.column.pin(false);
-                                                    }, children: [jsx(MdCancel, {}), getHeaderText(header, "cancelPin")] }) })), header.column.getCanSort() && (jsxs(Fragment, { children: [jsx(MenuItem, { asChild: true, value: "sort-ascend", children: jsxs(Button, { variant: "ghost", onClick: () => {
+                                                    }, children: [jsx(MdCancel, {}), getHeaderText(header, 'cancelPin')] }) })), header.column.getCanSort() && (jsxs(Fragment, { children: [jsx(MenuItem, { asChild: true, value: "sort-ascend", children: jsxs(Button, { variant: 'ghost', onClick: () => {
                                                                 table.setSorting((state) => {
                                                                     return [
                                                                         ...state.filter((column) => {
@@ -3102,7 +3244,7 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
                                                                         { id: header.id, desc: false },
                                                                     ];
                                                                 });
-                                                            }, children: [jsx(GrAscend, {}), getHeaderText(header, "sortAscending")] }) }), jsx(MenuItem, { asChild: true, value: "sort-descend", children: jsxs(Button, { variant: "ghost", onClick: () => {
+                                                            }, children: [jsx(GrAscend, {}), getHeaderText(header, 'sortAscending')] }) }), jsx(MenuItem, { asChild: true, value: "sort-descend", children: jsxs(Button, { variant: 'ghost', onClick: () => {
                                                                 table.setSorting((state) => {
                                                                     return [
                                                                         ...state.filter((column) => {
@@ -3111,14 +3253,16 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
                                                                         { id: header.id, desc: true },
                                                                     ];
                                                                 });
-                                                            }, children: [jsx(GrDescend, {}), getHeaderText(header, "sortDescending")] }) }), header.column.getIsSorted() && (jsx(MenuItem, { asChild: true, value: "clear-sorting", children: jsxs(Button, { variant: "ghost", onClick: () => {
+                                                            }, children: [jsx(GrDescend, {}), getHeaderText(header, 'sortDescending')] }) }), header.column.getIsSorted() && (jsx(MenuItem, { asChild: true, value: "clear-sorting", children: jsxs(Button, { variant: 'ghost', onClick: () => {
                                                                 header.column.clearSorting();
-                                                            }, children: [jsx(MdClear, {}), getHeaderText(header, "clearSorting")] }) }))] }))] })] }), canResize && (jsx(Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing()
-                                    ? "colorPalette.700"
-                                    : "transparent", position: "relative", right: "0.1rem", width: "2px", height: "100%", userSelect: "none", style: { touchAction: "none" }, _hover: {
+                                                            }, children: [jsx(MdClear, {}), getHeaderText(header, 'clearSorting')] }) }))] }))] })] }), canResize && (jsx(Box, { borderRight: '0.2rem solid', borderRightColor: header.column.getIsResizing()
+                                    ? 'colorPalette.700'
+                                    : 'transparent', position: 'relative', right: '0.1rem', width: '2px', height: '100%', userSelect: 'none', style: { touchAction: 'none' }, _hover: {
                                     borderRightColor: header.column.getIsResizing()
-                                        ? "colorPalette.700"
-                                        : "colorPalette.400",
+                                        ? 'colorPalette.700'
+                                        : 'colorPalette.400',
+                                }, onDoubleClick: (e) => {
+                                    handleAutoSize(header, e);
                                 }, ...resizeProps }))] }, `chakra-table-header-${header.id}`));
                 })] }, `chakra-table-headergroup-${headerGroup.id}`))) }));
 };
@@ -7209,7 +7353,7 @@ const DensityFeature = {
     // define the new feature's initial state
     getInitialState: (state) => {
         return {
-            density: "sm",
+            density: 'sm',
             ...state,
         };
     },
@@ -7217,7 +7361,7 @@ const DensityFeature = {
     getDefaultOptions: (table) => {
         return {
             enableDensity: true,
-            onDensityChange: makeStateUpdater("density", table),
+            onDensityChange: makeStateUpdater('density', table),
         };
     },
     // if you need to add a default column definition...
@@ -7237,13 +7381,16 @@ const DensityFeature = {
             table.setDensity((old) => {
                 if (value)
                     return value;
-                if (old === "sm") {
-                    return "md";
+                if (old === 'xs') {
+                    return 'sm';
                 }
-                if (old === "md") {
-                    return "lg";
+                if (old === 'sm') {
+                    return 'md';
                 }
-                return "sm";
+                if (old === 'md') {
+                    return 'lg';
+                }
+                return 'xs';
             });
         };
         table.getDensityValue = (value) => {
@@ -7254,13 +7401,16 @@ const DensityFeature = {
             else {
                 density = table.getState().density;
             }
-            if (density === "sm") {
-                return 8;
+            if (density === 'xs') {
+                return 2;
             }
-            if (density === "md") {
-                return 16;
+            if (density === 'sm') {
+                return 4;
+            }
+            if (density === 'md') {
+                return 8;
             }
-            return 32;
+            return 12;
         };
     },
     // if you need to add row instance APIs...
@@ -7485,4 +7635,4 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
         }, children: jsx(DataTableServerContext.Provider, { value: { url, query }, children: children }) }));
 }
 
-export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DefaultTableServer, DensityToggleButton, EditSortingButton, EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, MediaLibraryBrowser, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DefaultTableServer, DensityToggleButton, EditSortingButton, EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, MediaLibraryBrowser, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, SelectAllRowsToggle, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };

package/dist/types/components/DataTable/controls/DensityFeature.d.ts

@@ -1,5 +1,5 @@
-import { OnChangeFn, Updater, RowData, TableFeature } from "@tanstack/react-table";
-export type DensityState = "sm" | "md" | "lg";
+import { OnChangeFn, Updater, RowData, TableFeature } from '@tanstack/react-table';
+export type DensityState = 'xs' | 'sm' | 'md' | 'lg';
 export interface DensityTableState {
     density: DensityState;
 }
@@ -12,7 +12,7 @@ export interface DensityInstance {
     toggleDensity: (value?: DensityState) => void;
     getDensityValue: (value?: DensityState) => number;
 }
-declare module "@tanstack/react-table" {
+declare module '@tanstack/react-table' {
     interface TableState extends DensityTableState {
     }
     interface TableOptionsResolved<TData extends RowData> extends DensityOptions {

package/dist/types/components/DataTable/controls/SelectAllRowsToggle.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 export interface SelectAllRowsToggleProps {
     selectAllIcon?: React.ReactElement;
     clearAllIcon?: React.ReactElement;

package/dist/types/components/DataTable/display/TableBody.d.ts

@@ -1,4 +1,4 @@
-import { Row } from "@tanstack/react-table";
+import { Row } from '@tanstack/react-table';
 export interface TableBodyProps {
     pinnedBgColor?: {
         light: string;

package/dist/types/components/DataTable/display/TableCards.d.ts

@@ -1,6 +1,6 @@
-import { CardBodyProps } from "@chakra-ui/react";
-import { Row } from "@tanstack/react-table";
-import { ReactNode } from "react";
+import { CardBodyProps } from '@chakra-ui/react';
+import { Row } from '@tanstack/react-table';
+import { ReactNode } from 'react';
 export interface TableCardsProps<TData> {
     isSelectable?: boolean;
     showDisplayNameOnly?: boolean;

package/dist/types/components/DataTable/display/TableHeader.d.ts

@@ -1,4 +1,4 @@
-import { TableHeaderProps as ChakraTableHeaderProps, TableRowProps } from "@chakra-ui/react";
+import { TableHeaderProps as ChakraTableHeaderProps, TableRowProps } from '@chakra-ui/react';
 export interface TableHeaderTexts {
     pinColumn?: string;
     cancelPin?: string;