@dmsi/wedgekit-react 0.0.214 → 0.0.216

package/dist/components/Stepper.js

@@ -1,15 +1,15 @@
 "use client";
 import {
   InputBase
-} from "../chunk-7W4I2NK3.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-GW7OVMMC.js";
 import "../chunk-CJVTFYI4.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   componentGap
 } from "../chunk-RDLEIAQU.js";

package/dist/components/Time.js

@@ -1,12 +1,12 @@
 import {
   findDocumentRoot
 } from "../chunk-VXWSAIB5.js";
-import "../chunk-T3F37S6Z.js";
 import {
   InputBase
-} from "../chunk-7W4I2NK3.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-GW7OVMMC.js";
 import "../chunk-CJVTFYI4.js";
+import "../chunk-T3F37S6Z.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Stack
 } from "../chunk-BOWQUDUU.js";

package/dist/components/Toast.js

@@ -5,12 +5,12 @@ import {
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   componentGap,
   componentPadding,

package/dist/components/Upload.js

@@ -1,12 +1,12 @@
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   componentGap
 } from "../chunk-RDLEIAQU.js";

package/dist/components/index.cjs

@@ -515,38 +515,47 @@ var import_react5 = require("react");
 function useTableLayout(initialColumns, key) {
   const [columns, setColumns] = (0, import_react5.useState)(initialColumns);
   const [isReady, setIsReady] = (0, import_react5.useState)(false);
-  const [layoutSignal, setLayoutSignal] = (0, import_react5.useState)(0);
+  const renderCountRef = (0, import_react5.useRef)(0);
+  const handleSaveLayout = (0, import_react5.useCallback)(
+    (setter, _internal) => {
+      if (!isReady && !_internal || !key) return;
+      setColumns((prevColumns) => {
+        const newColumns = typeof setter === "function" ? setter(prevColumns) : setter;
+        if (JSON.stringify(newColumns) === JSON.stringify(prevColumns) && !_internal)
+          return prevColumns;
+        localStorage.setItem(`${key}-tableLayout`, JSON.stringify(newColumns));
+        return newColumns;
+      });
+    },
+    [isReady, key]
+  );
   (0, import_react5.useEffect)(() => {
     if (!key) return setIsReady(true);
+    if (renderCountRef.current > 1) {
+      throw new Error(
+        `useTableLayout should only be called once per component render cycle.
+        ${renderCountRef.current} Renders detected.
+        Check dependency stability`
+      );
+    }
+    renderCountRef.current += 1;
     const savedLayout = localStorage.getItem(`${key}-tableLayout`);
     if (savedLayout) {
-      setColumns(
+      handleSaveLayout(
         mergeObjectArrays(
           initialColumns,
           JSON.parse(savedLayout)
-        )
+        ),
+        true
       );
     }
     if (!savedLayout) handleSaveLayout(initialColumns, true);
-    setLayoutSignal((prev) => prev + 1);
     setIsReady(true);
-  }, []);
-  const handleSaveLayout = (0, import_react5.useCallback)(
-    (setter, _internal) => {
-      if (!isReady && !_internal) return null;
-      const newColumns = typeof setter === "function" ? setter(columns) : setter;
-      if (JSON.stringify(newColumns) === JSON.stringify(columns) && !_internal)
-        return null;
-      if (key) {
-        localStorage.setItem(`${key}-tableLayout`, JSON.stringify(newColumns));
-      }
-      setColumns(newColumns);
-      setLayoutSignal((prev) => prev + 1);
-      return newColumns;
-    },
-    [columns, isReady, key]
-  );
-  return { columns, setColumns: handleSaveLayout, layoutSignal, isReady };
+    return () => {
+      renderCountRef.current = 0;
+    };
+  }, [handleSaveLayout, initialColumns, key]);
+  return { columns, setColumns: handleSaveLayout, isReady };
 }
 
 // src/components/MenuOption.tsx
@@ -2338,6 +2347,7 @@ function TableBodyRow({
     "tr",
     {
       className: (0, import_clsx10.default)(
+        "min-h-10",
         "transition-colors hover:bg-background-action-secondary-hover",
         row.getIsSelected() && "!bg-background-action-secondary-hover",
         isError && "!bg-background-action-critical-secondary-hover",
@@ -2357,21 +2367,28 @@ function TableBodyRow({
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { style: { display: "flex", width: virtualPaddingLeft } })
         ) : null,
         columns.map((column) => {
-          var _a2;
+          var _a2, _b, _c, _d;
           const cell = locked ? column : visibleCells[column.index];
           if (!cell) {
             return;
           }
+          const cellAlignment = (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.align;
           const cellValue = cell.getValue();
-          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          return ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             CellElement,
             {
               id: id ? `${id}-row-${row.id}-cell-${cell.id}` : void 0,
               testid: testid ? `${testid}-row-${row.id}-cell-${cell.id}` : void 0,
               cell,
-              className: (0, import_clsx10.default)({
-                "justify-end": typeof cellValue === "number"
-              }),
+              className: (0, import_clsx10.default)(
+                cellAlignment ? {
+                  "justify-start": cellAlignment === "left",
+                  "justify-end": cellAlignment === "right"
+                } : {
+                  "justify-end": typeof cellValue === "number"
+                }
+              ),
+              width: (_d = (_c = cell.column.columnDef.meta) == null ? void 0 : _c.headerWidth) != null ? _d : `${cell.column.getSize()}px`,
               children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 Tooltip,
                 {
@@ -2810,7 +2827,7 @@ function PinnedColumns(_a) {
             testid: pinnedTestId
           }, props), {
             table,
-            locked: true,
+            locked: !enableColumnSelector,
             pinDirection
           })
         )
@@ -2828,6 +2845,7 @@ var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
 var NO_RESULTS_HEIGHT = "h-[185px]";
 function DataGrid({
   id,
+  rowIdAccessor,
   testid,
   data,
   columns,
@@ -2856,11 +2874,7 @@ function DataGrid({
   const [localSorting, setLocalSorting] = (0, import_react16.useState)([]);
   const [localColumnFilters, setLocalColumnFilters] = (0, import_react16.useState)([]);
   const [localRowSelection, setLocalRowSelection] = (0, import_react16.useState)({});
-  const {
-    columns: tableColumns,
-    setColumns: setTableColumns,
-    layoutSignal
-  } = useTableLayout(columns, id != null ? id : testid);
+  const { columns: tableColumns, setColumns: setTableColumns } = useTableLayout(columns, id != null ? id : testid);
   const [columnOrder, setColumnOrder] = (0, import_react16.useState)(
     tableColumns.map((c) => c.id)
   );
@@ -2872,10 +2886,23 @@ function DataGrid({
       })
     )
   );
+  const resetColumnVisibility = (0, import_react16.useCallback)(
+    (updateOrder) => {
+      setColumnVisibility(
+        Object.fromEntries(
+          tableColumns.filter((column) => !!column.id).map((column) => {
+            var _a2, _b2;
+            return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
+          })
+        )
+      );
+      if (updateOrder) setColumnOrder(tableColumns.map((c) => c.id));
+    },
+    [tableColumns]
+  );
   (0, import_react16.useEffect)(() => {
-    setColumnOrder(tableColumns.map((c) => c.id));
-    resetColumnVisibility();
-  }, [layoutSignal]);
+    resetColumnVisibility(true);
+  }, [resetColumnVisibility]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -2888,11 +2915,21 @@ function DataGrid({
     const value = typeof updaterOrValue === "function" ? updaterOrValue(externalColumnFilters != null ? externalColumnFilters : []) : updaterOrValue;
     (onColumnFiltersChange != null ? onColumnFiltersChange : setLocalColumnFilters)(value);
   } : setLocalColumnFilters;
-  const rowSelection = pagination ? externalRowSelection != null ? externalRowSelection : localRowSelection : localRowSelection;
-  const setRowSelection = pagination ? (updaterOrValue) => {
-    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
-    (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
-  } : setLocalRowSelection;
+  const rowSelection = externalRowSelection != null ? externalRowSelection : localRowSelection;
+  const setRowSelection = (0, import_react16.useCallback)(
+    (updaterOrValue) => {
+      if (pagination) {
+        const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
+        (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
+      } else if (externalRowSelection && onRowSelectionChange) {
+        const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
+        onRowSelectionChange(value);
+      } else {
+        setLocalRowSelection(updaterOrValue);
+      }
+    },
+    [externalRowSelection, onRowSelectionChange, pagination]
+  );
   const dndId = (0, import_react16.useId)();
   const containerRef = import_react16.default.useRef(null);
   const toggleColumnVisibility = (0, import_react16.useCallback)(
@@ -2909,16 +2946,6 @@ function DataGrid({
     },
     [setTableColumns]
   );
-  const resetColumnVisibility = (0, import_react16.useCallback)(() => {
-    setColumnVisibility(
-      Object.fromEntries(
-        tableColumns.filter((column) => !!column.id).map((column) => {
-          var _a2, _b2;
-          return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
-        })
-      )
-    );
-  }, [tableColumns]);
   const table = (0, import_react_table3.useReactTable)({
     columns: tableColumns,
     data,
@@ -2926,7 +2953,7 @@ function DataGrid({
     getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
     getFilteredRowModel: (0, import_react_table3.getFilteredRowModel)(),
     columnResizeMode: "onChange",
-    getRowId: (row, index) => {
+    getRowId: rowIdAccessor ? (row) => String(row[rowIdAccessor]) : (row, index) => {
       var _a2;
       return String((_a2 = row.id) != null ? _a2 : index + 1);
     },
@@ -3095,38 +3122,42 @@ function DataGrid({
                                 )
                               ) : null,
                               virtualColumns.map((virtualColumn) => {
-                                var _a2, _b2, _c2;
+                                var _a2, _b2, _c2, _d2, _e2;
                                 const header = headerGroup.headers[virtualColumn.index];
                                 if (!header) {
                                   return;
                                 }
                                 if (typeof header.column.columnDef.header === "string") {
                                   const cellValue = (_a2 = table.getRowModel().rows[0]) == null ? void 0 : _a2.getValue(header.column.id);
+                                  const cellAlignment = ((_c2 = (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.align) != null ? _c2 : cellValue === "number") ? "right" : "left";
                                   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                                     DraggableCellHeader,
                                     {
                                       id: id ? `${id}-header-${header.id}` : void 0,
                                       testid: testid ? `${testid}-header-${header.id}` : void 0,
                                       header,
-                                      locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
+                                      locked: (_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.locked,
                                       center: centerHeader,
                                       className: (0, import_clsx13.default)(
                                         header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
                                         "group",
-                                        {
+                                        cellAlignment ? {
+                                          "justify-start": cellAlignment === "left",
+                                          "justify-end": cellAlignment === "right"
+                                        } : {
                                           "justify-end": typeof cellValue === "number"
                                         }
                                       ),
                                       useMenuDefaultMinWidth,
                                       children: [
-                                        typeof cellValue !== "number" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                        cellAlignment === "left" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
                                         getSortIcon(header.column.getIsSorted()),
                                         !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
                                           header.column.getNextSortingOrder(),
                                           true
                                         ),
                                         header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                                        typeof cellValue === "number" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                        cellAlignment === "right" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
                                         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                                           "div",
                                           {
@@ -3150,7 +3181,7 @@ function DataGrid({
                                     header.id
                                   );
                                 }
-                                return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.default.Fragment, { children: ((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.default.Fragment, { children: ((_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                                   DataGridCell,
                                   {
                                     id: id ? `${id}-header-${header.id}` : void 0,
@@ -3387,17 +3418,18 @@ var Select = (_a) => {
     "displayValue",
     "value"
   ]);
+  var _a2;
   const inputRef = (0, import_react17.useRef)(null);
   const inputContainerRef = (0, import_react17.useRef)(null);
   const preventFocusOnInitialRender = (0, import_react17.useRef)(true);
   const [show, setShow] = (0, import_react17.useState)(false);
   (0, import_react17.useEffect)(() => {
-    var _a2;
+    var _a3;
     if (preventFocusOnInitialRender.current) {
       preventFocusOnInitialRender.current = false;
       return;
     }
-    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -3440,11 +3472,11 @@ var Select = (_a) => {
         removeRoundness,
         focus: show,
         onChange: (e) => {
-          var _a2;
-          return (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
+          var _a3;
+          return (_a3 = props.onChange) == null ? void 0 : _a3.call(props, e);
         }
       }, props), {
-        value: displayValue != null ? displayValue : value
+        value: (_a2 = displayValue != null ? displayValue : value) != null ? _a2 : props.onChange ? "" : void 0
       })
     ),
     renderMenu ? renderMenu({

package/dist/components/index.css

@@ -796,6 +796,9 @@
   .min-h-6 {
     min-height: calc(var(--spacing) * 6);
   }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
   .min-h-19 {
     min-height: calc(var(--spacing) * 19);
   }

package/dist/components/index.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-3WNXMCZV.js";
 import {
   Select
-} from "../chunk-33W2KSCB.js";
+} from "../chunk-OC6RTDZT.js";
 import {
   Checkbox
 } from "../chunk-E3UOI2D2.js";
@@ -12,31 +12,31 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-CZ55LUFC.js";
-import {
-  Menu
-} from "../chunk-JITZWSPR.js";
-import "../chunk-NIHZMIOL.js";
+} from "../chunk-SC24WU65.js";
 import {
   MenuOption
-} from "../chunk-ERW3AMED.js";
+} from "../chunk-QHHNFGEX.js";
+import {
+  Menu
+} from "../chunk-NA3ODQCN.js";
+import "../chunk-VP36B2MM.js";
 import {
   useInfiniteScroll,
   useTableLayout
-} from "../chunk-E6Y7ZHQX.js";
+} from "../chunk-ZU2K7BD3.js";
+import "../chunk-WVUIIBRR.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-T3F37S6Z.js";
 import {
   Search
-} from "../chunk-2WRRRPEB.js";
+} from "../chunk-BHFIS4ZV.js";
 import {
   Input
-} from "../chunk-7W4I2NK3.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-GW7OVMMC.js";
 import {
   Label
 } from "../chunk-CJVTFYI4.js";
-import "../chunk-WVUIIBRR.js";
+import "../chunk-T3F37S6Z.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Subheader
 } from "../chunk-KGVKHWUK.js";
@@ -50,12 +50,12 @@ import {
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   componentGap,
   componentPadding
@@ -153,6 +153,7 @@ function TableBodyRow({
     "tr",
     {
       className: clsx2(
+        "min-h-10",
         "transition-colors hover:bg-background-action-secondary-hover",
         row.getIsSelected() && "!bg-background-action-secondary-hover",
         isError && "!bg-background-action-critical-secondary-hover",
@@ -172,21 +173,28 @@ function TableBodyRow({
           /* @__PURE__ */ jsx2("td", { style: { display: "flex", width: virtualPaddingLeft } })
         ) : null,
         columns.map((column) => {
-          var _a2;
+          var _a2, _b, _c, _d;
           const cell = locked ? column : visibleCells[column.index];
           if (!cell) {
             return;
           }
+          const cellAlignment = (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.align;
           const cellValue = cell.getValue();
-          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ jsx2(React.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ jsx2(
+          return ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.useCustomRenderer) ? /* @__PURE__ */ jsx2(React.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ jsx2(
             CellElement,
             {
               id: id ? `${id}-row-${row.id}-cell-${cell.id}` : void 0,
               testid: testid ? `${testid}-row-${row.id}-cell-${cell.id}` : void 0,
               cell,
-              className: clsx2({
-                "justify-end": typeof cellValue === "number"
-              }),
+              className: clsx2(
+                cellAlignment ? {
+                  "justify-start": cellAlignment === "left",
+                  "justify-end": cellAlignment === "right"
+                } : {
+                  "justify-end": typeof cellValue === "number"
+                }
+              ),
+              width: (_d = (_c = cell.column.columnDef.meta) == null ? void 0 : _c.headerWidth) != null ? _d : `${cell.column.getSize()}px`,
               children: /* @__PURE__ */ jsx2(
                 Tooltip,
                 {
@@ -625,7 +633,7 @@ function PinnedColumns(_a) {
             testid: pinnedTestId
           }, props), {
             table,
-            locked: true,
+            locked: !enableColumnSelector,
             pinDirection
           })
         )
@@ -643,6 +651,7 @@ var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
 var NO_RESULTS_HEIGHT = "h-[185px]";
 function DataGrid({
   id,
+  rowIdAccessor,
   testid,
   data,
   columns,
@@ -671,11 +680,7 @@ function DataGrid({
   const [localSorting, setLocalSorting] = useState3([]);
   const [localColumnFilters, setLocalColumnFilters] = useState3([]);
   const [localRowSelection, setLocalRowSelection] = useState3({});
-  const {
-    columns: tableColumns,
-    setColumns: setTableColumns,
-    layoutSignal
-  } = useTableLayout(columns, id != null ? id : testid);
+  const { columns: tableColumns, setColumns: setTableColumns } = useTableLayout(columns, id != null ? id : testid);
   const [columnOrder, setColumnOrder] = useState3(
     tableColumns.map((c) => c.id)
   );
@@ -687,10 +692,23 @@ function DataGrid({
       })
     )
   );
+  const resetColumnVisibility = useCallback(
+    (updateOrder) => {
+      setColumnVisibility(
+        Object.fromEntries(
+          tableColumns.filter((column) => !!column.id).map((column) => {
+            var _a2, _b2;
+            return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
+          })
+        )
+      );
+      if (updateOrder) setColumnOrder(tableColumns.map((c) => c.id));
+    },
+    [tableColumns]
+  );
   useEffect(() => {
-    setColumnOrder(tableColumns.map((c) => c.id));
-    resetColumnVisibility();
-  }, [layoutSignal]);
+    resetColumnVisibility(true);
+  }, [resetColumnVisibility]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -703,11 +721,21 @@ function DataGrid({
     const value = typeof updaterOrValue === "function" ? updaterOrValue(externalColumnFilters != null ? externalColumnFilters : []) : updaterOrValue;
     (onColumnFiltersChange != null ? onColumnFiltersChange : setLocalColumnFilters)(value);
   } : setLocalColumnFilters;
-  const rowSelection = pagination ? externalRowSelection != null ? externalRowSelection : localRowSelection : localRowSelection;
-  const setRowSelection = pagination ? (updaterOrValue) => {
-    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
-    (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
-  } : setLocalRowSelection;
+  const rowSelection = externalRowSelection != null ? externalRowSelection : localRowSelection;
+  const setRowSelection = useCallback(
+    (updaterOrValue) => {
+      if (pagination) {
+        const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
+        (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
+      } else if (externalRowSelection && onRowSelectionChange) {
+        const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
+        onRowSelectionChange(value);
+      } else {
+        setLocalRowSelection(updaterOrValue);
+      }
+    },
+    [externalRowSelection, onRowSelectionChange, pagination]
+  );
   const dndId = useId();
   const containerRef = React3.useRef(null);
   const toggleColumnVisibility = useCallback(
@@ -724,16 +752,6 @@ function DataGrid({
     },
     [setTableColumns]
   );
-  const resetColumnVisibility = useCallback(() => {
-    setColumnVisibility(
-      Object.fromEntries(
-        tableColumns.filter((column) => !!column.id).map((column) => {
-          var _a2, _b2;
-          return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
-        })
-      )
-    );
-  }, [tableColumns]);
   const table = useReactTable({
     columns: tableColumns,
     data,
@@ -741,7 +759,7 @@ function DataGrid({
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     columnResizeMode: "onChange",
-    getRowId: (row, index) => {
+    getRowId: rowIdAccessor ? (row) => String(row[rowIdAccessor]) : (row, index) => {
       var _a2;
       return String((_a2 = row.id) != null ? _a2 : index + 1);
     },
@@ -910,38 +928,42 @@ function DataGrid({
                                 )
                               ) : null,
                               virtualColumns.map((virtualColumn) => {
-                                var _a2, _b2, _c2;
+                                var _a2, _b2, _c2, _d2, _e2;
                                 const header = headerGroup.headers[virtualColumn.index];
                                 if (!header) {
                                   return;
                                 }
                                 if (typeof header.column.columnDef.header === "string") {
                                   const cellValue = (_a2 = table.getRowModel().rows[0]) == null ? void 0 : _a2.getValue(header.column.id);
+                                  const cellAlignment = ((_c2 = (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.align) != null ? _c2 : cellValue === "number") ? "right" : "left";
                                   return /* @__PURE__ */ jsxs5(
                                     DraggableCellHeader,
                                     {
                                       id: id ? `${id}-header-${header.id}` : void 0,
                                       testid: testid ? `${testid}-header-${header.id}` : void 0,
                                       header,
-                                      locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
+                                      locked: (_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.locked,
                                       center: centerHeader,
                                       className: clsx5(
                                         header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
                                         "group",
-                                        {
+                                        cellAlignment ? {
+                                          "justify-start": cellAlignment === "left",
+                                          "justify-end": cellAlignment === "right"
+                                        } : {
                                           "justify-end": typeof cellValue === "number"
                                         }
                                       ),
                                       useMenuDefaultMinWidth,
                                       children: [
-                                        typeof cellValue !== "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                        cellAlignment === "left" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
                                         getSortIcon(header.column.getIsSorted()),
                                         !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
                                           header.column.getNextSortingOrder(),
                                           true
                                         ),
                                         header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                                        typeof cellValue === "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                        cellAlignment === "right" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
                                         /* @__PURE__ */ jsx8(
                                           "div",
                                           {
@@ -965,7 +987,7 @@ function DataGrid({
                                     header.id
                                   );
                                 }
-                                return /* @__PURE__ */ jsx8(React3.Fragment, { children: ((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.checkbox) ? /* @__PURE__ */ jsx8(
+                                return /* @__PURE__ */ jsx8(React3.Fragment, { children: ((_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.checkbox) ? /* @__PURE__ */ jsx8(
                                   DataGridCell,
                                   {
                                     id: id ? `${id}-header-${header.id}` : void 0,