react-glide-table 1.7.0 → 2.0.2

package/README.md

@@ -74,7 +74,8 @@ export function Products({ data }: { data: Product[] }) {
 | `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                                                        |
+| `Column.render` / `ColumnDef.cell`                   | Cell content custom render (prefer `update` via context)                          |
+| `Column.kind` / `cellRenderers`                      | Built-in or custom cell kinds (override / add via registry)                       |
 
 Row/cell **state** is exposed as `data-*` attributes for Tailwind variants:
 
@@ -83,10 +84,77 @@ Row/cell **state** is exposed as `data-*` attributes for Tailwind variants:
 
 Example: `row: "data-[selected]:bg-blue-600"`.
 
-Row-level UI → `slots.Row`. Cell content → `Column.render`. Header/Cell are not separate slots.
+Row-level UI → `slots.Row`. Cell content → `Column.render` or `Column.kind`. Header/Cell are not separate slots.
 
 `slots.Scroll` receives `{ scrollRef, className, children }`. Attach `scrollRef` to the element that owns overflow scrolling — virtualization depends on it. Styling-only changes can stay on `classNames.scroll`.
 
+### Cell render context (`Column.render`)
+
+**Breaking change (v2.0.0):** `render` receives one context object (not positional args). Destructure only what you need.
+
+```tsx
+<ProductTable.Column
+  field="status"
+  render={({ value, update }) => (
+    <button type="button" onClick={() => update("done")}>
+      {String(value)}
+    </button>
+  )}
+/>
+```
+
+`update` commits through `onCellChange` (preferred) or `onDataChange`. Prefer `update` over calling `setData` inside the render.
+
+The same `update` is available on TanStack `ColumnDef.cell` when using `DataTable` directly (or `useGlideTable().getCellContext` with `flexRender`). Bare `cell.getContext()` does **not** include `update` at runtime — only the wrapped context does (`CellContextWithUpdate`).
+
+```tsx
+const columns: ColumnDef<Product, unknown>[] = [
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ getValue, update }) => (
+      <button type="button" onClick={() => update?.("done")}>
+        {String(getValue())}
+      </button>
+    ),
+  },
+];
+
+<DataTable data={data} columns={columns} onCellChange={...} />
+```
+
+Double-click inline editing (`editable` / `editType`) stays separate: use it for overlay text/number edits; use `render` / `cell` + `update` for always-visible controls.
+
+### Cell kinds (`Column.kind` + `cellRenderers`)
+
+Built-ins (DOM, inspired by [Glide All Cell Kinds](https://glideapps.github.io/glide-data-grid/?path=/story/glide-data-grid-dataeditor-demos--all-cell-kinds)):
+`text`, `number`, `boolean`, `uri`, `image`, `bubble`, `markdown`, `drilldown`, `loading`, `protected`, `row-id`.
+
+Priority: **column `render` > registry `kind` > default text**.
+
+```tsx
+const buttonRenderer = {
+  kind: "my-button",
+  render: ({ value, update }) => (
+    <button type="button" onClick={() => update("done")}>
+      {String(value)}
+    </button>
+  ),
+};
+
+<ProductTable cellRenderers={[buttonRenderer]}>
+  <ProductTable.Header>
+    <ProductTable.Column field="active" kind="boolean">
+      Active
+    </ProductTable.Column>
+    <ProductTable.Column field="action" kind="my-button">
+      Action
+    </ProductTable.Column>
+  </ProductTable.Header>
+</ProductTable>
+```
+
+Same `kind` in `cellRenderers` overrides the builtin. Extra kinds are added by key.
 ## Escape hatch (`useGlideTable`)
 
 ```tsx
@@ -98,15 +166,26 @@ type Product = { id: string; name: string; qty: number };
 
 const columns: ColumnDef<Product, unknown>[] = [
   { accessorKey: "name", header: "Name" },
-  { accessorKey: "qty", header: "Qty" },
+  {
+    accessorKey: "qty",
+    header: "Qty",
+    cell: ({ getValue, update }) => (
+      <button type="button" onClick={() => update?.(Number(getValue()) + 1)}>
+        {String(getValue())}
+      </button>
+    ),
+  },
 ];
 
 export function ProductTable({ data }: { data: Product[] }) {
-  const { table, rows, scrollRef } = useGlideTable({
+  const { table, rows, scrollRef, getCellContext } = useGlideTable({
     data,
     columns,
     getRowId: (row) => row.id,
     rowSelectionMode: "multi",
+    onCellChange: (rowId, columnId, value) => {
+      /* update your data */
+    },
   });
 
   return (
@@ -133,7 +212,7 @@ export function ProductTable({ data }: { data: Product[] }) {
             <tr key={row.id}>
               {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  {flexRender(cell.column.columnDef.cell, getCellContext(cell))}
                 </td>
               ))}
             </tr>
@@ -145,7 +224,7 @@ export function ProductTable({ data }: { data: Product[] }) {
 }
 ```
 
-Wire `rowContextValue` into your own row/cell components for edit, selection, expand, and row-span behavior.
+Wire `rowContextValue` into your own row/cell components for edit, selection, expand, and row-span behavior. Use `getCellContext(cell)` (not bare `cell.getContext()`) so `ColumnDef.cell` receives `update`.
 
 ## Clipboard copy & paste
 
@@ -216,6 +295,8 @@ Opt in with `enableColumnResize`. Drag the handle on the right edge of a header
 
 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).
 
+Keep vertical stickiness on the header via `classNames.head` (e.g. `sticky top-0`). Frozen header cells only stick horizontally (`left` / `right`); setting `top` on both `thead` and frozen `th` can detach the freeze band.
+
 ```tsx
 <ProductTable data={data} enableColumnFreeze>
   <ProductTable.Header>