@jielga/tmdatagrid 2.0.0-beta.9 → 2.0.1

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

@@ -3,13 +3,13 @@ import {
   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,7 +25,7 @@ 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>;
@@ -82,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>
@@ -99,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>;
@@ -117,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;

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);
@@ -191,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);
   }
 
@@ -270,8 +273,8 @@ export function TMDataGridHeaderCell({
    */
   function setPinned(position: "left" | "right" | false) {
     if (position) freezeRenderedWidths();
-    column.pin(position);
-    // `pin("right")` appends, which would leave the column outside the edit
+    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);
@@ -297,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"
@@ -476,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.
@@ -529,11 +540,11 @@ export function TMDataGridHeaderCell({
       // The same coordinate the body, summary and entry cells carry, so one
       // selector reaches a column's header and its cells alike.
       data-column-id={column.id}
-      data-active={isSorted || isFiltered}
+      data-active={isSorted || isFiltered || undefined}
       data-align={align}
       // A control lane is a fixed track, so it cannot take the cell padding the
       // scale grows for text. See isControlColumn.
-      data-control-column={isControlColumn(column.id)}
+      data-control-column={isControlColumn(column.id) || undefined}
       // Only meaningful on a sortable column: "none" announces that this
       // header sorts, which is wrong on one that does not.
       aria-sort={
@@ -558,6 +569,11 @@ export function TMDataGridHeaderCell({
       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,
@@ -599,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"
@@ -621,19 +639,24 @@ export function TMDataGridHeaderCell({
           {canSort && (
             <ActionIcon
               className={`${classes.headerAction} ${classes.sortAction}`}
-              data-pinned-visible={isSorted}
+              data-pinned-visible={isSorted || undefined}
               // The arrow is the only sort indicator now that the title no
               // longer tints, so it takes the colour while the sort holds. On
               // an unsorted column it is only the hover affordance, and stays a
               // faded grey so the two are not confused.
-              data-sorted={isSorted}
+              data-sorted={isSorted || undefined}
               variant="subtle"
               color={isSorted ? undefined : "gray"}
               size="xs"
               aria-label={labels.sortColumn(label)}
               data-dg-part="header-sort"
               data-column-id={column.id}
-              onClick={column.getToggleSortingHandler()}
+              // Stopped here: the header cell around it sorts on click too, and
+              // letting the click reach it would advance the sort twice.
+              onClick={(event) => {
+                event.stopPropagation();
+                column.getToggleSortingHandler()?.(event);
+              }}
             >
               {sortDirection ? (
                 <ArrowDownIcon size={14} stroke={1.6} />
@@ -667,7 +690,7 @@ export function TMDataGridHeaderCell({
                   // Held visible for the right-click menu too: that one opens at
                   // the pointer and is portaled, so the hover that revealed the
                   // actions is lost the moment the pointer enters the dropdown.
-                  data-pinned-visible={menuOpened || contextMenuOpened}
+                  data-pinned-visible={menuOpened || contextMenuOpened || undefined}
                   variant="subtle"
                   color="gray"
                   size="xs"
@@ -702,18 +725,30 @@ export function TMDataGridHeaderCell({
           ]
             .filter(Boolean)
             .join(" ")}
+          // A part only where it is a handle: on a fixed-width column the
+          // separator is a plain divider, and a test that finds it would be
+          // dragging something that does nothing.
+          data-dg-part={canResize ? "header-resize" : undefined}
+          data-column-id={canResize ? column.id : undefined}
           // 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;
                   freezeRenderedWidths();
-                  header.getResizeHandler()(event);
+                  header.getResizeHandler(event.currentTarget.ownerDocument)(
+                    event,
+                  );
                 }
               : undefined
           }
@@ -721,7 +756,9 @@ export function TMDataGridHeaderCell({
             canResize
               ? (event) => {
                   freezeRenderedWidths();
-                  header.getResizeHandler()(event);
+                  header.getResizeHandler(event.currentTarget.ownerDocument)(
+                    event,
+                  );
                 }
               : undefined
           }

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);
+}