react-glide-table 1.1.9 → 1.2.0

package/README.md

@@ -18,24 +18,24 @@ Peer dependencies: `react` and `react-dom` (`^18` or `^19`).
 
 The package is marked `"sideEffects": false` for tree-shaking. Prefer subpath imports when you only need one surface:
 
-| Import | Contents |
-| --- | --- |
-| `react-glide-table` | Full barrel (compound + core) |
-| `react-glide-table/compound` | `createTable` / `Table` / `DataTable` + related types |
-| `react-glide-table/core` | `useGlideTable` + feature hooks/helpers (no compound UI) |
+| Import                       | Contents                                                 |
+| ---------------------------- | -------------------------------------------------------- |
+| `react-glide-table`          | Full barrel (compound + core)                            |
+| `react-glide-table/compound` | `createTable` / `Table` / `DataTable` + related types    |
+| `react-glide-table/core`     | `useGlideTable` + feature hooks/helpers (no compound UI) |
 
 ## Quick start (compound)
 
 ```tsx
-import { createTable } from "react-glide-table/compound"
-import { useState } from "react"
+import { createTable } from "react-glide-table/compound";
+import { useState } from "react";
 
-type Product = { id: string; name: string; qty: number }
+type Product = { id: string; name: string; qty: number };
 
-const ProductTable = createTable<Product>()
+const ProductTable = createTable<Product>();
 
 export function Products({ data }: { data: Product[] }) {
-  const [page, setPage] = useState(1)
+  const [page, setPage] = useState(1);
 
   return (
     <ProductTable
@@ -59,26 +59,26 @@ export function Products({ data }: { data: Product[] }) {
       </ProductTable.Header>
       <ProductTable.Pagination page={page} pageSize={10} onChange={setPage} />
     </ProductTable>
-  )
+  );
 }
 ```
 
 ### Customization surface
 
-| Slot / prop | Role |
-| --- | --- |
-| `classNames` | Per-part Tailwind/utility classes (`root`, `scroll`, `row`, `cell`, `toolbar`, …) |
-| `slots.Toolbar` | Top summary / actions region |
-| `slots.Row` | Full row replacement (cells, selection, edit UI) |
-| `slots.Pending` / `slots.Empty` | Loading and empty states |
-| `className` / column `className` / `headerClassName` | Extra class hooks |
-| `labels` / `summary` / `toolbar` | Copy and slot nodes |
-| `Column.render` | Cell content custom render |
+| Slot / prop                                          | Role                                                                              |
+| ---------------------------------------------------- | --------------------------------------------------------------------------------- |
+| `classNames`                                         | Per-part Tailwind/utility classes (`root`, `scroll`, `row`, `cell`, `toolbar`, …) |
+| `slots.Toolbar`                                      | Top summary / actions region                                                      |
+| `slots.Row`                                          | Full row replacement (cells, selection, edit UI)                                  |
+| `slots.Pending` / `slots.Empty`                      | Loading and empty states                                                          |
+| `className` / column `className` / `headerClassName` | Extra class hooks                                                                 |
+| `labels` / `summary` / `toolbar`                     | Copy and slot nodes                                                               |
+| `Column.render`                                      | Cell content custom render                                                        |
 
 Row/cell **state** is exposed as `data-*` attributes for Tailwind variants:
 
 - row: `data-selected`, `data-hovered`, `data-expandable`, `data-expanded`
-- cell: `data-merged`, `data-selection-fill`, `data-editable`, `data-editing`, …
+- cell: `data-merged`, `data-selection-fill`, `data-editable`, `data-editing`, `data-frozen`, …
 
 Example: `row: "data-[selected]:bg-blue-600"`.
 
@@ -87,16 +87,16 @@ Row-level UI → `slots.Row`. Cell content → `Column.render`. Header/Cell are
 ## Escape hatch (`useGlideTable`)
 
 ```tsx
-import { flexRender } from "@tanstack/react-table"
-import { useGlideTable } from "react-glide-table/core"
-import type { ColumnDef } from "react-glide-table/core"
+import { flexRender } from "@tanstack/react-table";
+import { useGlideTable } from "react-glide-table/core";
+import type { ColumnDef } from "react-glide-table/core";
 
-type Product = { id: string; name: string; qty: number }
+type Product = { id: string; name: string; qty: number };
 
 const columns: ColumnDef<Product, unknown>[] = [
   { accessorKey: "name", header: "Name" },
   { accessorKey: "qty", header: "Qty" },
-]
+];
 
 export function ProductTable({ data }: { data: Product[] }) {
   const { table, rows, scrollRef } = useGlideTable({
@@ -104,7 +104,7 @@ export function ProductTable({ data }: { data: Product[] }) {
     columns,
     getRowId: (row) => row.id,
     rowSelectionMode: "multi",
-  })
+  });
 
   return (
     <div ref={scrollRef}>
@@ -116,7 +116,10 @@ export function ProductTable({ data }: { data: Product[] }) {
                 <th key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(header.column.columnDef.header, header.getContext())}
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
                 </th>
               ))}
             </tr>
@@ -135,7 +138,7 @@ export function ProductTable({ data }: { data: Product[] }) {
         </tbody>
       </table>
     </div>
-  )
+  );
 }
 ```
 
@@ -145,17 +148,17 @@ Wire `rowContextValue` into your own row/cell components for edit, selection, ex
 
 Cell selection ships with clipboard shortcuts. The table parses TSV and emits structured payloads; **your app applies domain conversion and updates data**.
 
-| Shortcut | Behavior |
-| --- | --- |
-| Ctrl/Cmd+C | Copy the active selection (visible rows) |
-| Ctrl/Cmd+Shift+C | Copy including collapsed tree descendants (`enableSubtreeCopy`) |
-| Ctrl/Cmd+V | Paste **overwrite** into the selection (`onRowsPaste`, `mode: "overwrite"`) |
+| Shortcut         | Behavior                                                                               |
+| ---------------- | -------------------------------------------------------------------------------------- |
+| Ctrl/Cmd+C       | Copy the active selection (visible rows)                                               |
+| Ctrl/Cmd+Shift+C | Copy including collapsed tree descendants (`enableSubtreeCopy`)                        |
+| Ctrl/Cmd+V       | Paste **overwrite** into the selection (`onRowsPaste`, `mode: "overwrite"`)            |
 | Ctrl/Cmd+Shift+V | Paste **insert** rows after the selection (`mode: "insert"`, when `enableInsertPaste`) |
 
 Subtree copy encodes relative tree depth as leading tabs in the TSV so paste can rebuild parent/child nesting via `payload.depths`. Depth is only inferred when the clipboard looks like subtree indentation (first row unindented, at least one later row indented). Otherwise leading empty cells are kept as real values (e.g. Excel/Sheets blank first column) and `depths` stay `0`.
 
 ```tsx
-import type { RowsPastePayload } from "react-glide-table/compound"
+import type { RowsPastePayload } from "react-glide-table/compound";
 
 <ProductTable
   data={data}
@@ -164,27 +167,88 @@ import type { RowsPastePayload } from "react-glide-table/compound"
   onRowsPaste={(payload: RowsPastePayload) => {
     // overwrite: update cells from startRow using payload.values / columnIds
     // insert: create rows after payload.endRow (or payload.anchorRowId for trees)
-    setData((prev) => applyMyPaste(prev, payload))
+    setData((prev) => applyMyPaste(prev, payload));
   }}
 >
   {/* columns… */}
-</ProductTable>
+</ProductTable>;
 ```
 
 Related props: `onRowsPaste`, `enableInsertPaste`, `enableSubtreeCopy`, `onCopyActionsReady`.  
 Helpers (`/core`): `buildRowsPastePayload`, `parseClipboardTSV`, `parseClipboardTSVWithDepths`, `serializeSelectionToTSV`, …
 
+## Column resize
+
+Opt in with `enableColumnResize`. Drag the handle on the right edge of a header cell; double-click resets to the column’s default `width` / `size`.
+
+```tsx
+<ProductTable
+  data={data}
+  enableColumnResize
+  // optional controlled sizing
+  // columnSizing={sizing}
+  // onColumnSizingChange={setSizing}
+>
+  <ProductTable.Header>
+    <ProductTable.Column field="name" width={200} minWidth={80} maxWidth={480}>
+      Name
+    </ProductTable.Column>
+    <ProductTable.Column field="sku" resizable={false}>
+      SKU
+    </ProductTable.Column>
+  </ProductTable.Header>
+</ProductTable>
+```
+
+| Prop                                     | Role                                         |
+| ---------------------------------------- | -------------------------------------------- |
+| `enableColumnResize`                     | Turn on header drag resize (default `false`) |
+| `columnSizing` / `onColumnSizingChange`  | Controlled width map `{ [columnId]: px }`    |
+| `columnResizeMode`                       | `"onChange"` (live) or `"onEnd"`             |
+| `Column.width` / `minWidth` / `maxWidth` | Default / clamp sizes                        |
+| `Column.resizable={false}`               | Disable resize for one column                |
+| `classNames.resizeHandle`                | Style hook for the drag handle               |
+
+## Column freeze
+
+Opt in with `enableColumnFreeze`. Mark columns with `frozen` — sticky insets are stacked so frozen cells never overlap, and **column order is unchanged** (middle columns may also freeze).
+
+```tsx
+<ProductTable data={data} enableColumnFreeze>
+  <ProductTable.Header>
+    <ProductTable.Column field="name" frozen width={200}>
+      Name
+    </ProductTable.Column>
+    <ProductTable.Column field="sku">SKU</ProductTable.Column>
+    <ProductTable.Column field="qty" frozen="left">
+      Qty
+    </ProductTable.Column>
+    <ProductTable.Column field="status" frozen="right">
+      Status
+    </ProductTable.Column>
+  </ProductTable.Header>
+</ProductTable>
+```
+
+| Prop                               | Role                                    |
+| ---------------------------------- | --------------------------------------- |
+| `enableColumnFreeze`               | Turn on sticky freeze (default `false`) |
+| `Column.frozen` / `meta.frozen`    | `true` / `"left"` or `"right"`          |
+| `data-frozen` / `data-freeze-edge` | State hooks for custom styling          |
+
+Helpers (`/core`): `buildColumnFreezeOffsets`, `getColumnFreezeStyle`, `resolveColumnFreezeSide`.
+
 ## Public API
 
-| Export | Path | Role |
-| --- | --- | --- |
-| `createTable` / `Table` | `/compound` | Compound column DSL (`Header` / `Column` / `Body` / `Pagination`) |
-| `DataTable` | `/compound` | Unstyled default renderer (semantic HTML + slots/props) |
-| `useGlideTable` | `/core` | Headless engine escape hatch |
-| `useCellEdit` / `useCellSelection` / `useConvertTreeData` | `/core` | Feature hooks |
-| `applyCellEdit`, `applyFillData`, `buildRowsPastePayload`, `buildColumnRowSpanMap`, … | `/core` | Pure helpers |
-| `DEFAULT_DATA_TABLE_LABELS` / `resolveDataTableLabels` | `/core` | Optional English UI copy helpers |
-| Tree field defaults | `/core` | `id` / `parentId` / `children` / `qty` |
+| Export                                                                                | Path        | Role                                                              |
+| ------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------- |
+| `createTable` / `Table`                                                               | `/compound` | Compound column DSL (`Header` / `Column` / `Body` / `Pagination`) |
+| `DataTable`                                                                           | `/compound` | Unstyled default renderer (semantic HTML + slots/props)           |
+| `useGlideTable`                                                                       | `/core`     | Headless engine escape hatch                                      |
+| `useCellEdit` / `useCellSelection` / `useConvertTreeData`                             | `/core`     | Feature hooks                                                     |
+| `applyCellEdit`, `applyFillData`, `buildRowsPastePayload`, `buildColumnRowSpanMap`, … | `/core`     | Pure helpers                                                      |
+| `DEFAULT_DATA_TABLE_LABELS` / `resolveDataTableLabels`                                | `/core`     | Optional English UI copy helpers                                  |
+| Tree field defaults                                                                   | `/core`     | `id` / `parentId` / `children` / `qty`                            |
 
 Root `react-glide-table` re-exports both surfaces. Related types: `TableProps`, `TableColumnProps`, `DataTableProps`, `DataTableSlots`, `TableCompoundComponent`, `ColumnDef`, `RowsPastePayload`, `PasteMode`, …
 
@@ -192,7 +256,7 @@ Root `react-glide-table` re-exports both surfaces. Related types: `TableProps`,
 
 - **Row span + virtualization**: when `enableRowSpan` is on, virtualization is forced off (HTML `<table>` + `rowspan` cannot safely share a virtual window).
 - **Paste is app-owned**: the library does not mutate `data` on paste — handle `onRowsPaste` (coerce types, ids, tree shape, row-span keys).
-- **Flat tree parent order**: `useConvertTreeData` attaches each child to the nearest *preceding* row whose toggle key matches `parentId` (duplicate keys after paste resolve this way). Flat inputs must list parents before their children; a child whose parent appears later becomes a root. Nested `children` arrays are flattened parent-before-child automatically.
+- **Flat tree parent order**: `useConvertTreeData` attaches each child to the nearest _preceding_ row whose toggle key matches `parentId` (duplicate keys after paste resolve this way). Flat inputs must list parents before their children; a child whose parent appears later becomes a root. Nested `children` arrays are flattened parent-before-child automatically.
 - **No shipped CSS**: the default renderer emits class hooks only. Bring your own styles (see playground for a CSS-skinned example).
 
 ## Local playground

package/dist/compound.cjs

@@ -45,6 +45,9 @@ var ROW_HOVERED_BG_CLASS = "row-hovered";
 var CELL_SELECTION_FILL_CLASS = "cell-selection-fill";
 var DATA_TABLE_ROW_HEIGHT = 44;
 var DATA_TABLE_VIRTUAL_OVERSCAN = 8;
+var DATA_TABLE_COLUMN_SIZE = 150;
+var DATA_TABLE_COLUMN_MIN_SIZE = 40;
+var DATA_TABLE_COLUMN_MAX_SIZE = 800;
 
 // src/components/ui/table/DataTableContext.tsx
 var import_react = require("react");
@@ -385,6 +388,81 @@ function hasCellSelectionEdges(style) {
   );
 }
 
+// src/components/ui/table/features/column-freeze/columnFreeze.ts
+var HEADER_Z_BASE = 30;
+var BODY_Z_BASE = 5;
+function resolveColumnFreezeSide(frozen) {
+  if (frozen === true || frozen === "left") return "left";
+  if (frozen === "right") return "right";
+  return void 0;
+}
+function buildColumnFreezeOffsets(columns) {
+  const result = /* @__PURE__ */ new Map();
+  let leftOffset = 0;
+  const leftIds = [];
+  for (const column of columns) {
+    if (column.side !== "left") continue;
+    leftIds.push(column.id);
+    result.set(column.id, {
+      side: "left",
+      offset: leftOffset,
+      isEdge: false,
+      stack: 0
+    });
+    leftOffset += column.size;
+  }
+  leftIds.forEach((id, index) => {
+    const entry = result.get(id);
+    if (!entry) return;
+    entry.isEdge = index === leftIds.length - 1;
+    entry.stack = leftIds.length - index;
+  });
+  let rightOffset = 0;
+  const rightIds = [];
+  for (let index = columns.length - 1; index >= 0; index -= 1) {
+    const column = columns[index];
+    if (!column || column.side !== "right") continue;
+    rightIds.push(column.id);
+    result.set(column.id, {
+      side: "right",
+      offset: rightOffset,
+      isEdge: false,
+      stack: 0
+    });
+    rightOffset += column.size;
+  }
+  rightIds.forEach((id, index) => {
+    const entry = result.get(id);
+    if (!entry) return;
+    entry.isEdge = index === rightIds.length - 1;
+    entry.stack = rightIds.length - index;
+  });
+  return result;
+}
+function getColumnFreezeStyle(offset, options) {
+  if (!offset) return void 0;
+  const zBase = options?.isHeader ? HEADER_Z_BASE : BODY_Z_BASE;
+  return {
+    position: "sticky",
+    ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
+    zIndex: zBase + offset.stack,
+    ...options?.isHeader ? { top: 0 } : {}
+  };
+}
+
+// src/components/ui/table/features/column-resize/columnResize.ts
+function getColumnSizeStyle(size, options) {
+  const { force = false, lockMax = false } = options ?? {};
+  if (!force && size === DATA_TABLE_COLUMN_SIZE) {
+    return void 0;
+  }
+  return {
+    width: size,
+    minWidth: size,
+    ...lockMax ? { maxWidth: size } : {}
+  };
+}
+
 // src/components/ui/table/features/row-expand/row-expand.ts
 var import_react2 = require("react");
 
@@ -822,7 +900,18 @@ function DataTableRow({
   virtualIndex,
   measureElement
 }) {
-  const { classNames, rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
+  const {
+    classNames,
+    rowSpan,
+    selection,
+    cellSelection,
+    cellEdit,
+    expand,
+    columnResize,
+    columnFreeze
+  } = useDataTableRowContext();
+  const { enableColumnResize } = columnResize;
+  const { enableColumnFreeze, offsets: freezeOffsets } = columnFreeze;
   const {
     enableRowSpan,
     primaryRowSpanColumnId,
@@ -1003,6 +1092,17 @@ function DataTableRow({
         );
         const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
         const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
+        const sizeStyle = getColumnSizeStyle(cell.column.getSize(), {
+          force: enableColumnResize,
+          lockMax: enableColumnResize
+        });
+        const freezeOffset = enableColumnFreeze ? freezeOffsets.get(columnId) : void 0;
+        const freezeStyle = getColumnFreezeStyle(freezeOffset);
+        const cellStyle = {
+          ...sizeStyle,
+          ...freezeStyle,
+          ...selectionEdgeStyle
+        };
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "td",
           {
@@ -1016,6 +1116,8 @@ function DataTableRow({
             "data-selection-edges": hasSelectionEdges ? "" : void 0,
             "data-editable": editable ? "" : void 0,
             "data-editing": isEditing ? "" : void 0,
+            "data-frozen": freezeOffset?.side,
+            "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
             onMouseDown: (event) => {
               if (isEditing) {
                 event.stopPropagation();
@@ -1050,9 +1152,10 @@ function DataTableRow({
               event.stopPropagation();
               onStartEdit(rowIndex, cellIndex);
             },
-            style: selectionEdgeStyle,
+            style: Object.keys(cellStyle).length > 0 ? cellStyle : void 0,
             className: cn(
               "data-table-cell",
+              freezeOffset && `data-table-cell--frozen-${freezeOffset.side}`,
               CELL_ALIGN_CLASS[align],
               cellClassName,
               isMerged && "is-merged",
@@ -1803,7 +1906,8 @@ var DEFAULT_DATA_TABLE_LABELS = {
   loading: "Loading...",
   selection: (selectedCount) => selectedCount > 0 ? `\u2713 ${selectedCount} selected` : null,
   expandRow: "Expand row",
-  collapseRow: "Collapse row"
+  collapseRow: "Collapse row",
+  resizeColumn: "Resize column"
 };
 function resolveDataTableLabels(partial) {
   return {
@@ -1813,6 +1917,7 @@ function resolveDataTableLabels(partial) {
 }
 
 // src/core/useGlideTable.ts
+var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
 function useGlideTable(options) {
   const {
     data,
@@ -1848,7 +1953,12 @@ function useGlideTable(options) {
     enableInsertPaste,
     enableVirtualization = true,
     estimateRowHeight = DATA_TABLE_ROW_HEIGHT,
-    virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN
+    virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN,
+    enableColumnResize = false,
+    columnSizing: controlledColumnSizing,
+    onColumnSizingChange,
+    columnResizeMode = "onChange",
+    enableColumnFreeze = false
   } = options;
   const labels = (0, import_react6.useMemo)(() => {
     const resolved = resolveDataTableLabels(labelsProp);
@@ -1862,6 +1972,7 @@ function useGlideTable(options) {
   const enableExpand = Boolean(toggleField);
   const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
   const [internalRowSelection, setInternalRowSelection] = (0, import_react6.useState)({});
+  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react6.useState)({});
   const [internalExpandedRows, setInternalExpandedRows] = (0, import_react6.useState)(
     () => /* @__PURE__ */ new Set()
   );
@@ -1880,6 +1991,7 @@ function useGlideTable(options) {
     controlledRowSelection,
     internalRowSelection
   );
+  const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
   const handleExpandedRowsChange = (0, import_react6.useCallback)(
     (next) => {
@@ -1905,9 +2017,27 @@ function useGlideTable(options) {
   const table = (0, import_react_table2.useReactTable)({
     data: tableData,
     columns,
+    ...enableColumnResize ? {
+      defaultColumn: {
+        minSize: DATA_TABLE_COLUMN_MIN_SIZE,
+        maxSize: DATA_TABLE_COLUMN_MAX_SIZE
+      }
+    } : {},
+    enableColumnResizing: enableColumnResize,
+    columnResizeMode,
     state: {
-      rowSelection: rowSelectionMode === "none" ? {} : rowSelection
+      rowSelection: rowSelectionMode === "none" ? {} : rowSelection,
+      ...enableColumnResize ? { columnSizing } : {}
     },
+    onColumnSizingChange: enableColumnResize ? (updater) => {
+      if (onColumnSizingChange) {
+        onColumnSizingChange(updater);
+        return;
+      }
+      setInternalColumnSizing(
+        (previous) => typeof updater === "function" ? updater(previous) : updater
+      );
+    } : void 0,
     enableRowSelection: rowSelectionMode === "none" ? false : getRowCanSelect ? (row) => getRowCanSelect(row.original, row.index) : true,
     enableMultiRowSelection: rowSelectionMode === "multi",
     onRowSelectionChange: (updater) => {
@@ -1938,6 +2068,17 @@ function useGlideTable(options) {
   const selectedCount = selectedRows.length;
   const rows = table.getRowModel().rows;
   const columnCount = table.getAllLeafColumns().length || 1;
+  const visibleLeafColumns = table.getVisibleLeafColumns();
+  const columnFreezeOffsets = (0, import_react6.useMemo)(() => {
+    if (!enableColumnFreeze) return EMPTY_COLUMN_FREEZE_OFFSETS;
+    return buildColumnFreezeOffsets(
+      visibleLeafColumns.map((column) => ({
+        id: column.id,
+        size: column.getSize(),
+        side: resolveColumnFreezeSide(column.columnDef.meta?.frozen)
+      }))
+    );
+  }, [enableColumnFreeze, visibleLeafColumns, columnSizing]);
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: shouldVirtualize ? rows.length : 0,
     getScrollElement: () => scrollRef.current,
@@ -2054,6 +2195,13 @@ function useGlideTable(options) {
         onToggleExpand: handleToggleExpand,
         expandRowLabel: labels.expandRow,
         collapseRowLabel: labels.collapseRow
+      },
+      columnResize: {
+        enableColumnResize
+      },
+      columnFreeze: {
+        enableColumnFreeze,
+        offsets: columnFreezeOffsets
       }
     };
   }, [
@@ -2086,7 +2234,10 @@ function useGlideTable(options) {
     preventExpand,
     handleToggleExpand,
     labels.expandRow,
-    labels.collapseRow
+    labels.collapseRow,
+    enableColumnResize,
+    enableColumnFreeze,
+    columnFreezeOffsets
   ]);
   const copySelectionRef = (0, import_react6.useRef)(copySelection);
   (0, import_react6.useEffect)(() => {
@@ -2107,6 +2258,8 @@ function useGlideTable(options) {
     loadingText: labels.loading,
     selectionLabel: labels.selection,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -2172,10 +2325,13 @@ function DataTable({
     rows,
     columnCount,
     selectedCount,
+    labels,
     emptyText,
     loadingText,
     selectionLabel,
     enableCellSelection,
+    enableColumnResize,
+    enableColumnFreeze,
     shouldVirtualize,
     scrollRef,
     rowVirtualizer,
@@ -2190,6 +2346,7 @@ function DataTable({
   const RowSlot = slots?.Row ?? DataTableRow;
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
+  const freezeOffsets = rowContextValue.columnFreeze.offsets;
   const contextValue = (0, import_react7.useMemo)(
     () => ({ ...rowContextValue, classNames }),
     [rowContextValue, classNames]
@@ -2210,6 +2367,8 @@ function DataTable({
       className: cn(
         "DataTableJSX",
         !enableCellSelection && "DataTableJSX--no-cell-selection",
+        enableColumnResize && "DataTableJSX--column-resize",
+        enableColumnFreeze && "DataTableJSX--column-freeze",
         classNames?.root,
         className
       ),
@@ -2230,6 +2389,7 @@ function DataTable({
           "table",
           {
             className: cn("data-table", classNames?.table),
+            style: enableColumnResize ? { width: table.getTotalSize() } : void 0,
             onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -2239,22 +2399,54 @@ function DataTable({
                   children: headerGroup.headers.map((header) => {
                     const align = header.column.columnDef.meta?.align ?? "center";
                     const headerClassName = header.column.columnDef.meta?.headerClassName;
-                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    const canResize = enableColumnResize && header.column.getCanResize();
+                    const sizeStyle = getColumnSizeStyle(header.getSize(), {
+                      force: enableColumnResize,
+                      lockMax: enableColumnResize
+                    });
+                    const freezeOffset = enableColumnFreeze ? freezeOffsets.get(header.column.id) : void 0;
+                    const freezeStyle = getColumnFreezeStyle(freezeOffset, {
+                      isHeader: true
+                    });
+                    const headerStyle = {
+                      ...sizeStyle,
+                      ...freezeStyle
+                    };
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                       "th",
                       {
-                        style: {
-                          width: header.getSize() !== 150 ? header.getSize() : void 0,
-                          // Column sizing follows TanStack's `size`, but
-                          // ensure the column keeps its min width when the container shrinks.
-                          minWidth: header.getSize() !== 150 ? header.getSize() : void 0
-                        },
+                        "data-resizing": header.column.getIsResizing() ? "" : void 0,
+                        "data-frozen": freezeOffset?.side,
+                        "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
+                        style: Object.keys(headerStyle).length > 0 ? headerStyle : void 0,
                         className: cn(
                           "data-table-head-cell",
+                          freezeOffset && `data-table-head-cell--frozen-${freezeOffset.side}`,
                           CELL_ALIGN_CLASS[align],
                           classNames?.headCell,
                           headerClassName
                         ),
-                        children: header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext())
+                        children: [
+                          header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext()),
+                          canResize ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            "div",
+                            {
+                              role: "separator",
+                              "aria-orientation": "vertical",
+                              "aria-label": labels.resizeColumn,
+                              "data-table-disable-cell-selection": "",
+                              className: cn(
+                                "data-table-resize-handle",
+                                classNames?.resizeHandle
+                              ),
+                              onMouseDown: header.getResizeHandler(),
+                              onTouchStart: header.getResizeHandler(),
+                              onDoubleClick: () => {
+                                header.column.resetSize();
+                              }
+                            }
+                          ) : null
+                        ]
                       },
                       header.id
                     );
@@ -2382,6 +2574,10 @@ function buildColumnDef(props, sort, onSort) {
     children,
     sortable = false,
     width,
+    minWidth,
+    maxWidth,
+    resizable,
+    frozen,
     align,
     rowSpan,
     rowSpanKey,
@@ -2395,7 +2591,10 @@ function buildColumnDef(props, sort, onSort) {
   return {
     id: field,
     ...!virtual ? { accessorKey: field } : {},
-    size: width ?? 150,
+    size: width ?? DATA_TABLE_COLUMN_SIZE,
+    ...minWidth != null ? { minSize: minWidth } : {},
+    ...maxWidth != null ? { maxSize: maxWidth } : {},
+    ...resizable === false ? { enableResizing: false } : {},
     header: sortable ? () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SortableHeader, { label: children, field, sort, onSort }) : (
       // eslint-disable-next-line @typescript-eslint/promise-function-async
       () => children
@@ -2415,6 +2614,7 @@ function buildColumnDef(props, sort, onSort) {
       editable,
       editType,
       editInputProps,
+      frozen,
       className,
       headerClassName
     }

package/dist/compound.d.cts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { d as DataTableProps, T as TableColumnProps, g as TableProps } from './types-xxzMLUwM.cjs';
-export { a as DataTableClassNames, c as DataTableLabels, e as DataTableSlots, P as PasteMode, R as RowSelectionMode, f as RowsPastePayload } from './types-xxzMLUwM.cjs';
-export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
+import { g as DataTableProps, T as TableColumnProps, j as TableProps } from './types-D031_07N.cjs';
+export { a as ColumnFreezeMeta, c as ColumnFreezeSide, d as DataTableClassNames, f as DataTableLabels, h as DataTableSlots, P as PasteMode, R as RowSelectionMode, i as RowsPastePayload } from './types-D031_07N.cjs';
+export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**
  * Unstyled DataTable shell: semantic HTML + interaction behavior.