@dmsi/wedgekit-react 0.0.28 → 0.0.30

package/dist/components/DataGrid.js

@@ -12,17 +12,18 @@ import {
   Select
 } from "../chunk-2S2Z3L56.js";
 import {
+  DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-S5KPS4IQ.js";
+} from "../chunk-HXEPUO5W.js";
 import {
   Menu
 } from "../chunk-VC3R5EUH.js";
 import "../chunk-Z4UCFUF7.js";
 import {
   MenuOption
-} from "../chunk-PDDZ5PMY.js";
+} from "../chunk-S46RZBT4.js";
 import "../chunk-SEKKGFM6.js";
 import {
   Search
@@ -52,6 +53,7 @@ import {
   componentPadding
 } from "../chunk-RDLEIAQU.js";
 import {
+  __objRest,
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
@@ -114,7 +116,9 @@ function DataGrid({
   totalRowCount,
   hideStatusBar,
   centerHeader,
-  enableColumnSelector
+  enableColumnSelector,
+  predeterminedLeftPins = [],
+  predeterminedRightPins = []
 }) {
   var _a, _b, _c, _d, _e;
   const [columnOrder, setColumnOrder] = useState(
@@ -188,18 +192,30 @@ function DataGrid({
       rowSelection,
       columnVisibility
     },
+    initialState: {
+      columnPinning: {
+        left: predeterminedLeftPins,
+        right: predeterminedRightPins
+      }
+    },
     onColumnOrderChange: setColumnOrder,
     onSortingChange: adaptTableStateSetter(setSortingState),
     onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
     onRowSelectionChange: adaptTableStateSetter(setRowSelection),
     filterFns: {
       startsWith: (row, columnId, filterValue) => {
-        var _a2;
-        return (_a2 = row.getValue(columnId)) == null ? void 0 : _a2.toLowerCase().startsWith(filterValue.toLowerCase());
+        const cellValue = row == null ? void 0 : row.getValue(columnId);
+        if (!cellValue || !filterValue) {
+          return true;
+        }
+        return String(cellValue).toLowerCase().startsWith(String(filterValue).toLowerCase());
       },
       endsWith: (row, columnId, filterValue) => {
-        var _a2;
-        return (_a2 = row.getValue(columnId)) == null ? void 0 : _a2.toLowerCase().endsWith(filterValue.toLowerCase());
+        const cellValue = row == null ? void 0 : row.getValue(columnId);
+        if (!cellValue || !filterValue) {
+          return true;
+        }
+        return String(cellValue).toLowerCase().endsWith(String(filterValue).toLowerCase());
       }
     }
   });
@@ -268,6 +284,7 @@ function DataGrid({
     virtualPaddingLeft = (_c = (_b = virtualColumns[0]) == null ? void 0 : _b.start) != null ? _c : 0;
     virtualPaddingRight = columnVirtualizer.getTotalSize() - ((_e = (_d = virtualColumns[virtualColumns.length - 1]) == null ? void 0 : _d.end) != null ? _e : 0);
   }
+  const empty = table.getRowModel().rows.length === 0;
   return /* @__PURE__ */ jsx(
     DndContext,
     {
@@ -287,120 +304,154 @@ function DataGrid({
               id,
               className: "flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal",
               children: [
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: "overflow-auto scrollbar-thin relative contain-paint will-change-transform",
+                    className: clsx(
+                      "flex overflow-auto scrollbar-thin relative contain-paint will-change-transform",
+                      empty ? "overflow-y-hidden" : "h-full"
+                    ),
                     ref: containerRef,
-                    children: /* @__PURE__ */ jsxs("table", { className: "min-w-full grid", children: [
-                      /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 grid", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs("tr", { className: "flex w-full", children: [
-                        virtualPaddingLeft ? (
-                          // fake empty column to the left for virtualization scroll padding
-                          /* @__PURE__ */ jsx(
-                            "th",
-                            {
-                              style: { display: "flex", width: virtualPaddingLeft }
-                            }
-                          )
-                        ) : null,
-                        virtualColumns.map((virtualColumn) => {
-                          var _a2, _b2, _c2, _d2, _e2;
-                          const header = headerGroup.headers[virtualColumn.index];
-                          if (typeof header.column.columnDef.header === "string") {
-                            const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
-                            return /* @__PURE__ */ jsxs(
-                              DraggableCellHeader,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        PinnedColumns,
+                        {
+                          pinDirection: "left",
+                          table,
+                          tableContainerRef: containerRef,
+                          pagination,
+                          isLoadingMore,
+                          hasMore,
+                          showFilterRow,
+                          enableColumnSelector
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("table", { className: "flex-1 grid min-h-min", children: [
+                        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs("tr", { className: "flex w-full", children: [
+                          virtualPaddingLeft ? (
+                            // fake empty column to the left for virtualization scroll padding
+                            /* @__PURE__ */ jsx(
+                              "th",
                               {
-                                id: id ? `${id}-header-${header.id}` : void 0,
-                                header,
-                                locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
-                                center: centerHeader,
-                                width: customHeaderWidth,
-                                className: clsx(
-                                  header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                                  "group"
-                                ),
-                                children: [
-                                  /* @__PURE__ */ 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__ */ jsx(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                                  !((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked) && /* @__PURE__ */ jsx(
-                                    "div",
-                                    {
-                                      onDoubleClick: (e) => {
-                                        e.stopPropagation();
-                                        header.column.resetSize();
-                                      },
-                                      onMouseDown: (e) => {
-                                        e.stopPropagation();
-                                        header.getResizeHandler()(e);
-                                      },
-                                      onTouchStart: (e) => {
-                                        e.stopPropagation();
-                                        header.getResizeHandler()(e);
-                                      },
-                                      className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
-                                    }
-                                  )
-                                ]
-                              },
-                              header.id
-                            );
-                          }
-                          return /* @__PURE__ */ jsx(React.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ jsx(
-                            DataGridCell,
-                            {
-                              id: id ? `${id}-header-${header.id}` : void 0,
-                              type: "header",
-                              component: "checkbox",
-                              locked: (_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.locked,
-                              children: /* @__PURE__ */ jsx(
-                                Checkbox,
+                                style: { display: "flex", width: virtualPaddingLeft }
+                              }
+                            )
+                          ) : null,
+                          virtualColumns.map((virtualColumn) => {
+                            var _a2, _b2, _c2, _d2;
+                            const header = headerGroup.headers[virtualColumn.index];
+                            if (!header) {
+                              return;
+                            }
+                            if (typeof header.column.columnDef.header === "string") {
+                              const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
+                              return /* @__PURE__ */ jsxs(
+                                DraggableCellHeader,
                                 {
-                                  id: id ? `${id}-select-all-checkbox` : void 0,
-                                  checked: allSelectedAcrossPages,
-                                  indeterminate: someSelectedAcrossPages,
-                                  onChange: toggleSelectAllAcrossPages
-                                }
-                              )
+                                  id: id ? `${id}-header-${header.id}` : void 0,
+                                  header,
+                                  locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
+                                  center: centerHeader,
+                                  width: customHeaderWidth,
+                                  className: clsx(
+                                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                                    "group"
+                                  ),
+                                  children: [
+                                    /* @__PURE__ */ 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__ */ jsx(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                                    /* @__PURE__ */ jsx(
+                                      "div",
+                                      {
+                                        onDoubleClick: (e) => {
+                                          e.stopPropagation();
+                                          header.column.resetSize();
+                                        },
+                                        onMouseDown: (e) => {
+                                          e.stopPropagation();
+                                          header.getResizeHandler()(e);
+                                        },
+                                        onTouchStart: (e) => {
+                                          e.stopPropagation();
+                                          header.getResizeHandler()(e);
+                                        },
+                                        className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                                      }
+                                    )
+                                  ]
+                                },
+                                header.id
+                              );
                             }
-                          ) : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          ) }, header.id);
-                        }),
-                        virtualPaddingRight ? (
-                          //fake empty column to the right for virtualization scroll padding
-                          /* @__PURE__ */ jsx(
-                            "th",
+                            return /* @__PURE__ */ jsx(React.Fragment, { children: ((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.checkbox) ? /* @__PURE__ */ jsx(
+                              DataGridCell,
+                              {
+                                id: id ? `${id}-header-${header.id}` : void 0,
+                                type: "header",
+                                component: "checkbox",
+                                locked: (_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.locked,
+                                children: /* @__PURE__ */ jsx(
+                                  Checkbox,
+                                  {
+                                    id: id ? `${id}-select-all-checkbox` : void 0,
+                                    checked: allSelectedAcrossPages,
+                                    indeterminate: someSelectedAcrossPages,
+                                    onChange: toggleSelectAllAcrossPages
+                                  }
+                                )
+                              }
+                            ) : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            ) }, header.id);
+                          }),
+                          virtualPaddingRight ? (
+                            //fake empty column to the right for virtualization scroll padding
+                            /* @__PURE__ */ jsx(
+                              "th",
+                              {
+                                style: { display: "flex", width: virtualPaddingRight }
+                              }
+                            )
+                          ) : null,
+                          enableColumnSelector && /* @__PURE__ */ jsx(
+                            ColumnSelectorHeaderCell,
                             {
-                              style: { display: "flex", width: virtualPaddingRight }
+                              id: id ? `${id}-column-selector` : void 0,
+                              table,
+                              toggleColumnVisibility,
+                              resetColumnVisibility
                             }
                           )
-                        ) : null,
-                        enableColumnSelector && /* @__PURE__ */ jsx(
-                          ColumnSelectorHeaderCell,
+                        ] }, headerGroup.id)) }),
+                        /* @__PURE__ */ jsx(
+                          TableBody,
                           {
-                            id: id ? `${id}-column-selector` : void 0,
+                            id,
+                            columnVirtualizer,
                             table,
-                            toggleColumnVisibility,
-                            resetColumnVisibility
+                            tableContainerRef: containerRef,
+                            virtualPaddingLeft,
+                            virtualPaddingRight,
+                            pagination,
+                            isLoadingMore,
+                            hasMore,
+                            showFilterRow,
+                            enableColumnSelector
                           }
                         )
-                      ] }, headerGroup.id)) }),
+                      ] }),
                       /* @__PURE__ */ jsx(
-                        TableBody,
+                        PinnedColumns,
                         {
-                          id,
-                          columnVirtualizer,
+                          pinDirection: "right",
                           table,
                           tableContainerRef: containerRef,
-                          virtualPaddingLeft,
-                          virtualPaddingRight,
                           pagination,
                           isLoadingMore,
                           hasMore,
@@ -408,10 +459,10 @@ function DataGrid({
                           enableColumnSelector
                         }
                       )
-                    ] })
+                    ]
                   }
                 ),
-                table.getRowModel().rows.length === 0 && /* @__PURE__ */ jsxs(
+                empty && /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: clsx(
@@ -521,7 +572,9 @@ function TableBody({
   isLoadingMore,
   hasMore,
   showFilterRow,
-  enableColumnSelector = false
+  enableColumnSelector = false,
+  locked,
+  pinDirection
 }) {
   const { rows } = table.getRowModel();
   const rowVirtualizer = useVirtualizer({
@@ -531,9 +584,19 @@ function TableBody({
     overscan: 8
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
+  const CellElement = locked ? DataGridCell : DragAlongCell;
+  let headerGroups;
+  if (pinDirection === "left") {
+    headerGroups = table.getLeftHeaderGroups();
+  } else if (pinDirection === "right") {
+    headerGroups = table.getRightHeaderGroups();
+  } else {
+    headerGroups = table.getCenterHeaderGroups();
+  }
   return /* @__PURE__ */ jsxs(
     "tbody",
     {
+      className: clsx(locked ? "shadow-16" : ""),
       style: {
         display: "grid",
         height: `${showFilterRow ? rowVirtualizer.getTotalSize() + 40 : rowVirtualizer.getTotalSize()}px`,
@@ -554,16 +617,16 @@ function TableBody({
               zIndex: 10
             },
             className: "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal",
-            children: table.getHeaderGroups().flatMap(
+            children: headerGroups.flatMap(
               (x) => x.headers.map((header) => {
                 var _a, _b, _c, _d, _e;
                 return /* @__PURE__ */ jsx(
-                  DragAlongCell,
+                  CellElement,
                   {
                     id: id ? `${id}-filter-cell-${header.id}` : void 0,
                     noPadding: true,
                     cell: header,
-                    width: (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth,
+                    width: ((_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth) || (locked ? `${header.column.getSize()}px` : ""),
                     children: header.column.getCanFilter() && ((_e = (_c = (_b = header.column.columnDef.meta) == null ? void 0 : _b.filterRowCell) == null ? void 0 : _c.call(_b, {
                       header,
                       table
@@ -598,7 +661,9 @@ function TableBody({
               virtualPaddingRight,
               virtualRow,
               showFilterRow,
-              enableColumnSelector
+              enableColumnSelector,
+              locked,
+              pinDirection
             },
             row.id
           );
@@ -629,11 +694,21 @@ function TableBodyRow({
   virtualPaddingRight,
   virtualRow,
   showFilterRow,
-  enableColumnSelector = false
+  enableColumnSelector = false,
+  locked,
+  pinDirection
 }) {
-  const visibleCells = row.getVisibleCells();
-  const virtualColumns = columnVirtualizer.getVirtualItems();
+  var _a;
+  let visibleCells;
+  if (locked) {
+    visibleCells = pinDirection === "left" ? row.getLeftVisibleCells() : row.getRightVisibleCells();
+  } else {
+    visibleCells = row.getCenterVisibleCells();
+  }
+  const virtualColumns = (_a = columnVirtualizer == null ? void 0 : columnVirtualizer.getVirtualItems()) != null ? _a : [];
+  const columns = locked ? visibleCells : virtualColumns;
   const isError = typeof row.original === "object" && row.original !== null && "rowState" in row.original && row.original.rowState === "error";
+  const CellElement = locked ? DataGridCell : DragAlongCell;
   return /* @__PURE__ */ jsxs(
     "tr",
     {
@@ -650,15 +725,18 @@ function TableBodyRow({
         width: "100%"
       },
       children: [
-        virtualPaddingLeft ? (
+        !locked && virtualPaddingLeft ? (
           // fake empty column to the left for virtualization scroll padding
           /* @__PURE__ */ jsx("td", { style: { display: "flex", width: virtualPaddingLeft } })
         ) : null,
-        virtualColumns.map((virtualColumn) => {
-          var _a;
-          const cell = visibleCells[virtualColumn.index];
-          return ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.useCustomRenderer) ? /* @__PURE__ */ jsx(React.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ jsx(
-            DragAlongCell,
+        columns.map((column) => {
+          var _a2;
+          const cell = locked ? column : visibleCells[column.index];
+          if (!cell) {
+            return;
+          }
+          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ jsx(React.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ jsx(
+            CellElement,
             {
               id: id ? `${id}-cell-${cell.id}` : void 0,
               cell,
@@ -676,16 +754,119 @@ function TableBodyRow({
             cell.id
           );
         }),
-        virtualPaddingRight ? (
+        !locked && virtualPaddingRight ? (
           // fake empty column to the right for virtualization scroll padding
           /* @__PURE__ */ jsx("td", { style: { display: "flex", width: virtualPaddingRight } })
         ) : null,
-        enableColumnSelector && /* @__PURE__ */ jsx("td", {})
+        enableColumnSelector && !locked && /* @__PURE__ */ jsx("td", { className: "p-2", style: { width: "48.8px" } })
       ]
     },
     row.id
   );
 }
+function PinnedColumns(_a) {
+  var _b = _a, {
+    pinDirection = "left",
+    table,
+    centerHeader,
+    allSelectedAcrossPages,
+    someSelectedAcrossPages,
+    toggleSelectAllAcrossPages
+  } = _b, props = __objRest(_b, [
+    "pinDirection",
+    "table",
+    "centerHeader",
+    "allSelectedAcrossPages",
+    "someSelectedAcrossPages",
+    "toggleSelectAllAcrossPages"
+  ]);
+  var _a2;
+  const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
+  return ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0 && /* @__PURE__ */ jsxs("table", { className: clsx(
+    "grid min-h-min sticky z-20 bg-background-grouped-primary-normal",
+    pinDirection === "left" ? "left-0" : "right-0"
+  ), children: [
+    /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
+      return /* @__PURE__ */ jsx("tr", { className: "flex w-full", children: headerGroup.headers.map((header) => {
+        var _a3, _b2, _c;
+        if (!header) {
+          return;
+        }
+        if (typeof header.column.columnDef.header === "string") {
+          const customHeaderWidth = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.headerWidth;
+          return /* @__PURE__ */ jsxs(
+            DataCellHeader,
+            {
+              locked: true,
+              header,
+              center: centerHeader,
+              width: customHeaderWidth,
+              className: clsx(
+                header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                "group"
+              ),
+              children: [
+                /* @__PURE__ */ 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__ */ jsx(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                !((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    onDoubleClick: (e) => {
+                      e.stopPropagation();
+                      header.column.resetSize();
+                    },
+                    onMouseDown: (e) => {
+                      e.stopPropagation();
+                      header.getResizeHandler()(e);
+                    },
+                    onTouchStart: (e) => {
+                      e.stopPropagation();
+                      header.getResizeHandler()(e);
+                    },
+                    className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                  }
+                )
+              ]
+            },
+            header.id
+          );
+        }
+        return /* @__PURE__ */ jsx(React.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ jsx(
+          DataGridCell,
+          {
+            type: "header",
+            component: "checkbox",
+            locked: true,
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: allSelectedAcrossPages,
+                indeterminate: someSelectedAcrossPages,
+                onChange: toggleSelectAllAcrossPages
+              }
+            )
+          }
+        ) : flexRender(
+          header.column.columnDef.header,
+          header.getContext()
+        ) }, header.id);
+      }) }, headerGroup.id);
+    }) }),
+    /* @__PURE__ */ jsx(
+      TableBody,
+      __spreadProps(__spreadValues({}, props), {
+        table,
+        locked: true,
+        pinDirection
+      })
+    )
+  ] });
+}
 var LoadingCell = ({
   id,
   column