[pull] master from jbetancur:master

apps/docs/package.json

@@ -10,19 +10,19 @@
   },
   "dependencies": {
     "@astrojs/react": "^6.0.1",
-    "@astrojs/sitemap": "^3.7.2",
-    "@shikijs/langs": "^4.1.0",
-    "@tailwindcss/vite": "^4.3.2",
-    "astro": "^7.0.7",
+    "@astrojs/sitemap": "^3.7.3",
+    "@shikijs/langs": "^4.3.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "astro": "^7.1.1",
     "react": "^18.3.1",
     "react-data-table-component": "*",
     "react-dom": "^18.3.1",
-    "tailwindcss": "^4.3.2"
+    "tailwindcss": "^4.3.3"
   },
   "devDependencies": {
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
-    "concurrently": "^9.2.1",
+    "concurrently": "^10.0.3",
     "pagefind": "^1.5.2"
   }
 }

apps/docs/public/llms.txt

@@ -74,16 +74,16 @@ const columns = [
 ## Recipes
 
 - [Server-side sort & filter](https://reactdatatable.com/docs/recipes/server-side)
-- [Approval workflow with bulk actions](https://reactdatatable.com/docs/recipes/bulk-action-toolbar)
-- [URL-synced table state](https://reactdatatable.com/docs/recipes/editable-grid)
-- [Dashboard drill-down](https://reactdatatable.com/docs/recipes/master-detail)
+- [Approval workflow with bulk actions](https://reactdatatable.com/docs/recipes/approval-workflow)
+- [URL-synced table state](https://reactdatatable.com/docs/recipes/url-synced-state)
+- [Dashboard drill-down](https://reactdatatable.com/docs/recipes/dashboard-drilldown)
 - [Live-updating data grid](https://reactdatatable.com/docs/recipes/live-updates): flash-on-change rows using conditionalRowStyles and keyField
 - [Editable inventory grid](https://reactdatatable.com/docs/recipes/inventory-editor): spreadsheet-style inline editing with a derived total column
 - [Grouped rows with aggregates](https://reactdatatable.com/docs/recipes/row-groups): per-group totals and drill-down without a dedicated groupBy API
 - [CSV import](https://reactdatatable.com/docs/recipes/csv-import): load a user-uploaded CSV file into the table
-- [Audit log viewer](https://reactdatatable.com/docs/recipes/sticky-footer)
+- [Audit log viewer](https://reactdatatable.com/docs/recipes/audit-log)
 - [Persist column widths](https://reactdatatable.com/docs/recipes/persist-column-widths)
-- [Inline row actions](https://reactdatatable.com/docs/recipes/row-grouping)
+- [Inline row actions](https://reactdatatable.com/docs/recipes/inline-row-actions)
 
 ## Optional
 

apps/docs/src/components/demos/HeadlessDemo.tsx

@@ -4,6 +4,7 @@ import {
 	useTableState,
 	useTableData,
 	useColumnFilter,
+	SortOrder,
 	type TableColumn,
 	type FilterState,
 } from 'react-data-table-component';
@@ -101,9 +102,15 @@ export default function HeadlessDemo() {
 
 	function clickSort(col: TableColumn<Employee>) {
 		if (!col.sortable) return;
-		const isAsc = selectedColumn?.id === col.id && (tableState.sortDirection as string) === 'asc';
-		const newDir = (isAsc ? 'desc' : 'asc') as typeof tableState.sortDirection;
-		handleSort({ type: 'SORT_CHANGE', selectedColumn: col, sortDirection: newDir, clearSelectedOnSort: false });
+		const isAsc = selectedColumn?.id === col.id && tableState.sortDirection === SortOrder.ASC;
+		handleSort({
+			type: 'SORT_CHANGE',
+			selectedColumn: col,
+			clearSelectedOnSort: false,
+			additive: false,
+			defaultSortDirection: SortOrder.ASC,
+			direction: isAsc ? SortOrder.DESC : SortOrder.ASC,
+		});
 	}
 
 	return (

apps/docs/src/components/demos/IconsDemo.tsx

@@ -254,10 +254,12 @@ export default function IconsDemo() {
 				// Pagination icons
 				{...(mode === 'custom-pagination'
 					? {
-							paginationIconFirstPage: <ChevronsLeft />,
-							paginationIconLastPage: <ChevronsRight />,
-							paginationIconPrevious: <ChevronLeft />,
-							paginationIconNext: <ChevronRight />,
+							paginationIcons: {
+								first: <ChevronsLeft />,
+								last: <ChevronsRight />,
+								previous: <ChevronLeft />,
+								next: <ChevronRight />,
+							},
 						}
 					: {})}
 

apps/docs/src/components/demos/PrioritySortDemo.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import DataTable from '../ThemedDataTable';
-import { type TableColumn, SortOrder } from 'react-data-table-component';
+import { type TableColumn, type Selector, SortOrder } from 'react-data-table-component';
 
 type Status = 'Active' | 'On Leave' | 'Terminated';
 
@@ -87,7 +87,7 @@ export default function PrioritySortDemo() {
 
 	const sortFunction = useMemo(() => {
 		if (mode === 'secondary-sort') {
-			return (rows: Employee[], selector: (r: Employee) => string | number | boolean, direction: SortOrder) =>
+			return (rows: Employee[], selector: Selector<Employee>, direction: SortOrder) =>
 				[...rows].sort((a, b) => {
 					const av = selector(a);
 					const bv = selector(b);

apps/docs/src/components/demos/RowPinningDemo.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import DataTable from '../ThemedDataTable';
-import { type TableColumn, SortOrder } from 'react-data-table-component';
+import { type TableColumn, type Selector, SortOrder } from 'react-data-table-component';
 
 type Status = 'Active' | 'On Leave' | 'Terminated';
 
@@ -129,7 +129,7 @@ export default function RowPinningDemo() {
 	);
 
 	const sortFunction = useMemo(
-		() => (rows: Employee[], selector: (r: Employee) => string | number | boolean, direction: SortOrder) => {
+		() => (rows: Employee[], selector: Selector<Employee>, direction: SortOrder) => {
 			const pinned = rows.filter(r => pinnedIds.has(r.id));
 			const rest = rows.filter(r => !pinnedIds.has(r.id));
 			const sorted = [...rest].sort((a, b) => {

apps/docs/src/components/demos/ServerSideRecipeDemo.tsx

@@ -41,13 +41,13 @@ function simulateFetch({
 			let rows = [...ALL_DATA];
 
 			// filter
-			const nameFilter = filters['name'];
-			if (nameFilter?.value) {
-				rows = rows.filter(r => r.name.toLowerCase().includes(String(nameFilter.value).toLowerCase()));
+			const nameFilter = filters['name']?.condition1.value;
+			if (nameFilter) {
+				rows = rows.filter(r => r.name.toLowerCase().includes(nameFilter.toLowerCase()));
 			}
-			const deptFilter = filters['department'];
-			if (deptFilter?.value) {
-				rows = rows.filter(r => r.department.toLowerCase().includes(String(deptFilter.value).toLowerCase()));
+			const deptFilter = filters['department']?.condition1.value;
+			if (deptFilter) {
+				rows = rows.filter(r => r.department.toLowerCase().includes(deptFilter.toLowerCase()));
 			}
 
 			// sort

apps/docs/src/components/demos/UrlSyncDemo.tsx

@@ -75,10 +75,7 @@ export default function UrlSyncDemo() {
 	const [perPage, setPerPage] = useState(init.perPage);
 	const [filters, setFilters] = useState<Record<string, FilterState>>(() =>
 		Object.fromEntries(
-			Object.entries(init.filters).map(([k, v]) => [
-				k,
-				{ value: v, operator: 'contains' as const, condition2: null, join: 'and' as const },
-			]),
+			Object.entries(init.filters).map(([k, v]) => [k, { condition1: { operator: 'contains' as const, value: v } }]),
 		),
 	);
 
@@ -91,7 +88,7 @@ export default function UrlSyncDemo() {
 			perPage,
 			filters: Object.fromEntries(
 				Object.entries(filters)
-					.map(([k, f]) => [k, String(f.value ?? '')])
+					.map(([k, f]) => [k, String(f.condition1?.value ?? '')])
 					.filter(([, v]) => v),
 			),
 		});

apps/docs/src/data/props.ts

@@ -35,7 +35,7 @@ export type PropFeature =
   | 'fixed-header'
   | 'loading';
 
-// Which api.md `###` subsection a prop renders under, in source order.
+// Which api.astro `###` subsection a prop renders under, in source order.
 export type PropGroup =
   | 'Data'
   | 'Layout & appearance'
@@ -875,6 +875,24 @@ export const dataTableProps: PropDef[] = [
     group: 'Column features',
     features: ['resizable'],
   },
+  {
+    name: 'initialColumnWidths',
+    type: c('Record<string | number, number>'),
+    default: '-',
+    description: `Seed column widths (px) by column ${c('id')}, useful for hydrating persisted widths on mount. See <a href="/docs/recipes/persist-column-widths">Persist column widths</a>.`,
+    brief: `Seed column widths (px) by column ${c('id')} on mount.`,
+    group: 'Column features',
+    features: ['resizable'],
+  },
+  {
+    name: 'onColumnResize',
+    type: c('(columnId, width, allWidths) =&gt; void'),
+    default: '-',
+    description: `Called after the user finishes resizing a column. Receives the column ${c('id')}, its final width (px), and the full widths map for persisting.`,
+    brief: 'Called with the column id, final width (px), and full widths map after a resize.',
+    group: 'Column features',
+    features: ['resizable'],
+  },
   {
     name: 'columnGroups',
     type: c('ColumnGroup[]'),

apps/docs/src/layouts/DocsLayout.astro

@@ -100,13 +100,13 @@ const nav = [
   {
     group: 'Recipes',
     links: [
-      { label: 'Approval workflow', href: '/docs/recipes/bulk-action-toolbar' },
+      { label: 'Approval workflow', href: '/docs/recipes/approval-workflow' },
       { label: 'Server-side sort & filter', href: '/docs/recipes/server-side' },
-      { label: 'URL-synced table state', href: '/docs/recipes/editable-grid' },
-      { label: 'Dashboard drill-down', href: '/docs/recipes/master-detail' },
-      { label: 'Audit log viewer', href: '/docs/recipes/sticky-footer' },
+      { label: 'URL-synced table state', href: '/docs/recipes/url-synced-state' },
+      { label: 'Dashboard drill-down', href: '/docs/recipes/dashboard-drilldown' },
+      { label: 'Audit log viewer', href: '/docs/recipes/audit-log' },
       { label: 'Persist column widths', href: '/docs/recipes/persist-column-widths' },
-      { label: 'Inline row actions', href: '/docs/recipes/row-grouping' },
+      { label: 'Inline row actions', href: '/docs/recipes/inline-row-actions' },
       { label: 'Live-updating grid', href: '/docs/recipes/live-updates' },
       { label: 'Editable inventory grid', href: '/docs/recipes/inventory-editor' },
       { label: 'Grouped rows with aggregates', href: '/docs/recipes/row-groups' },
@@ -150,7 +150,6 @@ const nextLink = currentIndex < allLinks.length - 1 ? allLinks[currentIndex + 1]
             <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M8 13.7c-.3 0-.6-.1-.8-.3L1.6 7.8C.6 6.8.1 5.5.1 4.1.1 1.8 2 0 4.3 0c1.2 0 2.3.5 3.1 1.3L8 1.9l.6-.6C9.4.5 10.5 0 11.7 0 14 0 15.9 1.8 15.9 4.1c0 1.4-.5 2.7-1.5 3.7l-5.6 5.6c-.2.2-.5.3-.8.3z"/></svg>
             Sponsor this project
           </div>
-          <p class="mt-1 text-[11px] text-pink-400 leading-snug">215k downloads/week · actively maintained since 2018</p>
         </a>
 
         {nav.map(({ group, links }) => (

apps/docs/src/pages/docs/cells.astro

@@ -172,6 +172,6 @@ const columns: TableColumn<Employee>[] = [
   </Demo>
 
   <p>
-    See it combined with other features in the <a href="/docs/recipes/row-grouping">Inline row actions</a> recipe.
+    See it combined with other features in the <a href="/docs/recipes/inline-row-actions">Inline row actions</a> recipe.
   </p>
 </DocsLayout>

apps/docs/src/pages/docs/expandable.astro

@@ -285,7 +285,7 @@ const custom: Localization = {
   <PropsTable feature="expandable" columns={['prop', 'type', 'description']} />
 
   <p>
-    See it combined with other features in the <a href="/docs/recipes/master-detail">Dashboard with drill-down</a> recipe
+    See it combined with other features in the <a href="/docs/recipes/dashboard-drilldown">Dashboard with drill-down</a> recipe
     and <a href="/docs/recipes/row-groups">Grouped rows with aggregates</a>.
   </p>
 </DocsLayout>

apps/docs/src/pages/docs/filtering.astro

@@ -248,7 +248,7 @@ const rows = filteredData(tableRows);`} />
 
   <p>
     See it combined with other features in the <a href="/docs/recipes/server-side">Server-side sort, page & filter</a> recipe
-    and <a href="/docs/recipes/editable-grid">URL-synced table state</a>.
+    and <a href="/docs/recipes/url-synced-state">URL-synced table state</a>.
   </p>
 
   <h2>Prop reference</h2>

apps/docs/src/pages/docs/fixed-header.astro

@@ -149,6 +149,6 @@ const columns: TableColumn<Employee>[] = [
   <PropsTable feature="fixed-header" columns={['prop', 'type', 'default', 'description']} />
 
   <p>
-    See it combined with other features in the <a href="/docs/recipes/sticky-footer">Audit log viewer</a> recipe.
+    See it combined with other features in the <a href="/docs/recipes/audit-log">Audit log viewer</a> recipe.
   </p>
 </DocsLayout>

apps/docs/src/pages/docs/headless.astro

@@ -669,7 +669,7 @@ useEffect(() => {
       ['Selected rows', '<code>useTableState</code>', '<code>selectableRowSelected</code> + <code>onSelectedRowsChange</code>'],
       ['Sort column + direction', '<code>useTableState</code>', '<code>defaultSortFieldId</code> + <code>onSort</code>'],
       ['Column filters', '<code>useColumnFilter</code>', '<code>filterValues</code> + <code>onFilterChange</code>'],
-      ['Column widths', '<code>useColumnResize</code>', 'None — DOM-only (see <a href="/docs/recipes">recipes</a>)'],
+      ['Column widths', '<code>useColumnResize</code>', '<code>initialColumnWidths</code> + <code>onColumnResize</code>'],
       ['Column order', '<code>useColumns</code>', '<code>onColumnOrderChange</code>'],
       ['Expanded rows', 'local to each row component', '<code>expandableRowExpanded</code> + <code>onRowExpandToggled</code>'],
     ]}

apps/docs/src/pages/docs/pagination.astro

@@ -561,6 +561,6 @@ const custom: Localization = {
 
   <p>
     See it combined with other features in the <a href="/docs/recipes/server-side">Server-side sort, page & filter</a> recipe
-    and <a href="/docs/recipes/editable-grid">URL-synced table state</a>.
+    and <a href="/docs/recipes/url-synced-state">URL-synced table state</a>.
   </p>
 </DocsLayout>