@jielga/tmdatagrid 2.0.1 → 2.1.1

package/src/components/generatedColumns.tsx

@@ -48,8 +48,8 @@ export function createSelectColumn<TData extends RowData>(
     enablePinning: false,
     header: ({ table }) => <SelectAllHeader table={table} />,
     cell: ({ row }) => <SelectRowCheckbox row={row} />,
-    // Every cell on a group row that is not the grouped column counts as
-    // aggregated, this lane included, and an aggregated cell with nothing
+    // Every cell on a group row that is not the grouped column is a group
+    // summary cell, this lane included, and a summary cell with nothing
     // declared renders blank. Without this the checkbox would disappear from
     // exactly the rows that select a whole group. See renderCellContent.
     aggregatedCell: ({ row }) => <SelectRowCheckbox row={row} />,
@@ -90,23 +90,25 @@ export function createGroupColumn<TData extends RowData>(
     // Structurally pinned to the left; users shouldn't be able to move it.
     enablePinning: false,
     cell: ({ row }) => <GroupCell row={row} />,
-    // A group row has subRows, so every cell on it that is not the grouped
-    // column reports `getIsAggregated()` - this lane included. Without an
-    // `aggregatedCell` the body would take that as "nothing to summarise" and
-    // render the tree lane blank on exactly the rows it exists for.
+    // Every cell on a group row that is not the grouped column is a group
+    // summary cell - this lane included. Without an `aggregatedCell` the body
+    // would take that as "nothing to summarise" and render the tree lane
+    // blank on exactly the rows it exists for. See renderCellContent.
     aggregatedCell: ({ row }) => <GroupCell row={row} />,
     header: ({ table }) => <GroupHeader table={table} />,
   };
 }
 
 /**
- * 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,12 +137,12 @@ 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} />,
     // Deliberately no `aggregatedCell`: on a group row every cell outside the
-    // grouped column counts as aggregated, and blank is the right answer here -
+    // grouped column is a summary cell, and blank is the right answer here -
     // groups expand into their rows, not into a panel.
   };
 }
@@ -180,7 +182,7 @@ export function createEditColumn<TData extends RowData>(
     header: () => null,
     cell: ({ row }) => <EditLaneCell row={row} />,
     // Group rows: same reasoning as the checkbox lane - without this the
-    // cell renders blank on aggregated rows, but here blank is also correct,
+    // cell renders blank on group rows, but here blank is also correct,
     // so the aggregated cell renders the same (null for groups).
     aggregatedCell: ({ row }) => <EditLaneCell 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> {
@@ -1222,7 +1238,6 @@ export function useTMDataGrid<TData extends RowData>({
     ],
   );
 
-  const pinningEnabled = options.enableColumnPinning !== false;
   const selectColumnEnabled = features.selectColumn;
   const groupColumnEnabled = features.grouping;
   // The lane that opens the panels. Nothing to switch on: a grid with no
@@ -1250,6 +1265,37 @@ 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.
+  //
+  // Not gated on `enableColumnPinning`: that switch takes pinning away from the
+  // user, not from the grid's own lanes, which hold the edges either way.
+  const structuralPinning = (
+    restored: Partial<ColumnPinningState> | undefined,
+  ): ColumnPinningState => {
+    const own = (ids: string[] | undefined) =>
+      (ids ?? []).filter((id) => !isGeneratedColumn(id));
+    const lane = (enabled: boolean, id: string) => (enabled ? [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 +1308,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 +1323,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 +1336,7 @@ export function useTMDataGrid<TData extends RowData>({
     rowNumbersEnabled,
     selectColumnEnabled,
     detailsColumnEnabled,
+    detailsColumnPosition,
     groupColumnEnabled,
     editColumnEnabled,
     editWideLane,
@@ -1619,37 +1669,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 +1991,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(), []);