@jielga/tmdatagrid 0.1.0 → 0.2.0

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

@@ -0,0 +1,20 @@
+/* Floats over the first body rows, anchored to `.tableWrapper`. Sits just
+   below the header row, so its offset follows the size scale rather than a
+   fixed pixel count. */
+.filterPanel {
+  position: absolute;
+  top: calc(var(--dg-header-height) + 2px);
+  left: var(--mantine-spacing-md);
+  z-index: 5;
+  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);
+}
+
+.filterRow {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--mantine-spacing-xs);
+}

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

@@ -1,8 +1,8 @@
 import { ActionIcon, Button, Select, Stack, TextInput } from "@mantine/core";
 import { useSelector } from "@tanstack/react-store";
-import classes from "./TMDataGrid.module.css";
-import { useTMDataGridContext } from "./TMDataGridContext";
-import { getColumnLabel, getColumnType } from "./columnUtils";
+import classes from "./TMDataGridFilterPanel.module.css";
+import { useTMDataGridContext } from "../TMDataGridContext";
+import { getColumnLabel, getColumnType } from "../core/columnUtils";
 import {
   type TMDataGridFilterOperator,
   type TMDataGridFilterValue,
@@ -11,7 +11,7 @@ import {
   getOperatorsForType,
   isTMDataGridFilterValue,
   operatorNeedsValue,
-} from "./filterOperators";
+} from "../core/filterOperators";
 import { CloseIcon } from "./icons";
 
 const FALLBACK_FILTER: TMDataGridFilterValue = { operator: "contains", value: "" };

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

@@ -0,0 +1,10 @@
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mantine-spacing-lg);
+  padding: 4px var(--mantine-spacing-sm);
+  min-height: 48px;
+  flex-shrink: 0;
+  border-top: 1px solid var(--mantine-color-default-border);
+}

package/src/tmdatagrid/components/TMDataGridFooter.tsx

@@ -0,0 +1,143 @@
+import { ActionIcon, Group, Select, Text } from "@mantine/core";
+import type { RowData } from "@tanstack/react-table";
+import { useSelector } from "@tanstack/react-store";
+import type { ReactNode } from "react";
+import classes from "./TMDataGridFooter.module.css";
+import { useTMDataGridContext } from "../TMDataGridContext";
+import { getGridCapabilities } from "../core/capabilities";
+import { ChevronLeftIcon, ChevronRightIcon } from "./icons";
+import type { TMDataGridTable } from "../useTMDataGrid";
+
+/** Distilled pagination state and actions for building a custom pager. */
+export type TMDataGridPaginationApi = {
+  pageIndex: number;
+  pageSize: number;
+  /** `-1` when a manual grid declares `pageCount: -1` (unknown total). */
+  pageCount: number;
+  rowCount: number;
+  canPreviousPage: boolean;
+  canNextPage: boolean;
+  setPageIndex: (pageIndex: number) => void;
+  setPageSize: (pageSize: number) => void;
+  previousPage: () => void;
+  nextPage: () => void;
+  firstPage: () => void;
+  lastPage: () => void;
+};
+
+/**
+ * Reads {@link TMDataGridPaginationApi} off a table. The Footer feeds it to the
+ * `pagination` render prop; a pager living outside the Footer can call it with
+ * the table from `useTMDataGrid` directly.
+ */
+export function getTMDataGridPaginationApi<TData extends RowData>(
+  table: TMDataGridTable<TData>,
+): TMDataGridPaginationApi {
+  const { pageIndex, pageSize } = table.store.state.pagination;
+  return {
+    pageIndex,
+    pageSize,
+    pageCount: table.getPageCount(),
+    rowCount: table.getRowCount(),
+    canPreviousPage: table.getCanPreviousPage(),
+    canNextPage: table.getCanNextPage(),
+    setPageIndex: (index) => table.setPageIndex(index),
+    setPageSize: (size) => table.setPageSize(size),
+    previousPage: () => table.previousPage(),
+    nextPage: () => table.nextPage(),
+    firstPage: () => table.firstPage(),
+    lastPage: () => table.lastPage(),
+  };
+}
+
+export type TMDataGridFooterProps = {
+  pageSizeOptions?: ReadonlyArray<number>;
+  /** Replaces the built-in pager. Receives the distilled pagination API. */
+  pagination?: (api: TMDataGridPaginationApi) => ReactNode;
+};
+
+/**
+ * MUI-style pager: "Rows per page · from–to of total · ‹ ›".
+ *
+ * Renders nothing unless pagination is enabled (`enablePagination` or
+ * `manualPagination`) — the footer is a pager; extra footer content belongs in
+ * your own layout.
+ *
+ * Row totals come from `table.getRowCount()`, which prefers `options.rowCount`
+ * — so a server-paged grid shows the server's total without changes here.
+ */
+export function TMDataGridFooter({
+  pageSizeOptions = [10, 25, 50, 100],
+  pagination,
+}: TMDataGridFooterProps) {
+  const { table, features, controlSize } = useTMDataGridContext();
+  useSelector(table.store);
+
+  if (!getGridCapabilities(table, features).canPaginate) return null;
+
+  if (pagination) {
+    return (
+      <div className={classes.footer}>
+        {pagination(getTMDataGridPaginationApi(table))}
+      </div>
+    );
+  }
+
+  const { pageIndex, pageSize } = table.store.state.pagination;
+  const total = table.getRowCount();
+  const from = total === 0 ? 0 : pageIndex * pageSize + 1;
+  const to = Math.min(total, (pageIndex + 1) * pageSize);
+  // A page size restored from storage, or set through `initialState`, need not
+  // be one of the offered sizes. Without it in the list the Select renders
+  // blank, so the current size is folded in rather than shown as nothing.
+  const sizeOptions = pageSizeOptions.includes(pageSize)
+    ? pageSizeOptions
+    : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
+
+  return (
+    <div className={classes.footer}>
+      <Group gap="xs" wrap="nowrap">
+        <Text size={controlSize} c="dimmed">
+          Rows per page:
+        </Text>
+        <Select
+          size={controlSize}
+          w={78}
+          allowDeselect={false}
+          variant="unstyled"
+          data={sizeOptions.map(String)}
+          value={String(pageSize)}
+          onChange={(value) => {
+            table.setPageSize(Number(value) || pageSizeOptions[0]);
+            table.setPageIndex(0);
+          }}
+        />
+      </Group>
+
+      <Text size={controlSize} c="dimmed">
+        {from}–{to} of {total}
+      </Text>
+
+      <Group gap={4} wrap="nowrap">
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          aria-label="Previous page"
+          disabled={!table.getCanPreviousPage()}
+          onClick={() => table.previousPage()}
+        >
+          <ChevronLeftIcon size={18} stroke={1.6} />
+        </ActionIcon>
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          aria-label="Next page"
+          disabled={!table.getCanNextPage()}
+          onClick={() => table.nextPage()}
+        >
+          <ChevronRightIcon size={18} stroke={1.6} />
+        </ActionIcon>
+      </Group>
+    </div>
+  );
+}

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

@@ -0,0 +1,153 @@
+.headerCell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 var(--dg-padding);
+  min-width: 0;
+  min-height: var(--dg-header-height);
+  font-weight: 600;
+  font-size: var(--dg-font-size);
+  background-color: var(--mantine-color-body);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+  user-select: none;
+}
+
+.headerCell[data-align="right"] {
+  justify-content: flex-end;
+}
+
+.headerCell[data-align="center"] {
+  justify-content: center;
+}
+
+/* Sorted or filtered columns read as active, like the MUI data grid. */
+.headerCell[data-active="true"] .headerTitle {
+  color: var(--mantine-primary-color-filled);
+}
+
+.headerTitle {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Right-aligned headers stay text so the ellipsis still works; centered ones
+   hold a control (the select-all checkbox), so they become a flex box. */
+.headerCell[data-align="right"] .headerTitle {
+  text-align: right;
+}
+
+.headerCell[data-align="center"] .headerTitle {
+  display: flex;
+  justify-content: center;
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* Actions always reserve their width. On right-aligned columns they move to the
+   leading edge so the header text stays flush with the cell values below it. */
+.headerCell[data-align="right"] .headerActions {
+  order: -1;
+  margin-left: 0;
+  margin-right: auto;
+}
+
+/* Idle actions are removed from layout, not just faded — reserving their width
+   would truncate header text that otherwise fits. Indicators that must stay
+   visible (active sort, active filter, open menu) set data-pinned-visible. */
+.headerAction {
+  display: none;
+}
+
+.headerCell:hover .headerAction,
+.headerCell:focus-within .headerAction,
+.headerAction[data-pinned-visible="true"] {
+  display: flex;
+}
+
+.headerCellSortable {
+  cursor: pointer;
+}
+
+/* Column reordering. The dragged header stays in place and dims — the browser
+   already carries a snapshot of it under the pointer — while the header being
+   dragged over draws a bar on the edge the column will land against. */
+.headerCellDragging {
+  opacity: 0.4;
+}
+
+.headerCellDropBefore::before,
+.headerCellDropAfter::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--mantine-primary-color-filled);
+  z-index: 5;
+  pointer-events: none;
+}
+
+.headerCellDropBefore::before {
+  left: 0;
+}
+
+.headerCellDropAfter::before {
+  right: 0;
+}
+
+/* Doubles as the column divider seen between every header cell. */
+.columnSeparator {
+  position: absolute;
+  top: 25%;
+  right: 0;
+  height: 50%;
+  width: 10px;
+  transform: translateX(50%);
+  display: flex;
+  justify-content: center;
+  z-index: 1;
+}
+
+.columnSeparatorResizable {
+  cursor: col-resize;
+  touch-action: none;
+}
+
+/* The divider is a hover affordance, not permanent chrome — it only appears on
+   the header cell you are pointing at, or on the column being resized. */
+.columnSeparator::after {
+  content: "";
+  width: 1px;
+  height: 100%;
+  background-color: transparent;
+  transition:
+    background-color 120ms ease,
+    width 120ms ease;
+}
+
+.headerCell:hover .columnSeparator::after,
+.headerCell:focus-within .columnSeparator::after {
+  background-color: var(--mantine-color-default-border);
+}
+
+.columnSeparatorResizable:hover::after,
+.columnSeparatorActive::after {
+  width: 2px;
+  background-color: var(--mantine-primary-color-filled);
+}
+
+/* Marks the pin position a column is currently in. */
+.menuItemActive {
+  background-color: var(--mantine-color-default-hover);
+  font-weight: 600;
+}

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

@@ -3,22 +3,23 @@ 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,
@@ -32,11 +33,8 @@ import {
   PinOffIcon,
   PinRightIcon,
 } from "./icons";
-import {
-  type TMDataGridFeatures,
-  openColumnFilter,
-  SELECT_COLUMN_ID,
-} from "./useTMDataGrid";
+import { SELECT_COLUMN_ID } from "./TMDataGridSelectColumn";
+import { type TMDataGridFeatures, openColumnFilter } from "../useTMDataGrid";
 
 export type TMDataGridHeader = Header<
   TMDataGridFeatures,
@@ -311,8 +309,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 +322,17 @@ export function TMDataGridHeaderCell({
       data-testid={`dg-header-${column.id}`}
       data-active={isSorted || isFiltered}
       data-align={align}
+      // 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,100 @@
+import { Checkbox } from "@mantine/core";
+import { useSelector } from "@tanstack/react-store";
+import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+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()}
+    />
+  );
+}
+
+function SelectRowCheckbox<TData extends RowData>({
+  row,
+}: {
+  row: Row<TMDataGridFeatures, TData>;
+}) {
+  const selected = useSelector(row.table.store, () => row.getIsSelected());
+  const someSelected = useSelector(row.table.store, () =>
+    row.getIsSomeSelected(),
+  );
+
+  return (
+    <Checkbox
+      size="xs"
+      aria-label="Select row"
+      checked={selected}
+      disabled={!row.getCanSelect()}
+      indeterminate={someSelected && !selected}
+      onChange={row.getToggleSelectedHandler()}
+      // A row can select on click too; the checkbox must not toggle twice.
+      onClick={(event) => event.stopPropagation()}
+    />
+  );
+}
+
+/**
+ * The generated checkbox column, prepended under
+ * `rowSelectionMode: "checkbox"` — the default whenever row selection is on.
+ */
+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 }) => <SelectAllCheckbox table={table} />,
+    cell: ({ row }) => <SelectRowCheckbox row={row} />,
+  };
+}

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

@@ -0,0 +1,103 @@
+/* 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);
+}
+
+/* Selection and highlight are separate: a row is always `data-selected`, but it
+   only takes the highlight colour when `highlightSelectedRows` is on — the
+   default in row selection mode, off with checkboxes. */
+.bodyRow[data-highlighted="true"] {
+  --row-bg: var(--dg-row-selected-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);
+}
+
+.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);
+}