@dmsi/wedgekit-react 0.0.29 → 0.0.30

package/dist/components/DataGrid.cjs

@@ -1811,7 +1811,8 @@ var MenuOption = ({
   );
   const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx9.default)("text-text-action-disabled");
   const disabledStyles = disabled && (0, import_clsx9.default)("bg-transparent cursor-default pointer-events-none");
-  const renderChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
+  const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
+  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
@@ -1845,7 +1846,7 @@ var MenuOption = ({
         "aria-haspopup": subMenu ? "menu" : void 0,
         children: [
           before && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
-          variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label, { padded: true, className: textLabelStyles, children: renderChildren }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: renderChildren }),
+          renderChildren,
           renderAfterProp()
         ]
       })
@@ -1998,7 +1999,7 @@ var DataGridCell = (0, import_react8.memo)(
       lockedHeaderBgStyles,
       iconComponentStyles,
       className,
-      "flex flex-1 items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative text-text-primary-normal",
+      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
       "focus-within:!z-10",
       component === "input" && "border",
       component === "input" && !error && !warning && "border-border-primary-normal",
@@ -2014,7 +2015,7 @@ var DataGridCell = (0, import_react8.memo)(
       Element,
       __spreadProps(__spreadValues({
         id,
-        className: (0, import_clsx10.default)("flex", !width && "flex-1"),
+        className: (0, import_clsx10.default)("flex h-10", !width && "flex-1"),
         style: { width }
       }, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -2037,33 +2038,41 @@ var DataGridCell = (0, import_react8.memo)(
   }
 );
 DataGridCell.displayName = "DataGridCell";
-function DraggableCellHeader(_a) {
+function DataCellHeader(_a) {
   var _b = _a, {
     header,
     children,
-    locked = false,
+    setNodeRef,
+    node,
     id
   } = _b, props = __objRest(_b, [
     "header",
     "children",
-    "locked",
+    "setNodeRef",
+    "node",
     "id"
   ]);
   var _a2;
-  const { attributes, isDragging, listeners, setNodeRef, transform, node } = (0, import_sortable.useSortable)({
-    id: header.column.id
-  });
   const [showMenu, setShowMenu] = (0, import_react8.useState)(false);
   const [filter, setFilter] = (0, import_react8.useState)(
     (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
   );
+  const ref = (0, import_react8.useRef)(null);
+  const predeterminedPinned = (0, import_react8.useRef)(false);
   const {
     menuRootRef,
     isMenuActive,
     registerSubMenu,
     listeners: subMenuListeners,
     mobileHide
-  } = useSubMenuSystem(node);
+  } = useSubMenuSystem(node ? node : ref);
+  (0, import_react8.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);
+  }, []);
   (0, import_react8.useEffect)(() => {
     const handler = setTimeout(() => {
       header.column.setFilterValue(filter);
@@ -2072,107 +2081,160 @@ function DraggableCellHeader(_a) {
       clearTimeout(handler);
     };
   }, [filter]);
-  const style = {
-    opacity: isDragging ? 0.8 : 1,
+  const style = __spreadValues({
     position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
     whiteSpace: "nowrap",
     width: header.column.getSize(),
-    zIndex: isDragging ? 1 : 0,
     "--color-text-primary-normal": "var(--color-neutral-000)"
-  };
+  }, props.style);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     DataGridCell,
-    __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
+    __spreadProps(__spreadValues({
       id,
-      locked,
+      ref: setNodeRef ? setNodeRef : ref,
       type: "header",
       component: "header",
-      ref: setNodeRef,
-      colSpan: header.colSpan,
-      style
-    }, props), {
+      style,
       onClick: header.column.getToggleSortingHandler(),
       onRightClick: () => setShowMenu(!showMenu)
-    }), locked ? {} : attributes), locked ? {} : listeners), {
+    }, props), {
       children: [
         children,
-        header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
             ref: menuRootRef,
-            positionTo: node,
+            positionTo: node ? node : ref,
             show: showMenu,
             setShow: setShowMenu,
             mobileHide,
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              MenuOption,
-              __spreadProps(__spreadValues({
-                id: id ? `${id}-filter-option` : void 0
-              }, subMenuListeners), {
-                subMenu: (_b2) => {
-                  var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                    Menu,
-                    __spreadProps(__spreadValues({
-                      id: id ? `${id}-filter-submenu` : void 0
-                    }, props2), {
-                      show: isMenuActive(menuId, subMenuLevel),
-                      ref: (el) => {
-                        registerSubMenu(menuId, el);
-                      },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_clsx10.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                          Search,
-                          {
-                            id: id ? `${id}-filter-search` : void 0,
-                            onChange: (event) => {
-                              setFilter(event.target.value);
-                            },
-                            onKeyDown: (event) => {
-                              if ([" ", "Space"].includes(event.key)) {
-                                event.stopPropagation();
-                              }
-                            },
-                            value: filter != null ? filter : ""
-                          }
-                        ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                          MenuOption,
-                          {
-                            id: id ? `${id}-filter-contains` : void 0,
-                            onClick: handleFilterFnChange,
-                            before: menuOptionIcon("includesString"),
-                            children: "Contains"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                          MenuOption,
-                          {
-                            id: id ? `${id}-filter-startswith` : void 0,
-                            onClick: handleFilterFnChange,
-                            before: menuOptionIcon("startsWith"),
-                            children: "Starts with"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                          MenuOption,
-                          {
-                            id: id ? `${id}-filter-endswith` : void 0,
-                            onClick: handleFilterFnChange,
-                            before: menuOptionIcon("endsWith"),
-                            children: "Ends with"
-                          }
-                        )
-                      ]
-                    })
-                  );
-                },
-                children: "Filter"
-              })
-            )
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                MenuOption,
+                __spreadProps(__spreadValues({
+                  id: id ? `${id}-filter-option` : void 0
+                }, subMenuListeners), {
+                  subMenu: (_b2) => {
+                    var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
+                    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                      Menu,
+                      __spreadProps(__spreadValues({
+                        id: id ? `${id}-filter-submenu` : void 0
+                      }, props2), {
+                        show: isMenuActive(menuId, subMenuLevel),
+                        ref: (el) => {
+                          registerSubMenu(menuId, el);
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_clsx10.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            Search,
+                            {
+                              id: id ? `${id}-filter-search` : void 0,
+                              onChange: (event) => {
+                                setFilter(event.target.value);
+                              },
+                              onKeyDown: (event) => {
+                                if ([" ", "Space"].includes(event.key)) {
+                                  event.stopPropagation();
+                                }
+                              },
+                              value: filter != null ? filter : ""
+                            }
+                          ) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            MenuOption,
+                            {
+                              id: id ? `${id}-filter-contains` : void 0,
+                              onClick: handleFilterFnChange,
+                              before: menuOptionIcon("includesString"),
+                              children: "Contains"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            MenuOption,
+                            {
+                              id: id ? `${id}-filter-startswith` : void 0,
+                              onClick: handleFilterFnChange,
+                              before: menuOptionIcon("startsWith"),
+                              children: "Starts with"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            MenuOption,
+                            {
+                              id: id ? `${id}-filter-endswith` : void 0,
+                              onClick: handleFilterFnChange,
+                              before: menuOptionIcon("endsWith"),
+                              children: "Ends with"
+                            }
+                          )
+                        ]
+                      })
+                    );
+                  },
+                  children: "Filter"
+                })
+              ),
+              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                MenuOption,
+                __spreadProps(__spreadValues({
+                  onClick: () => {
+                    setShowMenu(!showMenu);
+                  }
+                }, subMenuListeners), {
+                  subMenu: (_d) => {
+                    var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
+                    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                      Menu,
+                      __spreadProps(__spreadValues({}, props2), {
+                        show: isMenuActive(menuId, subMenuLevel),
+                        ref: (el) => {
+                          registerSubMenu(menuId, el);
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            MenuOption,
+                            {
+                              selected: header.column.getIsPinned() === "left",
+                              onClick: () => {
+                                if (header.column.getIsPinned() === "left") {
+                                  header.column.pin(false);
+                                } else {
+                                  header.column.pin("left");
+                                }
+                              },
+                              after: header.column.getIsPinned() === "left" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "check" }),
+                              children: "Left"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            MenuOption,
+                            {
+                              selected: header.column.getIsPinned() === "right",
+                              onClick: () => {
+                                if (header.column.getIsPinned() === "right") {
+                                  header.column.pin(false);
+                                } else {
+                                  header.column.pin("right");
+                                }
+                              },
+                              after: header.column.getIsPinned() === "right" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "check" }),
+                              children: "Right"
+                            }
+                          )
+                        ]
+                      })
+                    );
+                  },
+                  children: [
+                    "Freeze [",
+                    header.column.columnDef.header,
+                    "]"
+                  ]
+                })
+              )
+            ]
           }
         )
       ]
@@ -2190,7 +2252,6 @@ function DraggableCellHeader(_a) {
     );
   }
   function handleFilterFnChange(_id, value) {
-    var _a3;
     let filterFn = "includesString";
     const currentFilterFn = header.column.columnDef.filterFn;
     if ((value == null ? void 0 : value.toLowerCase()) === "starts with") {
@@ -2203,9 +2264,43 @@ function DraggableCellHeader(_a) {
       filterFn = currentFilterFn === "includesString" ? "auto" : "includesString";
     }
     header.column.columnDef.filterFn = filterFn;
-    header.column.setFilterValue((_a3 = header.column.getFilterValue()) != null ? _a3 : "");
+    header.column.setFilterValue(filter);
   }
 }
+DataCellHeader.displayName = "DataCellHeader";
+function DraggableCellHeader(_a) {
+  var _b = _a, {
+    header,
+    children
+  } = _b, props = __objRest(_b, [
+    "header",
+    "children"
+  ]);
+  const { attributes, isDragging, listeners, setNodeRef, transform, node } = (0, import_sortable.useSortable)({
+    id: header.column.id
+  });
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    whiteSpace: "nowrap",
+    zIndex: isDragging ? 1 : 0,
+    width: header.column.getSize(),
+    "--color-text-primary-normal": "var(--color-neutral-000)"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    DataCellHeader,
+    __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+      header,
+      setNodeRef,
+      node,
+      style
+    }, props), attributes), listeners), {
+      children
+    })
+  );
+}
 DraggableCellHeader.displayName = "DraggableCellHeader";
 function DragAlongCell(_a) {
   var _b = _a, {
@@ -2223,9 +2318,8 @@ function DragAlongCell(_a) {
     position: "relative",
     transform: CSS.Translate.toString(transform),
     transition: "width transform 0.2s ease-in-out",
-    zIndex: isDragging ? 1 : 0,
     width: cell.column.getSize(),
-    minWidth: "min-content"
+    zIndex: isDragging ? 1 : 0
   };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
 }
@@ -2522,10 +2616,7 @@ function useInfiniteScroll({
 
 // src/components/DataGrid.tsx
 var import_clsx14 = __toESM(require("clsx"), 1);
-var import_jsx_runtime14 = (
-  // fake empty column to the left for virtualization scroll padding
-  require("react/jsx-runtime")
-);
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
 var NO_RESULTS_HEIGHT = "h-[120px]";
 function adaptTableStateSetter(setter) {
@@ -2555,7 +2646,9 @@ function DataGrid({
   totalRowCount,
   hideStatusBar,
   centerHeader,
-  enableColumnSelector
+  enableColumnSelector,
+  predeterminedLeftPins = [],
+  predeterminedRightPins = []
 }) {
   var _a, _b, _c, _d, _e;
   const [columnOrder, setColumnOrder] = (0, import_react12.useState)(
@@ -2629,18 +2722,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());
       }
     }
   });
@@ -2709,6 +2814,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__ */ (0, import_jsx_runtime14.jsx)(
     import_core.DndContext,
     {
@@ -2728,117 +2834,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__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
                   "div",
                   {
-                    className: "overflow-auto scrollbar-thin relative contain-paint will-change-transform",
+                    className: (0, import_clsx14.default)(
+                      "flex overflow-auto scrollbar-thin relative contain-paint will-change-transform",
+                      empty ? "overflow-y-hidden" : "h-full"
+                    ),
                     ref: containerRef,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "min-w-full grid", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { className: "flex w-full", children: [
-                        virtualPaddingLeft ? /* @__PURE__ */ (0, import_jsx_runtime14.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__ */ (0, import_jsx_runtime14.jsxs)(
-                              DraggableCellHeader,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        PinnedColumns,
+                        {
+                          pinDirection: "left",
+                          table,
+                          tableContainerRef: containerRef,
+                          pagination,
+                          isLoadingMore,
+                          hasMore,
+                          showFilterRow,
+                          enableColumnSelector
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "flex-1 grid min-h-min", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { className: "flex w-full", children: [
+                          virtualPaddingLeft ? (
+                            // fake empty column to the left for virtualization scroll padding
+                            /* @__PURE__ */ (0, import_jsx_runtime14.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: (0, import_clsx14.default)(
-                                  header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                                  "group"
-                                ),
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                                  !((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked) && /* @__PURE__ */ (0, import_jsx_runtime14.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__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.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__ */ (0, import_jsx_runtime14.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__ */ (0, import_jsx_runtime14.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: (0, import_clsx14.default)(
+                                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                                    "group"
+                                  ),
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime14.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
+                              );
                             }
-                          ) : (0, import_react_table.flexRender)(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          ) }, header.id);
-                        }),
-                        virtualPaddingRight ? (
-                          //fake empty column to the right for virtualization scroll padding
-                          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                            "th",
+                            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: ((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.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__ */ (0, import_jsx_runtime14.jsx)(
+                                  Checkbox,
+                                  {
+                                    id: id ? `${id}-select-all-checkbox` : void 0,
+                                    checked: allSelectedAcrossPages,
+                                    indeterminate: someSelectedAcrossPages,
+                                    onChange: toggleSelectAllAcrossPages
+                                  }
+                                )
+                              }
+                            ) : (0, import_react_table.flexRender)(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            ) }, header.id);
+                          }),
+                          virtualPaddingRight ? (
+                            //fake empty column to the right for virtualization scroll padding
+                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                              "th",
+                              {
+                                style: { display: "flex", width: virtualPaddingRight }
+                              }
+                            )
+                          ) : null,
+                          enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            ColumnSelectorHeaderCell,
                             {
-                              style: { display: "flex", width: virtualPaddingRight }
+                              id: id ? `${id}-column-selector` : void 0,
+                              table,
+                              toggleColumnVisibility,
+                              resetColumnVisibility
                             }
                           )
-                        ) : null,
-                        enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                          ColumnSelectorHeaderCell,
+                        ] }, headerGroup.id)) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime14.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__ */ (0, import_jsx_runtime14.jsx)(
-                        TableBody,
+                        PinnedColumns,
                         {
-                          id,
-                          columnVirtualizer,
+                          pinDirection: "right",
                           table,
                           tableContainerRef: containerRef,
-                          virtualPaddingLeft,
-                          virtualPaddingRight,
                           pagination,
                           isLoadingMore,
                           hasMore,
@@ -2846,10 +2989,10 @@ function DataGrid({
                           enableColumnSelector
                         }
                       )
-                    ] })
+                    ]
                   }
                 ),
-                table.getRowModel().rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                empty && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
                   "div",
                   {
                     className: (0, import_clsx14.default)(
@@ -2959,7 +3102,9 @@ function TableBody({
   isLoadingMore,
   hasMore,
   showFilterRow,
-  enableColumnSelector = false
+  enableColumnSelector = false,
+  locked,
+  pinDirection
 }) {
   const { rows } = table.getRowModel();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
@@ -2969,9 +3114,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__ */ (0, import_jsx_runtime14.jsxs)(
     "tbody",
     {
+      className: (0, import_clsx14.default)(locked ? "shadow-16" : ""),
       style: {
         display: "grid",
         height: `${showFilterRow ? rowVirtualizer.getTotalSize() + 40 : rowVirtualizer.getTotalSize()}px`,
@@ -2992,16 +3147,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__ */ (0, import_jsx_runtime14.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
@@ -3036,7 +3191,9 @@ function TableBody({
               virtualPaddingRight,
               virtualRow,
               showFilterRow,
-              enableColumnSelector
+              enableColumnSelector,
+              locked,
+              pinDirection
             },
             row.id
           );
@@ -3067,11 +3224,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__ */ (0, import_jsx_runtime14.jsxs)(
     "tr",
     {
@@ -3088,15 +3255,18 @@ function TableBodyRow({
         width: "100%"
       },
       children: [
-        virtualPaddingLeft ? (
+        !locked && virtualPaddingLeft ? (
           // fake empty column to the left for virtualization scroll padding
           /* @__PURE__ */ (0, import_jsx_runtime14.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__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime14.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__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            CellElement,
             {
               id: id ? `${id}-cell-${cell.id}` : void 0,
               cell,
@@ -3114,16 +3284,119 @@ function TableBodyRow({
             cell.id
           );
         }),
-        virtualPaddingRight ? (
+        !locked && virtualPaddingRight ? (
           // fake empty column to the right for virtualization scroll padding
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { style: { display: "flex", width: virtualPaddingRight } })
         ) : null,
-        enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", {})
+        enableColumnSelector && !locked && /* @__PURE__ */ (0, import_jsx_runtime14.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__ */ (0, import_jsx_runtime14.jsxs)("table", { className: (0, import_clsx14.default)(
+    "grid min-h-min sticky z-20 bg-background-grouped-primary-normal",
+    pinDirection === "left" ? "left-0" : "right-0"
+  ), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.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__ */ (0, import_jsx_runtime14.jsxs)(
+            DataCellHeader,
+            {
+              locked: true,
+              header,
+              center: centerHeader,
+              width: customHeaderWidth,
+              className: (0, import_clsx14.default)(
+                header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                "group"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                !((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ (0, import_jsx_runtime14.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__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          DataGridCell,
+          {
+            type: "header",
+            component: "checkbox",
+            locked: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              Checkbox,
+              {
+                checked: allSelectedAcrossPages,
+                indeterminate: someSelectedAcrossPages,
+                onChange: toggleSelectAllAcrossPages
+              }
+            )
+          }
+        ) : (0, import_react_table.flexRender)(
+          header.column.columnDef.header,
+          header.getContext()
+        ) }, header.id);
+      }) }, headerGroup.id);
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      TableBody,
+      __spreadProps(__spreadValues({}, props), {
+        table,
+        locked: true,
+        pinDirection
+      })
+    )
+  ] });
+}
 var LoadingCell = ({
   id,
   column