@jielga/tmdatagrid 0.1.0 → 0.3.0

package/src/tmdatagrid/{TMDataGridHeaderCell.tsx → components/TMDataGridHeaderCell.tsx}

@@ -3,40 +3,43 @@ import { flexRender, type Header } from "@tanstack/react-table";
 import { useSelector } from "@tanstack/react-store";
 import { shallow } from "@tanstack/store";
 import { type DragEvent, type ReactNode, useRef, useState } from "react";
-import classes from "./TMDataGrid.module.css";
+import classes from "./TMDataGridHeaderCell.module.css";
+import sticky from "./sticky.module.css";
 import {
   type TMDataGridRowData,
   useTMDataGridContext,
-} from "./TMDataGridContext";
+} from "../TMDataGridContext";
 import type { TMDataGridColumnLayout } from "./TMDataGridTable";
-import { getColumnCapabilities, getGridCapabilities } from "./capabilities";
+import { getColumnCapabilities, getGridCapabilities } from "../core/capabilities";
 import {
   getColumnRegion,
   getStepTargetColumn,
   moveColumn,
   moveColumnByStep,
   type TMDataGridDropSide,
-} from "./columnOrdering";
-import { getColumnAlign, getColumnLabel } from "./columnUtils";
-import { isFilterActive } from "./filterOperators";
+} from "../core/columnOrdering";
+import { getColumnAlign, getColumnLabel } from "../core/columnUtils";
+import { isFilterActive } from "../core/filterOperators";
 import {
   ArrowDownIcon,
   ArrowUpIcon,
+  CollapseAllIcon,
   ColumnsIcon,
   DotsVerticalIcon,
+  ExpandAllIcon,
   EyeOffIcon,
   FilterIcon,
+  GroupIcon,
   MoveLeftIcon,
   MoveRightIcon,
   PinLeftIcon,
   PinOffIcon,
   PinRightIcon,
+  UngroupIcon,
 } from "./icons";
-import {
-  type TMDataGridFeatures,
-  openColumnFilter,
-  SELECT_COLUMN_ID,
-} from "./useTMDataGrid";
+import { GROUP_COLUMN_ID } from "./TMDataGridGroupColumn";
+import { SELECT_COLUMN_ID } from "./TMDataGridSelectColumn";
+import { type TMDataGridFeatures, openColumnFilter } from "../useTMDataGrid";
 
 export type TMDataGridHeader = Header<
   TMDataGridFeatures,
@@ -65,7 +68,7 @@ export function TMDataGridHeaderCell({
   // surrounding tree is memoized (React Compiler) or the table lives elsewhere.
   // `columnOrder` is in the list because the move menu items are derived from
   // the column's neighbours, which is exactly what an order change invalidates.
-  const { sorting, columnFilters, resizingColumnId, columnPinning } =
+  const { sorting, columnFilters, resizingColumnId, columnPinning, grouping } =
     useSelector(
       table.store,
       (state) => ({
@@ -74,6 +77,7 @@ export function TMDataGridHeaderCell({
         resizingColumnId: state.columnResizing.isResizingColumn,
         columnPinning: state.columnPinning,
         columnOrder: state.columnOrder,
+        grouping: state.grouping,
       }),
       { compare: shallow },
     );
@@ -99,9 +103,18 @@ export function TMDataGridHeaderCell({
   const canPin = isLeaf && capabilities.canPin;
   const canResize = capabilities.canResize;
   const canReorder = isLeaf && capabilities.canReorder;
+  const canGroup = isLeaf && capabilities.canGroup;
   const canManageColumns =
     isLeaf && getGridCapabilities(table, features).canHideAny;
 
+  // Read off the subscribed slice, not from `column.getIsGrouped()`: that is a
+  // call on a `column` whose identity survives a grouping change, so the React
+  // Compiler would cache the answer and the menu would keep offering to group
+  // a column that already is. Same reason the sort and filter flags above are
+  // derived from state rather than from `getIsSorted()`.
+  const isGrouped = grouping.includes(column.id);
+  const isGroupingActive = grouping.length > 0;
+
   // A column only moves inside its own pinned lane, so a header in another one
   // never lights up as a target. See TMDataGridColumnRegion.
   const isDragged = draggedColumnId === column.id;
@@ -207,6 +220,64 @@ export function TMDataGridHeaderCell({
       <Menu.Divider key="filter-divider" />,
     );
   }
+  if (canGroup) {
+    menuItems.push(
+      <Menu.Item
+        key="group"
+        className={isGrouped ? classes.menuItemActive : undefined}
+        leftSection={
+          isGrouped ? (
+            <UngroupIcon size={16} stroke={1.6} />
+          ) : (
+            <GroupIcon size={16} stroke={1.6} />
+          )
+        }
+        onClick={column.getToggleGroupingHandler()}
+      >
+        {isGrouped ? `Ungroup ${label}` : `Group by ${label}`}
+      </Menu.Item>,
+    );
+  }
+  if (isGroupingActive) {
+    // Under the default `groupedColumnMode: "remove"` a grouped column is taken
+    // out of the grid, so its own header — and the Ungroup item on it — is no
+    // longer reachable. The tree column that replaced it carries them instead,
+    // which is also where someone would look for them.
+    if (column.id === GROUP_COLUMN_ID) {
+      for (const groupedId of grouping) {
+        const groupedColumn = table.getColumn(groupedId);
+        if (!groupedColumn) continue;
+        menuItems.push(
+          <Menu.Item
+            key={`ungroup-${groupedId}`}
+            leftSection={<UngroupIcon size={16} stroke={1.6} />}
+            onClick={() => groupedColumn.toggleGrouping()}
+          >
+            {`Ungroup ${getColumnLabel(groupedColumn)}`}
+          </Menu.Item>,
+        );
+      }
+    }
+    menuItems.push(
+      <Menu.Item
+        key="expand-all"
+        leftSection={<ExpandAllIcon size={16} stroke={1.6} />}
+        onClick={() => table.toggleAllRowsExpanded(true)}
+      >
+        Expand all groups
+      </Menu.Item>,
+      <Menu.Item
+        key="collapse-all"
+        leftSection={<CollapseAllIcon size={16} stroke={1.6} />}
+        onClick={() => table.toggleAllRowsExpanded(false)}
+      >
+        Collapse all groups
+      </Menu.Item>,
+    );
+  }
+  if (canGroup || isGroupingActive) {
+    menuItems.push(<Menu.Divider key="group-divider" />);
+  }
   if (canPin) {
     menuItems.push(
       <Menu.Item
@@ -311,8 +382,8 @@ export function TMDataGridHeaderCell({
     isDragged ? classes.headerCellDragging : "",
     dropSide === "before" ? classes.headerCellDropBefore : "",
     dropSide === "after" ? classes.headerCellDropAfter : "",
-    layout.isBoundary && pinnedAt === "left" ? classes.stickyLeft : "",
-    layout.isBoundary && pinnedAt === "right" ? classes.stickyRight : "",
+    layout.isBoundary && pinnedAt === "left" ? sticky.stickyLeft : "",
+    layout.isBoundary && pinnedAt === "right" ? sticky.stickyRight : "",
   ]
     .filter(Boolean)
     .join(" ");
@@ -324,6 +395,20 @@ export function TMDataGridHeaderCell({
       data-testid={`dg-header-${column.id}`}
       data-active={isSorted || isFiltered}
       data-align={align}
+      // The checkbox lane is a fixed track, so it cannot take the cell padding
+      // the scale grows for text. See TMDataGridHeaderCell.module.css.
+      data-select-column={column.id === SELECT_COLUMN_ID}
+      // Only meaningful on a sortable column: "none" advertises that this
+      // header sorts, which is a lie on one that doesn't.
+      aria-sort={
+        canSort
+          ? isSorted
+            ? sortDirection
+              ? "descending"
+              : "ascending"
+            : "none"
+          : undefined
+      }
       className={cellClass}
       // Dropped while a resize is running, so that dragging the separator
       // resizes the column instead of starting to move it. The resize handler

package/src/tmdatagrid/components/TMDataGridSelectColumn.tsx

@@ -0,0 +1,177 @@
+import { Checkbox } from "@mantine/core";
+import { useSelector } from "@tanstack/react-store";
+import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+import { useTMDataGridContext } from "../TMDataGridContext";
+import {
+  getDisplayedRows,
+  getSelectableRowIds,
+  resolveRowSelectionClick,
+} from "../core/rowSelection";
+import type { TMDataGridFeatures, TMDataGridTable } from "../useTMDataGrid";
+
+export const SELECT_COLUMN_ID = "__select__";
+
+/**
+ * Both checkboxes subscribe to the table store themselves rather than reading
+ * the selection off the render they were handed.
+ *
+ * A cell is rendered by `flexRender`, which mounts the cell function as its own
+ * component — but the body cell above it keeps the same props across a
+ * selection change (row, column and layout identities all survive it), so the
+ * React Compiler reuses the memoized element and the subtree never re-renders.
+ * The row highlight would update, from state `TMDataGridTable` subscribes to,
+ * while the box below it stayed unchecked.
+ *
+ * Selection is derived inside the selector, not from a method call in the
+ * component body, for the same reason: `table` and `row` identities survive the
+ * change, so a call in the body would be cached along with them.
+ */
+function SelectAllCheckbox<TData extends RowData>({
+  table,
+}: {
+  table: TMDataGridTable<TData>;
+}) {
+  const allSelected = useSelector(table.store, () =>
+    table.getIsAllRowsSelected(),
+  );
+  const someSelected = useSelector(table.store, () =>
+    table.getIsSomeRowsSelected(),
+  );
+
+  return (
+    <Checkbox
+      size="xs"
+      aria-label="Select all rows"
+      checked={allSelected}
+      indeterminate={someSelected && !allSelected}
+      onChange={table.getToggleAllRowsSelectedHandler()}
+    />
+  );
+}
+
+/**
+ * Drops the select-all box when only one row may be selected. Read from the
+ * feature flags rather than `table.options.enableMultiRowSelection` directly:
+ * the flags are re-derived from a fresh object every render, so the switch
+ * cannot be cached along with a `table` identity that survives an options
+ * change — the same reason the rest of the chrome reads them. See
+ * readFeatureFlags.
+ */
+function SelectAllHeader<TData extends RowData>({
+  table,
+}: {
+  table: TMDataGridTable<TData>;
+}) {
+  const { features } = useTMDataGridContext();
+  if (!features.multiRowSelection) return null;
+  return <SelectAllCheckbox table={table} />;
+}
+
+function SelectRowCheckbox<TData extends RowData>({
+  row,
+}: {
+  row: Row<TMDataGridFeatures, TData>;
+}) {
+  // Cells render inside the grid's provider, so the checkbox can reach the
+  // chrome store — it needs the shift-click pivot, and the feature flags to know
+  // which row model a range is measured over.
+  const { ui, features } = useTMDataGridContext();
+  const isGroupRow = row.subRows.length > 0;
+
+  // A group row is never selected by id: `rowSelection` only ever holds the
+  // leaves, and TanStack's `getIsSelected()` is a plain lookup in that map. So
+  // a group asks about its descendants instead, which is also the honest
+  // reading — the box means "all of these", and it goes indeterminate as soon
+  // as that stops being true.
+  const selected = useSelector(row.table.store, () =>
+    isGroupRow ? row.getIsAllSubRowsSelected() : row.getIsSelected(),
+  );
+  const someSelected = useSelector(row.table.store, () =>
+    row.getIsSomeSelected(),
+  );
+
+  // The resolver expands a tick back out to the descendant ids; all the group
+  // case needs here is to know whether any of them may be selected at all.
+  const selectableIds = getSelectableRowIds(row);
+
+  // Single-select has no way to express "this group": one box for several rows
+  // would either overrun the limit or lie about what it did.
+  if (isGroupRow && !row.getCanMultiSelect()) return null;
+
+  return (
+    <Checkbox
+      size="xs"
+      aria-label={isGroupRow ? "Select group" : "Select row"}
+      checked={selected}
+      disabled={selectableIds.length === 0}
+      indeterminate={someSelected && !selected}
+      // Every tick goes through the resolver, shift held or not — plain becomes
+      // a toggle that moves the pivot, so a later shift-click extends from the
+      // box the user last touched.
+      //
+      // All of it in `onChange`, not split with an `onClick`: React derives a
+      // checkbox's change event from the click, so the modifier keys ride along
+      // on the native event, and a `preventDefault()` in a click handler cannot
+      // stop the change from firing anyway. Trying to do the range in `onClick`
+      // silently loses the clicked row, which `onChange` then toggles back off.
+      onChange={(event) => {
+        const native = event.nativeEvent;
+        const isMouse = native instanceof MouseEvent;
+        const resolved = resolveRowSelectionClick({
+          rows: getDisplayedRows(row.table, features),
+          rowId: row.id,
+          anchorRowId: ui.state.selectionAnchorRowId,
+          modifiers: {
+            toggle: isMouse && (native.ctrlKey || native.metaKey),
+            extend: isMouse && native.shiftKey,
+          },
+          selection: row.table.store.state.rowSelection,
+          // A checkbox is only ever additive — ticking one has never cleared
+          // the others, so `canReplaceSelection` stays false whatever is held.
+          canReplaceSelection: false,
+        });
+        row.table.setRowSelection(resolved.selection);
+        ui.actions.setSelectionAnchor(resolved.anchorRowId);
+      }}
+      // A row can select on click too; the checkbox must not toggle twice.
+      onClick={(event) => event.stopPropagation()}
+    />
+  );
+}
+
+/**
+ * The generated checkbox column, prepended under
+ * `selectionMode: "checkbox"` (the default) or `"checkboxAndHighlight"`.
+ */
+export function createSelectColumn<TData extends RowData>(): ColumnDef<
+  TMDataGridFeatures,
+  TData,
+  unknown
+> {
+  return {
+    id: SELECT_COLUMN_ID,
+    meta: {
+      label: "Checkbox selection",
+      align: "center",
+      // Structurally the first column; it also anchors the left pinned lane, so
+      // no other column can be moved in front of it.
+      enableOrdering: false,
+    },
+    size: 48,
+    minSize: 48,
+    maxSize: 48,
+    enableResizing: false,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    // Structurally pinned to the left; users shouldn't be able to move it.
+    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
+    // 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} />,
+  };
+}

package/src/tmdatagrid/components/TMDataGridTable.module.css

@@ -0,0 +1,137 @@
+/* Anchors the filter panel, which floats over the first body rows. */
+.tableWrapper {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.scrollContainer {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* Column tracks are set inline via gridTemplateColumns. */
+.grid {
+  display: grid;
+}
+
+/* Rows are real layout boxes (not display: contents) so position: sticky works,
+   and subgrid keeps their cells on the parent's column tracks. */
+.headerRow {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+
+.bodyRow {
+  --row-bg: var(--mantine-color-body);
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: stretch;
+}
+
+.bodyRow:hover {
+  --row-bg: var(--mantine-color-default-hover);
+}
+
+/* A group row takes no background of its own. Collapsed, every row on screen is
+   a group row, so a tint would grey out the whole grid and read as if
+   everything were selected. The bold label and the chevron carry the
+   distinction instead — and `--dg-row-group-bg` is there for a consumer who
+   wants the tint back. Declared before the selection rules, so a selected or
+   highlighted group still reads as one. */
+.bodyRow[data-grouped="true"] {
+  --row-bg: var(--dg-row-group-bg);
+}
+
+/* The row an open context menu is about. The pointer has usually left it by
+   then, so without this the menu would be the only thing saying which row it
+   acts on. Declared before the selection rules, which are the stronger
+   statement and win at equal specificity. */
+.bodyRow[data-context-menu="true"] {
+  --row-bg: var(--mantine-color-default-hover);
+}
+
+/* Being selected and being painted for it are separate: a row is always
+   `data-selected`, but only takes the background when `showSelectedBackground`
+   is on — the default under `"row"`, off with checkboxes. */
+.bodyRow[data-selected-bg="true"] {
+  --row-bg: var(--dg-row-selected-bg);
+}
+
+/* The highlighted row wins over the selected background: under
+   `"checkboxAndHighlight"` the two coexist, and the highlighted row is the one
+   the detail panel is about, so it must stay distinguishable inside a
+   selection. Declared after, so the later rule takes it at equal specificity. */
+.bodyRow[data-highlighted="true"] {
+  --row-bg: var(--dg-row-highlight-bg);
+}
+
+/* Row selection mode: the row is the control, so it takes focus and must not
+   start a text selection on the click that toggles it. */
+.bodyRow[data-selects-on-click="true"] {
+  user-select: none;
+}
+
+.bodyRow:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: -2px;
+}
+
+/* Clipping lives on .cellContent, not here — a pinned cell has to let its
+   boundary gradient escape past its own right/left edge. */
+.bodyCell {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--dg-padding);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+  /* Inherited from .bodyRow — sticky cells need an opaque background. */
+  background-color: var(--row-bg);
+  font-size: var(--dg-font-size);
+}
+
+/* The checkbox column is a fixed 48px track holding a control of a known width,
+   not text that can ellipsize. Cell padding is sized for text and grows with
+   the scale, so at `xl` its 18px a side left 12px for a 16px box and the
+   checkbox was clipped. The lane centres its control instead. */
+.bodyCell[data-select-column="true"] {
+  padding: 0;
+}
+
+.cellContent {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.bodyCell[data-align="right"] {
+  justify-content: flex-end;
+}
+
+.bodyCell[data-align="center"] {
+  justify-content: center;
+}
+
+/* Only stretch to fill when left-aligned, so right/centre stay put. */
+.bodyCell[data-align="left"] .cellContent {
+  flex: 1 1 auto;
+}
+
+.messageRow {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-xl);
+}