@elliemae/ds-data-table 3.80.0-next.62 → 3.80.0-next.65

package/skills/ds-data-table-columns/SKILL.md

@@ -7,7 +7,7 @@ description: >
   Column.Cell and Column.Header custom renderers are strongly discouraged — try slot injection first.
 type: core
 library: ds-data-table
-library_version: '3.60.0'
+library_version: '3.80.0'
 requires:
   - ds-data-table-setup
 sources:
@@ -34,7 +34,7 @@ const columns = [
 
 All column feature callbacks share the same contract:
 
-- **First argument** (`newColumns` / `newData`) — the pre-baked OOB result. For standard cases with no custom business logic, no custom cells, and no column grouping edge cases, dispatch this directly to the state manager. This is the intended fast path.
+- **First argument** (`newColumns` / `newData`) — the pre-baked OOB result. For standard cases with no custom business logic, no custom cells, and no column grouping edge cases, dispatch this directly to the state manager. This is the intended fast path. Sorting is the exception: `newColumns` only carries the sort indicator (`isSortedDesc`), and the table does not sort `data`.
 - **Remaining arguments** — raw data (column ID, width, direction, reorder indexes). Use these when the OOB result falls short and custom handling is required (server-side operations, constraint validation, non-standard persistence).
 
 ### Sorting
@@ -46,9 +46,12 @@ const columns = [
 ];
 
 // Full signature: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void
-// First arg is the OOB result — dispatch directly for standard cases
-// Use headerId + direction only if custom logic is needed (e.g. server-side sort)
-const handleColumnSort = useCallback((newColumns, headerId, direction) => dispatch(setColumns(newColumns)), []);
+// newColumns only updates the sort indicator (isSortedDesc). The table does not sort `data`:
+// sort the rows from headerId + direction (client-side) or request sorted rows (server-side)
+const handleColumnSort = useCallback((newColumns, headerId, direction) => {
+  dispatch(setColumns(newColumns));
+  // sort or refetch the rows by headerId and direction here
+}, []);
 
 <DataTable columns={columns} data={rows} height={500} onColumnSort={handleColumnSort} />;
 ```
@@ -140,7 +143,7 @@ Correct:
 />
 ```
 
-`colsLayoutStyle='auto'` fills the container by distributing column widths equally. Under `auto`, `onColumnSizeChange` does not reliably track individual column widths — custom resize redistribution is not supported. Use `colsLayoutStyle='fixed'` (the default) whenever `isResizeable` and `onColumnSizeChange` are required.
+`colsLayoutStyle='auto'` fills the container by distributing column widths equally. The table does not reject the combination: no error is thrown, so it can look fine in code review. Under `auto`, `onColumnSizeChange` does not reliably track individual column widths — custom resize redistribution is not supported. Use `colsLayoutStyle='fixed'` (the default) whenever `isResizeable` and `onColumnSizeChange` are required.
 
 Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-features-column--dynamic-columns-layout-1
 
@@ -157,14 +160,17 @@ Wrong:
 Correct:
 
 ```jsx
-const handleColumnSort = useCallback((newColumns, columnId, direction) => handleSort(newColumns), []);
+const handleColumnSort = useCallback(
+  (newColumns, columnId, direction) => handleSort({ column: columnId, direction }),
+  [],
+);
 
 <DataTable columns={columns} data={rows} height={500} onColumnSort={handleColumnSort} />;
 ```
 
 `onColumnSortChange` is deprecated. Migrate on sight.
 
-Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable--documentation
+Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-docs--api-reference
 
 ---
 
@@ -186,7 +192,7 @@ const handleColumnSizeChange = useCallback((newColumns, headerId, width) => hand
 
 `onColumnResize` is deprecated. Migrate on sight.
 
-Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable--documentation
+Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-docs--api-reference
 
 ---
 
@@ -218,7 +224,7 @@ const cellProps = useCallback((cell) => {
 <DataTable columns={columns} data={rows} height={500} dsDatatableCell={cellProps} />;
 ```
 
-Custom Cell renderers lose built-in filtering integration, degrade virtualization performance, and remove embedded a11y. Try slot injection first. If a custom Cell is unavoidable, read `ds-data-table-boundaries/SKILL.md` in full, re-evaluate the plan against everything in that skill, and only then implement.
+A custom Cell replaces only the cell content: the `role="cell"` wrapper and the truncation tooltip still apply, but the default empty-value label (`role="group"` with `aria-label="Empty cell"`) is not rendered for your Cell, so handle empty values yourself, and the filter system sees the raw value, not what your Cell displays. A custom Cell is an opaque component the table cannot memoize through: it receives freshly built props, so React.memo does not stop its re-renders. Defined inline in columns, it also changes the table's props on every parent render, so the deep-compare that protects the table's calculations fails and they rerun for the whole table. Define it at module level, keep columns referentially stable, keep it light, and prefer slot injection. If a custom Cell is unavoidable, read `ds-data-table-boundaries/SKILL.md` in full, re-evaluate the plan against everything in that skill, and only then implement.
 
 Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-advanced--target-specific-row-style
 
@@ -240,7 +246,7 @@ Correct:
 
 Column `width` accepts only pixel values (number or `"Npx"` string). Percentage widths are not supported.
 
-Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable--documentation
+Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-docs--api-reference
 
 ---
 

package/skills/ds-data-table-expandable/SKILL.md

@@ -2,13 +2,13 @@
 name: ds-data-table-expandable
 description: >
   Expandable rows for @elliemae/ds-data-table. isExpandable flag, expandedRows
-  (Record<rowUid, boolean>) controlled state, onRowExpand handler, subRows for
-  hierarchical/tree row data. uniqueRowAccessor required. tableRowDetails (master-detail
+  (Record<rowUid, boolean>) controlled state, onRowExpand handler, subRows (one level:
+  only top-level rows get a caret for their subRows). uniqueRowAccessor required. tableRowDetails (master-detail
   non-tabular content panel) is DEPRECATED due to WCAG violations — propose alternative
   page-level design instead.
 type: core
 library: ds-data-table
-library_version: '3.60.0'
+library_version: '3.80.0'
 requires:
   - ds-data-table-setup
 sources:
@@ -22,10 +22,10 @@ import { DataTable } from '@elliemae/ds-data-table';
 
 const rows = [
   {
-    id: 1,
+    id: '1',
     name: 'John',
     myUniqueId: 'abc123',
-    subRows: [{ id: 11, name: 'Sub-item', myUniqueId: 'def456' }],
+    subRows: [{ id: '11', name: 'Sub-item', myUniqueId: 'def456' }],
   },
 ];
 
@@ -52,12 +52,14 @@ const handleRowExpand = useCallback((newExpandedRows) => dispatch(setExpandedRow
 ```jsx
 // Every row — including subRows — must have a unique value for uniqueRowAccessor
 const generateRow = (id) => ({
-  id,
+  id: String(id),
   myUniqueId: uid(16),
-  subRows: [{ id: id * 10, myUniqueId: uid(16) }],
+  subRows: [{ id: String(id * 10), myUniqueId: uid(16) }],
 });
 ```
 
+Only one level of `subRows` is expandable: the `subRows` caret is rendered only for top-level rows (depth 0; a row with `tableRowDetails` or `dimsumHeaderValue` shows a caret at any depth), and the visible list is built to depth 1. Nested `subRows` under a child row are not shown as an expandable tree.
+
 ### Programmatic expand on data update
 
 ```jsx
@@ -69,6 +71,8 @@ const handleRowExpand = useCallback((newExpandedRows) => {
 // When data is reloaded, dispatch the same expandedRows to preserve state
 ```
 
+This holds for keys taken from `uniqueRowAccessor`. Group header uids created by `groupBy` do not survive a re-grouping (see ds-data-table-row-variants).
+
 ## Common Mistakes
 
 ### CRITICAL Using tableRowDetails — master-detail is deprecated
@@ -78,7 +82,7 @@ Wrong:
 ```jsx
 const rows = [
   {
-    id: 1,
+    id: '1',
     name: 'John',
     tableRowDetails: ({ detailsIndent }) => (
       <div style={{ paddingLeft: detailsIndent }}>
@@ -125,12 +129,14 @@ const RowActionsRenderer = React.memo(({ row, isRowSelected, cell }) => {
 });
 
 const renderRowActions = { columnWidth: 32, renderer: RowActionsRenderer };
+// pass it to the table: <DataTable renderRowActions={renderRowActions} ... />
 ```
 
 When surfacing this to the human, explain:
 
-- `tableRowDetails` renders non-tabular HTML inside a `<table>` element. Screen readers expect only tabular content in table rows — the nested structure is invisible to assistive technologies by default, violating WCAG 1.3.1 (Info and Relationships) and 1.3.2 (Meaningful Sequence). The expand/collapse button lacks `aria-controls`, violating WCAG 2.1.1 (Keyboard). These are not implementation quality issues — they are structural, and no amount of ARIA patching fully resolves them.
+- `tableRowDetails` renders non-tabular HTML inside the table structure: a `role="region"` sibling of the row element, inside the table's `role="table"` wrapper. Screen readers expect only tabular content in table rows — the nested structure is invisible to assistive technologies by default, violating WCAG 1.3.1 (Info and Relationships) and 1.3.2 (Meaningful Sequence). The expand/collapse button lacks `aria-controls`, violating WCAG 2.1.1 (Keyboard). These are not implementation quality issues — they are structural, and no amount of ARIA patching fully resolves them.
 - The Dimsum team has officially deprecated `tableRowDetails` and is removing all documentation for it.
+- Passing `tableRowDetails` logs a one-time deprecation `console.warn` in development builds (propTypes validation does not run in production builds). It is expected, not a bug in the table.
 - The alternative (detail dialog/panel triggered from row actions) keeps the table semantically clean, is fully accessible, and is natively supported.
 - ICE internal engineers: full analysis at `https://confluence.ice.com/x/T3k0Jg`
 
@@ -141,7 +147,7 @@ When surfacing this to the human, explain:
 Wrong:
 
 ```jsx
-const rows = [{ id: 1, name: 'John', subRows: [{ id: 11, name: 'Sub-item' }] }];
+const rows = [{ id: '1', name: 'John', subRows: [{ id: '11', name: 'Sub-item' }] }];
 
 // expandedRows keys are unstable internal IDs — expanded state maps to wrong rows on re-render
 <DataTable
@@ -159,7 +165,7 @@ Correct:
 ```jsx
 // Each row (and each subRow) must have a field with a stable unique value
 const rows = [
-  { id: 1, name: 'John', myUniqueId: 'abc123', subRows: [{ id: 11, name: 'Sub-item', myUniqueId: 'def456' }] },
+  { id: '1', name: 'John', myUniqueId: 'abc123', subRows: [{ id: '11', name: 'Sub-item', myUniqueId: 'def456' }] },
 ];
 
 // uniqueRowAccessor names that field — expandedRows is then keyed by its value
@@ -174,7 +180,7 @@ const rows = [
 />;
 ```
 
-`uniqueRowAccessor` tells the DataTable which field on each row object holds its stable unique identifier. `expandedRows` is a `Record<uid, boolean>` keyed by those values. Without it, the DataTable falls back to react-table's internal index-based row ID (`"0"`, `"1"`, `"0.0"` for nested) — there is no fallback to `id` or `dsId` from your data. Index-based IDs shift whenever data is reordered or reloaded, silently mapping expanded state to the wrong rows.
+`uniqueRowAccessor` tells the DataTable which field on each row object holds its stable unique identifier. `expandedRows` is a `Record<uid, boolean>` keyed by those values. Without it, the DataTable falls back to its internal position-based id (`"0"`, `"1"`, `"0.0"` for nested) — there is no fallback to `id` or `dsId` from your data. Position-based IDs shift whenever data is reordered or reloaded, silently mapping expanded state to the wrong rows.
 
 Source: `@elliemae/ds-data-table:dist/types/react-desc-prop-types.d.ts`
 
@@ -204,7 +210,9 @@ const handleRowExpand = useCallback((newExpandedRows) => dispatch(setExpandedRow
 />;
 ```
 
-`isExpandable` alone renders the expand caret. The component is fully controlled — `expandedRows` defaults to `{}` and `onRowExpand` defaults to a no-op. Clicking the caret calls the no-op, `expandedRows` stays `{}`, and `isExpanded` is always `false`. The caret appears but clicking it does nothing visible.
+`isExpandable` alone renders the expand-all control in the header, and a caret on each row that has `subRows` (top-level rows only), `tableRowDetails`, or `dimsumHeaderValue`. The component is fully controlled — `expandedRows` defaults to `{}` and `onRowExpand` defaults to a no-op. Clicking a caret calls the no-op, `expandedRows` stays `{}`, and `isExpanded` is always `false`. The caret appears but clicking it does nothing visible.
+
+The header expand-all control also calls `onRowExpand` with `toggledRow === 'All'` (the same sentinel `selectedControl` uses for select-all). It passes `{}` when collapsing all. When expanding all, it passes every row with `subRows` (at any depth, including rows that show no caret), `tableRowDetails` or `dimsumHeaderValue`, excluding rows in `disabledRows`. Handle it before treating `toggledRow` as a row id.
 
 Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-features-row--expandable
 

package/skills/ds-data-table-feedback/SKILL.md

@@ -1,13 +1,13 @@
 ---
 name: ds-data-table-feedback
 description: >
-  Async and empty feedback states for @elliemae/ds-data-table. isLoading spinner overlay,
-  isSkeleton placeholder rows (requires pixel height — non-px silently prevents rendering),
+  Async and empty feedback states for @elliemae/ds-data-table. isLoading spinner in place of the rows,
+  isSkeleton placeholder rows (row count is computed from the numeric part of height — pass pixels),
   noResultsMessage, noResultsSecondaryMessage, noResultsButtonLabel + onNoResultsButtonClick
   pair for empty-state CTA, noResultsPlaceholder for fully custom empty state component.
 type: core
 library: ds-data-table
-library_version: '3.60.0'
+library_version: '3.80.0'
 requires:
   - ds-data-table-setup
 sources:
@@ -19,7 +19,7 @@ sources:
 ```jsx
 import { DataTable } from '@elliemae/ds-data-table';
 
-// height must be a pixel value for skeleton and loading states to function
+// only isSkeleton reads the numeric part of height (isLoading does not)
 <DataTable columns={columns} data={data} height={500} isSkeleton={isLoading} />;
 ```
 
@@ -40,7 +40,7 @@ import { DataTable } from '@elliemae/ds-data-table';
 <DataTable columns={columns} data={[]} height={500} isSkeleton={isInitialLoading} />
 ```
 
-Use `isSkeleton` for the initial data fetch when no rows exist yet. Requires pixel height — percentage or viewport-relative units silently prevent skeleton rows from rendering.
+Use `isSkeleton` for the initial data fetch when no rows exist yet. The skeleton row count is computed from the numeric part of `height`, so pass a pixel number (see Common Mistakes).
 
 ### Empty state with message
 
@@ -88,7 +88,7 @@ const EmptyStatePlaceholder = () => (
 
 ## Common Mistakes
 
-### HIGH isSkeleton does not render when height is not a pixel value
+### HIGH isSkeleton row count is wrong when height is a percentage
 
 Wrong:
 
@@ -102,7 +102,7 @@ Correct:
 <DataTable columns={columns} data={[]} height={500} isSkeleton={isLoading} />
 ```
 
-Skeleton rows are calculated as `Math.floor((parseInt(height, 10) - 25) / 52)`. `parseInt` strips the unit suffix and reads only the numeric prefix — `"60vh"` → 60, `"100%"` → 100. Most non-pixel values produce zero or far too few rows. Always pass a numeric pixel value so the row count matches the actual table height.
+Skeleton rows are calculated as `Math.floor((parseInt(height, 10) - 25) / 52)`. `parseInt` strips the unit suffix and reads only the numeric prefix — `"60vh"` → 60, `"100%"` → 100. So `"100%"` renders a single placeholder row, and values below 77 produce none. Always pass a numeric pixel value so the placeholder count matches the table height you intend.
 
 Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-features-row--skeleton-rows-variant
 
@@ -152,7 +152,7 @@ Correct:
 <DataTable columns={columns} data={[]} height={500} isSkeleton={isLoading} />
 ```
 
-`isSkeleton` is the default choice. Both props replace the rows with a visual placeholder — the difference is purely graphical. `isSkeleton` renders structured placeholder rows sized to the table height; `isLoading` shows a generic spinner.
+`isSkeleton` is the default choice. Both props replace the rows with a visual placeholder — the difference is purely graphical. `isSkeleton` replaces the whole table body, column header row included, with placeholder rows sized to the table height; `isLoading` keeps the column headers and shows a generic spinner in place of the rows.
 
 Two reasons to default to `isSkeleton`:
 
@@ -178,7 +178,7 @@ Non-stable references cause DataTable to re-render on every parent render cycle
 
 ---
 
-See also: ds-data-table-setup/SKILL.md — pixel height requirement applies to both skeleton and virtualization
+See also: ds-data-table-setup/SKILL.md — bounded height requirement for virtualization
 
 ---
 

package/skills/ds-data-table-filtering/SKILL.md

@@ -8,7 +8,7 @@ description: >
   debt — migrate to V2 whenever found in existing code, never use in new implementations.
 type: core
 library: ds-data-table
-library_version: '3.60.0'
+library_version: '3.80.0'
 requires:
   - ds-data-table-setup
   - ds-filter-bar-setup
@@ -112,12 +112,13 @@ const onFiltersChange = useCallback(
 );
 
 // fallbackRef is shared with the DSFilterBar assembly (passed as fallbackRef to
-// useFilterBarPrevNextFocus). When the last filter pill is removed, the filter bar
-// has nowhere left to move focus — this ref tells it to land on the first column header.
+// useFilterBarPrevNextFocus). The hook focuses fallbackRef only when no focusable element is
+// left in the filter bar (a menu button in the bar takes the focus first), so this ref lands
+// focus on the first column header in that case.
 const fallbackRef = useRef(null);
 
 // dsDatatableHeadTh injects fallbackRef into the first focusable column header,
-// completing the focus chain: last pill removed → focus moves to table header
+// completing the focus chain when the filter bar has nothing else to focus
 const dsDatatableHeadTh = useCallback(({ columnId, firstFocuseableColumnHeaderId }) => {
   if (columnId === firstFocuseableColumnHeaderId) return { innerRef: fallbackRef };
   return {};
@@ -144,9 +145,21 @@ const dsDatatableHeadTh = useCallback(({ columnId, firstFocuseableColumnHeaderId
 
 Do not pass `withFilterBar` to DataTable when using a composable `DSFilterBar` — the filter bar is external.
 
+### Default filter bar menu (no filterBarAddonRenderer)
+
+When `withFilterBar` is set and no `filterBarAddonRenderer` is passed, the filter bar renders its own menu button on `DSMenuButton`, with **Clear Filters** and the `filterBarProps.extraOptions` you provide (`{ type, id, label, onClick }`; `type: 'separator'` renders a separator). The menu reports through `filterBarProps`:
+
+- `onDropdownMenuToggle(isOpen, eventType)`: called when the menu opens or closes.
+- `onDropdownMenuClickOutside()`: called when the user clicks outside the open menu.
+- `onDropdownMenuTriggerClick()`: called when the trigger is clicked.
+- `isDropdownMenuOpen`: when you provide a boolean, your app owns the open state.
+- `onClearAllFiltersClick()`: called after `onFiltersChange([])` when Clear Filters is activated.
+
+For the details of the menu and how it behaves, see the [migration page](https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-docs--filter-bar-menu-button-migration).
+
 ### filterBarProps for inline filter bar customization
 
-`filterBarAddonRenderer` must be a **stable React component reference** — defined at module level or imported, never inline or via `useCallback`. Defining it inline (even with `useCallback`) creates a new component type on re-render, causing React to unmount and remount the addon on every render cycle, producing erratic behavior whenever the addon uses hooks or internal state.
+`filterBarAddonRenderer` must be a **stable React component reference** — defined at module level or imported, never inline or via `useCallback`. The filter bar renders it as a component (`<FilterBarAddonRenderer innerRef={...} />`). Defining it inline creates a new component type on every render, so React unmounts and remounts the addon each time and its internal state is lost. `useCallback` returns the same reference only while its dependencies are unchanged, so an addon that closes over changing state gets a new reference: module level is the safe default.
 
 The addon needs access to filter state and clear action from outside itself. Because `FilterBarAddon` is at module level, it reads what it needs at render time rather than closing over parent state — that is what makes this pattern work. Adapt to your project's state management stack:
 
@@ -154,24 +167,32 @@ The addon needs access to filter state and clear action from outside itself. Bec
 - **Zustand / Jotai**: subscribe to the relevant store or atom directly inside `FilterBarAddon`
 - **React Context**: use the pattern below (last resort — prefer the state manager options above)
 
-```jsx
+```tsx
 import { DSButtonV3 } from '@elliemae/ds-button-v2';
 import { ScreenReaderOnly } from '@elliemae/ds-accessibility';
-import { DataTable, applyOutOfTheBoxFilters } from '@elliemae/ds-data-table';
+import { DataTable, applyOutOfTheBoxFilters, type DSDataTableT } from '@elliemae/ds-data-table';
 import React, { createContext, useCallback, useContext, useState, useMemo } from 'react';
 
-const FilterBarAddonContext = createContext(null);
+const FilterBarAddonContext = createContext<{ filters: DSDataTableT.Filter[]; onClearFilters: () => void }>({
+  filters: [],
+  onClearFilters: () => {},
+});
 
-const FilterBarAddon = () => {
+// the table passes innerRef, the trigger ref. The table uses it as the next-focus target of the last pill, so removing
+// the last remaining pill focuses it. The table does not move focus when the menu closes: a custom addon must handle
+// its own focus return. Attach innerRef to the rendered control.
+const FilterBarAddon = ({ innerRef }) => {
   const { filters, onClearFilters } = useContext(FilterBarAddonContext);
   if (filters.length === 0) return null;
   return (
-    <DSButtonV3 buttonType="text" onClick={onClearFilters}>
+    <DSButtonV3 innerRef={innerRef} buttonType="text" onClick={onClearFilters}>
       Clear all filters
     </DSButtonV3>
   );
 };
 
+const filterBarProps = { filterBarAddonRenderer: FilterBarAddon };
+
 const [announcement, setAnnouncement] = useState('');
 
 const onFiltersChange = useCallback(
@@ -197,7 +218,7 @@ const ctxValue = useMemo(() => ({ filters, onClearFilters: handleClearFilters })
     height={500}
     withFilterBar
     filters={filters}
-    filterBarProps={{ filterBarAddonRenderer: FilterBarAddon }}
+    filterBarProps={filterBarProps}
     onFiltersChange={onFiltersChange}
   />
 </FilterBarAddonContext.Provider>;

package/skills/ds-data-table-health-check/SKILL.md

@@ -8,7 +8,7 @@ description: >
   what gaps may affect the current task.
 type: health-check
 library: ds-data-table
-library_version: '3.60.0'
+library_version: '3.80.0'
 requires:
   - ds-data-table-setup
   - ds-data-table-slots
@@ -81,9 +81,9 @@ Work through the following checks. For each finding, assign a severity:
 
 #### Foundation checks (from ds-data-table-setup)
 
-- [ ] `height` is a numeric pixel value — non-px silently defeats virtualization and scroll
+- [ ] `height` is bounded: a number, a px string, a viewport unit such as `'60vh'`, or a percentage of a parent that has a definite height. With the default `'100%'` in an unsized parent, or `'auto'`, the table renders nearly every row (HIGH for large data)
 - [ ] `uniqueRowAccessor` is present when selection, expand, or drag & drop is used
-- [ ] `dsDataTableTableWrapper={{ 'aria-label': '...' }}` is present — absence is a WCAG 4.1.2 VPAT failure
+- [ ] `dsDatatableTableWrapper={{ 'aria-label': '...' }}` is present — absence is a WCAG 4.1.2 VPAT failure
 - [ ] `domIdAffix` is an explicit string when multiple DataTable instances coexist on the page
 - [ ] All DataTable-driving state lives in the project's state manager — not `useState`
 - [ ] No `useEffect` watches DataTable callback-driven state to trigger secondary logic
@@ -98,7 +98,7 @@ Work through the following checks. For each finding, assign a severity:
 
 #### Selection checks (from ds-data-table-selection)
 
-- [ ] `selection` prop is present — DataTable auto-injects the checkbox column when truthy; `multiSelectColumn` import is for customization only
+- [ ] `selection` prop is present — DataTable auto-injects the checkbox column when truthy (unless `noSelectionColumn` is true); `multiSelectColumn` import is for customization only
 - [ ] `onSelectionChange` is present when `selection` is present — without it, selection silently does nothing
 - [ ] `uniqueRowAccessor` is set — without it, selection maps to wrong rows
 - [ ] Select-all cross-page: if `selectedControl === 'All'` and the dataset is paginated, is `newSelection` being merged with existing selection rather than replacing it?
@@ -114,12 +114,12 @@ Work through the following checks. For each finding, assign a severity:
 
 - [ ] Capital-P `Pagination` render prop is used — lowercase `pagination` prop is deprecated
 - [ ] `TablePagination` is defined at module level — not inside the component body
-- [ ] `data` passed to DataTable is the current page slice — DataTable does not paginate internally
+- [ ] `data` passed to DataTable is the current page slice — with the `Pagination` render prop, DataTable does not paginate internally
 - [ ] Page index resets to 1 on filter change where applicable
 
 #### Expandable checks (from ds-data-table-expandable)
 
-- [ ] `tableRowDetails` is not used — deprecated; WCAG violations; propose page-level alternative
+- [ ] `tableRowDetails` is not used — deprecated; WCAG violations; propose page-level alternative (using it logs a one-time deprecation warning in development builds)
 - [ ] `expandedRows` and `onRowExpand` are both present when `isExpandable` is set
 - [ ] `uniqueRowAccessor` is set — required for expand state stability
 
@@ -134,7 +134,7 @@ Work through the following checks. For each finding, assign a severity:
 
 - [ ] `isSkeleton` is preferred over `isLoading` for initial data fetch
 - [ ] `noResultsButtonLabel` and `onNoResultsButtonClick` are either both present or both absent — either alone has no visible effect
-- [ ] If `isSkeleton` is used, `height` is a numeric pixel value — non-px silently prevents skeleton rows from rendering
+- [ ] If `isSkeleton` is used, `height` is a numeric pixel value — the skeleton row count is computed from its numeric part
 
 #### Boundary checks (from ds-data-table-boundaries)
 

package/skills/ds-data-table-migration/SKILL.md

@@ -7,7 +7,7 @@ description: >
   onColumnSizeChange. Scan for all instances before migrating — partial migration is not a migration.
 type: lifecycle
 library: ds-data-table
-library_version: '3.60.0'
+library_version: '3.80.0'
 sources:
   - '@elliemae/ds-data-table:dist/types/exported-related/FilterTypes.d.ts'
   - '@elliemae/ds-data-table:dist/types/react-desc-prop-types.d.ts'
@@ -19,11 +19,12 @@ Before migrating, scan the entire codebase for all instances. Determine the corr
 
 ```
 # Patterns to search for — adapt the directory to the project's structure
+# Extended regex: use rg (ripgrep) or grep -E
 
 # V1 filter usage — covers all types that have V1/V2 variants:
-FILTER_TYPES\.(MULTI_SELECT|SELECT|CREATABLE_SELECT|CREATABLE_MULTI_SELECT|SINGLE_DATE|DATE_RANGE|DATE_SWITCHER|NUMBER_RANGE|FREE_TEXT_SEARCH|CURRENCY_RANGE)\b[^_]
-ds-filter-multi-select
-ds-filter-select
+FILTER_TYPES\.(MULTI_SELECT|SELECT|CREATABLE_SELECT|CREATABLE_MULTI_SELECT|SINGLE_DATE|DATE_RANGE|DATE_SWITCHER|NUMBER_RANGE|FREE_TEXT_SEARCH|CURRENCY_RANGE)\b
+['"]ds-filter-multi-select['"]
+['"]ds-filter-select['"]
 
 # Deprecated pagination prop:
 pagination={
@@ -86,7 +87,7 @@ Every filter type in `FILTER_TYPES` has both a V1 and a V2 variant. The V1 name
   columns={columns}
   data={rows}
   height={500}
-  pagination={{ pageSize: 10, totalCount: 1000 }}
+  pagination={{ pageSize: 10, pageCount: 100 }}
 />
 
 // After
@@ -95,7 +96,7 @@ Every filter type in `FILTER_TYPES` has both a V1 and a V2 variant. The V1 name
 
 Two things change in the migration:
 
-1. **Integration model** — the legacy prop accepted total count and delegated slicing internally; the modern pattern requires the app to own data fetching and page slicing via AJAX
+1. **Integration model** — the lowercase object makes DataTable slice `data` by `pageIndex` and `pageSize` itself (unless `dataIsPage: true`, where the app passes the current page). The `Pagination` render prop does no slicing: the modern pattern requires the app to own data fetching and page slicing via AJAX
 2. **Component model** — `Pagination` receives a React component reference, not a config object; that component must be defined at module level and read state from the project's state manager
 
 For the full correct implementation of `TablePagination`, load `ds-data-table-pagination/SKILL.md`.
@@ -109,7 +110,7 @@ For the full correct implementation of `TablePagination`, load `ds-data-table-pa
 
 ```jsx
 // After
-// Signature: (newColumns, sortedColumnId, sortDirection) => void
+// Signature: (newColumns, headerId, direction: 'ASC' | 'DESC') => void
 const handleColumnSort = useCallback((newColumns) => dispatch(setColumns(newColumns)), []);
 
 <DataTable columns={columns} data={rows} height={500} onColumnSort={handleColumnSort} />;

package/skills/ds-data-table-pagination/SKILL.md

@@ -7,7 +7,7 @@ description: >
   Lowercase pagination prop is deprecated legacy — migrate to Pagination component on sight.
 type: core
 library: ds-data-table
-library_version: '3.60.0'
+library_version: '3.80.0'
 requires:
   - ds-data-table-setup
   - ds-pagination-setup
@@ -24,13 +24,14 @@ sources:
 1. Check whether `@elliemae/ds-pagination` has a published intent skill — run `npx @tanstack/intent install` in the project or look for a `skills/` directory inside the `@elliemae/ds-pagination` package. The `ds-pagination-setup` skill covers the full composable assembly. If found, load it.
 2. If no skill is found, ask the human to share a correct implementation example from the Dimsum storybook before proceeding. Do not approximate the assembly from incomplete information — omitting the AJAX model or memoization requirements produces incorrect implementations.
 
-The DataTable side of the wiring. `TablePagination` is defined at module level — it is already a stable reference and does not need `useCallback`. Pass `pagedData` (the current page slice), not the full dataset — DataTable does not paginate internally; it renders whatever array it receives.
+The DataTable side of the wiring. `TablePagination` is defined at module level — it is already a stable reference and does not need `useCallback`. Pass `pagedData` (the current page slice), not the full dataset — with the `Pagination` render prop, DataTable does not paginate internally; it renders whatever array it receives.
 
 ```jsx
 import { DataTable } from '@elliemae/ds-data-table';
 
 const TablePagination = () => {
   // ... full assembly — see @elliemae/ds-pagination ds-pagination-setup skill
+  return null; // placeholder: the real component returns the assembled pagination
 };
 
 <DataTable columns={columns} data={pagedData} height={438} Pagination={TablePagination} />;
@@ -76,7 +77,7 @@ Correct:
 <DataTable columns={columns} data={pagedData} height={500} Pagination={TablePagination} />
 ```
 
-The lowercase `pagination` prop is legacy kept for backwards compatibility. Migrate on sight.
+The lowercase `pagination` prop is legacy kept for backwards compatibility. Migrate on sight. Passing it logs a one-time `console.warn` in development builds. Never combine it with the `Pagination` render prop: without `dataIsPage: true` the table slices the data it receives again by `pageIndex` and `pageSize`, so rows silently disappear whenever the array you pass holds more rows than the lowercase `pageSize`.
 
 Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-features-pagination--paginated-table
 
@@ -96,7 +97,7 @@ Correct:
 <DataTable columns={columns} data={pagedData} height={500} Pagination={TablePagination} />
 ```
 
-DataTable does not internally paginate data. The app must slice to the current page. Passing all rows defeats virtualization.
+With the `Pagination` render prop, DataTable does not paginate: it shows (and scrolls) every row it receives, so pass only the current page.
 
 Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-features-pagination--paginated-table
 
@@ -110,7 +111,6 @@ Wrong:
 // Defined inside a component — new reference or new component type on every render
 const ParentComponent = () => {
   const MyPagination = () => <DSPaginationContainer>...</DSPaginationContainer>;
-  // or: const MyPagination = useCallback(() => <DSPaginationContainer>...</DSPaginationContainer>, [...]);
   return <DataTable columns={columns} data={pagedData} height={500} Pagination={MyPagination} />;
 };
 ```
@@ -129,7 +129,7 @@ const ParentComponent = () => (
 );
 ```
 
-A component defined inside another component creates a new component type identity on every render. React unmounts and remounts the subtree on every cycle, regardless of `useCallback` memoization. State manager integration (Redux/Zustand/Jotai) is the correct mechanism for sharing pagination state with a module-level component.
+A component defined inside another component creates a new component type on every render, so React unmounts and remounts it each time. `useCallback` keeps the same type only while its dependencies are unchanged. State manager integration (Redux/Zustand/Jotai) is the correct mechanism for sharing pagination state with a module-level component.
 
 Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-features-pagination--paginated-table