@jielga/tmdatagrid 2.2.0 → 2.4.0

package/skills/options/references/typed-links.md

@@ -0,0 +1,134 @@
+# Typed links
+
+Reference for the `options` skill: `createTMDataGridUrlState`, what a link
+may name, the definition's members, and the TanStack Router setup.
+
+`createTMDataGridUrlState({ key, columns, slices? })` defines a grid's deep
+links from its columns. `columns` is the array the grid renders, built with
+`createTMDataGridColumnHelper`; each helper column carries its id, `meta.type`,
+value type, `meta.filter.operators` and its `enableColumnFilter`,
+`enableSorting` and `meta.filter.url` switches in its type only
+(`TMDataGridColumnInfo`, read with `TMDataGridColumnInfoOf`; the brand type is
+`TMDataGridTypedColumn`).
+
+```tsx
+const columns = columnHelper.columns([
+  columnHelper.accessor("department", { header: "Department", meta: { type: "select" } }),
+  columnHelper.accessor("salary", { header: "Salary", meta: { type: "number" } }),
+  columnHelper.accessor("email", { header: "Email", enableColumnFilter: false }),
+]);
+
+export const employeesUrl = createTMDataGridUrlState({
+  key: "employees",
+  columns,
+  slices: ["columnFilters", "sorting"],
+});
+
+const persist = { urlKey: employeesUrl.urlKey } satisfies TMDataGridPersistence;
+
+const href = `/employees?${employeesUrl.searchParams({
+  filters: { department: { operator: "isAnyOf", value: ["Design"] } },
+  sorting: [{ id: "salary", desc: true }],
+})}`;
+```
+
+What a link may name (`TMDataGridUrlInput`); anything else is a type error:
+
+- `filters` (`TMDataGridUrlFiltersInput`): only columns whose
+  `enableColumnFilter` is not `false` and `meta.filter.url` is not `false`.
+  With no such column, `filters` accepts no key at all.
+- The operator: one the column's `meta.type` offers, narrowed by
+  `meta.filter.operators`.
+- The value: a `number` for a number column (`between` takes
+  `[number | null, number | null]`, `null` leaving that end open); a `Date` or a
+  `YYYY-MM-DD` string for a date column (`TMDataGridDateInput`; a `Date` is
+  written as its local calendar day, a longer string is cut to 10 characters);
+  a `boolean` for a boolean column; a `string` for a string column; an array of
+  the column's own values (the element type for an array value) for `isAnyOf` /
+  `isNoneOf`; no `value` for `isEmpty` / `isNotEmpty`.
+- `sorting` (`TMDataGridUrlSortableId`): only columns whose `enableSorting` is
+  not `false`. `desc` defaults to `false`.
+- `globalFilter` and `pagination` (`{ pageIndex, pageSize }`): only when the
+  definition carries those slices. `slices` defaults to every data slice.
+- A column with an accessor function is named by its `id`; without an `id` it
+  cannot be named. A dotted accessor key is named with underscores
+  (`address_city`).
+- Only literal values count: `enableSorting: isAdmin` reads as not sortable.
+  Columns built without the helper offer nothing. A table-level
+  `enableColumnFilters` or `enableSorting` is not seen.
+
+The definition (`TMDataGridUrlState`):
+
+| Member | Type | Description |
+| --- | --- | --- |
+| `key` | `string` | The URL search param. |
+| `slices` | `TMDataGridDataSlice[]` | The data slices the param carries. Default: every data slice. |
+| `urlKey` | `TMDataGridPersistKey` | For `persist.urlKey`: the key, or `[key, slices]` when `slices` is set. |
+| `searchParams(input, { serialize? })` | `URLSearchParams` | The link as search params, encoded with `serialize` (default `JSON.stringify`, as the grid's default). Empty when the input sets nothing. Pass the `serialize` given to `persist`, if any. |
+| `search(input)` | `{ [key]: TMDataGridUrlPayload \| undefined }` | The link as a router search object. |
+| `payload(input)` | `TMDataGridUrlPayload \| undefined` | The param's value in the grid's state shape (filters as `{ id, value: { operator, value } }` with string values), or `undefined` when the input sets nothing. |
+| `validateSearch(search)` | `{ [key]?: TMDataGridUrlPayload }` | A route search validator: keeps the param when it is a plain object, drops anything else. The grid checks each slice itself on read. |
+| `persist(storage?)` | `{ urlKey, urlStorage? }` | Spread into `persist`. Without `storage`, only `urlKey`, and the grid uses the browser's URL. |
+
+`persist(storage)` takes a `TMDataGridUrlSearchStorage`,
+`{ get(name): unknown; set(name, value: TMDataGridUrlPayload | undefined): void }`,
+for a router that keeps objects in its search and encodes them itself, such as
+TanStack Router. `get` returns the param's value or `undefined` (a string value
+is passed to the grid unchanged); `set` receives the payload object, or
+`undefined` to remove the param. The bridge converts with JSON, so leave
+`serialize` and `deserialize` at their defaults with it.
+
+```tsx
+// TanStack Router: the route validates, the grid writes through the router.
+const employeesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/employees",
+  validateSearch: employeesUrl.validateSearch,
+  component: EmployeesPage,
+});
+
+function EmployeesPage() {
+  const router = useRouter();
+  const persist = useMemo(
+    () =>
+      employeesUrl.persist({
+        get: (name) => (router.state.location.search as Record<string, unknown>)[name],
+        set: (name, value) =>
+          void router.navigate({
+            to: ".",
+            search: (prev: Record<string, unknown>) => ({ ...prev, [name]: value }),
+            replace: true,
+          }),
+      }),
+    [router],
+  );
+  const grid = useTMDataGrid({ data, columns, persist });
+  // ...
+}
+
+<Link
+  to="/employees"
+  search={employeesUrl.search({
+    filters: { salary: { operator: "between", value: [40_000, 60_000] } },
+  })}
+/>;
+```
+
+- A route with its own search params spreads the validator:
+  `validateSearch: (s) => ({ ...employeesUrl.validateSearch(s), tab: ... })`.
+- With `createHashHistory()` the param sits after the `#` with the rest of the
+  router's search.
+- For URLs without percent escapes, give the router `parseSearch:
+  parseSearchWith(parse)` from `jsurl2`, and a `stringifySearch` that encodes
+  each object value with JSURL2's `stringify` and joins the pairs with
+  `encodeURIComponent`. TanStack Router's own `stringifySearchWith(stringify)`
+  joins them with `URLSearchParams`, which escapes JSURL2's `(`, `)`, `~` and
+  `!` again. JSURL2's `parse` also reads JSON, so older links still open. The
+  grid is unaffected. The full `stringifySearch` is on the
+  `typed-deep-links.md` docs page.
+- The grid reads its param once, on mount. A link to the route the grid is
+  already on changes the URL but not the grid; link from another route, or
+  remount the grid on that navigation.
+
+Source: `packages/tmdatagrid/docs/persistence.md` (Typed links) and
+`packages/tmdatagrid/docs/typed-deep-links.md`.

package/skills/rows/SKILL.md

@@ -8,16 +8,16 @@ description: >
   reading a selection through the table store, onRowClick / onCellClick /
   onCellDoubleClick / onCellContextMenu, the renderRowContextMenu slot with its
   internalItems handback, renderColumnMenuItems and rowContextMenuProps, per-row
-  styling with rowStyle, rowClassName, striped and the --row-bg rule, the row
-  details panel through renderDetails, detailsColumnPosition and
-  DETAILS_COLUMN_ID, row pinning with enableRowPinning and row.pin, and the
-  row-number gutter through enableRowNumbers. Load when selecting rows, reacting
-  to a click, opening a detail panel, colouring rows by their data, pinning rows
-  to an edge, or numbering them.
+  styling with rowStyle, rowClassName, striped, highlightOnHover and the
+  --row-bg rule, the row details panel through renderDetails,
+  detailsColumnPosition and DETAILS_COLUMN_ID, row pinning with enableRowPinning
+  and row.pin, and the row-number gutter through enableRowNumbers. Load when
+  selecting rows, reacting to a click, opening a detail panel, colouring rows by
+  their data, pinning rows to an edge, or numbering them.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.2.0'
+  library_version: '2.4.0'
 sources:
   - 'Jielga/react:packages/tmdatagrid/docs/row-selection.md'
   - 'Jielga/react:packages/tmdatagrid/docs/row-interaction.md'
@@ -213,8 +213,15 @@ them and they stop showing. `striped` follows position in the view, so it
 survives sorting and filtering rather than sticking to records, and pinned rows
 are not striped.
 
+The hover tint follows the gestures a row answers: a row takes it under
+`selectionMode: "row"` or a highlight mode, `onRowClick` or
+`renderRowContextMenu`, and a group row never does. A grid with none of those
+shows no hover tint. `highlightOnHover` on the Table overrides that: `true`
+tints every row, `false` none.
+
 Rows carry `data-selected`, `data-selected-bg`, `data-highlighted`,
-`data-grouped`, `data-depth`, `data-context-menu` and `data-row-id`, so a
+`data-grouped`, `data-depth`, `data-context-menu`, `data-highlight-on-hover`
+and `data-row-id`, so a
 stylesheet can target any of it without a callback. The boolean attributes are
 present, with the value `"true"`, only while they apply - `data-grouped` only
 on group rows - so `[data-grouped]` and `[data-grouped="true"]` are
@@ -247,7 +254,9 @@ Which rows are open is TanStack's own `expanded` state, so anything can open
 one - `row.toggleExpanded()` from a menu item, `initialState.expanded`,
 `table.toggleAllRowsExpanded()` - and it persists as a `data` slice. The panel
 is a cell spanning the row, not a row: `aria-rowcount` still counts records, and
-a click inside it does not select the row underneath. Group rows have no panel;
+a click inside it does not select the row underneath. It has no padding: content
+fills the row edge to edge, and content that should line up with the cell text
+pads itself with `padding: var(--dg-padding)`. Group rows have no panel;
 expanding one opens its children.
 
 Rows are virtualized. A row that leaves the viewport and the `overscan`

package/skills/server-side/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.2.0'
+  library_version: '2.4.0'
 sources:
   - 'Jielga/react:packages/tmdatagrid/docs/server-side.md'
   - 'Jielga/react:packages/tmdatagrid/docs/server-query.md'

package/skills/testing/SKILL.md

@@ -13,7 +13,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.2.0'
+  library_version: '2.4.0'
 sources:
   - 'Jielga/react:packages/tmdatagrid/docs/testing.md'
   - 'Jielga/react:playwright/support/DataGrid.ts'

package/skills/testing-components/SKILL.md

@@ -12,7 +12,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.2.0'
+  library_version: '2.4.0'
 sources:
   - 'Jielga/react:packages/tmdatagrid/docs/testing.md'
   - 'Jielga/react:packages/tmdatagrid/test/gallery/main.tsx'

package/skills/testing-editing/SKILL.md

@@ -12,7 +12,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.2.0'
+  library_version: '2.4.0'
 sources:
   - 'Jielga/react:packages/tmdatagrid/docs/testing.md'
   - 'Jielga/react:packages/tmdatagrid/docs/editing.md'

package/src/components/TMDataGridFilterPills.module.css

@@ -13,13 +13,15 @@
    shape readable against any surface. Scoped through `.filterPills` for the
    specificity to beat Mantine's own rule whichever stylesheet loads last. */
 .filterPills .pill {
-  background-color: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-5)
-  );
-  color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
-  border: 1px solid
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3));
+  background-color: var(--mantine-color-gray-1);
+  color: var(--mantine-color-black);
+  border: 1px solid var(--mantine-color-gray-3);
+}
+
+:where([data-mantine-color-scheme="dark"]) .filterPills .pill {
+  background-color: var(--mantine-color-dark-5);
+  color: var(--mantine-color-dark-0);
+  border-color: var(--mantine-color-dark-3);
 }
 
 /* The label is a button so a pill can be clicked back open, but it must read as

package/src/components/TMDataGridFilterPills.tsx

@@ -2,6 +2,7 @@ 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";
+import { resolveColumnOptions } from "../core/columnOptions";
 import { getColumnLabel, getColumnType } from "../core/columnUtils";
 import {
   formatFilterLabel,
@@ -9,7 +10,12 @@ import {
   isTMDataGridFilterValue,
 } from "../core/filterOperators";
 import type { TMDataGridSize } from "../core/sizes";
-import { openColumnFilter, type TMDataGridApi } from "../useTMDataGrid";
+import type { TMDataGridRowData } from "../TMDataGridContext";
+import {
+  openColumnFilter,
+  type TMDataGridApi,
+  type TMDataGridTable,
+} from "../useTMDataGrid";
 
 /** Mantine's style props (`mb="sm"`, `hiddenFrom="sm"`) are set on the wrapper. */
 export type TMDataGridFilterPillsProps<TData extends RowData> = BoxProps & {
@@ -55,6 +61,9 @@ export function TMDataGridFilterPills<TData extends RowData>({
   ...others
 }: TMDataGridFilterPillsProps<TData>) {
   const { table, labels } = api;
+  // The options readers take the row-type-erased table, like the rest of the
+  // chrome does through context.
+  const erased = table as unknown as TMDataGridTable<TMDataGridRowData>;
   const columnFilters = useSelector(
     table.store,
     (state) => state.columnFilters,
@@ -76,6 +85,7 @@ export function TMDataGridFilterPills<TData extends RowData>({
       <Pill.Group size={size}>
         {activeFilters.map((filter) => {
           const column = table.getColumn(filter.id);
+          const erasedColumn = erased.getColumn(filter.id);
           const label = column ? getColumnLabel(column) : filter.id;
           const value = filter.value;
           // isFilterActive already vouched for the shape; this narrows it.
@@ -125,6 +135,10 @@ export function TMDataGridFilterPills<TData extends RowData>({
                   type: column ? getColumnType(column) : "string",
                   filter: value,
                   operatorLabels: labels.operators,
+                  options: erasedColumn
+                    ? resolveColumnOptions({ table: erased, column: erasedColumn })
+                    : undefined,
+                  labels,
                 })}
               </UnstyledButton>
             </Pill>

package/src/components/TMDataGridGroupColumn.tsx

@@ -8,7 +8,8 @@ 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 { resolveColumnOptions } from "../core/columnOptions";
+import { getColumnLabel, getColumnType } from "../core/columnUtils";
 import { formatGroupValue, getGroupDataRows } from "../core/grouping";
 import type { TMDataGridFeatures, TMDataGridTable } from "../useTMDataGrid";
 
@@ -30,7 +31,7 @@ export function GroupCell<TData extends RowData>({
 }: {
   row: Row<TMDataGridFeatures, TData>;
 }) {
-  const { labels } = useTMDataGridContext();
+  const { table, labels } = useTMDataGridContext();
   const tabIndex = useBodyControlTabIndex();
   const expanded = useSelector(row.table.store, () => row.getIsExpanded());
 
@@ -38,7 +39,21 @@ export function GroupCell<TData extends RowData>({
   // the indent alone is what places them under their group.
   if (!row.getIsGrouped()) return null;
 
-  const label = formatGroupValue(row.groupingValue, labels.blankGroupValue);
+  // `groupingValue` is TanStack's map key, the value already turned into a
+  // string: `true` arrives as "true", a Date as its English timestamp, `null`
+  // as "null". The first record's grouping value is the value itself.
+  const columnId = row.groupingColumnId;
+  const column = columnId === undefined ? undefined : table.getColumn(columnId);
+  const dataRows = getGroupDataRows(row);
+  const value =
+    columnId === undefined || dataRows[0] === undefined
+      ? row.groupingValue
+      : dataRows[0].getGroupingValue(columnId);
+  const label = formatGroupValue(value, labels.blankGroupValue, {
+    type: column ? getColumnType(column) : undefined,
+    options: column ? resolveColumnOptions({ table, column }) : undefined,
+    labels,
+  });
 
   return (
     <UnstyledButton
@@ -68,7 +83,7 @@ export function GroupCell<TData extends RowData>({
       {/* Data rows, not direct children and not `getLeafRows()`: a nested group
           counts the records under it, never the sub-groups in between. */}
       <span className={classes.groupCount}>
-        ({getGroupDataRows(row).length})
+        ({dataRows.length})
       </span>
     </UnstyledButton>
   );

package/src/components/TMDataGridHeaderFilterRow.tsx

@@ -268,7 +268,13 @@ export function TMDataGridHeaderFilterRow({
           <div
             key={header.id}
             role="columnheader"
-            aria-label={labels.filterOn(getColumnLabel(column))}
+            // Named only where there is a filter: a generated lane or a column
+            // that does not filter holds no control to name.
+            aria-label={
+              column.getCanFilter()
+                ? labels.filterOn(getColumnLabel(column))
+                : undefined
+            }
             data-dg-part="header-filter-cell"
             data-column-id={column.id}
             data-control-column={isControlColumn(column.id) || undefined}

package/src/components/TMDataGridTable.module.css

@@ -84,7 +84,13 @@
   --row-bg: var(--dg-row-new-bg, var(--mantine-color-body));
 }
 
-.bodyRow:hover {
+/* The hover tint, on the rows that carry `data-highlight-on-hover` - by default
+   the rows that answer a click or a right-click, see the Table's
+   `highlightOnHover`. `:where()` adds no specificity, so the rule stays at the
+   weight of the state rules around it: declared after the stripe and the entry
+   tint, which it wins, and before the selection and highlight rules, which win
+   over it. */
+.bodyRow:where([data-highlight-on-hover="true"]):hover {
   --row-bg: var(--mantine-color-default-hover);
 }
 
@@ -320,7 +326,9 @@
   /* Base and tint, exactly as .bodyCell paints them. */
   background-color: var(--mantine-color-body);
   background-image: linear-gradient(var(--row-bg), var(--row-bg));
-  padding: var(--dg-padding);
+  /* No padding: the panel is the user's content, and a nested grid or a tab
+     strip wants the full width. Content that should line up with the cell
+     text pads itself with var(--dg-padding). */
   /* The row above may be the selection control, which turns text selection off
      for everything inside it. A panel is content, so it takes both back. */
   user-select: text;
@@ -477,14 +485,15 @@
    the browser's default so the colour is the grid's to state - override with
    `--dg-match-highlight-bg` on the grid. */
 .matchHighlight {
-  background-color: var(
-    --dg-match-highlight-bg,
-    light-dark(var(--mantine-color-yellow-2), rgba(250, 176, 5, 0.35))
-  );
+  background-color: var(--dg-match-highlight-bg, var(--mantine-color-yellow-2));
   color: inherit;
   border-radius: 2px;
 }
 
+:where([data-mantine-color-scheme="dark"]) .matchHighlight {
+  background-color: var(--dg-match-highlight-bg, rgba(250, 176, 5, 0.35));
+}
+
 /* The summary row - one sticky row of column footers along the bottom edge,
    rendered only while at least one column defines `footer`. Same subgrid
    placement as the header, so its cells sit exactly on the body's tracks.

package/src/components/TMDataGridTable.tsx

@@ -90,7 +90,7 @@ import {
   resolveRowSelectionClick,
 } from "../core/rowSelection";
 import { readPinnedRows } from "../core/rowPinning";
-import { isFilterActive, isTMDataGridFilterValue } from "../core/filterOperators";
+import { filterNarrowsRows } from "../core/filterOperators";
 import { buildMatchNeedles, findMatchRanges } from "../core/matchHighlight";
 import { ROW_NUMBER_COLUMN_ID } from "./TMDataGridRowNumberColumn";
 import { SearchIcon } from "./icons";
@@ -631,6 +631,14 @@ export type TMDataGridTableProps<TData extends RowData> = {
    * stay put while the virtualizer mounts and unmounts rows.
    */
   striped?: boolean;
+  /**
+   * Whether a body row takes the hover tint under the pointer. Unset, a row
+   * takes it when the row itself answers a gesture: `selectionMode: "row"`,
+   * a highlight mode, `onRowClick` or `renderRowContextMenu`. Group rows sit
+   * out those gestures and so sit out the tint too. `true` tints every row,
+   * `false` none. The row carries `data-highlight-on-hover` while it applies.
+   */
+  highlightOnHover?: boolean;
   /**
    * Called when the scroll *arrives* at an edge - once per arrival, not per
    * scroll event, and not on mount (the grid starts at the top-left edge).
@@ -751,6 +759,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   rowClassName,
   rowStyle,
   striped = false,
+  highlightOnHover,
   onScrollToTop,
   onScrollToBottom,
   onScrollToLeft,
@@ -1480,18 +1489,12 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   const isEmpty = rows.length === 0 && pinnedRowCount === 0;
   // Which emptiness this is. A column filter counts by the rule the pills, the
   // header indicator and the page reset use, so the grid has one definition
-  // of "active": an envelope counts once `isFilterActive` says so - the
-  // half-typed `{ operator, value: "" }` the filter panel seeds filters
-  // nothing - and a value that is not an envelope always counts, since a raw
-  // value written by consumer code narrows the rows as far as the grid can
-  // tell. The body already subscribes to the whole table store, so these
-  // reads are reactive.
+  // of "active" - see `filterNarrowsRows`. The half-typed
+  // `{ operator, value: "" }` the filter panel seeds filters nothing. The body
+  // already subscribes to the whole table store, so these reads are reactive.
   const emptyGlobalFilter = table.store.state.globalFilter;
   const hasActiveFilters =
-    table.store.state.columnFilters.some(
-      (entry) =>
-        !isTMDataGridFilterValue(entry.value) || isFilterActive(entry.value),
-    ) ||
+    table.store.state.columnFilters.some(filterNarrowsRows) ||
     (typeof emptyGlobalFilter === "string"
       ? emptyGlobalFilter.trim() !== ""
       : emptyGlobalFilter != null);
@@ -2833,6 +2836,14 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
               ) => {
               const isGroupRow = row.getIsGrouped();
               const isInteractive = rowGesturesFor(row);
+              // The hover tint promises that the row answers the pointer, so
+              // by default it follows the gestures the row takes: the ones
+              // behind `isInteractive`, and the context menu - which a group
+              // row sits out as well, see the row's onContextMenu below.
+              const highlightsOnHover =
+                highlightOnHover ??
+                (isInteractive ||
+                  (renderRowContextMenu !== undefined && !isGroupRow));
               const rowCells = [
                 ...row.getStartVisibleCells(),
                 ...row.getCenterVisibleCells(),
@@ -2940,6 +2951,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                   data-selects-on-click={
                     (selectsOnRowClick && !isGroupRow) || undefined
                   }
+                  data-highlight-on-hover={highlightsOnHover || undefined}
                   aria-selected={
                     features.rowSelection ? row.getIsSelected() : undefined
                   }

package/src/components/sticky.module.css

@@ -5,9 +5,11 @@
    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 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.
+   consecutive cells butt together into one unbroken band.
+
+   The dark scheme is a second rule under Mantine's `data-mantine-color-scheme`
+   attribute, not the `light-dark` function: scripts/package-stylesheets.test.mjs
+   says why.
 
    No border. A 1px line the colour of the grid's own borders drew a hard rule
    between the pinned lanes and the data, so the pinned columns read as a
@@ -31,8 +33,8 @@
   left: 100%;
   background: linear-gradient(
     to right,
-    light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.26)),
-    light-dark(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.09)) 45%,
+    rgba(0, 0, 0, 0.07),
+    rgba(0, 0, 0, 0.025) 45%,
     transparent
   );
 }
@@ -41,8 +43,26 @@
   right: 100%;
   background: linear-gradient(
     to left,
-    light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.26)),
-    light-dark(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.09)) 45%,
+    rgba(0, 0, 0, 0.07),
+    rgba(0, 0, 0, 0.025) 45%,
+    transparent
+  );
+}
+
+:where([data-mantine-color-scheme="dark"]) .stickyLeft::after {
+  background: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.26),
+    rgba(0, 0, 0, 0.09) 45%,
+    transparent
+  );
+}
+
+:where([data-mantine-color-scheme="dark"]) .stickyRight::after {
+  background: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 0.26),
+    rgba(0, 0, 0, 0.09) 45%,
     transparent
   );
 }

package/src/core/filterControls.ts

@@ -106,4 +106,12 @@ export type TMDataGridColumnFilterOptions = {
    * See {@link TMDataGridFilterControlComponent}.
    */
   control?: TMDataGridFilterControlComponent;
+  /**
+   * Whether this column's filter goes into the `persist.urlKey` search param.
+   * Defaults to `true`. `false` keeps it out of the param, on read and on
+   * write. Only has an effect when `urlKey` carries `columnFilters`, and since such
+   * a slice is not stored under `dataKey` either, the filter is then not
+   * persisted anywhere.
+   */
+  url?: boolean;
 };