@jielga/tmdatagrid 1.0.2 → 1.1.1

package/src/tmdatagrid/components/TMDataGridTable.tsx

@@ -17,6 +17,7 @@ import {
   type UIEvent,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from "react";
@@ -24,14 +25,20 @@ import classes from "./TMDataGridTable.module.css";
 import sticky from "./sticky.module.css";
 import { type TMDataGridRowData, useTMDataGridContext } from "../TMDataGridContext";
 import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
-import { TMDataGridHeaderCell } from "./TMDataGridHeaderCell";
+import {
+  TMDataGridHeaderCell,
+  type TMDataGridColumnMenuItemsRenderer,
+} from "./TMDataGridHeaderCell";
 import {
   TMDataGridCellEditor,
   type TMDataGridCellEditorClose,
 } from "./TMDataGridCellEditor";
 import { TMDataGridEntryRows } from "./TMDataGridEntryRows";
 import { getColumnAlign, isControlColumn } from "../core/columnUtils";
-import { getEditFieldName } from "../core/editEngine";
+import {
+  getEditFieldName,
+  type TMDataGridEditState,
+} from "../core/editEngine";
 import {
   getNextEditableCell,
   resolveCellMove,
@@ -386,7 +393,7 @@ function TMDataGridBodyCell({
 
 /**
  * The virtualized body rows, wrapped in the single Menu that serves all of them
- * when `rowContextMenu` is set.
+ * when `renderRowContextMenu` is set.
  *
  * One instance for the whole body rather than one per row. A Mantine `Menu` is
  * a `Popover`, and a closed Popover still runs its hooks on every render - and
@@ -447,7 +454,7 @@ function TMDataGridBodyRowGroup({
   );
 }
 
-/** What a `rowContextMenu` render prop is handed for the right-clicked row. */
+/** What `renderRowContextMenu` is handed for the right-clicked row. */
 export type TMDataGridRowContextMenuArgs<TData extends RowData> = {
   table: Table<TMDataGridFeatures, TData>;
   row: Row<TMDataGridFeatures, TData>;
@@ -462,6 +469,14 @@ export type TMDataGridRowContextMenuArgs<TData extends RowData> = {
    * `closeOnItemClick`), so this is for content that isn't a menu item.
    */
   close: () => void;
+  /**
+   * The grid's own items for this menu: the cell copy and export items, under
+   * `cellSelection: "range"`, and `null` otherwise.
+   *
+   * Placing it decides the order. Ignore it and the grid keeps today's
+   * behavior, rendering its items above a divider and yours below.
+   */
+  internalItems: ReactNode;
 };
 
 /**
@@ -469,7 +484,7 @@ export type TMDataGridRowContextMenuArgs<TData extends RowData> = {
  * `Menu.Divider`, `Menu.Sub`, or any other node. The grid owns the `Menu` and
  * its `Menu.Dropdown`; this fills the dropdown.
  */
-export type TMDataGridRowContextMenu<TData extends RowData> = (
+export type TMDataGridRowContextMenuRenderer<TData extends RowData> = (
   args: TMDataGridRowContextMenuArgs<TData>,
 ) => ReactNode;
 
@@ -509,7 +524,7 @@ export type TMDataGridTableProps<TData extends RowData> = {
   /** As {@link onCellClick}; a double-click that opens an editor still does. */
   onCellDoubleClick?: (args: TMDataGridCellEventArgs<TData>) => void;
   /**
-   * As {@link onCellClick}; `rowContextMenu` and the cell-selection menu still
+   * As {@link onCellClick}; `renderRowContextMenu` and the cell-selection menu still
    * open. To suppress the browser's own menu on a grid with neither, call
    * `event.preventDefault()` here.
    */
@@ -575,7 +590,7 @@ export type TMDataGridTableProps<TData extends RowData> = {
    *
    * ```tsx
    * <TMDataGrid.Table<Employee>
-   *   rowContextMenu={({ row, close }) => (
+   *   renderRowContextMenu={({ row, close }) => (
    *     <>
    *       <Menu.Label>{row.original.firstName}</Menu.Label>
    *       <Menu.Item onClick={() => open(row.original.id)}>Open</Menu.Item>
@@ -588,10 +603,33 @@ export type TMDataGridTableProps<TData extends RowData> = {
    * />
    * ```
    *
+   * `internalItems` is the grid's own half - place it to control the order,
+   * ignore it and the grid keeps its items above a divider and yours below.
+   *
    * Called during render, and only for the row whose menu is open - so it stays
    * a pure function of the row, and cost per row does not matter.
    */
-  rowContextMenu?: TMDataGridRowContextMenu<TData>;
+  renderRowContextMenu?: TMDataGridRowContextMenuRenderer<TData>;
+  /**
+   * Replaces a column menu's contents, taking the grid's own items and
+   * returning the full list.
+   *
+   * ```tsx
+   * <TMDataGrid.Table
+   *   renderColumnMenuItems={({ column, internalItems }) => [
+   *     ...internalItems,
+   *     <Menu.Divider key="custom" />,
+   *     <Menu.Item key="stats" onClick={() => showStats(column.id)}>
+   *       Statistics
+   *     </Menu.Item>,
+   *   ]}
+   * />
+   * ```
+   *
+   * Returning an empty list leaves the column with no menu button, the same as
+   * a column whose every feature is switched off.
+   */
+  renderColumnMenuItems?: TMDataGridColumnMenuItemsRenderer;
   /**
    * Passed to the Mantine `Menu` the grid wraps the row in - `width`, `shadow`,
    * `position`, `transitionProps` and the rest. Its open state is the grid's.
@@ -651,7 +689,8 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   onScrollToLeft,
   onScrollToRight,
   renderEmptyState,
-  rowContextMenu,
+  renderRowContextMenu,
+  renderColumnMenuItems,
   rowContextMenuProps,
   cellExport,
   onReachEnd,
@@ -685,6 +724,9 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   // Which cell has an editor open. The projection (dirty/error markers) is
   // subscribed per cell instead - see TMDataGridBodyCell.
   const editActive = useSelector(edit.store, (state) => state.active);
+  // Row mode opens whole rows and any number of them at once, so which rows
+  // are showing editors is the set of open forms, not the single active slot.
+  const editOpenRowIds = useSelector(edit.store, (state) => state.openRowIds);
   const newRowCount = useSelector(edit.store, (state) => state.newRows.length);
   const deletedRowIds = useSelector(edit.store, (state) => state.deletedRowIds);
 
@@ -1364,6 +1406,74 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     return seed;
   };
 
+  /**
+   * The row's first cell that edits, in visual order - where the caret goes
+   * for a gesture that named no column, which is the edit lane's pencil.
+   */
+  const firstEditableColumnId = (rowId: string): string | null => {
+    const row = rows.find((candidate) => candidate.id === rowId);
+    if (row === undefined) return null;
+    const cells = [
+      ...row.getLeftVisibleCells(),
+      ...row.getCenterVisibleCells(),
+      ...row.getRightVisibleCells(),
+    ];
+    return (
+      cells.find((cell) => edit.canEditCell(row, cell.column))?.column.id ??
+      null
+    );
+  };
+
+  /**
+   * The `active` the caret has already been placed for. Identity, not value:
+   * `beginOn` publishes a fresh object per gesture, so re-opening the same
+   * cell is a new intent, while every later render for the same gesture - a
+   * remount as the virtualizer scrolls among open rows - is not.
+   */
+  const placedEditCaretRef = useRef<TMDataGridEditState["active"]>(null);
+
+  /**
+   * Puts the caret in the cell the open gesture named, once per gesture.
+   *
+   * The grid does this rather than leaving it to the editor's `autoFocus`,
+   * because only the built-ins honour that prop: a `meta.editor` is free to
+   * ignore it, and then the row opened with the caret in none of its editors -
+   * the ring on the cell and a Tab still needed to reach the input. Focus goes
+   * to `editor-input` when the editor publishes it, otherwise to whatever is
+   * focusable inside, which is what a custom editor renders.
+   *
+   * A layout effect, ahead of the focused-cell effect below: the ring follows
+   * the caret there rather than fighting it.
+   */
+  useLayoutEffect(() => {
+    if (editActive === null) {
+      placedEditCaretRef.current = null;
+      return;
+    }
+    if (placedEditCaretRef.current === editActive) return;
+    const container = scrollContainerRef.current;
+    if (container === null) return;
+    // The lane's pencil names no column - the row's first editable cell.
+    const columnId =
+      editActive.columnId ?? firstEditableColumnId(editActive.rowId);
+    if (columnId === null) {
+      placedEditCaretRef.current = editActive;
+      return;
+    }
+    const editor = container.querySelector<HTMLElement>(
+      `[data-dg-part="editor"][data-row-id="${CSS.escape(editActive.rowId)}"]` +
+        `[data-column-id="${CSS.escape(columnId)}"]`,
+    );
+    // Not mounted yet - the virtualizer is still bringing the row in. The
+    // intent stays up, and the next render tries again.
+    if (editor === null) return;
+    placedEditCaretRef.current = editActive;
+    const target =
+      editor.querySelector<HTMLElement>('[data-dg-part="editor-input"]') ??
+      editor.querySelector<HTMLElement>(FOCUSABLE_IN_CELL);
+    target?.focus();
+  });
+
   /** DOM focus back onto a cell - after Escape, or a commit with nowhere to go. */
   const refocusCell = (position: TMDataGridCellPosition) => {
     const container = scrollContainerRef.current;
@@ -1374,12 +1484,13 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
 
   const openEditor = (position: TMDataGridCellPosition) => {
     if (cellSelection) ui.actions.setFocusedCell(position);
-    // Row mode edits whole rows: any editable cell's open gesture opens the
-    // row, exactly as the lane's pencil does.
-    edit.begin({
-      rowId: position.rowId,
-      columnId: features.editMode === "row" ? null : position.columnId,
-    });
+    // Row mode edits whole rows: any editable cell's open gesture opens all of
+    // them, exactly as the lane's pencil does. The column still travels, as
+    // the cell the caret belongs in - the one the gesture named. Dropping it
+    // here sent the caret to the row's first editable cell instead, which the
+    // focused-cell effect above then pulled back onto the cell just clicked,
+    // leaving the row open with the caret in none of its editors.
+    edit.begin({ rowId: position.rowId, columnId: position.columnId });
   };
 
   const handleEditorClose = (
@@ -1658,6 +1769,18 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     // Focus is already inside - on the control Enter stepped into. The cell is
     // where the ring belongs, so there is nothing to move.
     if (cellElement.contains(document.activeElement)) return;
+    // An open editor outranks the ring, wherever it is. Row mode opens a whole
+    // row from one gesture, so the caret legitimately sits in a cell other
+    // than the one that gesture landed the ring on - the lane's pencil is the
+    // plain case, focusing its own cell on the way to opening the row. Pulling
+    // the caret back onto that cell would leave the row open with the caret in
+    // none of its editors, and the user with nothing to type into.
+    if (
+      document.activeElement instanceof Element &&
+      document.activeElement.closest('[data-dg-part="editor"]') !== null
+    ) {
+      return;
+    }
 
     // The vertical half is the virtualizer's, and it has already been asked.
     cellElement.focus({ preventScroll: true });
@@ -1700,7 +1823,13 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       const columnIndex = orderedColumns.findIndex(
         (column) => column.id === columnId,
       );
-      if (!isWithinBounds(selectionBounds, rowIndex, columnIndex)) {
+      // `rowIndex < 0` is a pinned row: those sit out the cell range, so
+      // moving the selection onto one would resolve to no rectangle at all
+      // and drop the selection the user could still see at the edge.
+      if (
+        rowIndex >= 0 &&
+        !isWithinBounds(selectionBounds, rowIndex, columnIndex)
+      ) {
         ui.actions.setFocusedCell({ rowId, columnId });
         setRangeTo({ rowId, columnId }, { extend: false });
       }
@@ -1709,34 +1838,24 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     setContextMenuTarget(rowId === null ? null : { rowId, columnId });
   };
 
+  // The body list, then the edge blocks: pinning takes a row out of the
+  // scrolling order, and unpinning is the first thing its menu exists to
+  // offer, so a menu that could not resolve a pinned row would strand it
+  // there. Searched in that order because the body holds nearly every row.
   const contextMenuRow =
     contextMenuTarget === null
       ? undefined
-      : rows.find((row) => row.id === contextMenuTarget.rowId);
+      : (rows.find((row) => row.id === contextMenuTarget.rowId) ??
+        pinnedTopRows.find((row) => row.id === contextMenuTarget.rowId) ??
+        pinnedBottomRows.find((row) => row.id === contextMenuTarget.rowId));
+
+  const canRenderRowMenu =
+    renderRowContextMenu !== undefined &&
+    contextMenuTarget !== null &&
+    contextMenuRow !== undefined &&
+    !contextMenuRow.getIsGrouped();
+
 
-  /**
-   * Built for the open row only, so a consumer's render prop is called once per
-   * opened menu rather than once per mounted row. `null` back from it means
-   * this row has no menu, which is also how the menu stays shut.
-   *
-   * The casts put back the concrete row type the context boundary erased - the
-   * same crossing `onRowClick` makes.
-   */
-  const rowMenuContent =
-    rowContextMenu &&
-    contextMenuTarget &&
-    contextMenuRow &&
-    !contextMenuRow.getIsGrouped()
-      ? rowContextMenu({
-          table: table as unknown as Table<TMDataGridFeatures, TData>,
-          row: contextMenuRow as unknown as Row<TMDataGridFeatures, TData>,
-          cell: (contextMenuRow
-            .getAllCells()
-            .find((cell) => cell.column.id === contextMenuTarget.columnId) ??
-            null) as unknown as Cell<TMDataGridFeatures, TData, unknown> | null,
-          close: closeContextMenu,
-        }) ?? null
-      : null;
 
   /**
    * The built-in half of the menu: what to do with the cells that are selected.
@@ -1780,18 +1899,56 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       </>
     ) : null;
 
+  /**
+   * The consumer's half, built for the open row only - so the render prop runs
+   * once per opened menu rather than once per mounted row. `null` back from it
+   * means this row has no menu, which is also how the menu stays shut.
+   *
+   * `internalItems` is a getter, and reading it is the signal: a consumer who
+   * touches it has taken the composition over, so the grid stops prepending
+   * its own half. One who never mentions it gets today's behavior, the cell
+   * items above a divider. The alternative - a second prop declaring intent -
+   * asks people to say twice what the placement already says.
+   *
+   * The casts put back the concrete row type the context boundary erased - the
+   * same crossing `onRowClick` makes.
+   */
+  let tookOverMenu = false;
+  const rowMenuContent = canRenderRowMenu
+    ? (renderRowContextMenu({
+        table: table as unknown as Table<TMDataGridFeatures, TData>,
+        row: contextMenuRow as unknown as Row<TMDataGridFeatures, TData>,
+        cell: (contextMenuRow
+          ?.getAllCells()
+          .find((cell) => cell.column.id === contextMenuTarget?.columnId) ??
+          null) as unknown as Cell<TMDataGridFeatures, TData, unknown> | null,
+        close: closeContextMenu,
+        get internalItems() {
+          tookOverMenu = true;
+          return cellMenuContent;
+        },
+      }) ?? null)
+    : null;
+
   /**
    * The two halves, in the order they are about: the cells first, since the
    * right-click landed on one, then whatever the consumer offers for the row.
+   * Unless the consumer took the composition over, in which case what they
+   * returned is the whole menu.
    */
-  const contextMenuContent =
-    cellMenuContent === null && rowMenuContent === null ? null : (
-      <>
-        {cellMenuContent}
-        {cellMenuContent !== null && rowMenuContent !== null && <Menu.Divider />}
-        {rowMenuContent}
-      </>
-    );
+  const contextMenuContent = tookOverMenu
+    ? rowMenuContent
+    : cellMenuContent === null && rowMenuContent === null
+      ? null
+      : (
+          <>
+            {cellMenuContent}
+            {cellMenuContent !== null && rowMenuContent !== null && (
+              <Menu.Divider />
+            )}
+            {rowMenuContent}
+          </>
+        );
 
   /**
    * Which edges the scroll position is currently at. Seeded "at top-left",
@@ -1908,6 +2065,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
               >
                 {headerGroup.headers.map((header) => (
                   <TMDataGridHeaderCell
+                    renderColumnMenuItems={renderColumnMenuItems}
                     key={header.id}
                     header={header}
                     layout={layoutFor(header.column.id)}
@@ -1929,8 +2087,8 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
 
           <TMDataGridBodyRowGroup
             // Under `"range"` the grid has a menu of its own to offer, so the
-            // wrapper goes on even without a consumer's `rowContextMenu`.
-            enabled={rowContextMenu !== undefined || cellRangeSelection}
+            // wrapper goes on even without a consumer's `renderRowContextMenu`.
+            enabled={renderRowContextMenu !== undefined || cellRangeSelection}
             menuContent={contextMenuContent}
             menuProps={rowContextMenuProps}
             onContextMenu={handleContextMenu}
@@ -1959,17 +2117,13 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                 ...row.getCenterVisibleCells(),
                 ...row.getRightVisibleCells(),
               ];
-              // Row mode opens every editable cell of the row at once;
-              // exactly one of them may take the focus.
+              // Row mode opens every editable cell of the row at once, and
+              // rows accumulate: a second row opening leaves the first one
+              // open, so every row holding a form shows its editors. Which of
+              // them holds the caret is not decided here - see
+              // placeEditCaret, which places it once per gesture.
               const rowEditing =
-                editActive !== null &&
-                editActive.rowId === row.id &&
-                editActive.columnId === null;
-              const firstEditableColumnId = rowEditing
-                ? (rowCells.find((cell) =>
-                    edit.canEditCell(row, cell.column),
-                  )?.column.id ?? null)
-                : null;
+                features.editMode === "row" && editOpenRowIds.includes(row.id);
               // Cell selection takes the body's tab stop off the row and puts
               // it on a cell - two stops per row would make Tab a way of
               // walking the grid, which is what the arrow keys are for. Space
@@ -2110,14 +2264,14 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                   // is recorded before the dropdown is built.
                   //
                   // A group row records itself only for the cell menu, which is
-                  // about the cells it covers. `rowContextMenu` is still never
+                  // about the cells it covers. `renderRowContextMenu` is still never
                   // called for one: TanStack builds a group row on its first
                   // child's record, so a render prop reaching for `row.original`
                   // would be handed a real employee that has nothing to do with
                   // the group - see where the content is built. The browser menu
                   // stays suppressed over them either way.
                   onContextMenu={
-                    (rowContextMenu && !isGroupRow) || cellRangeSelection
+                    (renderRowContextMenu && !isGroupRow) || cellRangeSelection
                       ? () => {
                           contextMenuRowRef.current = row.id;
                         }
@@ -2149,10 +2303,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                             cell={cell}
                             row={row}
                             takeSeedText={takeEditSeed}
-                            autoFocus={
-                              !rowEditing ||
-                              cell.column.id === firstEditableColumnId
-                            }
+                            autoFocus={!rowEditing}
                             onClose={(close) =>
                               handleEditorClose(
                                 { rowId: row.id, columnId: cell.column.id },
@@ -2252,7 +2403,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                           : undefined
                       }
                       onContextMenu={
-                        rowContextMenu || cellRangeSelection || onCellContextMenu
+                        renderRowContextMenu || cellRangeSelection || onCellContextMenu
                           ? (event) => {
                               contextMenuColumnRef.current = cell.column.id;
                               if (isGroupRow) return;

package/src/tmdatagrid/core/editEngine.ts

@@ -118,9 +118,16 @@ export type TMDataGridEditRowProjection = {
  * reads a form's store directly - it is mounted for one cell at a time.
  */
 export type TMDataGridEditState = {
-  /** The cell whose editor is open; `columnId: null` is a whole row (row mode). */
+  /**
+   * The cell the last open gesture named - where the caret goes. In row mode
+   * the whole row is editing whatever this says, so there it is only the
+   * caret's cell, and `null` for the lane's pencil, which names no column.
+   */
   active: { rowId: string; columnId: string | null } | null;
-  /** Rows with a live form. In cell mode at most one; in batch, many. */
+  /**
+   * Rows with a live form. In cell mode at most one; in row, cellConfirm and
+   * batch, as many as the user opened - which rows are editing.
+   */
   openRowIds: ReadonlyArray<string>;
   rows: Record<string, TMDataGridEditRowProjection>;
   /** Phase 4 - rows being created, not yet in `data`. */
@@ -166,8 +173,13 @@ export type TMDataGridEditorArgs = {
   cancel: () => void;
   size: TMDataGridSize;
   /**
-   * Whether this editor should take the focus on mount. True for a single
-   * opened cell; in row mode only the row's first editable cell gets it.
+   * @deprecated The grid places the caret itself, once per open gesture, so
+   * honouring this is optional and it will go in the next major. It focuses
+   * `data-dg-part="editor-input"` when the editor publishes it and the first
+   * focusable element inside the editor otherwise, which is why a custom
+   * editor that ignores this prop still gets the caret. False under
+   * `editMode: "row"`, where a whole row of editors is mounted at once and
+   * only the named cell may take it.
    */
   autoFocus: boolean;
   /**
@@ -285,7 +297,11 @@ export type TMDataGridEditApi = {
   canEditCell: (row: ErasedRow, column: ErasedColumn) => boolean;
   /** Whether the row takes edits at all - the edit lane's pencil gate. */
   canEditRow: (row: ErasedRow) => boolean;
-  /** Opens an editor. `columnId: null` opens the whole row (row mode). */
+  /**
+   * Opens an editor. In row mode the whole row opens either way and `columnId`
+   * only says which cell takes the caret; `null` (the lane's pencil) leaves it
+   * to the row's first editable cell.
+   */
   begin: (target: { rowId: string; columnId: string | null }) => void;
   /**
    * Commits one row - `form.handleSubmit` under the hood. Resolves `true`
@@ -636,30 +652,22 @@ export function createEditEngine(
 
   const begin: TMDataGridEditApi["begin"] = ({ rowId, columnId }) => {
     const { editMode } = getContext();
-    const openElsewhere = [...forms.keys()].find((id) => id !== rowId);
-    // Each mode's policy about the row being left:
+    // Each mode's policy about a row already open elsewhere:
     //
     // | Mode | Another row open |
     // | ---- | ---------------- |
     // | cell | committed - Sheets; a failed commit keeps holding the edit |
-    // | row  | dropped if pristine, otherwise the pencil is refused - a
-    //          row edit saves explicitly, so leaving must not save quietly |
-    // | cellConfirm, batch | accumulates; every draft waits for its ✓ |
-    if (openElsewhere !== undefined) {
-      if (editMode === "cell") {
+    // | row, cellConfirm, batch | accumulates. Every draft waits for its own
+    //   save, so a second row opening can neither discard the first nor be
+    //   refused by it - nothing about one row's form bears on another's |
+    if (editMode === "cell") {
+      const openElsewhere = [...forms.keys()].find((id) => id !== rowId);
+      if (openElsewhere !== undefined) {
         void commit(openElsewhere).then((ok) => {
           if (ok) beginOn(rowId, columnId);
         });
         return;
       }
-      if (editMode === "row") {
-        const entry = forms.get(openElsewhere);
-        const pristine =
-          entry !== undefined &&
-          diff(entry, entry.form.state.values as TMDataGridRowData).length === 0;
-        if (!pristine) return;
-        drop(openElsewhere);
-      }
     }
     beginOn(rowId, columnId);
   };

package/src/tmdatagrid/index.ts

@@ -66,7 +66,14 @@ export {
   type TMDataGridOptionsArgs,
   type TMDataGridOptionsSource,
 } from "./core/columnOptions";
-export { TMDataGridEditActions } from "./components/TMDataGridEditActions";
+export {
+  TMDataGridEditActions,
+  type TMDataGridEditActionsActions,
+  type TMDataGridEditActionsControls,
+  type TMDataGridEditActionsProps,
+  type TMDataGridEditActionsSlotArgs,
+  type TMDataGridEditActionsState,
+} from "./components/TMDataGridEditActions";
 export {
   clearedValueForType,
   getEditFieldName,
@@ -207,13 +214,21 @@ export type {
   TMDataGridCellEventArgs,
   TMDataGridCellNav,
   TMDataGridColumnLayout,
-  TMDataGridRowContextMenu,
   TMDataGridRowContextMenuArgs,
+  TMDataGridRowContextMenuRenderer,
   TMDataGridRowStyle,
   TMDataGridTableProps,
 } from "./components/TMDataGridTable";
+export type {
+  TMDataGridColumnMenuItemsArgs,
+  TMDataGridColumnMenuItemsRenderer,
+} from "./components/TMDataGridHeaderCell";
 export {
   getTMDataGridPaginationApi,
   type TMDataGridFooterProps,
+  type TMDataGridPaginationActions,
   type TMDataGridPaginationApi,
+  type TMDataGridPaginationControls,
+  type TMDataGridPaginationSlotArgs,
+  type TMDataGridPaginationState,
 } from "./components/TMDataGridFooter";