@dmsi/wedgekit-react 0.0.213 → 0.0.215

package/dist/{chunk-BHFIS4ZV.js → chunk-2WRRRPEB.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-GW7OVMMC.js";
+} from "./chunk-7W4I2NK3.js";
 import {
   __objRest,
   __spreadValues

package/dist/{chunk-HKSYYK4K.js → chunk-33W2KSCB.js}

@@ -1,6 +1,6 @@
 import {
   InputBase
-} from "./chunk-GW7OVMMC.js";
+} from "./chunk-7W4I2NK3.js";
 import {
   Icon
 } from "./chunk-UAPWR2KE.js";

package/dist/{chunk-LQW4LMNB.js → chunk-CZ55LUFC.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk-NIHZMIOL.js";
 import {
   MenuOption
-} from "./chunk-TPZ6752P.js";
+} from "./chunk-ERW3AMED.js";
+import {
+  Search
+} from "./chunk-2WRRRPEB.js";
 import {
   CSS
 } from "./chunk-WVUIIBRR.js";
-import {
-  Search
-} from "./chunk-BHFIS4ZV.js";
 import {
   Icon
 } from "./chunk-UAPWR2KE.js";
@@ -194,6 +194,8 @@ function DataCellHeader(_a) {
   );
   const ref = useRef(null);
   const predeterminedPinned = useRef(false);
+  const { column, getContext } = header;
+  const { id: columnId, setFilterValue } = column;
   const {
     menuRootRef,
     isMenuActive,
@@ -202,22 +204,20 @@ function DataCellHeader(_a) {
     mobileHide
   } = useSubMenuSystem(node ? node : ref);
   useEffect(() => {
-    var _a3;
-    const columnPinning = (_a3 = header.getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
-    const left = (columnPinning == null ? void 0 : columnPinning.left) ? columnPinning.left : [];
-    const right = (columnPinning == null ? void 0 : columnPinning.right) ? columnPinning.right : [];
-    predeterminedPinned.current = [...left, ...right].includes(
-      header.column.id
-    );
-  }, []);
+    var _a3, _b2, _c;
+    const columnPinning = (_a3 = getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
+    const left = (_b2 = columnPinning == null ? void 0 : columnPinning.left) != null ? _b2 : [];
+    const right = (_c = columnPinning == null ? void 0 : columnPinning.right) != null ? _c : [];
+    predeterminedPinned.current = [...left, ...right].includes(columnId);
+  }, [columnId, getContext]);
   useEffect(() => {
     const handler = setTimeout(() => {
-      header.column.setFilterValue(filter);
+      setFilterValue(filter);
     }, 500);
     return () => {
       clearTimeout(handler);
     };
-  }, [filter]);
+  }, [filter, setFilterValue]);
   const style = __spreadValues({
     position: "relative",
     whiteSpace: "nowrap",

package/dist/components/DataGridCell.cjs

@@ -1904,6 +1904,8 @@ function DataCellHeader(_a) {
   );
   const ref = (0, import_react11.useRef)(null);
   const predeterminedPinned = (0, import_react11.useRef)(false);
+  const { column, getContext } = header;
+  const { id: columnId, setFilterValue } = column;
   const {
     menuRootRef,
     isMenuActive,
@@ -1912,22 +1914,20 @@ function DataCellHeader(_a) {
     mobileHide
   } = useSubMenuSystem(node ? node : ref);
   (0, import_react11.useEffect)(() => {
-    var _a3;
-    const columnPinning = (_a3 = header.getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
-    const left = (columnPinning == null ? void 0 : columnPinning.left) ? columnPinning.left : [];
-    const right = (columnPinning == null ? void 0 : columnPinning.right) ? columnPinning.right : [];
-    predeterminedPinned.current = [...left, ...right].includes(
-      header.column.id
-    );
-  }, []);
+    var _a3, _b2, _c;
+    const columnPinning = (_a3 = getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
+    const left = (_b2 = columnPinning == null ? void 0 : columnPinning.left) != null ? _b2 : [];
+    const right = (_c = columnPinning == null ? void 0 : columnPinning.right) != null ? _c : [];
+    predeterminedPinned.current = [...left, ...right].includes(columnId);
+  }, [columnId, getContext]);
   (0, import_react11.useEffect)(() => {
     const handler = setTimeout(() => {
-      header.column.setFilterValue(filter);
+      setFilterValue(filter);
     }, 500);
     return () => {
       clearTimeout(handler);
     };
-  }, [filter]);
+  }, [filter, setFilterValue]);
   const style = __spreadValues({
     position: "relative",
     whiteSpace: "nowrap",

package/dist/components/DataGridCell.js

@@ -4,18 +4,18 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-LQW4LMNB.js";
+} from "../chunk-CZ55LUFC.js";
 import "../chunk-JITZWSPR.js";
 import "../chunk-NIHZMIOL.js";
-import "../chunk-TPZ6752P.js";
-import "../chunk-WVUIIBRR.js";
-import "../chunk-BHFIS4ZV.js";
-import "../chunk-GW7OVMMC.js";
-import "../chunk-CJVTFYI4.js";
+import "../chunk-ERW3AMED.js";
 import "../chunk-E6Y7ZHQX.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-T3F37S6Z.js";
+import "../chunk-2WRRRPEB.js";
+import "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-CJVTFYI4.js";
+import "../chunk-WVUIIBRR.js";
 import "../chunk-CJELWEO2.js";
 import "../chunk-UAPWR2KE.js";
 import "../chunk-RDLEIAQU.js";

package/dist/components/DateInput.js

@@ -1,10 +1,3 @@
-import {
-  InputBase
-} from "../chunk-GW7OVMMC.js";
-import "../chunk-CJVTFYI4.js";
-import {
-  CalendarRange
-} from "../chunk-SE5DM2IJ.js";
 import {
   findDocumentRoot
 } from "../chunk-VXWSAIB5.js";
@@ -15,7 +8,14 @@ import {
   isValidDate,
   parseInputDate
 } from "../chunk-T3F37S6Z.js";
+import {
+  InputBase
+} from "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-CJVTFYI4.js";
+import {
+  CalendarRange
+} from "../chunk-SE5DM2IJ.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";

package/dist/components/DateRangeInput.js

@@ -1,10 +1,3 @@
-import {
-  InputBase
-} from "../chunk-GW7OVMMC.js";
-import "../chunk-CJVTFYI4.js";
-import {
-  CalendarRange
-} from "../chunk-SE5DM2IJ.js";
 import {
   findDocumentRoot
 } from "../chunk-VXWSAIB5.js";
@@ -16,7 +9,14 @@ import {
   isValidDateRangeOrder,
   parseInputDate
 } from "../chunk-T3F37S6Z.js";
+import {
+  InputBase
+} from "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-CJVTFYI4.js";
+import {
+  CalendarRange
+} from "../chunk-SE5DM2IJ.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";

package/dist/components/FilterGroup.js

@@ -2,22 +2,22 @@
 import {
   OptionPill
 } from "../chunk-ED7FXZRX.js";
+import {
+  Checkbox
+} from "../chunk-E3UOI2D2.js";
 import {
   Search
-} from "../chunk-BHFIS4ZV.js";
-import "../chunk-GW7OVMMC.js";
+} from "../chunk-2WRRRPEB.js";
+import "../chunk-7W4I2NK3.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Label
 } from "../chunk-CJVTFYI4.js";
-import {
-  Checkbox
-} from "../chunk-E3UOI2D2.js";
-import "../chunk-SK742QNF.js";
-import "../chunk-5UH6QUFB.js";
 import "../chunk-CJELWEO2.js";
 import {
   Link
 } from "../chunk-XQILVD56.js";
+import "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";

package/dist/components/Input.js

@@ -6,9 +6,9 @@ import {
   InputBase,
   Percentage,
   UOM
-} from "../chunk-GW7OVMMC.js";
-import "../chunk-CJVTFYI4.js";
+} from "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-CJVTFYI4.js";
 import "../chunk-UAPWR2KE.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-BBZEL7EG.js";

package/dist/components/MenuOption.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-TPZ6752P.js";
-import "../chunk-CJVTFYI4.js";
+} from "../chunk-ERW3AMED.js";
 import "../chunk-E6Y7ZHQX.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-T3F37S6Z.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-CJVTFYI4.js";
 import "../chunk-CJELWEO2.js";
 import "../chunk-UAPWR2KE.js";
 import "../chunk-RDLEIAQU.js";

package/dist/components/MobileDataGrid.js

@@ -4,15 +4,15 @@ import {
 import {
   Heading3
 } from "../chunk-REOLWEZG.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
 import {
   Stack
 } from "../chunk-BOWQUDUU.js";
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";

package/dist/components/Modal.js

@@ -8,11 +8,11 @@ import "../chunk-SYEJVSE4.js";
 import "../chunk-A5ROZWIH.js";
 import "../chunk-ZFOANBWG.js";
 import "../chunk-REOLWEZG.js";
-import "../chunk-SK742QNF.js";
 import "../chunk-E6Y7ZHQX.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-T3F37S6Z.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-SK742QNF.js";
 import "../chunk-UAPWR2KE.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-BBZEL7EG.js";

package/dist/components/NestedMenu.js

@@ -1,14 +1,14 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-TPZ6752P.js";
-import "../chunk-CJVTFYI4.js";
+} from "../chunk-ERW3AMED.js";
 import {
   useKeydown
 } from "../chunk-E6Y7ZHQX.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-T3F37S6Z.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-CJVTFYI4.js";
 import "../chunk-CJELWEO2.js";
 import {
   Icon

package/dist/components/Notification.js

@@ -2,15 +2,15 @@
 import {
   Heading3
 } from "../chunk-REOLWEZG.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
 import {
   Stack
 } from "../chunk-BOWQUDUU.js";
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";

package/dist/components/PDFViewer.js

@@ -13,9 +13,6 @@ import {
 import {
   Heading3
 } from "../chunk-REOLWEZG.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
 import "../chunk-E6Y7ZHQX.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-T3F37S6Z.js";
@@ -26,6 +23,9 @@ import {
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";

package/dist/components/Password.js

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

package/dist/components/Search.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Search
-} from "../chunk-BHFIS4ZV.js";
-import "../chunk-GW7OVMMC.js";
-import "../chunk-CJVTFYI4.js";
+} from "../chunk-2WRRRPEB.js";
+import "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-CJVTFYI4.js";
 import "../chunk-UAPWR2KE.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-BBZEL7EG.js";

package/dist/components/Select.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Select
-} from "../chunk-HKSYYK4K.js";
-import "../chunk-GW7OVMMC.js";
-import "../chunk-CJVTFYI4.js";
+} from "../chunk-33W2KSCB.js";
+import "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-CJVTFYI4.js";
 import "../chunk-UAPWR2KE.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-BBZEL7EG.js";

package/dist/components/Stepper.js

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

package/dist/components/Time.js

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

package/dist/components/Toast.js

@@ -2,12 +2,12 @@
 import {
   Heading3
 } from "../chunk-REOLWEZG.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";

package/dist/components/Upload.js

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

package/dist/components/index.cjs

@@ -1991,6 +1991,8 @@ function DataCellHeader(_a) {
   );
   const ref = (0, import_react11.useRef)(null);
   const predeterminedPinned = (0, import_react11.useRef)(false);
+  const { column, getContext } = header;
+  const { id: columnId, setFilterValue } = column;
   const {
     menuRootRef,
     isMenuActive,
@@ -1999,22 +2001,20 @@ function DataCellHeader(_a) {
     mobileHide
   } = useSubMenuSystem(node ? node : ref);
   (0, import_react11.useEffect)(() => {
-    var _a3;
-    const columnPinning = (_a3 = header.getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
-    const left = (columnPinning == null ? void 0 : columnPinning.left) ? columnPinning.left : [];
-    const right = (columnPinning == null ? void 0 : columnPinning.right) ? columnPinning.right : [];
-    predeterminedPinned.current = [...left, ...right].includes(
-      header.column.id
-    );
-  }, []);
+    var _a3, _b2, _c;
+    const columnPinning = (_a3 = getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
+    const left = (_b2 = columnPinning == null ? void 0 : columnPinning.left) != null ? _b2 : [];
+    const right = (_c = columnPinning == null ? void 0 : columnPinning.right) != null ? _c : [];
+    predeterminedPinned.current = [...left, ...right].includes(columnId);
+  }, [columnId, getContext]);
   (0, import_react11.useEffect)(() => {
     const handler = setTimeout(() => {
-      header.column.setFilterValue(filter);
+      setFilterValue(filter);
     }, 500);
     return () => {
       clearTimeout(handler);
     };
-  }, [filter]);
+  }, [filter, setFilterValue]);
   const style = __spreadValues({
     position: "relative",
     whiteSpace: "nowrap",
@@ -2338,6 +2338,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 +2358,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 +2818,7 @@ function PinnedColumns(_a) {
             testid: pinnedTestId
           }, props), {
             table,
-            locked: true,
+            locked: !enableColumnSelector,
             pinDirection
           })
         )
@@ -2828,6 +2836,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,
@@ -2888,11 +2897,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)(
@@ -2926,7 +2945,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 +3114,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 +3173,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,

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,43 +3,40 @@ import {
 } from "../chunk-3WNXMCZV.js";
 import {
   Select
-} from "../chunk-HKSYYK4K.js";
+} from "../chunk-33W2KSCB.js";
+import {
+  Checkbox
+} from "../chunk-E3UOI2D2.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-LQW4LMNB.js";
+} from "../chunk-CZ55LUFC.js";
 import {
   Menu
 } from "../chunk-JITZWSPR.js";
 import "../chunk-NIHZMIOL.js";
 import {
   MenuOption
-} from "../chunk-TPZ6752P.js";
-import "../chunk-WVUIIBRR.js";
-import {
-  Search
-} from "../chunk-BHFIS4ZV.js";
-import {
-  Input
-} from "../chunk-GW7OVMMC.js";
-import {
-  Label
-} from "../chunk-CJVTFYI4.js";
-import {
-  Checkbox
-} from "../chunk-E3UOI2D2.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
+} from "../chunk-ERW3AMED.js";
 import {
   useInfiniteScroll,
   useTableLayout
 } from "../chunk-E6Y7ZHQX.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-T3F37S6Z.js";
+import {
+  Search
+} from "../chunk-2WRRRPEB.js";
+import {
+  Input
+} from "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
+import {
+  Label
+} from "../chunk-CJVTFYI4.js";
+import "../chunk-WVUIIBRR.js";
 import {
   Subheader
 } from "../chunk-KGVKHWUK.js";
@@ -53,6 +50,9 @@ import {
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";
@@ -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,
@@ -703,11 +712,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(
@@ -741,7 +760,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 +929,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 +988,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,

package/dist/index.css

@@ -774,6 +774,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.213",
+  "version": "0.0.215",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/DataGrid/PinnedColumns.tsx

@@ -175,7 +175,7 @@ export function PinnedColumns<TData>({
         testid={pinnedTestId}
         {...props}
         table={table}
-        locked={true}
+        locked={!enableColumnSelector}
         pinDirection={pinDirection}
       />
     </table>

package/src/components/DataGrid/TableBody/TableBodyRow.tsx

@@ -59,6 +59,7 @@ export function TableBodyRow<T>({
     <tr
       key={row.id}
       className={clsx(
+        "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",
@@ -81,7 +82,6 @@ export function TableBodyRow<T>({
         // fake empty column to the left for virtualization scroll padding
         <td style={{ display: "flex", width: virtualPaddingLeft }} />
       ) : null}
-
       {columns.map((column) => {
         const cell = locked
           ? (column as Cell<T, unknown>)
@@ -90,6 +90,7 @@ export function TableBodyRow<T>({
         if (!cell) {
           return;
         }
+        const cellAlignment = cell.column.columnDef.meta?.align;
         const cellValue = cell.getValue();
 
         return cell.column.columnDef.meta?.useCustomRenderer ? (
@@ -104,9 +105,20 @@ export function TableBodyRow<T>({
               testid ? `${testid}-row-${row.id}-cell-${cell.id}` : undefined
             }
             cell={cell}
-            className={clsx({
-              "justify-end": typeof cellValue === "number",
-            })}
+            className={clsx(
+              cellAlignment
+                ? {
+                    "justify-start": cellAlignment === "left",
+                    "justify-end": cellAlignment === "right",
+                  }
+                : {
+                    "justify-end": typeof cellValue === "number",
+                  },
+            )}
+            width={
+              (cell.column.columnDef.meta?.headerWidth as string | undefined) ??
+              `${cell.column.getSize()}px`
+            }
           >
             <Tooltip
               id={id ? `${id}-tooltip-${cell.id}` : undefined}
@@ -122,12 +134,10 @@ export function TableBodyRow<T>({
           </CellElement>
         );
       })}
-
       {!locked && virtualPaddingRight ? (
         // fake empty column to the right for virtualization scroll padding
         <td style={{ display: "flex", width: virtualPaddingRight }} />
       ) : null}
-
       {enableColumnSelector && !locked && (
         <td className="p-2" style={{ width: "48.8px" }}></td>
       )}

package/src/components/DataGrid/index.tsx

@@ -57,6 +57,7 @@ const NO_RESULTS_HEIGHT = "h-[185px]";
 
 export function DataGrid<T extends Record<string, unknown>>({
   id,
+  rowIdAccessor,
   testid,
   data,
   columns,
@@ -147,13 +148,13 @@ export function DataGrid<T extends Record<string, unknown>>({
       }
     : setLocalColumnFilters;
 
-  const rowSelection = pagination
-    ? (externalRowSelection ?? localRowSelection)
-    : localRowSelection;
+  const rowSelection = externalRowSelection ?? localRowSelection;
+
   const setRowSelection: React.Dispatch<
     React.SetStateAction<Record<string, boolean>>
-  > = pagination
-    ? (updaterOrValue) => {
+  > = useCallback(
+    (updaterOrValue) => {
+      if (pagination) {
         const value =
           typeof updaterOrValue === "function"
             ? (
@@ -163,8 +164,23 @@ export function DataGrid<T extends Record<string, unknown>>({
               )(externalRowSelection ?? {})
             : updaterOrValue;
         (onRowSelectionChange ?? setLocalRowSelection)(value);
+      } else if (externalRowSelection && onRowSelectionChange) {
+        const value =
+          typeof updaterOrValue === "function"
+            ? (
+                updaterOrValue as (
+                  prev: Record<string, boolean>,
+                ) => Record<string, boolean>
+              )(externalRowSelection ?? {})
+            : updaterOrValue;
+
+        onRowSelectionChange(value);
+      } else {
+        setLocalRowSelection(updaterOrValue);
       }
-    : setLocalRowSelection;
+    },
+    [externalRowSelection, onRowSelectionChange, pagination],
+  );
 
   const dndId = useId();
   const containerRef = React.useRef<HTMLDivElement>(null);
@@ -203,7 +219,9 @@ export function DataGrid<T extends Record<string, unknown>>({
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     columnResizeMode: "onChange",
-    getRowId: (row, index) => String(row.id ?? index + 1),
+    getRowId: rowIdAccessor
+      ? (row) => String(row[rowIdAccessor])
+      : (row, index) => String(row.id ?? index + 1),
     state: {
       columnOrder,
       sorting: sortingState,
@@ -405,6 +423,12 @@ export function DataGrid<T extends Record<string, unknown>>({
                           .getRowModel()
                           .rows[0]?.getValue(header.column.id);
 
+                        const cellAlignment: "left" | "right" | "center" =
+                          (header.column.columnDef.meta?.align ??
+                          cellValue === "number")
+                            ? "right"
+                            : "left";
+
                         return (
                           <DraggableCellHeader
                             key={header.id}
@@ -423,13 +447,19 @@ export function DataGrid<T extends Record<string, unknown>>({
                                 ? "cursor-pointer"
                                 : "cursor-grab",
                               "group",
-                              {
-                                "justify-end": typeof cellValue === "number",
-                              },
+                              cellAlignment
+                                ? {
+                                    "justify-start": cellAlignment === "left",
+                                    "justify-end": cellAlignment === "right",
+                                  }
+                                : {
+                                    "justify-end":
+                                      typeof cellValue === "number",
+                                  },
                             )}
                             useMenuDefaultMinWidth={useMenuDefaultMinWidth}
                           >
-                            {typeof cellValue !== "number" && (
+                            {cellAlignment === "left" && (
                               <Subheader tall>
                                 {header.column.columnDef.header}
                               </Subheader>
@@ -450,7 +480,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                                   {header.column.getSortIndex() + 1}
                                 </Subheader>
                               )}
-                            {typeof cellValue === "number" && (
+                            {cellAlignment === "right" && (
                               <Subheader tall>
                                 {header.column.columnDef.header}
                               </Subheader>

package/src/components/DataGrid/types.ts

@@ -27,6 +27,7 @@ export interface DataGridPagination {
 
 export interface DataGridProps<T extends Record<string, unknown>> {
   id?: string;
+  rowIdAccessor?: keyof T;
   testid?: string;
   data: T[];
   columns: ColumnDef<T>[];
@@ -83,5 +84,6 @@ declare module "@tanstack/react-table" {
       header: Header<TData, TValue>;
       table: Table<TData>;
     }) => ReactNode;
+    align?: "left" | "right";
   }
 }

package/src/components/DataGridCell.tsx

@@ -226,6 +226,9 @@ export function DataCellHeader<T>({
   const ref = useRef<HTMLElement>(null);
   const predeterminedPinned = useRef(false);
 
+  const { column, getContext } = header;
+  const { id: columnId, setFilterValue } = column;
+
   const {
     menuRootRef,
     isMenuActive,
@@ -236,28 +239,22 @@ export function DataCellHeader<T>({
 
   useEffect(() => {
     const columnPinning =
-      header.getContext().table.options.initialState?.columnPinning;
-    const left = columnPinning?.left ? columnPinning.left : [];
-    const right = columnPinning?.right ? columnPinning.right : [];
+      getContext().table.options.initialState?.columnPinning;
+    const left = columnPinning?.left ?? [];
+    const right = columnPinning?.right ?? [];
 
-    predeterminedPinned.current = [...left, ...right].includes(
-      header.column.id,
-    );
-    // header is stable for the lifetime of the header cell
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    predeterminedPinned.current = [...left, ...right].includes(columnId);
+  }, [columnId, getContext]);
 
   useEffect(() => {
     const handler = setTimeout(() => {
-      header.column.setFilterValue(filter);
+      setFilterValue(filter);
     }, 500);
 
     return () => {
       clearTimeout(handler);
     };
-    // We only want to react to filter changes; header.column methods are stable
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filter]);
+  }, [filter, setFilterValue]);
 
   const style: CSSProperties = {
     position: "relative",

package/dist/{chunk-GW7OVMMC.js → chunk-7W4I2NK3.js}

@@ -1,11 +1,11 @@
-import {
-  Label
-} from "./chunk-CJVTFYI4.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,
   getDecimalPlaceholder
 } from "./chunk-5UH6QUFB.js";
+import {
+  Label
+} from "./chunk-CJVTFYI4.js";
 import {
   Icon
 } from "./chunk-UAPWR2KE.js";

package/dist/{chunk-TPZ6752P.js → chunk-ERW3AMED.js}

@@ -1,9 +1,9 @@
-import {
-  Label
-} from "./chunk-CJVTFYI4.js";
 import {
   useMatchesMobile
 } from "./chunk-E6Y7ZHQX.js";
+import {
+  Label
+} from "./chunk-CJVTFYI4.js";
 import {
   Paragraph
 } from "./chunk-CJELWEO2.js";