@jielga/tmdatagrid 2.0.0-beta.9 → 2.0.1

package/src/components/filters/controlLayout.ts

@@ -0,0 +1,32 @@
+import { getColumnLabel } from "../../core/columnUtils";
+import type { TMDataGridFilterControlArgs } from "../../core/filterControls";
+
+type LayoutArgs = Pick<
+  TMDataGridFilterControlArgs,
+  "column" | "layout" | "labels"
+>;
+
+/**
+ * The label and width props a filter control's field takes, by layout.
+ *
+ * Side by side in a panel row a field is a labelled control of a fixed
+ * comfortable width. Stacked in a narrow host it keeps the label and fills the
+ * host instead. In a header cell there is no room for a label above it at all,
+ * so the field names itself to assistive tech and fills the column.
+ *
+ * `qualifier` distinguishes the two ends of a pair, which would otherwise both
+ * read as the column's name.
+ */
+export function filterFieldProps(
+  args: LayoutArgs,
+  panel: { label: string; width?: number | string },
+  qualifier?: string,
+): { label?: string; "aria-label"?: string; w?: number | string } {
+  if (args.layout === "row") return { label: panel.label, w: panel.width };
+  if (args.layout === "stacked") return { label: panel.label, w: "100%" };
+  const name = args.labels.filterOn(getColumnLabel(args.column));
+  return {
+    "aria-label": qualifier === undefined ? name : `${name} ${qualifier}`,
+    w: "100%",
+  };
+}

package/src/components/filters/filterControlFor.ts

@@ -0,0 +1,65 @@
+import type { Column } from "@tanstack/react-table";
+import { resolveColumnOptions, type TMDataGridOption } from "../../core/columnOptions";
+import { getColumnFilterControl, getColumnType } from "../../core/columnUtils";
+import type { TMDataGridFilterControlComponent } from "../../core/filterControls";
+import type { TMDataGridRowData } from "../../TMDataGridContext";
+import type { TMDataGridFeatures, TMDataGridTable } from "../../useTMDataGrid";
+import { TMDataGridFilterValueInput } from "./TMDataGridFilterValueInput";
+
+type FilterColumn = Column<TMDataGridFeatures, TMDataGridRowData, unknown>;
+
+/** One array, so "this column has no options" never changes identity. */
+const NO_OPTIONS: ReadonlyArray<TMDataGridOption> = [];
+
+/**
+ * Whether resolving this column's options would read the faceted index -
+ * which is what makes the resolution worth memoizing, and what it goes stale
+ * against.
+ */
+export function filterOptionsUseFacets(column: FilterColumn): boolean {
+  const declared = column.columnDef.meta?.options;
+  return (
+    columnNeedsFilterOptions(column) &&
+    (declared === undefined || declared === "faceted")
+  );
+}
+
+/**
+ * Whether a column's filter control is offered a list of options at all.
+ *
+ * Only where options mean something out of the box - a declared set, or a
+ * select-shaped column's faceted values. A custom control wanting faceted
+ * values on some other column resolves them itself; resolving here would build
+ * the faceted index for every filtered column.
+ */
+function columnNeedsFilterOptions(column: FilterColumn): boolean {
+  const type = getColumnType(column);
+  return (
+    column.columnDef.meta?.options !== undefined ||
+    type === "select" ||
+    type === "multiSelect"
+  );
+}
+
+/**
+ * What a column's filter control is, and what options it is handed - the one
+ * decision the panel row and the header cell make identically.
+ *
+ * Not a hook: the panel resolves this inside a `map` over its rows, where a
+ * hook cannot go. The header row memoizes the call itself, because it
+ * re-renders with the table on every scroll frame.
+ */
+export function filterControlFor(
+  table: TMDataGridTable<TMDataGridRowData>,
+  column: FilterColumn,
+): {
+  options: ReadonlyArray<TMDataGridOption>;
+  ValueControl: TMDataGridFilterControlComponent;
+} {
+  return {
+    options: columnNeedsFilterOptions(column)
+      ? resolveColumnOptions({ table, column, fallback: "faceted" })
+      : NO_OPTIONS,
+    ValueControl: getColumnFilterControl(column) ?? TMDataGridFilterValueInput,
+  };
+}

package/src/components/generatedColumns.tsx

@@ -0,0 +1,187 @@
+import type { ColumnDef, RowData } from "@tanstack/react-table";
+import type { TMDataGridFeatures } from "../useTMDataGrid";
+import {
+  DETAILS_COLUMN_ID,
+  DetailsCell,
+  DetailsHeader,
+} from "./TMDataGridDetailsColumn";
+import { EDIT_COLUMN_ID, EditLaneCell } from "./TMDataGridEditColumn";
+import { GROUP_COLUMN_ID, GroupCell, GroupHeader } from "./TMDataGridGroupColumn";
+import {
+  SELECT_COLUMN_ID,
+  SelectAllHeader,
+  SelectRowCheckbox,
+} from "./TMDataGridSelectColumn";
+
+/**
+ * The generated checkbox column, prepended under
+ * `selectionMode: "checkbox"` (the default) or `"checkboxAndHighlight"`.
+ */
+export function createSelectColumn<TData extends RowData>(
+  label = "Checkbox selection",
+): ColumnDef<TMDataGridFeatures, TData, unknown> {
+  return {
+    id: SELECT_COLUMN_ID,
+    meta: {
+      label,
+      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,
+    },
+    // A system lane: as wide as the control it holds and no wider. Fixed at
+    // every scale - the control does not grow with the font size, so neither
+    // should its track.
+    size: 36,
+    minSize: 36,
+    maxSize: 36,
+    enableResizing: false,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    // Not a column the user chose, so not one they can switch off: hiding the
+    // lane would take the grid's only way to select a row with it, with the
+    // row-selection state left behind and no way back to it. Keeping it out of
+    // "Manage columns" follows from this - the panel lists what can be hidden.
+    enableHiding: false,
+    // Structurally pinned to the left; users shouldn't be able to move it.
+    enablePinning: false,
+    header: ({ table }) => <SelectAllHeader table={table} />,
+    cell: ({ row }) => <SelectRowCheckbox row={row} />,
+    // Every cell on a group row that is not the grouped column counts as
+    // aggregated, this lane included, and an aggregated cell with nothing
+    // declared renders blank. Without this the checkbox would disappear from
+    // exactly the rows that select a whole group. See renderCellContent.
+    aggregatedCell: ({ row }) => <SelectRowCheckbox row={row} />,
+  };
+}
+
+/**
+ * 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} />,
+  };
+}
+
+/**
+ * The generated details lane, prepended whenever `renderDetails` is set.
+ *
+ * Structural, like the checkbox and tree columns: fixed width, pinned to the
+ * left after both of them, not hideable, not movable and not resizable. Moving
+ * or hiding the toggle would leave rows with panels that cannot be opened.
+ *
+ * Last of the three because it acts on a single record.
+ *
+ * A second toggle elsewhere is supported: `row.toggleExpanded()` is the entire
+ * interface, and this lane is only the control the grid ships.
+ */
+export function createDetailsColumn<TData extends RowData>(
+  label = "Details",
+): ColumnDef<TMDataGridFeatures, TData, unknown> {
+  return {
+    id: DETAILS_COLUMN_ID,
+    meta: {
+      label,
+      align: "center",
+      // Structurally the last of the generated lanes.
+      enableOrdering: false,
+    },
+    // A system lane: as wide as the control it holds and no wider. Fixed at
+    // every scale - the control does not grow with the font size, so neither
+    // should its track.
+    size: 36,
+    minSize: 36,
+    maxSize: 36,
+    enableResizing: false,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    // Its visibility is not the user's to set: hiding it would strand every
+    // panel behind a control that is no longer there.
+    enableHiding: false,
+    // Structurally pinned to the left; users shouldn't be able to move it.
+    enablePinning: false,
+    header: ({ table }) => <DetailsHeader table={table} />,
+    cell: ({ row }) => <DetailsCell row={row} />,
+    // Deliberately no `aggregatedCell`: on a group row every cell outside the
+    // grouped column counts as aggregated, and blank is the right answer here -
+    // groups expand into their rows, not into a panel.
+  };
+}
+
+/**
+ * The generated edit lane, appended and pinned right - the row's Save at the
+ * end of the row under `mode: "row"`, the state marker and revert under
+ * `editing.draft`, mirroring the checkbox lane's build on the left.
+ */
+export function createEditColumn<TData extends RowData>(
+  label = "Edit",
+  /** A draft lane holds three controls where the rest hold two. */
+  wide = false,
+): ColumnDef<TMDataGridFeatures, TData, unknown> {
+  const width = wide ? 88 : 64;
+  return {
+    id: EDIT_COLUMN_ID,
+    meta: {
+      label,
+      align: "center",
+      enableOrdering: false,
+    },
+    // Wide enough for the pair (or draft's trio) it holds while editing.
+    size: width,
+    minSize: width,
+    maxSize: width,
+    enableResizing: false,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    // The row's Save, Cancel and Delete live here, so hiding the lane would
+    // strand an open row with no way to commit or discard it. Same rule as the
+    // checkbox lane: chrome the grid generates is not a user setting.
+    enableHiding: false,
+    // Structurally pinned to the right; not movable.
+    enablePinning: false,
+    header: () => null,
+    cell: ({ row }) => <EditLaneCell row={row} />,
+    // Group rows: same reasoning as the checkbox lane - without this the
+    // cell renders blank on aggregated rows, but here blank is also correct,
+    // so the aggregated cell renders the same (null for groups).
+    aggregatedCell: ({ row }) => <EditLaneCell row={row} />,
+  };
+}

package/src/{tmdatagrid/components → components}/icons.ts

@@ -16,6 +16,7 @@ export {
   IconChevronRight as ChevronRightIcon,
   IconColumns3 as ColumnsIcon,
   IconDotsVertical as DotsVerticalIcon,
+  IconDownload as DownloadIcon,
   IconEyeOff as EyeOffIcon,
   IconFilter as FilterIcon,
   IconFoldDown as ExpandAllIcon,

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

@@ -104,3 +104,47 @@
     opacity: 0;
   }
 }
+
+/* The scrolled-under shadow: a soft band under the header, only while body
+   rows are actually beneath it. Worn by the last header row - the header/body
+   boundary - which is the filter row under `filters.inHeader` and the last
+   group row otherwise. Lives here rather than in either row's own module
+   because the two are in different modules and the boundary moves between
+   them.
+
+   A scroll-driven animation, like the pinned-lane gradients: the shadow tracks
+   the scroll on the compositor with no listener and no render, and an inactive
+   timeline (nothing to scroll) leaves `opacity: 0` standing, so a grid that
+   fits shows nothing. Where unsupported there is simply no shadow - the
+   header's border already draws the boundary. */
+.headerBoundary::after {
+  content: "";
+  position: absolute;
+  inset: 100% 0 auto 0;
+  height: 6px;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    var(--dg-header-shadow-color, rgba(0, 0, 0, 0.14)),
+    transparent
+  );
+  opacity: 0;
+}
+
+@supports (animation-timeline: scroll()) {
+  .headerBoundary::after {
+    animation: dgHeaderShadow linear both;
+    animation-timeline: scroll(nearest block);
+    /* Arrives over the first rows leaving, reads as depth not as a fade. */
+    animation-range: 0px 24px;
+  }
+}
+
+@keyframes dgHeaderShadow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/components/useHideableColumns.ts

@@ -0,0 +1,52 @@
+import { useSelector } from "@tanstack/react-store";
+import { useTMDataGridContext } from "../TMDataGridContext";
+
+/**
+ * The columns a column chooser may list, and the two writes it makes.
+ *
+ * Shared by `TMDataGridColumnsPanel` (plain controls) and
+ * `TMDataGrid.Menu.Columns` (menu items), so the two always list the same
+ * columns and hide them the same way.
+ */
+export function useHideableColumns() {
+  const { table } = useTMDataGridContext();
+
+  const columnVisibility = useSelector(
+    table.store,
+    (state) => state.columnVisibility,
+  );
+
+  // Only what can actually be hidden. A column with `enableHiding: false` is
+  // left out rather than listed and disabled: a box that cannot be ticked only
+  // invites the question, and every generated lane is one - the checkbox and
+  // edit lanes hold the controls the grid needs, the tree column follows the
+  // grouping state, the row-number gutter follows `enableRowNumbers`. None of
+  // them is a setting.
+  const columns = table
+    .getAllLeafColumns()
+    .filter((column) => column.getCanHide());
+
+  const shownCount = columns.filter(
+    (column) => columnVisibility[column.id] !== false,
+  ).length;
+
+  /**
+   * Show or hide every listed column.
+   *
+   * Not `table.toggleAllColumnsVisible`, which writes a visibility entry for
+   * *every* leaf column: showing all would publish the tree column - hidden
+   * because nothing is grouped, not because the user hid it - and hiding all
+   * would force the same column visible, since it writes `!getCanHide()` for
+   * the columns it will not touch. Either way a lane the panel never listed
+   * changes state, and persistence then keeps it that way.
+   */
+  const setAllVisible = (visible: boolean) => {
+    table.setColumnVisibility((previous) => {
+      const next = { ...previous };
+      for (const column of columns) next[column.id] = visible;
+      return next;
+    });
+  };
+
+  return { columns, columnVisibility, shownCount, setAllVisible };
+}

package/src/{tmdatagrid/core → core}/autosize.ts

@@ -1,6 +1,7 @@
 import type { RowData } from "@tanstack/react-table";
 import type { TMDataGridRowData } from "../TMDataGridContext";
 import type { TMDataGridTable } from "../useTMDataGrid";
+import { isHTMLElement } from "./dom";
 
 /**
  * Room the header keeps for its hover-revealed actions (sort arrow, menu) and
@@ -26,7 +27,9 @@ const CONTENT_ALLOWANCE = 2;
  * measure (jsdom reports 0 there).
  */
 function contentSpanWidth(content: HTMLElement): number {
-  const range = document.createRange();
+  // The cell's own document, not the global one: a Range from the opener's
+  // document cannot select nodes in a window opened with `window.open`.
+  const range = content.ownerDocument.createRange();
   range.selectNodeContents(content);
   // jsdom's Range has no getBoundingClientRect at all, hence the guard
   // rather than a zero-check alone.
@@ -84,7 +87,7 @@ export function measureColumnContentWidth({
 
   for (const cell of mountedCells(container, columnId)) {
     const content = cell.firstElementChild;
-    if (!(content instanceof HTMLElement)) continue;
+    if (!isHTMLElement(content)) continue;
     const styles = getComputedStyle(cell);
     const padding =
       (Number.parseFloat(styles.paddingLeft) || 0) +

package/src/{tmdatagrid/core → core}/columnOptions.ts

@@ -1,4 +1,4 @@
-import type { Column, Row } from "@tanstack/react-table";
+import type { Column, Row, RowData } from "@tanstack/react-table";
 import type { TMDataGridRowData } from "../TMDataGridContext";
 import type { TMDataGridFeatures, TMDataGridTable } from "../useTMDataGrid";
 
@@ -17,17 +17,21 @@ export type TMDataGridOption = {
   group?: string;
 };
 
-export type TMDataGridOptionsArgs = {
-  table: TMDataGridTable<TMDataGridRowData>;
-  column: Column<TMDataGridFeatures, TMDataGridRowData, unknown>;
+/**
+ * What an options function is called with. `TData` is the row type of the
+ * column helper the column was declared with.
+ */
+export type TMDataGridOptionsArgs<TData extends RowData = TMDataGridRowData> = {
+  table: TMDataGridTable<TData>;
+  column: Column<TMDataGridFeatures, TData, unknown>;
   /** The row an editor is standing on. Absent when the filter panel asks. */
-  row?: Row<TMDataGridFeatures, TMDataGridRowData>;
+  row?: Row<TMDataGridFeatures, TData>;
   /**
    * Source to use when the column declares none. The filter panel passes
    * `"faceted"` so a select column with no `meta.options` still offers the
    * values that exist, rather than an empty dropdown.
    */
-  fallback?: TMDataGridOptionsSource;
+  fallback?: TMDataGridOptionsSource<TData>;
 };
 
 /**
@@ -40,10 +44,57 @@ export type TMDataGridOptionsArgs = {
  * | `"faceted"` | low-cardinality data columns: the distinct values present, via `getFacetedUniqueValues` |
  * | function | large or contextual sets - `row` is set when an editor asks, so options can depend on the record (city given country) |
  */
-export type TMDataGridOptionsSource =
+export type TMDataGridOptionsSource<TData extends RowData = TMDataGridRowData> =
   | ReadonlyArray<TMDataGridOption | string>
   | "faceted"
-  | ((args: TMDataGridOptionsArgs) => ReadonlyArray<TMDataGridOption | string>);
+  | ((
+      args: TMDataGridOptionsArgs<TData>,
+    ) => ReadonlyArray<TMDataGridOption | string>);
+
+/**
+ * Columns already warned about, per grid - so a warning fires once and a
+ * test's grid is not silenced by another test's. Keyed on `table.store`, not
+ * on the table: `useTable` returns a fresh table object every render, while
+ * the store is created once and shared by every render's copy.
+ */
+const warnedFaceted = new WeakMap<object, Set<string>>();
+
+/**
+ * Faceted options read the distinct values in `data`, which under
+ * `manualFiltering` or `manualPagination` is whatever the server sent for the
+ * current page. The dropdown then offers the values that happen to be on the
+ * page the user is looking at, and looks correct while being wrong - so it is
+ * said out loud, once per column.
+ *
+ * Fires from render, unlike the library's other warnings: the fallback form
+ * of `"faceted"` only exists at resolve time, which is render. The guard
+ * makes it once per grid regardless - a StrictMode double render or a
+ * discarded concurrent render marks the set the same way a committed one
+ * does. H3 in the backlog folds it into the diagnostics mechanism with the
+ * rest.
+ */
+function warnFacetedUnderManualMode(
+  table: TMDataGridTable<TMDataGridRowData>,
+  columnId: string,
+): void {
+  if (
+    table.options.manualFiltering !== true &&
+    table.options.manualPagination !== true
+  ) {
+    return;
+  }
+  const store = table.store as object;
+  let warned = warnedFaceted.get(store);
+  if (warned === undefined) {
+    warned = new Set();
+    warnedFaceted.set(store, warned);
+  }
+  if (warned.has(columnId)) return;
+  warned.add(columnId);
+  console.warn(
+    `TMDataGrid: column "${columnId}" resolves faceted options while the server owns the rows - the distinct values of one page are not the distinct values of the result set. Pass meta.options as a list or a function instead.`,
+  );
+}
 
 function addFacetValue(target: Set<string>, value: unknown): void {
   if (value === null || value === undefined || value === "") return;
@@ -68,6 +119,7 @@ export function resolveColumnOptions({
   if (!source) return [];
 
   if (source === "faceted") {
+    warnFacetedUnderManualMode(table, column.id);
     const values = new Set<string>();
     for (const key of column.getFacetedUniqueValues().keys()) {
       if (Array.isArray(key)) {

package/src/{tmdatagrid/core → core}/columnOrdering.ts

@@ -1,4 +1,8 @@
-import type { Column, ColumnPinningState } from "@tanstack/react-table";
+import type {
+  Column,
+  ColumnPinningPosition,
+  ColumnPinningState,
+} from "@tanstack/react-table";
 import type { TMDataGridRowData } from "../TMDataGridContext";
 import { isColumnReorderable, isGeneratedColumn } from "./columnUtils";
 import type { TMDataGridFeatures, TMDataGridTable } from "../useTMDataGrid";
@@ -10,11 +14,11 @@ type GridTable = TMDataGridTable<TMDataGridRowData>;
  * The lane a column renders in.
  *
  * Pinning splits the grid into three, and TanStack sequences them from two
- * different state slices: `columnPinning.left` / `.right` order the pinned
+ * different state slices: `columnPinning.start` / `.end` order the pinned
  * lanes, `columnOrder` orders the centre. A move therefore always stays inside
  * one lane - moving a column into another one would be a pin, not a reorder.
  */
-export type TMDataGridColumnRegion = "left" | "center" | "right";
+export type TMDataGridColumnRegion = "start" | "center" | "end";
 
 /** Which edge of the column under the pointer a dragged column lands on. */
 export type TMDataGridDropSide = "before" | "after";
@@ -23,11 +27,26 @@ export function getColumnRegion(
   columnPinning: ColumnPinningState,
   columnId: string,
 ): TMDataGridColumnRegion {
-  if (columnPinning.left.includes(columnId)) return "left";
-  if (columnPinning.right.includes(columnId)) return "right";
+  if (columnPinning.start.includes(columnId)) return "start";
+  if (columnPinning.end.includes(columnId)) return "end";
   return "center";
 }
 
+/**
+ * TanStack's pinned regions are logical: `start` and `end` follow the writing
+ * direction. The grid's own vocabulary - its sticky CSS, the `data-pinned`
+ * attribute, the column menu's "Pin left" and "Pin right" - is physical, and
+ * the grid renders left to right only. This translates between the pair:
+ * `left` maps to `start` and `right` to `end`.
+ */
+export function pinningPositionOfSide(
+  side: "left" | "right" | false,
+): ColumnPinningPosition {
+  if (side === "left") return "start";
+  if (side === "right") return "end";
+  return false;
+}
+
 /** Moves one id next to another, leaving every other id in place. */
 function moveInList(
   ids: ReadonlyArray<string>,
@@ -87,7 +106,7 @@ export function moveColumn({
  * Puts the generated lanes back on the outside of both pinned lanes: the ones
  * on the left before every consumer column, the edit lane after all of them.
  *
- * `column.pin("right")` appends, so pinning a column right would otherwise drop
+ * `column.pin("end")` appends, so pinning a column right would otherwise drop
  * it outside the edit lane, so the row's Save and Delete would no longer be
  * last in the row. Pinning left appends too, which is already correct there,
  * but the same pass keeps both lanes in place whatever a consumer writes into
@@ -101,13 +120,13 @@ export function keepGeneratedColumnsOutermost(
 ): ColumnPinningState {
   const generated = (id: string) => isGeneratedColumn(id);
   return {
-    left: [
-      ...pinning.left.filter(generated),
-      ...pinning.left.filter((id) => !generated(id)),
+    start: [
+      ...pinning.start.filter(generated),
+      ...pinning.start.filter((id) => !generated(id)),
     ],
-    right: [
-      ...pinning.right.filter((id) => !generated(id)),
-      ...pinning.right.filter(generated),
+    end: [
+      ...pinning.end.filter((id) => !generated(id)),
+      ...pinning.end.filter(generated),
     ],
   };
 }
@@ -117,8 +136,8 @@ function getRegionColumns(
   table: GridTable,
   region: TMDataGridColumnRegion,
 ): Array<GridColumn> {
-  if (region === "left") return table.getLeftVisibleLeafColumns();
-  if (region === "right") return table.getRightVisibleLeafColumns();
+  if (region === "start") return table.getStartVisibleLeafColumns();
+  if (region === "end") return table.getEndVisibleLeafColumns();
   return table.getCenterVisibleLeafColumns();
 }