@dmsi/wedgekit-react 0.0.53 → 0.0.55

package/dist/components/DataGrid.cjs

@@ -2728,6 +2728,7 @@ function DataGrid({
         right: predeterminedRightPins
       }
     },
+    enableColumnPinning: (predeterminedLeftPins == null ? void 0 : predeterminedLeftPins.length) > 0 || predeterminedRightPins.length > 0,
     onColumnOrderChange: setColumnOrder,
     onSortingChange: adaptTableStateSetter(setSortingState),
     onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
@@ -3312,90 +3313,88 @@ function PinnedColumns(_a) {
   ]);
   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_react13.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)(
+  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_react13.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
-      })
-    )
-  ] });
+            ) }) : (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,

package/dist/components/DataGrid.js

@@ -198,6 +198,7 @@ function DataGrid({
         right: predeterminedRightPins
       }
     },
+    enableColumnPinning: (predeterminedLeftPins == null ? void 0 : predeterminedLeftPins.length) > 0 || predeterminedRightPins.length > 0,
     onColumnOrderChange: setColumnOrder,
     onSortingChange: adaptTableStateSetter(setSortingState),
     onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
@@ -782,90 +783,88 @@ function PinnedColumns(_a) {
   ]);
   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(
+  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
-      })
-    )
-  ] });
+            ) }) : flexRender(
+              header.column.columnDef.header,
+              header.getContext()
+            ) }, header.id);
+          }) }, headerGroup.id);
+        }) }),
+        /* @__PURE__ */ jsx(
+          TableBody,
+          __spreadProps(__spreadValues({}, props), {
+            table,
+            locked: true,
+            pinDirection
+          })
+        )
+      ]
+    }
+  );
 }
 var LoadingCell = ({
   id,

package/package.json

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

package/src/components/DataGrid.tsx

@@ -147,7 +147,7 @@ export function DataGrid<T extends Record<string, unknown>>({
   centerHeader,
   enableColumnSelector,
   predeterminedLeftPins = [],
-  predeterminedRightPins = []
+  predeterminedRightPins = [],
 }: DataGridProps<T>) {
   const [columnOrder, setColumnOrder] = useState<string[]>(() =>
     columns.map((c) => c.id!),
@@ -267,8 +267,10 @@ export function DataGrid<T extends Record<string, unknown>>({
       columnPinning: {
         left: predeterminedLeftPins,
         right: predeterminedRightPins,
-      }
+      },
     },
+    enableColumnPinning:
+      predeterminedLeftPins?.length > 0 || predeterminedRightPins.length > 0,
     onColumnOrderChange: setColumnOrder,
     onSortingChange: adaptTableStateSetter(setSortingState),
     onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
@@ -278,7 +280,7 @@ export function DataGrid<T extends Record<string, unknown>>({
         const cellValue = row?.getValue(columnId);
 
         if (!cellValue || !filterValue) {
-          return true
+          return true;
         }
 
         return String(cellValue)
@@ -289,7 +291,7 @@ export function DataGrid<T extends Record<string, unknown>>({
         const cellValue = row?.getValue(columnId);
 
         if (!cellValue || !filterValue) {
-          return true
+          return true;
         }
 
         return String(cellValue)
@@ -401,7 +403,7 @@ export function DataGrid<T extends Record<string, unknown>>({
           <div
             className={clsx(
               "flex overflow-auto scrollbar-thin relative contain-paint will-change-transform",
-              empty ? "overflow-y-hidden" : "h-full"
+              empty ? "overflow-y-hidden" : "h-full",
             )}
             ref={containerRef}
           >
@@ -415,7 +417,7 @@ export function DataGrid<T extends Record<string, unknown>>({
               showFilterRow={showFilterRow}
               enableColumnSelector={enableColumnSelector}
             />
-              
+
             <table className="flex-1 grid min-h-min">
               <thead className="sticky top-0 z-10 grid">
                 {table.getCenterHeaderGroups().map((headerGroup) => (
@@ -550,7 +552,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                 enableColumnSelector={enableColumnSelector}
               />
             </table>
-            
+
             <PinnedColumns
               pinDirection="right"
               table={table}
@@ -678,7 +680,7 @@ interface TableBodyProps<TData extends RowData> {
   showFilterRow: boolean;
   enableColumnSelector?: boolean;
   locked?: boolean;
-  pinDirection?: 'left' | 'right';
+  pinDirection?: "left" | "right";
 }
 
 // Helpers
@@ -711,9 +713,9 @@ function TableBody<T>({
   const CellElement = locked ? DataGridCell : DragAlongCell;
 
   let headerGroups: HeaderGroup<T>[];
-  if (pinDirection === 'left') {
+  if (pinDirection === "left") {
     headerGroups = table.getLeftHeaderGroups();
-  } else if (pinDirection === 'right') {
+  } else if (pinDirection === "right") {
     headerGroups = table.getRightHeaderGroups();
   } else {
     headerGroups = table.getCenterHeaderGroups();
@@ -751,7 +753,10 @@ function TableBody<T>({
                 noPadding
                 key={header.id}
                 cell={header}
-                width={header.column.columnDef.meta?.headerWidth || (locked ? `${header.column.getSize()}px` : '')}
+                width={
+                  header.column.columnDef.meta?.headerWidth ||
+                  (locked ? `${header.column.getSize()}px` : "")
+                }
               >
                 {header.column.getCanFilter() &&
                   (header.column.columnDef.meta?.filterRowCell?.({
@@ -828,7 +833,7 @@ interface TableBodyRowProps<T> {
   showFilterRow: boolean;
   enableColumnSelector?: boolean;
   locked?: boolean;
-  pinDirection?: 'left' | 'right';
+  pinDirection?: "left" | "right";
 }
 
 function TableBodyRow<T>({
@@ -847,9 +852,10 @@ function TableBodyRow<T>({
   let visibleCells: Cell<T, unknown>[];
 
   if (locked) {
-    visibleCells = pinDirection === 'left'
-      ? row.getLeftVisibleCells()
-      : row.getRightVisibleCells();
+    visibleCells =
+      pinDirection === "left"
+        ? row.getLeftVisibleCells()
+        : row.getRightVisibleCells();
   } else {
     visibleCells = row.getCenterVisibleCells();
   }
@@ -862,7 +868,7 @@ function TableBodyRow<T>({
     row.original !== null &&
     "rowState" in row.original &&
     row.original.rowState === "error";
-  
+
   const CellElement = locked ? DataGridCell : DragAlongCell;
 
   return (
@@ -891,7 +897,7 @@ function TableBodyRow<T>({
       ) : null}
 
       {columns.map((column) => {
-        const cell = locked 
+        const cell = locked
           ? (column as Cell<T, unknown>)
           : visibleCells[(column as VirtualItem).index];
 
@@ -928,14 +934,15 @@ function TableBodyRow<T>({
         <td style={{ display: "flex", width: virtualPaddingRight }} />
       ) : null}
 
-      {enableColumnSelector && !locked && <td className="p-2" style={{ width: '48.8px' }}></td>}
+      {enableColumnSelector && !locked && (
+        <td className="p-2" style={{ width: "48.8px" }}></td>
+      )}
     </tr>
   );
 }
 
-
 interface PinnedColumnsProps<TData extends RowData> {
-  pinDirection: 'left' | 'right';
+  pinDirection: "left" | "right";
   table: Table<TData>;
   tableContainerRef: React.RefObject<HTMLDivElement | null>;
   pagination: DataGridPagination | undefined;
@@ -957,109 +964,108 @@ function PinnedColumns<TData>({
   someSelectedAcrossPages,
   toggleSelectAllAcrossPages,
   ...props
-} : PinnedColumnsProps<TData>) {
-  const headerGroups = pinDirection === "left"
-    ? table.getLeftHeaderGroups()
-    : table.getRightHeaderGroups();
-
-  return headerGroups[0]?.headers.length > 0 && (
-      <table className={clsx(
-        "grid min-h-min sticky z-20 bg-background-grouped-primary-normal",
-        pinDirection === "left" ? "left-0" : "right-0"
-      )}>
+}: PinnedColumnsProps<TData>) {
+  const headerGroups =
+    pinDirection === "left"
+      ? table.getLeftHeaderGroups()
+      : table.getRightHeaderGroups();
+
+  return (
+    headerGroups[0]?.headers.length > 0 && (
+      <table
+        className={clsx(
+          "grid min-h-min sticky z-20 bg-background-grouped-primary-normal",
+          pinDirection === "left" ? "left-0" : "right-0",
+        )}
+      >
         <thead className="sticky top-0 z-20 grid">
           {headerGroups.map((headerGroup) => {
             return (
               <tr key={headerGroup.id} className="flex w-full">
                 {headerGroup.headers.map((header) => {
+                  if (!header) {
+                    return;
+                  }
 
-                if (!header) {
-                  return;
-                }
-
-                if (typeof header.column.columnDef.header === "string") {
-                  const customHeaderWidth =
-                    header.column.columnDef.meta?.headerWidth;
+                  if (typeof header.column.columnDef.header === "string") {
+                    const customHeaderWidth =
+                      header.column.columnDef.meta?.headerWidth;
 
-                  return (
-                    <DataCellHeader
-                      locked
-                      key={header.id}
-                      header={header}
-                      center={centerHeader}
-                      width={customHeaderWidth}
-                      className={clsx(
-                        header.column.getCanSort()
-                          ? "cursor-pointer"
-                          : "cursor-grab",
-                        "group",
-                      )}
-                    >
-                      <Subheader tall>
-                        {header.column.columnDef.header}
-                      </Subheader>
-
-                      {getSortIcon(header.column.getIsSorted())}
-
-                      {!header.column.getIsSorted() &&
-                        header.column.getCanSort() &&
-                        getSortIcon(
-                          header.column.getNextSortingOrder(),
-                          true,
+                    return (
+                      <DataCellHeader
+                        locked
+                        key={header.id}
+                        header={header}
+                        center={centerHeader}
+                        width={customHeaderWidth}
+                        className={clsx(
+                          header.column.getCanSort()
+                            ? "cursor-pointer"
+                            : "cursor-grab",
+                          "group",
                         )}
+                      >
+                        <Subheader tall>
+                          {header.column.columnDef.header}
+                        </Subheader>
 
-                      {header.column.getSortIndex() !== -1 &&
-                        table.getState().sorting.length > 1 && (
-                          <Subheader tall>
-                            {header.column.getSortIndex() + 1}
-                          </Subheader>
-                        )}
+                        {getSortIcon(header.column.getIsSorted())}
+
+                        {!header.column.getIsSorted() &&
+                          header.column.getCanSort() &&
+                          getSortIcon(
+                            header.column.getNextSortingOrder(),
+                            true,
+                          )}
+
+                        {header.column.getSortIndex() !== -1 &&
+                          table.getState().sorting.length > 1 && (
+                            <Subheader tall>
+                              {header.column.getSortIndex() + 1}
+                            </Subheader>
+                          )}
 
-                      {!header.column.columnDef.meta?.locked && (
-                        <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.column.columnDef.meta?.locked && (
+                          <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"
+                          />
+                        )}
+                      </DataCellHeader>
+                    );
+                  }
+                  return (
+                    <React.Fragment key={header.id}>
+                      {header.column.columnDef.meta?.checkbox ? (
+                        <DataGridCell type="header" component="checkbox" locked>
+                          <Checkbox
+                            checked={allSelectedAcrossPages}
+                            indeterminate={someSelectedAcrossPages}
+                            onChange={toggleSelectAllAcrossPages}
+                          />
+                        </DataGridCell>
+                      ) : (
+                        flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )
                       )}
-                    </DataCellHeader>
+                    </React.Fragment>
                   );
-                }
-                return (
-                  <React.Fragment key={header.id}>
-                    {header.column.columnDef.meta?.checkbox ? (
-                      <DataGridCell
-                        type="header"
-                        component="checkbox"
-                        locked
-                      >
-                        <Checkbox
-                          checked={allSelectedAcrossPages}
-                          indeterminate={someSelectedAcrossPages}
-                          onChange={toggleSelectAllAcrossPages}
-                        />
-                      </DataGridCell>
-                    ) : (
-                      flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )
-                    )}
-                  </React.Fragment>
-                );
                 })}
               </tr>
-            )
+            );
           })}
         </thead>
 
@@ -1071,6 +1077,7 @@ function PinnedColumns<TData>({
         />
       </table>
     )
+  );
 }
 
 const LoadingCell = <T extends RowData>({