@jielga/tmdatagrid 2.0.0 → 2.1.0

package/skills/rows/references/rows-api.md

@@ -6,7 +6,7 @@ Reference for the `rows` skill.
 
 | Name | Kind | Type | Default | What it does |
 | --- | --- | --- | --- | --- |
-| `selectionMode` | Option | `"checkbox" \| "row" \| "checkboxAndHighlight" \| "highlight"` | `"checkbox"` | What selecting looks like and what a row click does. |
+| `selectionMode` | Option | `TMDataGridSelectionMode`: `"checkbox" \| "row" \| "checkboxAndHighlight" \| "highlight"` | `"checkbox"` | What selecting looks like and what a row click does. |
 | `enableRowSelection` | Table option | `boolean \| ((row) => boolean)` | `true` | `false` removes the checkbox column and row-click selection. |
 | `enableMultiRowSelection` | Table option | `boolean` | `true` | `false` limits the selection to one row and drops group checkboxes. |
 | `showSelectedBackground` | Option | `boolean` | Follows the mode | Whether selected rows take a background tint. |
@@ -14,7 +14,8 @@ Reference for the `rows` skill.
 | `onHighlightedRowChange` | Callback | `(rowId: string \| null) => void` | – | Fires when the highlight moves. |
 | `SELECT_COLUMN_ID` | Export | `"__select__"` | – | Id of the generated checkbox column. |
 | `getSelectableRowIds` | Export | `(table) => string[]` | – | Ids the header checkbox would select. |
-| `resolveRowSelectionClick` | Export | `(args) => ResolvedRowSelection` | – | The desktop-list click rules, for a custom surface. |
+| `resolveRowSelectionClick` | Export | `(args: ResolveRowSelectionClickArgs) => ResolvedRowSelection` | – | The desktop-list click rules, for a custom surface. |
+| `ResolveRowSelectionClickArgs` · `TMDataGridRowClickModifiers` | Types | `{ rows, rowId, anchorRowId, modifiers, selection }` · `{ toggle, extend }` | – | What `resolveRowSelectionClick` takes, and its `modifiers`. |
 | `getDisplayedRows` | Export | `(table) => Row[]` | – | The rows currently on screen, paging respected. |
 | `isPagingActive` | Export | `(table) => boolean` | – | Whether a pager is in play. |
 
@@ -31,11 +32,13 @@ All are props of `TMDataGrid.Table`, not hook options.
 | `onCellClick` | `(args) => void` | Cell click. `args` is `TMDataGridCellEventArgs`. |
 | `onCellDoubleClick` | `(args) => void` | Cell double-click. |
 | `onCellContextMenu` | `(args) => void` | Cell right-click. |
-| `renderRowContextMenu` | `({ table, row, cell, close, internalItems }) => ReactNode` | Contents of the row's context menu. `null` for no menu. Reading `internalItems` hands the composition over. |
-| `renderColumnMenuItems` | `({ column, table, internalItems }) => ReactNode[]` | Contents of a column's menu. An empty list removes the button. |
+| `renderRowContextMenu` | `TMDataGridRowContextMenuRenderer`: `(args: TMDataGridRowContextMenuArgs) => ReactNode` | Contents of the row's context menu. `null` for no menu. Reading `internalItems` hands the composition over. |
+| `renderColumnMenuItems` | `TMDataGridColumnMenuItemsRenderer`: `(args: TMDataGridColumnMenuItemsArgs) => ReactNode[]` | Contents of a column's menu. An empty list removes the button. |
 | `rowContextMenuProps` | `MenuProps` | Passed to the Mantine `Menu` unchanged, apart from its open state. |
 
-`TMDataGridCellEventArgs` is `{ cell, row, column, event }`. The context-menu
+`TMDataGridCellEventArgs` is `{ cell, row, column, event }`.
+`TMDataGridRowContextMenuArgs` is `{ table, row, cell, close, internalItems }`,
+and `TMDataGridColumnMenuItemsArgs` is `{ column, table, internalItems }`. The context-menu
 slot's `cell` is `null` only when a custom cell renderer stopped the
 event. One `Menu` serves the whole body rather than one per row: a closed
 Mantine `Popover` still runs its hooks on every render, and the virtualized body
@@ -76,13 +79,15 @@ Row data attributes:
 
 | Name | Kind | Type | Default | What it does |
 | --- | --- | --- | --- | --- |
-| `renderDetails` | Option | `({ row, table }) => ReactNode` | – | Contents of the panel. Setting it adds the lane. |
+| `renderDetails` | Option | `TMDataGridDetailsRenderer`: `(args: TMDataGridDetailsArgs) => ReactNode` | – | Contents of the panel. Setting it adds the lane. `TMDataGridDetailsArgs` is `{ row, table }`. |
 | `renderDetailsEstHeight` | Option | `number` | `160` | Height the virtualizer assumes for an unmeasured panel. |
+| `detailsColumnPosition` | Option | `"left" \| "right"` | `"left"` | Which edge the lane is pinned to. `"right"` places it after every column, inside the edit lane. |
 | `initialState.expanded` | Table option | `ExpandedState` | `{}` | Rows open at mount. A `data` slice, so it persists. |
-| `autoResetExpanded` | Table option | `boolean` | `true` | `false` keeps panels open when `data` changes. |
+| `autoResetExpanded` | Table option | `boolean` | `false` | `true` closes the panels when the `data` array changes. Off by default, so a draft commit keeps them open. |
 | `DETAILS_COLUMN_ID` | Export | `"__details__"` | – | Id of the generated chevron column. |
 | `resolveExpandAll` | Export | `(args) => ExpandedState` | – | Expand or collapse every group, or every panel, but not both. |
 | `areAllRowsExpanded` | Export | `(args) => boolean` | – | Whether every row of one target is open. |
+| `TMDataGridExpandAllArgs` · `TMDataGridExpandTarget` | Types | `{ rows, expanded, target }` · `"groups" \| "details"` | – | What `areAllRowsExpanded` takes (`resolveExpandAll` also takes `expand`), and its `target`. |
 | `data-dg-part="details"` | Data attribute | – | – | The panel element, carrying the row's `data-row-id`. |
 
 One `expanded` state opens two unrelated things - a group row into its children,
@@ -115,4 +120,5 @@ table.setExpanded(
 | `ROW_NUMBER_COLUMN_ID` | Export | `"__rowNumber__"` | – | Id of the generated number gutter. |
 
 Lane order, left to right: row number, checkbox, tree, details, your columns,
-edit.
+edit. Under `detailsColumnPosition: "right"`, details sits between your columns
+and edit.

package/skills/server-side/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0'
+  library_version: '2.1.0'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/server-side.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/server-query.md'

package/skills/testing/SKILL.md

@@ -13,7 +13,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0'
+  library_version: '2.1.0'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
   - 'Jielga/TMDataGrid:playwright/support/DataGrid.ts'

package/skills/testing-components/SKILL.md

@@ -12,7 +12,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0'
+  library_version: '2.1.0'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/test/gallery/main.tsx'

package/skills/testing-editing/SKILL.md

@@ -12,7 +12,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0'
+  library_version: '2.1.0'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/editing.md'

package/src/components/TMDataGrid.module.css

@@ -51,6 +51,11 @@
   --dg-header-height: 44px;
   --dg-font-size: var(--mantine-font-size-sm);
   --dg-padding: 10px;
+  /* The header's font size. Resolved on the root, so it follows whatever
+     `--dg-font-size` the scale or an override gives the cells, until set on
+     its own:
+     <TMDataGrid style={{ "--dg-header-font-size": "var(--mantine-font-size-md)" }} /> */
+  --dg-header-font-size: var(--dg-font-size);
   /* Background of a selected row, when `showSelectedBackground` is on. Override
      it on the grid:
      <TMDataGrid style={{ "--dg-row-selected-bg": "var(--mantine-color-blue-0)" }} /> */

package/src/components/TMDataGridHeaderCell.module.css

@@ -7,7 +7,7 @@
   min-width: 0;
   min-height: var(--dg-header-height);
   font-weight: 600;
-  font-size: var(--dg-font-size);
+  font-size: var(--dg-header-font-size);
   background-color: var(--mantine-color-body);
   border-bottom: 1px solid var(--mantine-color-default-border);
   user-select: none;

package/src/components/generatedColumns.tsx

@@ -100,13 +100,15 @@ export function createGroupColumn<TData extends RowData>(
 }
 
 /**
- * The generated details lane, prepended whenever `renderDetails` is set.
+ * The generated details lane, added whenever `renderDetails` is set.
  *
  * Structural, like the checkbox and tree columns: fixed width, pinned to the
- * left after both of them, not hideable, not movable and not resizable. Moving
- * or hiding the toggle would leave rows with panels that cannot be opened.
+ * edge `detailsColumnPosition` names, not hideable, not movable and not
+ * resizable. Moving or hiding the toggle would leave rows with panels that
+ * cannot be opened.
  *
- * Last of the three because it acts on a single record.
+ * Innermost on its edge - last of the left lanes, or first of the right ones,
+ * inside the edit lane - because it acts on a single record.
  *
  * A second toggle elsewhere is supported: `row.toggleExpanded()` is the entire
  * interface, and this lane is only the control the grid ships.
@@ -119,7 +121,7 @@ export function createDetailsColumn<TData extends RowData>(
     meta: {
       label,
       align: "center",
-      // Structurally the last of the generated lanes.
+      // Structurally the innermost of the generated lanes.
       enableOrdering: false,
     },
     // A system lane: as wide as the control it holds and no wider. Fixed at
@@ -135,7 +137,7 @@ export function createDetailsColumn<TData extends RowData>(
     // Its visibility is not the user's to set: hiding it would strand every
     // panel behind a control that is no longer there.
     enableHiding: false,
-    // Structurally pinned to the left; users shouldn't be able to move it.
+    // Structurally pinned to its edge; users shouldn't be able to move it.
     enablePinning: false,
     header: ({ table }) => <DetailsHeader table={table} />,
     cell: ({ row }) => <DetailsCell row={row} />,

package/src/useTMDataGrid.tsx

@@ -12,6 +12,7 @@ import {
   columnGroupingFeature,
   columnOrderingFeature,
   columnPinningFeature,
+  type ColumnPinningState,
   columnResizingFeature,
   columnSizingFeature,
   columnVisibilityFeature,
@@ -77,7 +78,11 @@ import {
   type TMDataGridColumnType,
   tmDataGridFilterFn,
 } from "./core/filterOperators";
-import { getColumnDefaultOperator, isControlColumn } from "./core/columnUtils";
+import {
+  getColumnDefaultOperator,
+  isControlColumn,
+  isGeneratedColumn,
+} from "./core/columnUtils";
 import type { TMDataGridColumnFilterOptions } from "./core/filterControls";
 import {
   resolveFilterOptions,
@@ -1050,6 +1055,16 @@ export type UseTMDataGridOptions<TData extends RowData> = Omit<
    * state. An approximate value is enough.
    */
   renderDetailsEstHeight?: number;
+  /**
+   * Which edge the details lane sits on. Defaults to `"left"`.
+   *
+   * `"left"` pins the chevron after the row number, checkbox and tree lanes,
+   * before every column of yours. `"right"` pins it after every column of
+   * yours, inside the edit lane, so the chevron closes the row the way an
+   * accordion's does. On either edge it stays a structural lane: the user
+   * cannot move, hide or unpin it.
+   */
+  detailsColumnPosition?: "left" | "right";
   /**
    * Rows the virtualizer keeps mounted above and below the viewport. Defaults
    * to 6.
@@ -1149,6 +1164,7 @@ export function useTMDataGrid<TData extends RowData>({
   editing,
   renderDetails,
   renderDetailsEstHeight = DEFAULT_DETAILS_EST_HEIGHT,
+  detailsColumnPosition = "left",
   overscan = DEFAULT_OVERSCAN,
   ...options
 }: UseTMDataGridOptions<TData>): TMDataGridApi<TData> {
@@ -1250,6 +1266,35 @@ export function useTMDataGrid<TData extends RowData>({
   // rest hold two - it gets the wider track.
   const editWideLane = editDraft;
 
+  // The generated lanes are structurally pinned, outermost first on each edge,
+  // and re-applied on top of anything restored: a snapshot cannot unpin one,
+  // and a snapshot taken before `detailsColumnPosition` changed cannot pin the
+  // details lane to the edge it has since left.
+  const structuralPinning = (
+    restored: Partial<ColumnPinningState> | undefined,
+  ): ColumnPinningState => {
+    const own = (ids: string[] | undefined) =>
+      (ids ?? []).filter((id) => !isGeneratedColumn(id));
+    const lane = (enabled: boolean, id: string) =>
+      enabled && pinningEnabled ? [id] : [];
+    const detailsOn = (edge: "left" | "right") =>
+      detailsColumnEnabled && detailsColumnPosition === edge;
+    return {
+      start: [
+        ...lane(rowNumbersEnabled, ROW_NUMBER_COLUMN_ID),
+        ...lane(selectColumnEnabled, SELECT_COLUMN_ID),
+        ...lane(groupColumnEnabled, GROUP_COLUMN_ID),
+        ...lane(detailsOn("left"), DETAILS_COLUMN_ID),
+        ...own(restored?.start),
+      ],
+      end: [
+        ...own(restored?.end),
+        ...lane(detailsOn("right"), DETAILS_COLUMN_ID),
+        ...lane(editColumnEnabled, EDIT_COLUMN_ID),
+      ],
+    };
+  };
+
   const columns = useMemo(() => {
     const base = withTMDataGridDefaults<TData>(
       options.columns as ReadonlyArray<TMDataGridColumnDef<TData>>,
@@ -1262,8 +1307,12 @@ export function useTMDataGrid<TData extends RowData>({
     //
     // The order is the order they are pinned in, and it follows what each one
     // is about: tick a row, find it in the tree the user grouped it into, then
-    // open it. The details chevron sits last because it acts on the record the
-    // lanes to its left have narrowed down to.
+    // open it. The details chevron sits innermost on whichever edge it was
+    // given - last of the left lanes, or first of the right ones - because it
+    // acts on the record the lanes outside it have narrowed down to.
+    const detailsColumn = detailsColumnEnabled
+      ? [createDetailsColumn<TData>(detailsColumnLabel)]
+      : [];
     return [
       // The gutter sits outside everything, the way a spreadsheet's does.
       ...(rowNumbersEnabled
@@ -1273,10 +1322,9 @@ export function useTMDataGrid<TData extends RowData>({
         ? [createSelectColumn<TData>(selectColumnLabel)]
         : []),
       ...(groupColumnEnabled ? [createGroupColumn<TData>(groupColumnLabel)] : []),
-      ...(detailsColumnEnabled
-        ? [createDetailsColumn<TData>(detailsColumnLabel)]
-        : []),
+      ...(detailsColumnPosition === "left" ? detailsColumn : []),
       ...base,
+      ...(detailsColumnPosition === "right" ? detailsColumn : []),
       // Last and pinned right - the row's Save belongs at the end of the row.
       ...(editColumnEnabled
         ? [createEditColumn<TData>(editColumnLabel, editWideLane)]
@@ -1287,6 +1335,7 @@ export function useTMDataGrid<TData extends RowData>({
     rowNumbersEnabled,
     selectColumnEnabled,
     detailsColumnEnabled,
+    detailsColumnPosition,
     groupColumnEnabled,
     editColumnEnabled,
     editWideLane,
@@ -1619,37 +1668,14 @@ export function useTMDataGrid<TData extends RowData>({
           ? { [GROUP_COLUMN_ID]: initialGrouping.length > 0 }
           : {}),
       },
-      columnPinning: {
-        // The generated columns are structurally pinned, so they are re-applied
-        // on top of anything restored from storage.
-        start: [
-          ...(rowNumbersEnabled && pinningEnabled ? [ROW_NUMBER_COLUMN_ID] : []),
-          ...(selectColumnEnabled && pinningEnabled ? [SELECT_COLUMN_ID] : []),
-          ...(groupColumnEnabled && pinningEnabled ? [GROUP_COLUMN_ID] : []),
-          ...(detailsColumnEnabled && pinningEnabled ? [DETAILS_COLUMN_ID] : []),
-          ...(
-            persistedState.columnPinning?.start ??
-            options.initialState?.columnPinning?.start ??
-            []
-          ).filter(
-            (id) =>
-              id !== ROW_NUMBER_COLUMN_ID &&
-              id !== SELECT_COLUMN_ID &&
-              id !== DETAILS_COLUMN_ID &&
-              id !== GROUP_COLUMN_ID,
-          ),
-        ],
-        // The edit lane mirrors the generated columns on the left: structurally
-        // pinned, outermost, re-applied over anything restored.
-        end: [
-          ...(
-            persistedState.columnPinning?.end ??
-            options.initialState?.columnPinning?.end ??
-            []
-          ).filter((id) => id !== EDIT_COLUMN_ID),
-          ...(editColumnEnabled && pinningEnabled ? [EDIT_COLUMN_ID] : []),
-        ],
-      },
+      columnPinning: structuralPinning({
+        start:
+          persistedState.columnPinning?.start ??
+          options.initialState?.columnPinning?.start,
+        end:
+          persistedState.columnPinning?.end ??
+          options.initialState?.columnPinning?.end,
+      }),
       pagination: {
         pageIndex: 0,
         pageSize: 25,
@@ -1964,27 +1990,7 @@ export function useTMDataGrid<TData extends RowData>({
     });
     table.setColumnSizing({ ...initial?.columnSizing });
     table.setColumnOrder([...(initial?.columnOrder ?? [])]);
-    table.setColumnPinning({
-      start: [
-        ...(rowNumbersEnabled && pinningEnabled ? [ROW_NUMBER_COLUMN_ID] : []),
-        ...(selectColumnEnabled && pinningEnabled ? [SELECT_COLUMN_ID] : []),
-        ...(groupColumnEnabled && pinningEnabled ? [GROUP_COLUMN_ID] : []),
-        ...(detailsColumnEnabled && pinningEnabled ? [DETAILS_COLUMN_ID] : []),
-        ...(initial?.columnPinning?.start ?? []).filter(
-          (id) =>
-            id !== ROW_NUMBER_COLUMN_ID &&
-            id !== SELECT_COLUMN_ID &&
-            id !== DETAILS_COLUMN_ID &&
-            id !== GROUP_COLUMN_ID,
-        ),
-      ],
-      end: [
-        ...(initial?.columnPinning?.end ?? []).filter(
-          (id) => id !== EDIT_COLUMN_ID,
-        ),
-        ...(editColumnEnabled && pinningEnabled ? [EDIT_COLUMN_ID] : []),
-      ],
-    });
+    table.setColumnPinning(structuralPinning(initial?.columnPinning));
   };
   const resetSettings = useCallback(() => resetSettingsRef.current(), []);