feat: accept column pinning in a server-mode data table's initial state

src/components/DataTable/__tests__/DataTable.spec.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { faker } from '@faker-js/faker';
 import type { ColumnDef } from '@tanstack/table-core';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { range } from 'lodash-es';
+import { noop, range } from 'lodash-es';
 import { describe, expect, it } from 'vitest';
 
 import { DataTable } from '../DataTable.tsx';
@@ -152,3 +152,25 @@ describe('DataTable pagination', () => {
     expect(screen.getAllByTestId('data-table-row').length).toBe(1);
   });
 });
+
+describe('DataTable server mode', () => {
+  const serverProps = {
+    columns,
+    data: data.slice(0, 10),
+    mode: 'server',
+    onPaginationChange: noop,
+    pageCount: 3
+  } as const;
+
+  it('should pin a column named by its initial state, so a server-mode table can size it', () => {
+    render(<DataTable {...serverProps} initialState={{ columnPinning: { right: ['amount'] } }} />);
+    expect(screen.getByText('Amount')).toHaveStyle({ position: 'sticky' });
+    expect(screen.getByText('Status')).not.toHaveStyle({ position: 'sticky' });
+    expect(screen.getByText('Email')).not.toHaveStyle({ position: 'sticky' });
+  });
+
+  it('should pin nothing when given no initial state', () => {
+    render(<DataTable {...serverProps} />);
+    expect(screen.getByText('Amount')).not.toHaveStyle({ position: 'sticky' });
+  });
+});

src/components/DataTable/types.ts

@@ -96,11 +96,12 @@ export type MemoizedHandle<T extends (...args: any[]) => any> = T & {
  * CLIENT
  *********************************************************************/
 
-export type ClientDataTableInitialState = {
-  columnFilters?: ColumnFiltersState;
-  columnPinning?: ColumnPinningState;
-  sorting?: SortingState;
-};
+export type ClientDataTableInitialState = Simplify<
+  ServerDataTableInitialState & {
+    columnFilters?: ColumnFiltersState;
+    sorting?: SortingState;
+  }
+>;
 
 export type ClientDataTableStoreParams<T extends RowData> = Simplify<
   BaseDataTableStoreParams<T> & {
@@ -117,9 +118,19 @@ export type ClientDataTableProps<T extends RowData> = Simplify<
  * SERVER
  *********************************************************************/
 
+/**
+ * Pinning is layout rather than a view of the data: `calculateColumnSizing` honours `size` on a
+ * pinned column and splits what is left between the rest, so it is how a table of any mode gives
+ * one column the room its content needs. Filtering and sorting in server mode belong to the
+ * request, so they stay out.
+ */
+export type ServerDataTableInitialState = {
+  columnPinning?: ColumnPinningState;
+};
+
 export type ServerDataTableStoreParams<T extends RowData> = Simplify<
   BaseDataTableStoreParams<T> & {
-    initialState?: never;
+    initialState?: ServerDataTableInitialState;
     mode: 'server';
     onPaginationChange: (state: PaginationState) => void;
     onSortingChange?: (state: SortingState) => void;

src/components/DataTable/utils.tsx

@@ -14,6 +14,7 @@ import { DataTableRowActionCell } from './DataTableRowActionCell.tsx';
 
 import type {
   BaseDataTableStoreParams,
+  ClientDataTableInitialState,
   DataTableColumnBreakpoints,
   DataTableRowAction,
   DataTableStoreParams,
@@ -136,7 +137,10 @@ function getColumnPinningWithActions<T extends RowData>(
 }
 
 function getTanstackTableState<T>({ initialState, rowActions }: DataTableStoreParams<T>): TableState {
-  const { columnFilters = [], columnPinning = {}, sorting = [] } = initialState ?? {};
+  // Widened to the client shape, which the server one is a subset of, so the union's narrower
+  // member does not make `columnFilters` and `sorting` unreadable here.
+  const initial: ClientDataTableInitialState = initialState ?? {};
+  const { columnFilters = [], columnPinning = {}, sorting = [] } = initial;
   const state: TableState = {
     columnFilters,
     columnOrder: [],