@jielga/tmdatagrid 0.5.0 → 1.0.0

package/src/tmdatagrid/components/icons.ts

@@ -24,7 +24,11 @@ export {
   IconIndentIncrease as GroupIcon,
   IconArrowBarToLeft as PinLeftIcon,
   IconArrowBarToRight as PinRightIcon,
+  IconArrowBackUp as RestoreIcon,
+  IconCheck as CheckIcon,
   IconMenu2 as BurgerIcon,
+  IconTrash as TrashIcon,
+  IconPencil as PencilIcon,
   IconPinnedOff as PinOffIcon,
   IconSearch as SearchIcon,
   IconX as CloseIcon,

package/src/tmdatagrid/core/autosize.ts

@@ -72,7 +72,7 @@ export function measureColumnContentWidth({
   }
 
   const title = container.querySelector<HTMLElement>(
-    `[data-testid="dg-header-${CSS.escape(columnId)}"] [data-dg-header-title]`,
+    `[data-column-id="${CSS.escape(columnId)}"] [data-dg-header-title]`,
   );
   if (title) {
     const header = title.closest<HTMLElement>('[role="columnheader"]');

package/src/tmdatagrid/core/capabilities.ts

@@ -1,6 +1,7 @@
 import type { Column, RowData } from "@tanstack/react-table";
 import type { TMDataGridRowData } from "../TMDataGridContext";
 import { isColumnReorderable } from "./columnUtils";
+import type { TMDataGridEditMode } from "./editEngine";
 import type {
   TMDataGridFeatures,
   TMDataGridTable,
@@ -117,6 +118,25 @@ export type TMDataGridFeatureFlags = {
    * its own grouping can still say `enableGrouping: true` to override.
    */
   grouping: boolean;
+  /** Whether cells can be edited at all — `editMode` was set. */
+  editing: boolean;
+  /** The commit policy, or `null` while editing is off. */
+  editMode: TMDataGridEditMode | null;
+  /** The generated row-number gutter — `enableRowNumbers`. Off by default. */
+  rowNumbers: boolean;
+  /**
+   * Whether rows can be pinned to the top or bottom edge — `enableRowPinning`,
+   * boolean or per-row predicate. Off by default: pinning has no built-in
+   * gesture, so a grid that never calls `row.pin()` has nothing to gain from
+   * the body watching the state.
+   */
+  rowPinning: boolean;
+  /**
+   * Whether cells highlight the matched text while a contains-family filter
+   * or the quick search is active — `enableMatchHighlighting`. Off by
+   * default, so a grid that has not asked pays nothing per cell.
+   */
+  matchHighlighting: boolean;
 };
 
 export function readFeatureFlags<TData extends RowData>(
@@ -137,10 +157,18 @@ export function readFeatureFlags<TData extends RowData>(
     | "enablePagination"
     | "manualPagination"
     | "enableGrouping"
+    | "editMode"
+    | "enableRowNumbers"
+    | "enableRowPinning"
+    | "enableMatchHighlighting"
   >,
 ): TMDataGridFeatureFlags {
   const selectionMode = options.selectionMode ?? "checkbox";
-  const cellSelectionMode = options.cellSelection ?? "none";
+  // Editing brings the cell cursor with it: Enter, F2 and type-to-edit all
+  // address "the focused cell", which only exists under cell selection. An
+  // explicit `cellSelection` still wins, `"range"` included.
+  const cellSelectionMode =
+    options.cellSelection ?? (options.editMode !== undefined ? "single" : "none");
   // `"highlight"` is the master-detail mode: no selection to speak of, so the
   // checkbox column and the click-to-select behaviour both fall away. Otherwise
   // `enableRowSelection` still has the final say, including its predicate form.
@@ -174,6 +202,14 @@ export function readFeatureFlags<TData extends RowData>(
     pagination:
       options.enablePagination === true || options.manualPagination === true,
     grouping: options.enableGrouping ?? options.manualPagination !== true,
+    editing: options.editMode !== undefined,
+    editMode: options.editMode ?? null,
+    rowNumbers: options.enableRowNumbers === true,
+    // A predicate counts as on — some rows may still pin.
+    rowPinning:
+      options.enableRowPinning === true ||
+      typeof options.enableRowPinning === "function",
+    matchHighlighting: options.enableMatchHighlighting === true,
   };
 }
 

package/src/tmdatagrid/core/cellNavigation.ts

@@ -93,6 +93,47 @@ export function resolveCellMove({
   }
 }
 
+export type NextEditableCellArgs = {
+  from: TMDataGridCellCoords;
+  /** `1` is Tab, `-1` is Shift+Tab. */
+  direction: 1 | -1;
+  rowCount: number;
+  columnCount: number;
+  /** Whether the cell at these coordinates takes edits. */
+  isEditable: (coords: TMDataGridCellCoords) => boolean;
+};
+
+/**
+ * The next editable cell in reading order, wrapping to the next row — and
+ * from the last cell of the grid back to the first. `null` when no other
+ * cell is editable.
+ *
+ * Deliberately wrapping where {@link resolveCellMove} deliberately clamps:
+ * arrows are a coordinate space and clamp so the destination is predictable,
+ * but Tab mid-edit is the spreadsheet's "next field" — at the end of a row
+ * the next field is on the next row, which is a convention, not a surprise.
+ */
+export function getNextEditableCell({
+  from,
+  direction,
+  rowCount,
+  columnCount,
+  isEditable,
+}: NextEditableCellArgs): TMDataGridCellCoords | null {
+  const total = rowCount * columnCount;
+  if (total === 0) return null;
+  const start = from.rowIndex * columnCount + from.columnIndex;
+  for (let step = 1; step < total; step += 1) {
+    const index = (start + direction * step + total * step) % total;
+    const coords = {
+      rowIndex: Math.floor(index / columnCount),
+      columnIndex: index % columnCount,
+    };
+    if (isEditable(coords)) return coords;
+  }
+  return null;
+}
+
 /** Whether two positions address the same cell. `null` equals only `null`. */
 export function isSameCell(
   a: TMDataGridCellPosition | null,

package/src/tmdatagrid/core/columnUtils.ts

@@ -1,5 +1,11 @@
-import type { TMDataGridColumnType } from "./filterOperators";
+import {
+  getDefaultOperator,
+  type TMDataGridColumnType,
+  type TMDataGridFilterOperator,
+} from "./filterOperators";
 import { DETAILS_COLUMN_ID } from "../components/TMDataGridDetailsColumn";
+import { EDIT_COLUMN_ID } from "../components/TMDataGridEditColumn";
+import { ROW_NUMBER_COLUMN_ID } from "../components/TMDataGridRowNumberColumn";
 import { SELECT_COLUMN_ID } from "../components/TMDataGridSelectColumn";
 import type { TMDataGridColumnMeta } from "../useTMDataGrid";
 
@@ -27,24 +33,43 @@ export function getColumnType(column: ColumnLike): TMDataGridColumnType {
   return column.columnDef.meta?.type ?? "string";
 }
 
+/**
+ * The operator a fresh filter on this column starts with —
+ * `meta.defaultFilterOperator`, else the type's default.
+ */
+export function getColumnDefaultOperator(
+  column: ColumnLike,
+): TMDataGridFilterOperator {
+  return (
+    column.columnDef.meta?.defaultFilterOperator ??
+    getDefaultOperator(getColumnType(column))
+  );
+}
+
 export function getColumnAlign(column: ColumnLike): "left" | "right" | "center" {
   return column.columnDef.meta?.align ?? "left";
 }
 
 /**
- * A generated lane holding one control at a fixed width — the checkbox and the
- * details chevron.
+ * A generated lane holding one fixed-width thing — the checkbox, the details
+ * chevron, the row number.
  *
  * They are laid out differently from every other column: cell padding is sized
  * for text and grows with the scale, which at `xl` squeezed a 16px checkbox out
- * of its track, so these lanes centre their control in an unpadded cell.
- * Their headers are controls too, and carry no column menu.
+ * of its track, so these lanes centre their content in an unpadded cell.
+ * Their headers carry no column menu, and none of them is ever exported —
+ * they hold chrome, not values.
  *
  * The tree column is deliberately not one of them: it holds a label as well as a
  * chevron, and wants the padding.
  */
 export function isControlColumn(columnId: string): boolean {
-  return columnId === SELECT_COLUMN_ID || columnId === DETAILS_COLUMN_ID;
+  return (
+    columnId === SELECT_COLUMN_ID ||
+    columnId === DETAILS_COLUMN_ID ||
+    columnId === EDIT_COLUMN_ID ||
+    columnId === ROW_NUMBER_COLUMN_ID
+  );
 }
 
 /**