@jielga/tmdatagrid 2.0.0-beta.8 → 2.0.0

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

@@ -1,4 +1,4 @@
-import { Button, Pill, UnstyledButton } from "@mantine/core";
+import { Box, type BoxProps, Button, Pill, UnstyledButton } from "@mantine/core";
 import type { RowData } from "@tanstack/react-table";
 import { useSelector } from "@tanstack/react-store";
 import classes from "./TMDataGridFilterPills.module.css";
@@ -11,7 +11,8 @@ import {
 import type { TMDataGridSize } from "../core/sizes";
 import { openColumnFilter, type TMDataGridApi } from "../useTMDataGrid";
 
-export type TMDataGridFilterPillsProps<TData extends RowData> = {
+/** Mantine's style props (`mb="sm"`, `hiddenFrom="sm"`) are set on the wrapper. */
+export type TMDataGridFilterPillsProps<TData extends RowData> = BoxProps & {
   /** The object returned by `useTMDataGrid`. */
   api: TMDataGridApi<TData>;
   /** Mantine size of the pills. Defaults to `"sm"`. */
@@ -23,7 +24,6 @@ export type TMDataGridFilterPillsProps<TData extends RowData> = {
    * filter panel on that column.
    */
   onPillClick?: (columnId: string) => void;
-  className?: string;
 };
 
 /**
@@ -52,6 +52,7 @@ export function TMDataGridFilterPills<TData extends RowData>({
   showClearAll = true,
   onPillClick,
   className,
+  ...others
 }: TMDataGridFilterPillsProps<TData>) {
   const { table, labels } = api;
   const columnFilters = useSelector(
@@ -65,11 +66,12 @@ export function TMDataGridFilterPills<TData extends RowData>({
   if (activeFilters.length === 0) return null;
 
   return (
-    <div
+    <Box
       role="group"
       aria-label={labels.activeFilters}
       data-dg-part="filter-pills"
       className={[classes.filterPills, className].filter(Boolean).join(" ")}
+      {...others}
     >
       <Pill.Group size={size}>
         {activeFilters.map((filter) => {
@@ -78,6 +80,13 @@ export function TMDataGridFilterPills<TData extends RowData>({
           const value = filter.value;
           // isFilterActive already vouched for the shape; this narrows it.
           if (!isTMDataGridFilterValue(value)) return null;
+          // Mantine types `removeButtonProps` as `CloseButtonProps`, which
+          // has no room for `data-*` in an object literal. Spread in from a
+          // typed value, they reach the button all the same.
+          const removeButtonParts: Record<`data-${string}`, string> = {
+            "data-dg-part": "filter-pill-remove",
+            "data-column-id": filter.id,
+          };
 
           return (
             <Pill
@@ -96,13 +105,11 @@ export function TMDataGridFilterPills<TData extends RowData>({
               // the tab order, because inside a `PillsInput` Backspace is the
               // way out. These pills stand on their own, so the ✕ has to be a
               // real button.
-              // No test id of its own: Mantine types these props as
-              // `CloseButtonProps`, which has no room for `data-*`. The pill
-              // carries one, and the ✕ is the only button inside it.
               removeButtonProps={{
                 "aria-label": labels.clearFilter(label),
                 "aria-hidden": false,
                 tabIndex: 0,
+                ...removeButtonParts,
               }}
             >
               <UnstyledButton
@@ -137,6 +144,6 @@ export function TMDataGridFilterPills<TData extends RowData>({
           {labels.clearAllFilters}
         </Button>
       )}
-    </div>
+    </Box>
   );
 }

package/src/components/TMDataGridFilterSurface.module.css

@@ -0,0 +1,54 @@
+/* Chrome shared by the two automatic surfaces. The panel inside them is a
+   plain block; everything that makes one float or sit beside the rows is
+   here. */
+
+.surfaceHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-md);
+  padding-bottom: var(--mantine-spacing-xs);
+}
+
+/* Floats over the first body rows, anchored to `.tableWrapper`. Sits below the
+   whole header - group rows and the filter row included - which the table
+   measures onto the wrapper as `--dg-header-stack-height`. The size scale's
+   single-row value is the fallback for the frame before the first
+   measurement. */
+.filterPopup {
+  position: absolute;
+  top: calc(var(--dg-header-stack-height, var(--dg-header-height)) + 2px);
+  left: var(--mantine-spacing-md);
+  z-index: var(--dg-z-filter-popup, 20);
+  padding: var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-md);
+  border: 1px solid var(--mantine-color-default-border);
+  background-color: var(--mantine-color-body);
+  box-shadow: var(--mantine-shadow-md);
+}
+
+/* A column of the table wrapper rather than a layer over it: the rows give up
+   the width instead of being covered by it. `flex: none` so the declared
+   width holds whatever the panel inside asks for. */
+.filterSidebar {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  min-width: 0;
+  padding: var(--mantine-spacing-sm);
+  background-color: var(--mantine-color-body);
+  border-left: 1px solid var(--mantine-color-default-border);
+}
+
+/* On the left it is the same panel with its divider on the other edge, and
+   ahead of the scroll container in the flex order. */
+.filterSidebar[data-side="left"] {
+  order: -1;
+  border-left: none;
+  border-right: 1px solid var(--mantine-color-default-border);
+}
+
+.filterSidebarBody {
+  flex: 1;
+  min-height: 0;
+}

package/src/components/TMDataGridFilterSurface.tsx

@@ -0,0 +1,167 @@
+import { ActionIcon, ScrollArea, Text } from "@mantine/core";
+import { useSelector } from "@tanstack/react-store";
+import { useEffect, useRef } from "react";
+import classes from "./TMDataGridFilterSurface.module.css";
+import { useTMDataGridContext } from "../TMDataGridContext";
+import { isElement } from "../core/dom";
+import { CloseIcon } from "./icons";
+import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
+
+/**
+ * The title row both automatic surfaces wear: the "Filters" heading and the
+ * close button that puts the surface away without touching the filters.
+ */
+function FilterSurfaceHeader() {
+  const { ui, labels, controlSize } = useTMDataGridContext();
+  return (
+    <div className={classes.surfaceHeader}>
+      <Text span size={controlSize} fw={600}>
+        {labels.filters}
+      </Text>
+      <ActionIcon
+        variant="subtle"
+        color="gray"
+        size="sm"
+        aria-label={labels.closeFilters}
+        data-dg-part="filter-panel-close"
+        onClick={ui.actions.closeFilterPanel}
+      >
+        <CloseIcon size={16} stroke={1.6} />
+      </ActionIcon>
+    </div>
+  );
+}
+
+/**
+ * Closes the popup once its last filter row goes, covering both ways that
+ * happens - removed by hand, or "Clear all" - without either of them having
+ * to know which surface is showing.
+ *
+ * On the transition to zero, not on being zero: a popup asked to start open
+ * with no filters yet would otherwise close itself before its first paint.
+ */
+function useCloseWhenEmptied(opened: boolean) {
+  const { table, ui } = useTMDataGridContext();
+  const filterCount = useSelector(
+    table.store,
+    (state) => state.columnFilters.length,
+  );
+  const previousCount = useRef(filterCount);
+  useEffect(() => {
+    const emptied = previousCount.current > 0 && filterCount === 0;
+    previousCount.current = filterCount;
+    if (opened && emptied) ui.actions.closeFilterPanel();
+  }, [opened, filterCount, ui]);
+}
+
+/**
+ * `filters.surface: "popup"` - the panel floating over the first body rows,
+ * anchored under the header. The default surface, and the only one before
+ * `filters` existed.
+ *
+ * Everything that makes it floating lives here rather than in the panel: a
+ * pointerdown outside closes it, Escape closes it, and emptying it closes it.
+ *
+ * @internal Rendered by `TMDataGrid.Table`.
+ */
+export function TMDataGridFilterPopup() {
+  const { ui, labels } = useTMDataGridContext();
+  const opened = useSelector(ui, (state) => state.filterPanelOpen);
+  const popupRef = useRef<HTMLDivElement>(null);
+  useCloseWhenEmptied(opened);
+
+  // Clicking away hides the popup, the way any floating surface behaves. On
+  // pointerdown rather than click, so a press that starts outside dismisses it
+  // even when the pointer is released somewhere else.
+  useEffect(() => {
+    if (!opened) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!isElement(target)) return;
+      if (popupRef.current?.contains(target)) return;
+      // The toolbar button toggles the popup itself. Closing from here first
+      // would leave its click reopening what the user meant to close.
+      if (target.closest('[data-dg-part="filter-button"]')) return;
+      // A portalled overlay - a header filter's dropdown, a custom control's
+      // portalled picker - is outside the popup in the DOM but not in meaning:
+      // a press in one is a press in a control, not a click away. Mantine
+      // stamps `data-portal` on every portal node it creates.
+      if (target.closest("[data-portal]")) return;
+      ui.actions.closeFilterPanel();
+    };
+
+    // The popup's own document, not the global one: rendered through a
+    // portal into a window opened with `window.open`, the global `document`
+    // is the opener's and never sees a press in the grid's window.
+    const doc = popupRef.current?.ownerDocument ?? document;
+    doc.addEventListener("pointerdown", handlePointerDown);
+    return () => doc.removeEventListener("pointerdown", handlePointerDown);
+  }, [opened, ui]);
+
+  if (!opened) return null;
+
+  return (
+    <div
+      ref={popupRef}
+      data-dg-part="filter-popup"
+      className={classes.filterPopup}
+      aria-label={labels.filters}
+      // Escape is what closes a floating surface, and every control that can
+      // hold focus in here sits inside this element.
+      onKeyDown={(event) => {
+        if (event.key !== "Escape") return;
+        event.stopPropagation();
+        ui.actions.closeFilterPanel();
+      }}
+    >
+      <FilterSurfaceHeader />
+      <TMDataGridFilterPanel />
+    </div>
+  );
+}
+
+/**
+ * `filters.surface: "sidebar"` - the panel beside the table, inside the grid
+ * frame and under the toolbar, taking width from the rows rather than covering
+ * them.
+ *
+ * Not a floating surface: a click in the table is a click on the rows the
+ * sidebar is filtering, so nothing about it dismisses the panel, and clearing
+ * the filters leaves it standing with its "Add filter" button - a place to
+ * work from rather than a thing that appears and goes away. Escape closes it,
+ * because a keyboard user inside it needs a way back out to the grid.
+ *
+ * @internal Rendered by `TMDataGrid.Table`.
+ */
+export function TMDataGridFilterSidebar() {
+  const { ui, filters, labels } = useTMDataGridContext();
+  const opened = useSelector(ui, (state) => state.filterPanelOpen);
+
+  if (!opened) return null;
+
+  return (
+    <div
+      data-dg-part="filter-sidebar"
+      data-side={filters.sidebarSide}
+      className={classes.filterSidebar}
+      style={{ width: filters.sidebarWidth }}
+      aria-label={labels.filters}
+      onKeyDown={(event) => {
+        if (event.key !== "Escape") return;
+        event.stopPropagation();
+        ui.actions.closeFilterPanel();
+      }}
+    >
+      <FilterSurfaceHeader />
+      {/* The panel's rows are as tall as the filters put in them, and the
+          sidebar is as tall as the table beside it - so the overflow is the
+          sidebar's to scroll, not the page's. */}
+      <ScrollArea type="auto" className={classes.filterSidebarBody}>
+        {/* Stacked, not side by side: a filter row wants about 550px laid out
+            in a line, and the sidebar is 280. */}
+        <TMDataGridFilterPanel layout="stacked" />
+      </ScrollArea>
+    </div>
+  );
+}

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

@@ -1,5 +1,12 @@
-import { ActionIcon, Group, Select, Text, Tooltip } from "@mantine/core";
-import type { RowData } from "@tanstack/react-table";
+import {
+  ActionIcon,
+  Box,
+  type BoxProps,
+  Group,
+  Select,
+  Text,
+  Tooltip,
+} from "@mantine/core";
 import { useMemo, type ReactNode } from "react";
 import classes from "./TMDataGridFooter.module.css";
 import { useTMDataGridContext } from "../TMDataGridContext";
@@ -7,49 +14,10 @@ import { getGridCapabilities } from "../core/capabilities";
 import { useSettledTableState } from "../core/useSettledTableState";
 import { isPagingActive } from "../core/rowSelection";
 import { ChevronLeftIcon, ChevronRightIcon } from "./icons";
-import type { TMDataGridTable } from "../useTMDataGrid";
-
-/** What the pager is showing. The read half of {@link TMDataGridPaginationApi}. */
-export type TMDataGridPaginationState = {
-  pageIndex: number;
-  pageSize: number;
-  /** `-1` when a manual grid declares `pageCount: -1` (unknown total). */
-  pageCount: number;
-  rowCount: number;
-  canPreviousPage: boolean;
-  canNextPage: boolean;
-  /**
-   * Whether the pager is slicing anything right now. `false` while a grouping
-   * is active, which suspends paging - see `isPagingActive`.
-   */
-  isPagingActive: boolean;
-  /** First and last row number on this page, 1-based, for a range label. */
-  from: number;
-  to: number;
-};
-
-/** What the pager can do. The write half of {@link TMDataGridPaginationApi}. */
-export type TMDataGridPaginationActions = {
-  setPageIndex: (pageIndex: number) => void;
-  setPageSize: (pageSize: number) => void;
-  previousPage: () => void;
-  nextPage: () => void;
-  firstPage: () => void;
-  lastPage: () => void;
-};
-
-/**
- * Pagination state and actions, split into the half you read and the half you
- * call.
- *
- * The split is what makes a partial override possible: a consumer replacing
- * only the range label reads `state` and never touches `actions`, and one
- * replacing only the buttons does the opposite.
- */
-export type TMDataGridPaginationApi = {
-  state: TMDataGridPaginationState;
-  actions: TMDataGridPaginationActions;
-};
+import {
+  getTMDataGridPaginationApi,
+  type TMDataGridPaginationApi,
+} from "../core/pagination";
 
 /**
  * The pre-bound pieces of the built-in pager.
@@ -63,6 +31,12 @@ export type TMDataGridPaginationControls = {
   PageSize: () => ReactNode;
   /** The "1–25 of 300" range label. */
   Range: () => ReactNode;
+  /**
+   * The "Page 3 of 200" label - what a server-paged grid usually shows in
+   * place of a row range. Not in the default footer; put it in a
+   * `renderPagination` layout.
+   */
+  PageNumber: () => ReactNode;
   /** The previous/next buttons. */
   Pager: () => ReactNode;
 };
@@ -72,43 +46,6 @@ export type TMDataGridPaginationSlotArgs = TMDataGridPaginationApi & {
   Controls: TMDataGridPaginationControls;
 };
 
-/**
- * Reads {@link TMDataGridPaginationApi} off a table. The Footer feeds it to the
- * `renderPagination` slot; a pager living outside the Footer can call it with
- * the table from `useTMDataGrid` directly.
- *
- * `Controls` are not here: they are components bound to the grid context, and
- * this function takes only a table.
- */
-export function getTMDataGridPaginationApi<TData extends RowData>(
-  table: TMDataGridTable<TData>,
-  isPaging = true,
-): TMDataGridPaginationApi {
-  const { pageIndex, pageSize } = table.store.state.pagination;
-  const rowCount = table.getRowCount();
-  return {
-    state: {
-      pageIndex,
-      pageSize,
-      pageCount: table.getPageCount(),
-      rowCount,
-      canPreviousPage: table.getCanPreviousPage(),
-      canNextPage: table.getCanNextPage(),
-      isPagingActive: isPaging,
-      from: rowCount === 0 ? 0 : pageIndex * pageSize + 1,
-      to: Math.min(rowCount, (pageIndex + 1) * pageSize),
-    },
-    actions: {
-      setPageIndex: (index) => table.setPageIndex(index),
-      setPageSize: (size) => table.setPageSize(size),
-      previousPage: () => table.previousPage(),
-      nextPage: () => table.nextPage(),
-      firstPage: () => table.firstPage(),
-      lastPage: () => table.lastPage(),
-    },
-  };
-}
-
 /*
  * The three controls are module-scope components on purpose. Defined inside
  * the Footer they would be a new component type on every render, so React
@@ -182,6 +119,26 @@ function PaginationRange() {
   );
 }
 
+function PaginationPageNumber() {
+  const { table, features, labels, controlSize } = useTMDataGridContext();
+  useSettledTableState(table.store);
+  const paging = isPagingActive(table, features);
+  const { pageIndex } = table.store.state.pagination;
+
+  return (
+    <Text span size={controlSize} c="dimmed" data-dg-part="page-number">
+      {paging
+        ? labels.pageNumber({
+            page: pageIndex + 1,
+            pageCount: table.getPageCount(),
+          })
+        : // Same reasoning as the range label: nothing is being sliced, so a
+          // page number would be a lie.
+          labels.groupedAllRows(table.getFilteredRowModel().rows.length)}
+    </Text>
+  );
+}
+
 function PaginationPager() {
   const { table, features, labels } = useTMDataGridContext();
   useSettledTableState(table.store);
@@ -213,7 +170,8 @@ function PaginationPager() {
   );
 }
 
-export type TMDataGridFooterProps = {
+/** Mantine's style props (`mt="sm"`, `px="md"`) are set on the footer bar. */
+export type TMDataGridFooterProps = BoxProps & {
   pageSizeOptions?: ReadonlyArray<number>;
   /**
    * Replaces the built-in pager, and is handed the pieces of it.
@@ -223,7 +181,7 @@ export type TMDataGridFooterProps = {
    *   renderPagination={({ state, actions, Controls }) => (
    *     <Group>
    *       <Controls.PageSize />
-   *       <MyJumpToPage page={state.pageIndex} onJump={actions.setPageIndex} />
+   *       <Controls.PageNumber />
    *       <Controls.Pager />
    *     </Group>
    *   )}
@@ -248,7 +206,10 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 export function TMDataGridFooter({
   pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
   renderPagination,
+  className,
+  ...others
 }: TMDataGridFooterProps) {
+  const footerClassName = [classes.footer, className].filter(Boolean).join(" ");
   const { table, features, labels } = useTMDataGridContext();
   useSettledTableState(table.store);
 
@@ -258,6 +219,7 @@ export function TMDataGridFooter({
     () => ({
       PageSize: () => <PaginationPageSize pageSizeOptions={pageSizeOptions} />,
       Range: PaginationRange,
+      PageNumber: PaginationPageNumber,
       Pager: PaginationPager,
     }),
     [pageSizeOptions],
@@ -273,9 +235,9 @@ export function TMDataGridFooter({
   if (renderPagination) {
     const { state, actions } = getTMDataGridPaginationApi(table, paging);
     return (
-      <div data-dg-part="footer" className={classes.footer}>
+      <Box data-dg-part="footer" className={footerClassName} {...others}>
         {renderPagination({ state, actions, Controls })}
-      </div>
+      </Box>
     );
   }
 
@@ -288,17 +250,18 @@ export function TMDataGridFooter({
       w={260}
       position="top"
     >
-      <div
+      <Box
         data-dg-part="footer"
-        className={classes.footer}
-        data-paging-suspended={!paging}
+        className={footerClassName}
+        data-paging-suspended={!paging || undefined}
+        {...others}
       >
         {/* The default render is the controls in order - which is what makes
             `renderPagination` a rearrangement rather than a rebuild. */}
         <Controls.PageSize />
         <Controls.Range />
         <Controls.Pager />
-      </div>
+      </Box>
     </Tooltip>
   );
 }

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

@@ -1,15 +1,15 @@
 import { UnstyledButton } from "@mantine/core";
 import {
-  useCellControlTabIndex,
+  useBodyControlTabIndex,
   useTMDataGridContext,
 } from "../TMDataGridContext";
-import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+import type { Row, RowData } from "@tanstack/react-table";
 import { useSelector } from "@tanstack/react-store";
 import { shallow } from "@tanstack/store";
 import classes from "./TMDataGridGroupColumn.module.css";
 import { ChevronRightIcon } from "./icons";
 import { getColumnLabel } from "../core/columnUtils";
-import { getGroupDataRows } from "../core/grouping";
+import { formatGroupValue, getGroupDataRows } from "../core/grouping";
 import type { TMDataGridFeatures, TMDataGridTable } from "../useTMDataGrid";
 
 export const GROUP_COLUMN_ID = "__group__";
@@ -17,27 +17,6 @@ export const GROUP_COLUMN_ID = "__group__";
 /** Indent added per level of nesting, in px. */
 const INDENT_STEP = 16;
 
-/** Shown for a group whose value is empty - `String(null)` would read as "null". */
-const BLANK_GROUP_LABEL = "(Blank)";
-
-/**
- * How a grouping value is written into the tree cell.
- *
- * Deliberately not the grouped column's own `cell` renderer: that renderer is
- * written for a data row and is free to reach into `row.original`, which on a
- * group row is the first leaf's record rather than anything about the group.
- */
-export function formatGroupValue(
-  value: unknown,
-  blankLabel = BLANK_GROUP_LABEL,
-): string {
-  if (value === null || value === undefined || value === "") {
-    return blankLabel;
-  }
-  if (value instanceof Date) return value.toLocaleDateString();
-  return String(value);
-}
-
 /**
  * The tree cell: chevron, group value and leaf count, indented by depth.
  *
@@ -46,15 +25,14 @@ export function formatGroupValue(
  * `row` identity survives an expand, so the React Compiler would cache the call
  * along with it and the chevron would never turn. See TMDataGridSelectColumn.
  */
-function GroupCell<TData extends RowData>({
+export function GroupCell<TData extends RowData>({
   row,
 }: {
   row: Row<TMDataGridFeatures, TData>;
 }) {
   const { labels } = useTMDataGridContext();
+  const tabIndex = useBodyControlTabIndex();
   const expanded = useSelector(row.table.store, () => row.getIsExpanded());
-  // See useCellControlTabIndex: reached by stepping into the cell, not by Tab.
-  const tabIndex = useCellControlTabIndex();
 
   // Leaf rows keep the lane empty: their values are in the data columns, and
   // the indent alone is what places them under their group.
@@ -67,6 +45,8 @@ function GroupCell<TData extends RowData>({
       className={classes.groupToggle}
       // Padding rather than margin, so the whole indented width stays clickable.
       style={{ paddingInlineStart: row.depth * INDENT_STEP }}
+      // See useBodyControlTabIndex: under cell selection, reached by stepping
+      // into the cell or by the Tab walk within the row, not by the page.
       tabIndex={tabIndex}
       aria-expanded={expanded}
       aria-label={
@@ -81,7 +61,7 @@ function GroupCell<TData extends RowData>({
         row.toggleExpanded();
       }}
     >
-      <span className={classes.chevron} data-expanded={expanded}>
+      <span className={classes.chevron} data-expanded={expanded || undefined}>
         <ChevronRightIcon size={16} stroke={1.6} />
       </span>
       <span className={classes.groupLabel}>{label}</span>
@@ -98,7 +78,7 @@ function GroupCell<TData extends RowData>({
  * Names the columns currently grouped on, so the lane says what it is showing
  * rather than a static "Group".
  */
-function GroupHeader<TData extends RowData>({
+export function GroupHeader<TData extends RowData>({
   table,
 }: {
   table: TMDataGridTable<TData>;
@@ -116,46 +96,3 @@ function GroupHeader<TData extends RowData>({
     })
     .join(" / ");
 }
-
-/**
- * The generated tree column, prepended whenever grouping is enabled and hidden
- * again while `grouping` is empty - see the visibility effect in
- * `useTMDataGrid`.
- *
- * It exists because TanStack ships no auto group column: `groupedColumnMode:
- * "remove"` takes the grouped column out of the grid, so something has to hold
- * the tree. Modelled on the checkbox column, which is generated the same way.
- *
- * Not groupable itself, and nothing had to be written to make that true -
- * `column.getCanGroup()` requires an `accessorFn`, which a display column has
- * no reason to have.
- */
-export function createGroupColumn<TData extends RowData>(
-  label = "Group",
-): ColumnDef<TMDataGridFeatures, TData, unknown> {
-  return {
-    id: GROUP_COLUMN_ID,
-    meta: {
-      label,
-      // Structurally the first column after the checkbox lane.
-      enableOrdering: false,
-    },
-    size: 260,
-    minSize: 180,
-    enableSorting: false,
-    enableColumnFilter: false,
-    enableGlobalFilter: false,
-    // Keeps it out of the columns panel and out of the header menu: its
-    // visibility is not the user's to set, it follows the grouping state.
-    enableHiding: false,
-    // 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.
-    aggregatedCell: ({ row }) => <GroupCell row={row} />,
-    header: ({ table }) => <GroupHeader table={table} />,
-  };
-}

package/src/{tmdatagrid/components → components}/TMDataGridHeaderCell.module.css

@@ -90,11 +90,11 @@
 
 /* See the sort ActionIcon: an unsorted column's arrow is an invitation, not a
    state, so it sits back until the pointer is on it. */
-.sortAction[data-sorted="false"] {
+.sortAction:not([data-sorted]) {
   opacity: 0.55;
 }
 
-.sortAction[data-sorted="false"]:hover {
+.sortAction:not([data-sorted]):hover {
   opacity: 1;
 }
 
@@ -149,6 +149,16 @@
   z-index: 1;
 }
 
+/* The last column's divider straddles inward instead. Half of a 10px box
+   hanging past the last track is 5px of scrollable overflow, which is a
+   permanent horizontal scrollbar under a grid whose columns fit exactly. The
+   grab area keeps its width, wholly inside the cell, and flex-end keeps the
+   visible line on the column edge where every other divider draws it. */
+.headerCell:last-child .columnSeparator {
+  transform: none;
+  justify-content: flex-end;
+}
+
 .columnSeparatorResizable {
   cursor: col-resize;
   touch-action: none;