@jielga/tmdatagrid 0.1.0

package/src/tmdatagrid/TMDataGrid.module.css

@@ -0,0 +1,410 @@
+/* Size scale. Row heights mirror SIZE_ROW_HEIGHT in sizes.ts — the virtualizer
+   needs the number in JS, so the two have to agree. */
+.root[data-size="xs"] {
+  --dg-row-height: 34px;
+  --dg-header-height: 32px;
+  --dg-font-size: var(--mantine-font-size-xs);
+  --dg-padding: 6px;
+}
+
+.root[data-size="sm"] {
+  --dg-row-height: 42px;
+  --dg-header-height: 38px;
+  --dg-font-size: var(--mantine-font-size-sm);
+  --dg-padding: 8px;
+}
+
+.root[data-size="md"] {
+  --dg-row-height: 52px;
+  --dg-header-height: 44px;
+  --dg-font-size: var(--mantine-font-size-sm);
+  --dg-padding: 10px;
+}
+
+.root[data-size="lg"] {
+  --dg-row-height: 62px;
+  --dg-header-height: 52px;
+  --dg-font-size: var(--mantine-font-size-md);
+  --dg-padding: 14px;
+}
+
+.root[data-size="xl"] {
+  --dg-row-height: 72px;
+  --dg-header-height: 60px;
+  --dg-font-size: var(--mantine-font-size-lg);
+  --dg-padding: 18px;
+}
+
+.root {
+  /* Fallbacks, so the parts still work if rendered outside a sized root. */
+  --dg-row-height: 52px;
+  --dg-header-height: 44px;
+  --dg-font-size: var(--mantine-font-size-sm);
+  --dg-padding: 10px;
+
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  /* Header text is a stretched flex item, so an inherited `text-align: center`
+     from the host page would centre headers away from their cell content. */
+  text-align: left;
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+  background-color: var(--mantine-color-body);
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  padding: 6px var(--mantine-spacing-xs);
+  min-height: 42px;
+  flex-shrink: 0;
+}
+
+.toolbarSpacer {
+  flex: 1;
+}
+
+/* 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;
+}
+
+.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);
+}
+
+.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);
+}
+
+.bodyRow[data-selected="true"] {
+  --row-bg: var(--mantine-primary-color-light);
+}
+
+/* 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;
+}
+
+/* Boundary of a pinned column group.
+   A box-shadow is drawn per cell, and its blur fades in at each cell's own top
+   and bottom edge — stacked down a column that reads as banding at every row
+   seam. Instead: a crisp 1px border for the hard edge, plus a gradient pseudo
+   element pinned to `top: 0; bottom: 0` so consecutive cells butt together into
+   one unbroken band. Mantine sets `color-scheme` on the root, so light-dark()
+   resolves without a second selector. */
+.stickyLeft {
+  border-right: 1px solid var(--mantine-color-default-border);
+}
+
+.stickyRight {
+  border-left: 1px solid var(--mantine-color-default-border);
+}
+
+.stickyLeft::after,
+.stickyRight::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  pointer-events: none;
+}
+
+.stickyLeft::after {
+  left: 100%;
+  background: linear-gradient(
+    to right,
+    light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28)),
+    transparent
+  );
+}
+
+.stickyRight::after {
+  right: 100%;
+  background: linear-gradient(
+    to left,
+    light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28)),
+    transparent
+  );
+}
+
+.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);
+}
+
+.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);
+}
+
+.filterPanel {
+  position: absolute;
+  top: 46px;
+  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);
+}
+
+/* Marks the pin position a column is currently in. */
+.menuItemActive {
+  background-color: var(--mantine-color-default-hover);
+  font-weight: 600;
+}
+
+.columnsPanel {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+}
+
+.columnsPanelSearch {
+  padding: var(--mantine-spacing-sm);
+}
+
+.columnsPanelList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-sm);
+  padding: 0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);
+}
+
+.columnsPanelFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-sm);
+  border-top: 1px solid var(--mantine-color-default-border);
+}

package/src/tmdatagrid/TMDataGrid.tsx

@@ -0,0 +1,101 @@
+import type { RowData } from "@tanstack/react-table";
+import { type CSSProperties, type ReactNode, useMemo } from "react";
+import classes from "./TMDataGrid.module.css";
+import { TMDataGridColumnsPanel } from "./TMDataGridColumnsPanel";
+import { TMDataGridContextProvider } from "./TMDataGridContext";
+import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
+import { TMDataGridFooter } from "./TMDataGridFooter";
+import { TMDataGridTable } from "./TMDataGridTable";
+import {
+  TMDataGridColumnsButton,
+  TMDataGridFilterButton,
+  TMDataGridSummaryCount,
+  TMDataGridToolbar,
+  TMDataGridToolbarSpacer,
+} from "./TMDataGridToolbar";
+import {
+  DEFAULT_TMDATAGRID_SIZE,
+  SIZE_CONTROL_SIZE,
+  SIZE_ROW_HEIGHT,
+  type TMDataGridSize,
+} from "./sizes";
+import type { TMDataGridApi } from "./useTMDataGrid";
+
+export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
+  children: ReactNode;
+  /**
+   * Mantine size scale. Drives row height, font size, cell padding and the
+   * size of the controls in the chrome. `meta.rowHeight` still wins if set.
+   */
+  size?: TMDataGridSize;
+  className?: string;
+  style?: CSSProperties;
+};
+
+/**
+ * Root of the grid. Takes the object returned by `useTMDataGrid` — spread it —
+ * and publishes it to the compound components below it:
+ *
+ * ```tsx
+ * const grid = useTMDataGrid({ data, columns });
+ *
+ * <TMDataGrid {...grid}>
+ *   <TMDataGrid.Toolbar>
+ *     <TMDataGrid.SummaryCount />
+ *     <TMDataGrid.Spacer />
+ *     <TMDataGrid.ColumnsButton />
+ *   </TMDataGrid.Toolbar>
+ *   <TMDataGrid.Table />
+ *   <TMDataGrid.Footer />
+ * </TMDataGrid>
+ * ```
+ */
+function TMDataGridRoot<TData extends RowData>({
+  table,
+  ui,
+  features,
+  size = DEFAULT_TMDATAGRID_SIZE,
+  children,
+  className,
+  style,
+}: TMDataGridProps<TData>) {
+  const rowHeight = table.options.meta?.rowHeight ?? SIZE_ROW_HEIGHT[size];
+
+  const api = useMemo(
+    () => ({
+      table,
+      ui,
+      features,
+      size,
+      rowHeight,
+      controlSize: SIZE_CONTROL_SIZE[size],
+    }),
+    [table, ui, features, size, rowHeight],
+  );
+
+  return (
+    <TMDataGridContextProvider value={api}>
+      <div
+        data-size={size}
+        className={[classes.root, className].filter(Boolean).join(" ")}
+        style={style}
+      >
+        {children}
+      </div>
+    </TMDataGridContextProvider>
+  );
+}
+
+export const TMDataGrid = Object.assign(TMDataGridRoot, {
+  Toolbar: TMDataGridToolbar,
+  Spacer: TMDataGridToolbarSpacer,
+  SummaryCount: TMDataGridSummaryCount,
+  ColumnsButton: TMDataGridColumnsButton,
+  FilterButton: TMDataGridFilterButton,
+  Table: TMDataGridTable,
+  Footer: TMDataGridFooter,
+  /** Rendered by `TMDataGrid.Table`; exported for custom layouts. */
+  FilterPanel: TMDataGridFilterPanel,
+  /** Rendered by `TMDataGrid.ColumnsButton`; exported for custom layouts. */
+  ColumnsPanel: TMDataGridColumnsPanel,
+});

package/src/tmdatagrid/TMDataGridColumnsPanel.tsx

@@ -0,0 +1,91 @@
+import { Button, Checkbox, ScrollArea, Text, TextInput } from "@mantine/core";
+import { useSelector } from "@tanstack/react-store";
+import { useState } from "react";
+import classes from "./TMDataGrid.module.css";
+import { useTMDataGridContext } from "./TMDataGridContext";
+import { getColumnLabel } from "./columnUtils";
+import { SearchIcon } from "./icons";
+
+/**
+ * The "Manage columns" surface. Reachable from every column header menu and
+ * from the grid's burger menu, so it lives on its own and is rendered by
+ * `TMDataGrid.ColumnsButton`.
+ */
+export function TMDataGridColumnsPanel() {
+  const { table, controlSize } = useTMDataGridContext();
+  const [search, setSearch] = useState("");
+
+  const columnVisibility = useSelector(
+    table.store,
+    (state) => state.columnVisibility,
+  );
+
+  const columns = table.getAllLeafColumns();
+  const needle = search.trim().toLowerCase();
+  const visibleInPanel = needle
+    ? columns.filter((column) =>
+        getColumnLabel(column).toLowerCase().includes(needle),
+      )
+    : columns;
+
+  const hideableColumns = columns.filter((column) => column.getCanHide());
+  const shownCount = hideableColumns.filter(
+    (column) => columnVisibility[column.id] !== false,
+  ).length;
+
+  return (
+    <div className={classes.columnsPanel}>
+      <div className={classes.columnsPanelSearch}>
+        <TextInput
+          value={search}
+          onChange={(event) => setSearch(event.currentTarget.value)}
+          placeholder="Search"
+          leftSection={<SearchIcon size={16} stroke={1.6} />}
+          size={controlSize}
+          data-autofocus
+        />
+      </div>
+
+      <ScrollArea.Autosize mah={260} type="auto">
+        <div className={classes.columnsPanelList}>
+          {visibleInPanel.map((column) => (
+            <Checkbox
+              key={column.id}
+              size={controlSize}
+              label={getColumnLabel(column)}
+              disabled={!column.getCanHide()}
+              checked={columnVisibility[column.id] !== false}
+              onChange={(event) =>
+                column.toggleVisibility(event.currentTarget.checked)
+              }
+            />
+          ))}
+          {visibleInPanel.length === 0 && (
+            <Text size={controlSize} c="dimmed">
+              No columns match “{search}”
+            </Text>
+          )}
+        </div>
+      </ScrollArea.Autosize>
+
+      <div className={classes.columnsPanelFooter}>
+        <Checkbox
+          size={controlSize}
+          label="Show/Hide All"
+          checked={shownCount === hideableColumns.length}
+          indeterminate={shownCount > 0 && shownCount < hideableColumns.length}
+          onChange={(event) =>
+            table.toggleAllColumnsVisible(event.currentTarget.checked)
+          }
+        />
+        <Button
+          variant="subtle"
+          size="compact-sm"
+          onClick={() => table.resetColumnVisibility()}
+        >
+          RESET
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/tmdatagrid/TMDataGridContext.ts

@@ -0,0 +1,32 @@
+import { createContext, useContext } from "react";
+import type { TMDataGridSize } from "./sizes";
+import type { TMDataGridApi } from "./useTMDataGrid";
+
+/**
+ * Row shape the chrome components work against. They only ever touch columns,
+ * rows and cells generically, so the concrete row type is erased at the context
+ * boundary — the same trick Mantine uses for its compound components.
+ */
+export type TMDataGridRowData = Record<string, unknown>;
+
+export type TMDataGridContextValue = TMDataGridApi<TMDataGridRowData> & {
+  size: TMDataGridSize;
+  /** Row height in px, already resolved from `size` and `meta.rowHeight`. */
+  rowHeight: number;
+  /** Mantine control size that pairs with `size`. */
+  controlSize: TMDataGridSize;
+};
+
+const TMDataGridContext = createContext<unknown>(null);
+
+export const TMDataGridContextProvider = TMDataGridContext.Provider;
+
+export function useTMDataGridContext(): TMDataGridContextValue {
+  const api = useContext(TMDataGridContext);
+  if (!api) {
+    throw new Error(
+      "TMDataGrid compound components must be rendered inside <TMDataGrid>",
+    );
+  }
+  return api as TMDataGridContextValue;
+}