@jielga/tmdatagrid 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -1,10 +1,18 @@
-import { ActionIcon, Group, Select, Text, Tooltip } from "@mantine/core";
+import {
+  ActionIcon,
+  Box,
+  type BoxProps,
+  Group,
+  Select,
+  Text,
+  Tooltip,
+} from "@mantine/core";
 import type { RowData } from "@tanstack/react-table";
-import { useSelector } from "@tanstack/react-store";
 import { useMemo, type ReactNode } from "react";
 import classes from "./TMDataGridFooter.module.css";
 import { useTMDataGridContext } from "../TMDataGridContext";
 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";
@@ -63,6 +71,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;
 };
@@ -122,7 +136,7 @@ function PaginationPageSize({
   pageSizeOptions: ReadonlyArray<number>;
 }) {
   const { table, features, labels, controlSize } = useTMDataGridContext();
-  useSelector(table.store);
+  useSettledTableState(table.store);
   const paging = isPagingActive(table, features);
   const { pageSize } = table.store.state.pagination;
   // A page size restored from storage, or set through `initialState`, need not
@@ -163,7 +177,7 @@ function PaginationPageSize({
 
 function PaginationRange() {
   const { table, features, labels, controlSize } = useTMDataGridContext();
-  useSelector(table.store);
+  useSettledTableState(table.store);
   const paging = isPagingActive(table, features);
   const { pageIndex, pageSize } = table.store.state.pagination;
   const total = table.getRowCount();
@@ -182,9 +196,29 @@ 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();
-  useSelector(table.store);
+  useSettledTableState(table.store);
   const paging = isPagingActive(table, features);
 
   return (
@@ -213,7 +247,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 +258,7 @@ export type TMDataGridFooterProps = {
    *   renderPagination={({ state, actions, Controls }) => (
    *     <Group>
    *       <Controls.PageSize />
-   *       <MyJumpToPage page={state.pageIndex} onJump={actions.setPageIndex} />
+   *       <Controls.PageNumber />
    *       <Controls.Pager />
    *     </Group>
    *   )}
@@ -248,9 +283,12 @@ 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();
-  useSelector(table.store);
+  useSettledTableState(table.store);
 
   // Bound once per option list rather than per render, so the controls keep
   // their identity and the elements they render keep theirs.
@@ -258,6 +296,7 @@ export function TMDataGridFooter({
     () => ({
       PageSize: () => <PaginationPageSize pageSizeOptions={pageSizeOptions} />,
       Range: PaginationRange,
+      PageNumber: PaginationPageNumber,
       Pager: PaginationPager,
     }),
     [pageSizeOptions],
@@ -273,9 +312,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 +327,18 @@ export function TMDataGridFooter({
       w={260}
       position="top"
     >
-      <div
+      <Box
         data-dg-part="footer"
-        className={classes.footer}
+        className={footerClassName}
         data-paging-suspended={!paging}
+        {...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,6 +1,6 @@
 import { UnstyledButton } from "@mantine/core";
 import {
-  useCellControlTabIndex,
+  useBodyControlTabIndex,
   useTMDataGridContext,
 } from "../TMDataGridContext";
 import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
@@ -52,9 +52,8 @@ function GroupCell<TData extends RowData>({
   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 +66,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={

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

@@ -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;

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

@@ -12,12 +12,14 @@ import {
 import type { TMDataGridColumnLayout } from "./TMDataGridTable";
 import { getColumnCapabilities, getGridCapabilities } from "../core/capabilities";
 import { autosizeColumn } from "../core/autosize";
+import { isNode } from "../core/dom";
 import {
   getColumnRegion,
   getStepTargetColumn,
   keepGeneratedColumnsOutermost,
   moveColumn,
   moveColumnByStep,
+  pinningPositionOfSide,
   type TMDataGridDropSide,
 } from "../core/columnOrdering";
 import {
@@ -46,6 +48,7 @@ import {
   UngroupIcon,
 } from "./icons";
 import { GROUP_COLUMN_ID } from "./TMDataGridGroupColumn";
+import { TMDataGridMenuColumns } from "./TMDataGridMenu";
 import { type TMDataGridFeatures, openColumnFilter } from "../useTMDataGrid";
 
 /** The table as the header cell sees it, after the context type erasure. */
@@ -89,7 +92,7 @@ export function TMDataGridHeaderCell({
   renderColumnMenuItems?: TMDataGridColumnMenuItemsRenderer;
 }) {
   const api = useTMDataGridContext();
-  const { table, features, labels } = api;
+  const { table, features, filters, labels } = api;
   const column = header.column;
   const [menuOpened, setMenuOpened] = useState(false);
   const [contextMenuOpened, setContextMenuOpened] = useState(false);
@@ -133,6 +136,9 @@ export function TMDataGridHeaderCell({
     (filter) => filter.id === column.id && isFilterActive(filter.value),
   );
   const isResizing = resizingColumnId === column.id;
+  // Any column, not just this one: a resize elsewhere must not leave a
+  // neighbouring header ready to start a native drag under the pointer.
+  const isAnyResizing = resizingColumnId !== false;
   const pinnedAt = layout.pinnedAt;
 
   // Every affordance below mirrors a TanStack capability check, so switching a
@@ -188,7 +194,7 @@ export function TMDataGridHeaderCell({
   function handleDragLeave(event: DragEvent<HTMLDivElement>) {
     // dragleave also fires when the pointer crosses into a child element.
     const next = event.relatedTarget;
-    if (next instanceof Node && event.currentTarget.contains(next)) return;
+    if (isNode(next) && event.currentTarget.contains(next)) return;
     setDropSide(null);
   }
 
@@ -222,6 +228,43 @@ export function TMDataGridHeaderCell({
     if (container) autosizeColumn({ table, columnId: column.id, container });
   }
 
+  /**
+   * Writes the width this header's columns are rendered with into
+   * `columnSizing`, for the ones that have no width there yet.
+   *
+   * An unresized column is a fluid (`fr`) track: it renders at whatever share
+   * of the grid it is given, while `column.getSize()` keeps reporting the
+   * declared `size`. Anything that switches a column to exact pixels has to
+   * close that gap first, or the column jumps from the width on screen to the
+   * declared one.
+   *
+   * Under a held pointer that jump is more than cosmetic: it slides the
+   * divider out from under the cursor onto the neighbouring header, where the
+   * browser starts a native column-move drag instead. That drag swallows the
+   * `mouseup` the resize listens for, so the resize keeps running after the
+   * button is released.
+   */
+  function freezeRenderedWidths() {
+    const container = cellRef.current?.closest<HTMLElement>(
+      "[data-dg-scroll-container]",
+    );
+    if (!container) return;
+    const sizing = table.store.state.columnSizing;
+    const frozen: Record<string, number> = {};
+    for (const leaf of header.getLeafHeaders()) {
+      const id = leaf.column.id;
+      if (id in sizing) continue;
+      const width = container
+        .querySelector<HTMLElement>(
+          `[role="columnheader"][data-column-id="${CSS.escape(id)}"]`,
+        )
+        ?.getBoundingClientRect().width;
+      if (width) frozen[id] = Math.round(width);
+    }
+    if (Object.keys(frozen).length === 0) return;
+    table.setColumnSizing((previous) => ({ ...previous, ...frozen }));
+  }
+
   /**
    * Pinned columns are positioned with `getStart()` / `getAfter()`, which sum
    * `column.getSize()`. Fluid (`fr`) columns don't report their rendered width
@@ -229,17 +272,9 @@ export function TMDataGridHeaderCell({
    * keeps the column looking the same and keeps the offsets exact.
    */
   function setPinned(position: "left" | "right" | false) {
-    if (position && !(column.id in table.store.state.columnSizing)) {
-      const width = cellRef.current?.getBoundingClientRect().width;
-      if (width) {
-        table.setColumnSizing((prev) => ({
-          ...prev,
-          [column.id]: Math.round(width),
-        }));
-      }
-    }
-    column.pin(position);
-    // `pin("right")` appends, which would leave the column outside the edit
+    if (position) freezeRenderedWidths();
+    column.pin(pinningPositionOfSide(position));
+    // `pin("end")` appends, which would leave the column outside the edit
     // lane. Normalising after the pin rather than writing the lane by hand
     // keeps TanStack's own handling of a header group's leaves.
     table.setColumnPinning(keepGeneratedColumnsOutermost);
@@ -265,7 +300,9 @@ export function TMDataGridHeaderCell({
       <Menu.Divider key="sort-divider" />,
     );
   }
-  if (canFilter) {
+  // Not under header filters: the item's only job is to reveal a control that
+  // is already on screen, one row below this menu.
+  if (canFilter && !filters.inHeader) {
     menuItems.push(
       <Menu.Item
         key="filter"
@@ -444,13 +481,19 @@ export function TMDataGridHeaderCell({
   }
   if (canManageColumns) {
     menuItems.push(
-      <Menu.Item
-        key="manage"
-        leftSection={<ColumnsIcon size={16} stroke={1.6} />}
-        onClick={() => api.ui.actions.setColumnsPanelOpen(true)}
-      >
-        {labels.manageColumns}
-      </Menu.Item>,
+      <Menu.Sub key="manage">
+        <Menu.Sub.Target>
+          <Menu.Sub.Item leftSection={<ColumnsIcon size={16} stroke={1.6} />}>
+            {labels.manageColumns}
+          </Menu.Sub.Item>
+        </Menu.Sub.Target>
+        <Menu.Sub.Dropdown>
+          {/* No search box: `Menu.Search` registers on the root menu context,
+              which switches off type-ahead and the arrow-key handling of every
+              dropdown of this menu - the column menu's included. */}
+          <TMDataGridMenuColumns searchable={false} />
+        </Menu.Sub.Dropdown>
+      </Menu.Sub>,
     );
   }
   // A trailing divider reads as a dropped item - drop the divider instead.
@@ -514,16 +557,23 @@ export function TMDataGridHeaderCell({
           : 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
-      // records the column on mousedown, before the first pointer move.
-      draggable={canReorder && !isResizing}
+      // Dropped while any column is resizing, so that dragging the separator
+      // resizes the column instead of starting to move it - and so that a
+      // header the divider passes under cannot start a move of its own. The
+      // resize handler records the column on mousedown, before the first
+      // pointer move.
+      draggable={canReorder && !isAnyResizing}
       onDragStart={canReorder ? handleDragStart : undefined}
       onDragEnd={canReorder ? handleDragEnd : undefined}
       onDragOver={isDropTarget ? handleDragOver : undefined}
       onDragLeave={isDropTarget ? handleDragLeave : undefined}
       onDrop={isDropTarget ? handleDrop : undefined}
       style={{
+        // A group header covers the tracks of the leaves under it. Without the
+        // span it would sit in one track and leave the rest of its width with
+        // no cell at all - a gap the body rows scroll up through, since the
+        // header rows above the body are what hides them.
+        gridColumn: header.colSpan > 1 ? `span ${header.colSpan}` : undefined,
         left: pinnedAt === "left" ? layout.offset : undefined,
         right: pinnedAt === "right" ? layout.offset : undefined,
         position: pinnedAt ? "sticky" : undefined,
@@ -565,7 +615,9 @@ export function TMDataGridHeaderCell({
 
       {isLeaf && (
         <div className={classes.headerActions}>
-          {isFiltered && (
+          {/* Dropped under header filters, where the filled-in control below
+              is both the indicator and the way in. */}
+          {isFiltered && !filters.inHeader && (
             <ActionIcon
               className={classes.headerAction}
               data-pinned-visible="true"
@@ -671,15 +723,35 @@ export function TMDataGridHeaderCell({
           // Keeps a drag that starts on the separator from being picked up by
           // the draggable header around it.
           draggable={false}
+          // The drag starts from `column.getSize()`, so the rendered width has
+          // to be in `columnSizing` before the handler reads it - otherwise
+          // the first pointer move snaps a fluid column to its declared size.
+          //
+          // The handler listens for the moves and the release on the document
+          // it is given - the separator's own, not the global one, which is
+          // the opener's when the grid is rendered through a portal into a
+          // window opened with `window.open`.
           onMouseDown={
             canResize
               ? (event) => {
                   suppressSortRef.current = true;
-                  header.getResizeHandler()(event);
+                  freezeRenderedWidths();
+                  header.getResizeHandler(event.currentTarget.ownerDocument)(
+                    event,
+                  );
+                }
+              : undefined
+          }
+          onTouchStart={
+            canResize
+              ? (event) => {
+                  freezeRenderedWidths();
+                  header.getResizeHandler(event.currentTarget.ownerDocument)(
+                    event,
+                  );
                 }
               : undefined
           }
-          onTouchStart={canResize ? header.getResizeHandler() : undefined}
           onClick={(event) => event.stopPropagation()}
           // The spreadsheet gesture: double-click the divider, the column
           // fits its content. Same measurement as the menu item.

package/src/components/TMDataGridHeaderFilterRow.module.css

@@ -0,0 +1,51 @@
+/* The second header row, under the group rows and above the body. Same column
+   tracks as every other row, through subgrid, so it follows resizing,
+   reordering and pinning without knowing about any of them.
+
+   Sticky like the header rows above it, and stacked under them by the same
+   measurement: the table writes every header row's `top` inline once it knows
+   how tall the rows before it are. This is the pre-measurement fallback, and
+   it is right for the common case of one header row. */
+.headerFilterRow {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  position: sticky;
+  top: var(--dg-header-height);
+  z-index: var(--dg-z-header, 6);
+}
+
+.headerFilterCell {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  /* A 60px column has room for the input and nothing beside it. Clipping is
+     what keeps the control from spilling over its neighbour; the operator
+     button is the first thing to go. */
+  overflow: hidden;
+  padding: calc(var(--dg-padding) / 2);
+  /* Opaque: the body scrolls underneath it. */
+  background-color: var(--mantine-color-body);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+}
+
+/* The generated lanes - checkbox, details, row number - hold no filter, so
+   they keep the header's own padding rather than a control's. */
+.headerFilterCell[data-control-column="true"] {
+  padding: 0;
+}
+
+.headerFilterValue {
+  flex: 1;
+  min-width: 0;
+}
+
+.headerFilterOperator {
+  flex: none;
+}
+
+.operatorItemActive {
+  font-weight: 600;
+  color: var(--mantine-primary-color-filled);
+}