@jielga/tmdatagrid 2.0.0-beta.13 → 2.0.0-beta.15

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

@@ -86,10 +86,19 @@ export type TMDataGridFilterControlComponent =
  * declaration of each feeds the filter panel and the cell editor alike.
  */
 export type TMDataGridColumnFilterOptions = {
+  /**
+   * The operators this column offers, a subset of the type's own. For a
+   * column backed by an endpoint that answers only some of them - `contains`
+   * and `equals`, say - so the panel and the header funnel never offer an
+   * operator the query cannot express. Kept in the type's order; one the type
+   * does not offer is ignored, and a list that leaves nothing falls back to
+   * the type's full set.
+   */
+  operators?: readonly TMDataGridFilterOperator[];
   /**
    * The operator a fresh filter on this column starts with, instead of the
    * type's default - a salary column can open on `"between"`. Must be one of
-   * the type's own operators.
+   * the operators the column offers.
    */
   defaultOperator?: TMDataGridFilterOperator;
   /**

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

@@ -148,9 +148,27 @@ export type TMDataGridLabels = {
   // Cell selection menu
   cellCount: (count: number) => string;
   copy: string;
-  exportCsv: string;
+  exportCells: string;
+  /** @deprecated Use `exportCells`. Read as its fallback for one beta. */
+  exportCsv?: string;
   includeHeaders: string;
 
+  // Export
+  exportAll: string;
+  exportSelected: (count: number) => string;
+  /** Title of the column picker `columns="custom"` opens; `format` is the file extension in upper case, "CSV". */
+  exportPickerTitle: (format: string) => string;
+  /** The line under the title; `selected` is the selected row count, or `null` for an export of all rows. */
+  exportPickerHint: (selected: number | null) => string;
+  exportPickerConfirm: string;
+  exportPickerCancel: string;
+  /** The select-all row over the picker's list. */
+  exportPickerSelectAll: string;
+  /** The "3 of 12" count beside it. */
+  exportPickerCount: (checked: number, total: number) => string;
+  /** Marks a column the grid hides at the moment. */
+  exportPickerHidden: string;
+
   // Generated checkbox lane
   selectColumnLabel: string;
   selectAllRows: string;
@@ -274,9 +292,25 @@ export const TMDATAGRID_LABELS_EN: TMDataGridLabels = {
 
   cellCount: (count) => (count === 1 ? "1 cell" : `${count} cells`),
   copy: "Copy",
-  exportCsv: "Export as CSV for Excel",
+  exportCells: "Export cells",
   includeHeaders: "Include headers",
 
+  exportAll: "Export all rows",
+  exportSelected: (count) =>
+    count === 1 ? "Export 1 selected row" : `Export ${count} selected rows`,
+  exportPickerTitle: (format) => `Export as ${format}`,
+  exportPickerHint: (selected) =>
+    selected === null
+      ? "Select the columns to export"
+      : selected === 1
+        ? "Select the columns to export for the selected row"
+        : `Select the columns to export for the ${selected} selected rows`,
+  exportPickerConfirm: "Export",
+  exportPickerCancel: "Cancel",
+  exportPickerSelectAll: "Select all",
+  exportPickerCount: (checked, total) => `${checked} of ${total}`,
+  exportPickerHidden: "Hidden",
+
   selectColumnLabel: "Checkbox selection",
   selectAllRows: "Select all rows",
   selectRow: "Select row",
@@ -302,6 +336,10 @@ export function mergeLabels(
   return {
     ...TMDATAGRID_LABELS_EN,
     ...override,
+    exportCells:
+      override.exportCells ??
+      override.exportCsv ??
+      TMDATAGRID_LABELS_EN.exportCells,
     operators: {
       ...TMDATAGRID_LABELS_EN.operators,
       ...override.operators,

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

@@ -121,9 +121,25 @@ export const TMDATAGRID_LABELS_SV: TMDataGridLabels = {
 
   cellCount: (count) => (count === 1 ? "1 cell" : `${count} celler`),
   copy: "Kopiera",
-  exportCsv: "Exportera som CSV för Excel",
+  exportCells: "Exportera celler",
   includeHeaders: "Inkludera rubriker",
 
+  exportAll: "Exportera alla rader",
+  exportSelected: (count) =>
+    count === 1 ? "Exportera 1 vald rad" : `Exportera ${count} valda rader`,
+  exportPickerTitle: (format) => `Exportera som ${format}`,
+  exportPickerHint: (selected) =>
+    selected === null
+      ? "Välj kolumner att exportera"
+      : selected === 1
+        ? "Välj kolumner att exportera för den valda raden"
+        : `Välj kolumner att exportera för de ${selected} valda raderna`,
+  exportPickerConfirm: "Exportera",
+  exportPickerCancel: "Avbryt",
+  exportPickerSelectAll: "Markera alla",
+  exportPickerCount: (checked, total) => `${checked} av ${total}`,
+  exportPickerHidden: "Dold",
+
   selectColumnLabel: "Kryssrutemarkering",
   selectAllRows: "Markera alla rader",
   selectRow: "Markera rad",

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

@@ -188,12 +188,26 @@ const SLICE_GUARDS: Record<
     isRecordOf(value, (entry) => typeof entry === "boolean"),
   columnSizing: (value) => isRecordOf(value, isFiniteNumber),
   columnOrder: (value) => isArrayOf(value, isString),
+  // Both the current logical shape and the physical one 1.x wrote.
   columnPinning: (value) =>
-    isArrayOf(prop(value, "left"), isString) &&
-    isArrayOf(prop(value, "right"), isString),
+    (isArrayOf(prop(value, "start"), isString) &&
+      isArrayOf(prop(value, "end"), isString)) ||
+    (isArrayOf(prop(value, "left"), isString) &&
+      isArrayOf(prop(value, "right"), isString)),
   grouping: (value) => isArrayOf(value, isString),
 };
 
+/**
+ * Settings saved by 1.x used TanStack's old physical `columnPinning` keys.
+ * Rewrite them once on read, so nothing downstream sees `left` / `right`.
+ */
+function normalizeColumnPinning(value: unknown): unknown {
+  const left = prop(value, "left");
+  const right = prop(value, "right");
+  if (left === undefined || right === undefined) return value;
+  return { start: left, end: right };
+}
+
 function isValidSlice(slice: keyof GridState, value: unknown): boolean {
   const guard = SLICE_GUARDS[slice as keyof typeof SLICE_GUARDS];
   return guard === undefined || guard(value);
@@ -219,7 +233,10 @@ function readSlices(
     for (const slice of resolved.slices) {
       if (!(slice in record)) continue;
       if (!isValidSlice(slice, record[slice])) continue;
-      restored[slice] = record[slice];
+      restored[slice] =
+        slice === "columnPinning"
+          ? normalizeColumnPinning(record[slice])
+          : record[slice];
     }
     return restored as Partial<GridState>;
   } catch {
@@ -323,8 +340,8 @@ function realignToColumns(
   }
   if (restored.columnPinning) {
     realigned.columnPinning = {
-      left: keepIds(restored.columnPinning.left ?? []),
-      right: keepIds(restored.columnPinning.right ?? []),
+      start: keepIds(restored.columnPinning.start ?? []),
+      end: keepIds(restored.columnPinning.end ?? []),
     };
   }
   if (restored.sorting) realigned.sorting = keepEntries(restored.sorting);

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

@@ -1,6 +1,10 @@
-import { aggregationFns, type RowData } from "@tanstack/react-table";
+import {
+  type AggregationContext,
+  aggregationFns,
+  type RowData,
+} from "@tanstack/react-table";
 import type { TMDataGridRowData } from "../TMDataGridContext";
-import type { TMDataGridTable } from "../useTMDataGrid";
+import type { TMDataGridFeatures, TMDataGridTable } from "../useTMDataGrid";
 
 /** The registered aggregation names - the same set `aggregationFn` accepts. */
 export type TMDataGridAggregationName = keyof typeof aggregationFns;
@@ -33,11 +37,23 @@ export function aggregateColumn<TData extends RowData>({
   fn?: TMDataGridAggregationName;
 }): unknown {
   const erased = table as unknown as TMDataGridTable<TMDataGridRowData>;
+  const column = erased.getColumn(columnId);
+  // A summary for a column the table does not hold has no value.
+  if (!column) return undefined;
   // `flatRows`, not `rows`: the filtered model nests under `getSubRows`, and
   // the top-level array would total a tree's roots and drop every child.
   // Grouping does not nest it - the group rows are built from this model, not
   // held in it - so a grouped grid is unaffected either way.
   const rows = erased.getFilteredRowModel().flatRows;
-  // Leaf and child rows are the same set here: this is already every row.
-  return aggregationFns[fn](columnId, rows, rows);
+  // The rows are already every row, so there is nothing below them to select:
+  // `maxDepth: 0`, and no `subRows` or `groupingRow` - this is not a group.
+  const context: AggregationContext<TMDataGridFeatures, TMDataGridRowData> = {
+    column,
+    columnId,
+    maxDepth: 0,
+    getValue: (row) => row.getValue(columnId),
+    rows,
+    table: erased,
+  };
+  return aggregationFns[fn].aggregate(context);
 }

package/src/{tmdatagrid/index.ts → index.ts}

@@ -32,6 +32,10 @@ export {
   useTMDataGrid,
   type UseTMDataGridOptions,
 } from "./useTMDataGrid";
+export {
+  useTMDataGridExport,
+  type TMDataGridExportApi,
+} from "./useTMDataGridExport";
 export {
   TMDataGridFilterPills,
   type TMDataGridFilterPillsProps,
@@ -42,6 +46,7 @@ export {
 } from "./components/TMDataGridSearch";
 export type {
   TMDataGridMenuColumnsProps,
+  TMDataGridMenuExportProps,
   TMDataGridMenuProps,
 } from "./components/TMDataGridMenu";
 export {
@@ -126,6 +131,8 @@ export type {
   TMDataGridFilterSurface,
 } from "./core/filterSurface";
 export type { TMDataGridFilterPanelProps } from "./components/TMDataGridFilterPanel";
+export type { TMDataGridColumnsPanelProps } from "./components/TMDataGridColumnsPanel";
+export type { TMDataGridToolbarProps } from "./components/TMDataGridToolbar";
 export { TMDataGridFilterValueInput } from "./components/filters/TMDataGridFilterValueInput";
 export { DgRangeSliderFilter } from "./components/filters/DgRangeSliderFilter";
 export { DgDateRangeFilter } from "./components/filters/DgDateRangeFilter";
@@ -147,12 +154,14 @@ export { TMDATAGRID_LABELS_SV } from "./core/labelsSv";
 export {
   getColumnDefaultOperator,
   getColumnFilterControl,
+  getColumnOperators,
   getColumnLabel,
   getColumnType,
   isColumnEditableForRow,
   isColumnReorderable,
   isControlColumn,
   isGeneratedColumn,
+  type TMDataGridColumnSearchable,
 } from "./core/columnUtils";
 export { getGroupDataRows } from "./core/grouping";
 export {
@@ -177,19 +186,49 @@ export {
   type TMDataGridRangeBounds,
 } from "./core/cellRange";
 export {
+  buildExportData,
+  countSelectedExportRows,
+  csvExcelFormat,
+  csvFormat,
+  DEFAULT_EXPORT_OPTIONS,
+  downloadFile,
+  exportGrid,
+  formatExportValue,
+  getExportableColumns,
+  guardFormula,
+  jsonFormat,
+  resolveExportOptions,
+  toClipboardText,
+  tsvFormat,
+  writeClipboardText,
+  writeExportFile,
+  type BuildExportDataArgs,
+  type ExportGridArgs,
+  type TMDataGridClipboardTextOptions,
+  type TMDataGridCsvFormatOptions,
+  type TMDataGridExportColumns,
+  type TMDataGridExportData,
+  type TMDataGridExportFormat,
+  type TMDataGridExportOptions,
+  type TMDataGridExportPickerRequest,
+  type TMDataGridExportRows,
+  type TMDataGridExportSettings,
+  type TMDataGridExportValueGetter,
+  type TMDataGridExportWriteOptions,
+  type TMDataGridJsonFormatOptions,
+  type TMDataGridTsvFormatOptions,
+  // Deprecated, gone in the next beta.
   buildCellMatrix,
   buildGridCellMatrix,
   DEFAULT_CELL_EXPORT_OPTIONS,
   downloadTextFile,
   exportGridToCsv,
-  formatExportValue,
-  toClipboardText,
+  fromCellExportOptions,
   toExcelCsv,
-  writeClipboardText,
   type BuildCellMatrixArgs,
   type TMDataGridCellExportOptions,
   type TMDataGridCellMatrix,
-} from "./core/cellExport";
+} from "./core/export";
 export {
   areAllRowsExpanded,
   resolveExpandAll,

package/src/{tmdatagrid/useTMDataGrid.tsx → useTMDataGrid.tsx}

@@ -24,6 +24,7 @@ import {
   metaHelper,
   type Row,
   type RowData,
+  rowAggregationFeature,
   rowExpandingFeature,
   rowPaginationFeature,
   rowPinningFeature,
@@ -116,6 +117,13 @@ import {
   type TMDataGridQueryTable,
 } from "./core/pageReset";
 import type { TMDataGridCellRange } from "./core/cellRange";
+import {
+  resolveExportOptions,
+  type TMDataGridExportOptions,
+  type TMDataGridExportPickerRequest,
+  type TMDataGridExportSettings,
+  type TMDataGridExportValueGetter,
+} from "./core/export";
 import {
   createSelectColumn,
   SELECT_COLUMN_ID,
@@ -186,8 +194,8 @@ export type TMDataGridColumnMeta = {
    */
   enableOrdering?: boolean;
   /**
-   * How this column filters: the operator a fresh filter starts with, and the
-   * value control the filter panel renders for it.
+   * How this column filters: which operators it offers, the operator a fresh
+   * filter starts with, and the value control the filter panel renders for it.
    *
    * ```tsx
    * meta: {
@@ -214,6 +222,25 @@ export type TMDataGridColumnMeta = {
    * See {@link TMDataGridColumnEditOptions}.
    */
   edit?: TMDataGridColumnEditOptions;
+  /**
+   * `false` leaves the column out of every export and out of Ctrl+C - for a
+   * column of buttons, or one whose value means nothing outside the grid.
+   * Defaults to `true`.
+   */
+  enableExport?: boolean;
+  /**
+   * The value an export writes for this column, in place of
+   * `row.getValue(column.id)`. The export otherwise writes the value, never
+   * what the cell renders, so this is where a status code becomes its label
+   * or a nested object becomes one field.
+   *
+   * ```tsx
+   * meta: {
+   *   exportValue: ({ value }) => STATUS_LABELS[value as Status],
+   * }
+   * ```
+   */
+  exportValue?: TMDataGridExportValueGetter;
 };
 
 /** Grid-wide configuration passed through `options.meta`. */
@@ -246,6 +273,7 @@ export const tmDataGridFeatures = tableFeatures({
   columnResizingFeature,
   columnFacetingFeature,
   columnGroupingFeature,
+  rowAggregationFeature,
   // Registered for grouping's sake rather than for tree data: the grouped row
   // model builds the parent rows, and this is what flattens the expanded ones
   // back into the flat list the body virtualizes.
@@ -371,11 +399,21 @@ export type TMDataGridUiState = {
    * describe different places.
    */
   cellRange: TMDataGridCellRange | null;
+  /**
+   * The export column picker, while it is open: which rows it exports and the
+   * options of the item that opened it. `null` while closed. Held here rather
+   * than in the menu item, which unmounts with the dropdown the moment it is
+   * clicked.
+   */
+  exportPicker: TMDataGridExportPickerRequest | null;
 };
 
 export type TMDataGridUiActions = {
   openFilterPanel: (columnId?: string | null) => void;
   closeFilterPanel: () => void;
+  /** Opens the export column picker for `request`. See `TMDataGrid.Menu.Export`'s `columns="custom"`. */
+  openExportPicker: (request: TMDataGridExportPickerRequest) => void;
+  closeExportPicker: () => void;
   /**
    * Points at a column's row in the filter panel without opening anything.
    * `openFilterPanel` does this as well as opening; this is the half a panel
@@ -446,6 +484,12 @@ export type TMDataGridApi<TData extends RowData> = {
    * table about which surface is on.
    */
   filters: TMDataGridFiltersSettings;
+  /**
+   * How the grid exports, the `exportOptions` option with its defaults filled
+   * in. Read by `useTMDataGridExport`, the `TMDataGrid.Menu.Export*` items and
+   * the cell-range menu, so every export of the grid agrees on the format.
+   */
+  exportOptions: TMDataGridExportSettings;
   /** Every string the chrome renders, `labels` merged over the English defaults. */
   labels: TMDataGridLabels;
   /** The detail renderer, when row details are on. See `renderDetails`. */
@@ -769,6 +813,20 @@ export type UseTMDataGridOptions<TData extends RowData> = Omit<
    * `persist`, this one does not have to be referentially stable.
    */
   filters?: TMDataGridFiltersOptions;
+  /**
+   * How the grid exports: the file format, the file name and whether the
+   * column labels go in as the first row. Defaults to `csvExcelFormat()`,
+   * `"export"` and `true`. See {@link TMDataGridExportOptions}.
+   *
+   * ```tsx
+   * useTMDataGrid({ data, columns, exportOptions: { format: csvFormat(), fileName: "employees" } });
+   * ```
+   *
+   * Read field by field like `filters`, so a literal is fine. A `format`
+   * built inline is rebuilt every render, which costs nothing but a small
+   * object; keep it at module scope when that bothers you.
+   */
+  exportOptions?: TMDataGridExportOptions;
   /**
    * How the quick search (`TMDataGrid.Search`) matches. `"fuzzy"` - the
    * default - forgives typos and skipped characters, and while it is the
@@ -1041,6 +1099,7 @@ export function useTMDataGrid<TData extends RowData>({
   cellSelection,
   onFocusedCellChange,
   filters: filterOptions,
+  exportOptions: exportOptionsOverride,
   editing,
   renderDetails,
   renderDetailsEstHeight = DEFAULT_DETAILS_EST_HEIGHT,
@@ -1072,6 +1131,23 @@ export function useTMDataGrid<TData extends RowData>({
   // Resolved on the override's identity, so a module-scope dictionary costs one
   // merge for the lifetime of the grid.
   const labels = useMemo(() => mergeLabels(labelsOverride), [labelsOverride]);
+  // Field by field for the same reason as `filters` below.
+  const {
+    format: exportFormat,
+    fileName: exportFileName,
+    includeHeaders: exportIncludeHeaders,
+    columns: exportColumns,
+  } = exportOptionsOverride ?? {};
+  const exportOptions = useMemo(
+    () =>
+      resolveExportOptions({
+        format: exportFormat,
+        fileName: exportFileName,
+        includeHeaders: exportIncludeHeaders,
+        columns: exportColumns,
+      }),
+    [exportFormat, exportFileName, exportIncludeHeaders, exportColumns],
+  );
   // Unpacked before the memo, so the api is keyed on the five fields rather
   // than on the object's identity - which is what lets `filters` be written as
   // a literal, the way it reads best, without republishing every render.
@@ -1476,14 +1552,14 @@ export function useTMDataGrid<TData extends RowData>({
       columnPinning: {
         // The generated columns are structurally pinned, so they are re-applied
         // on top of anything restored from storage.
-        left: [
+        start: [
           ...(rowNumbersEnabled && pinningEnabled ? [ROW_NUMBER_COLUMN_ID] : []),
           ...(selectColumnEnabled && pinningEnabled ? [SELECT_COLUMN_ID] : []),
           ...(groupColumnEnabled && pinningEnabled ? [GROUP_COLUMN_ID] : []),
           ...(detailsColumnEnabled && pinningEnabled ? [DETAILS_COLUMN_ID] : []),
           ...(
-            persistedState.columnPinning?.left ??
-            options.initialState?.columnPinning?.left ??
+            persistedState.columnPinning?.start ??
+            options.initialState?.columnPinning?.start ??
             []
           ).filter(
             (id) =>
@@ -1495,10 +1571,10 @@ export function useTMDataGrid<TData extends RowData>({
         ],
         // The edit lane mirrors the generated columns on the left: structurally
         // pinned, outermost, re-applied over anything restored.
-        right: [
+        end: [
           ...(
-            persistedState.columnPinning?.right ??
-            options.initialState?.columnPinning?.right ??
+            persistedState.columnPinning?.end ??
+            options.initialState?.columnPinning?.end ??
             []
           ).filter((id) => id !== EDIT_COLUMN_ID),
           ...(editColumnEnabled && pinningEnabled ? [EDIT_COLUMN_ID] : []),
@@ -1578,42 +1654,16 @@ export function useTMDataGrid<TData extends RowData>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Two things have to happen whenever `grouping` changes.
-  //
-  // One: the tree column appears with the first grouped column and goes away
-  // with the last, so an ungrouped grid looks exactly as it did before grouping
+  // The tree column appears with the first grouped column and goes away with
+  // the last, so an ungrouped grid looks exactly as it did before grouping
   // existed. Driven from a subscription rather than by rebuilding the column
   // array, because the array is what the table is built from - deriving it from
   // table state would close the loop. Visibility is the one column property
   // that can be changed after the fact without touching the definitions.
   //
-  // Two, and this one is a workaround. In table-core 9.0.0-beta.21 the
-  // per-region column APIs do not list `grouping` among their memo
-  // dependencies, even though they all derive from `getAllLeafColumns()`, which
-  // does:
-  //
-  // | API | Declares |
-  // | --- | --- |
-  // | `getLeft/Center/RightVisibleLeafColumns` | columns, columnPinning, columnVisibility, columnOrder |
-  // | `getLeft/Center/RightHeaderGroups` | columnPinning, columnOrder |
-  // | `row.getLeft/Center/RightVisibleCells` | columnPinning, columnVisibility |
-  //
-  // So grouping a *second* column leaves every one of them returning the
-  // previous list: the column TanStack removed keeps its header and its grid
-  // track, and the row cells no longer line up with them. The first grouping
-  // appears to work only because the visibility write above happens to touch a
-  // dependency they share.
-  //
-  // Re-publishing `columnVisibility` and `columnOrder` - same contents, new
-  // identity - invalidates all three families. `columnOrder` is the only
-  // dependency the header groups declare, and `columnVisibility` the only one
-  // the cells do, so both are needed. Remove this once the deps are fixed
-  // upstream; the test that fails without it groups two columns and asserts the
-  // second one leaves the grid.
-  //
   // Writing back into the store from its own subscriber is safe: the guard is
-  // on `grouping`'s identity, and neither write touches it, so the callback
-  // these writes trigger short-circuits.
+  // on `grouping`'s identity, and the write does not touch it, so the callback
+  // it triggers short-circuits.
   useEffect(() => {
     if (!groupColumnEnabled) return;
     let previousGrouping = table.store.state.grouping;
@@ -1647,8 +1697,8 @@ export function useTMDataGrid<TData extends RowData>({
       // Keeps the entry injected into a controlled `columnVisibility` (see
       // requestedState) in sync with grouping.
       groupingActiveRef.current = state.grouping.length > 0;
-      // On a controlled slice the writes below round-trip through the
-      // consumer's handler; the next render must forward them unstabilized.
+      // On a controlled slice the write below round-trips through the
+      // consumer's handler; the next render must forward it unstabilized.
       // See republishControlledStateRef.
       republishControlledStateRef.current = true;
 
@@ -1656,7 +1706,6 @@ export function useTMDataGrid<TData extends RowData>({
         ...old,
         [GROUP_COLUMN_ID]: state.grouping.length > 0,
       }));
-      table.setColumnOrder((old) => [...old]);
     });
 
     return () => subscription.unsubscribe();
@@ -1713,6 +1762,7 @@ export function useTMDataGrid<TData extends RowData>({
       selectionAnchorRowId: null,
       focusedCell: null,
       cellRange: null,
+      exportPicker: null,
     },
     ({ setState }) => ({
       openFilterPanel: (columnId = null) =>
@@ -1727,6 +1777,10 @@ export function useTMDataGrid<TData extends RowData>({
           filterPanelOpen: false,
           filterPanelColumnId: null,
         })),
+      openExportPicker: (request) =>
+        setState((prev) => ({ ...prev, exportPicker: request })),
+      closeExportPicker: () =>
+        setState((prev) => ({ ...prev, exportPicker: null })),
       focusPanelFilter: (columnId) =>
         setState((prev) => ({ ...prev, filterPanelColumnId: columnId })),
       focusHeaderFilter: (columnId) =>
@@ -1819,12 +1873,12 @@ export function useTMDataGrid<TData extends RowData>({
     table.setColumnSizing({ ...initial?.columnSizing });
     table.setColumnOrder([...(initial?.columnOrder ?? [])]);
     table.setColumnPinning({
-      left: [
+      start: [
         ...(rowNumbersEnabled && pinningEnabled ? [ROW_NUMBER_COLUMN_ID] : []),
         ...(selectColumnEnabled && pinningEnabled ? [SELECT_COLUMN_ID] : []),
         ...(groupColumnEnabled && pinningEnabled ? [GROUP_COLUMN_ID] : []),
         ...(detailsColumnEnabled && pinningEnabled ? [DETAILS_COLUMN_ID] : []),
-        ...(initial?.columnPinning?.left ?? []).filter(
+        ...(initial?.columnPinning?.start ?? []).filter(
           (id) =>
             id !== ROW_NUMBER_COLUMN_ID &&
             id !== SELECT_COLUMN_ID &&
@@ -1832,8 +1886,8 @@ export function useTMDataGrid<TData extends RowData>({
             id !== GROUP_COLUMN_ID,
         ),
       ],
-      right: [
-        ...(initial?.columnPinning?.right ?? []).filter(
+      end: [
+        ...(initial?.columnPinning?.end ?? []).filter(
           (id) => id !== EDIT_COLUMN_ID,
         ),
         ...(editColumnEnabled && pinningEnabled ? [EDIT_COLUMN_ID] : []),
@@ -1857,6 +1911,7 @@ export function useTMDataGrid<TData extends RowData>({
     edit,
     features,
     filters,
+    exportOptions,
     labels,
     renderDetails,
     renderDetailsEstHeight,

package/src/useTMDataGridExport.ts

@@ -0,0 +1,78 @@
+import { useSelector } from "@tanstack/react-store";
+import { useTMDataGridContext } from "./TMDataGridContext";
+import {
+  buildExportData,
+  countSelectedExportRows,
+  resolveExportOptions,
+  writeExportFile,
+  type TMDataGridExportOptions,
+} from "./core/export";
+
+/** What {@link useTMDataGridExport} returns. */
+export type TMDataGridExportApi = {
+  /**
+   * Downloads every filtered and sorted row, all pages. `overrides` are folded
+   * over the hook's options for this one call - the column picker's chosen
+   * columns, for instance.
+   */
+  exportAll: (overrides?: TMDataGridExportOptions) => Promise<void>;
+  /**
+   * Downloads the selected rows of the current view, in grid order. Resolves
+   * without a download when none is selected.
+   */
+  exportSelected: (overrides?: TMDataGridExportOptions) => Promise<void>;
+  /** How many rows `exportSelected` would write. Subscribes to the selection. */
+  selectedCount: number;
+  /**
+   * Whether row selection is on at all - `false` under
+   * `selectionMode: "highlight"` or `enableRowSelection: false`, where a
+   * "selected rows" control has nothing to offer.
+   */
+  canExportSelected: boolean;
+};
+
+/**
+ * The export as click handlers, for a button of your own anywhere inside the
+ * grid. The `TMDataGrid.Menu.Export*` items are this hook behind a
+ * `Menu.Item`.
+ *
+ * ```tsx
+ * function ExportButton() {
+ *   const { exportAll } = useTMDataGridExport();
+ *   return <Button onClick={() => void exportAll()}>Export</Button>;
+ * }
+ * ```
+ *
+ * `overrides` are folded over the grid's `exportOptions` for this caller:
+ * another format, another file name, another set of columns.
+ */
+export function useTMDataGridExport(
+  overrides?: TMDataGridExportOptions,
+): TMDataGridExportApi {
+  const { table, features, exportOptions } = useTMDataGridContext();
+  const selectedCount = useSelector(table.store, () =>
+    countSelectedExportRows(table),
+  );
+
+  const run = async (
+    rows: "all" | "selected",
+    callOverrides?: TMDataGridExportOptions,
+  ) => {
+    const resolved = resolveExportOptions(
+      exportOptions,
+      overrides,
+      callOverrides,
+    );
+    const data = buildExportData({ table, rows, columns: resolved.columns });
+    if (data.columnIds.length === 0) return;
+    if (rows === "selected" && data.rows.length === 0) return;
+    await writeExportFile(data, resolved);
+  };
+
+  return {
+    exportAll: (callOverrides) => run("all", callOverrides),
+    exportSelected: (callOverrides) => run("selected", callOverrides),
+    selectedCount,
+    canExportSelected: features.rowSelection,
+  };
+}