From 3356158367c3c182432d4ffb3100194fc8c7fb01 Mon Sep 17 00:00:00 2001
From: John Betancur <1385932+jbetancur@users.noreply.github.com>
Date: Sun, 12 Jul 2026 07:55:59 -0400
Subject: [PATCH 1/3] allow opt out of skelton loading behaviour (#1349)

---
 CHANGELOG.md                                  |  8 +++++
 .../src/components/demos/FooterBasicDemo.tsx  |  1 -
 .../components/demos/InlineEditingDemo.tsx    | 31 ++++++++++------
 .../docs/src/components/demos/LoadingDemo.tsx | 35 ++++++++++++++++++-
 apps/docs/src/pages/docs/api.md               |  3 +-
 apps/docs/src/pages/docs/loading.astro        | 11 ++++--
 src/DataTable.css                             |  8 +++++
 src/__tests__/DataTable.test.tsx              | 25 +++++++++++++
 src/components/DataTable.tsx                  |  2 ++
 src/components/DataTableBody.tsx              | 11 ++++--
 src/defaultProps.tsx                          |  1 +
 src/types.ts                                  |  1 +
 12 files changed, 119 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ff9a8bf..b01162fe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 A summary of notable changes per release. For the full commit history see the [repository on GitHub](https://github.com/jbetancur/react-data-table-component/commits/master).
 
+## 8.6.1
+
+### Bug fixes
+
+- A custom `progressComponent` could not be shown on the initial load — the skeleton rows always won. New `progressSkeleton` prop (default `true`) lets you set it to `false` to show your `progressComponent` on initial load instead. → [Loading state](/docs/loading)
+
+---
+
 ## 8.6.0
 
 ### New features
diff --git a/apps/docs/src/components/demos/FooterBasicDemo.tsx b/apps/docs/src/components/demos/FooterBasicDemo.tsx
index 20e6b31e..7ae92321 100644
--- a/apps/docs/src/components/demos/FooterBasicDemo.tsx
+++ b/apps/docs/src/components/demos/FooterBasicDemo.tsx
@@ -89,7 +89,6 @@ export default function FooterBasicDemo() {
 				columns={columns}
 				data={data}
 				highlightOnHover
-				dense
 			/>
 		</div>
 	);
diff --git a/apps/docs/src/components/demos/InlineEditingDemo.tsx b/apps/docs/src/components/demos/InlineEditingDemo.tsx
index 666442ba..2ad8b08d 100644
--- a/apps/docs/src/components/demos/InlineEditingDemo.tsx
+++ b/apps/docs/src/components/demos/InlineEditingDemo.tsx
@@ -11,14 +11,15 @@ interface Employee {
 	department: Department;
 	status: Status;
 	salary: number;
+	remote: boolean;
 }
 
 const initialData: Employee[] = [
-	{ id: 1, name: 'Aria Chen', department: 'Engineering', status: 'Active', salary: 155000 },
-	{ id: 2, name: 'Marcus Webb', department: 'Product', status: 'Active', salary: 132000 },
-	{ id: 3, name: 'Priya Kapoor', department: 'Design', status: 'On Leave', salary: 118000 },
-	{ id: 4, name: 'Jordan Ellis', department: 'Analytics', status: 'Active', salary: 143000 },
-	{ id: 5, name: 'Sam Rivera', department: 'Engineering', status: 'Terminated', salary: 128000 },
+	{ id: 1, name: 'Aria Chen', department: 'Engineering', status: 'Active', salary: 155000, remote: true },
+	{ id: 2, name: 'Marcus Webb', department: 'Product', status: 'Active', salary: 132000, remote: false },
+	{ id: 3, name: 'Priya Kapoor', department: 'Design', status: 'On Leave', salary: 118000, remote: true },
+	{ id: 4, name: 'Jordan Ellis', department: 'Analytics', status: 'Active', salary: 143000, remote: false },
+	{ id: 5, name: 'Sam Rivera', department: 'Engineering', status: 'Terminated', salary: 128000, remote: false },
 ];
 
 const statusColors: Record<Status, string> = {
@@ -33,9 +34,8 @@ export default function InlineEditingDemo() {
 
 	const handleCellEdit = (row: Employee, value: string, column: TableColumn<Employee>) => {
 		const field = column.id as keyof Employee;
-		setData(prev =>
-			prev.map(r => (r.id === row.id ? { ...r, [field]: field === 'salary' ? Number(value) || r.salary : value } : r)),
-		);
+		const parsed = field === 'salary' ? Number(value) || row.salary : field === 'remote' ? value === 'true' : value;
+		setData(prev => prev.map(r => (r.id === row.id ? { ...r, [field]: parsed } : r)));
 		setLastEdit(`Updated ${row.name} → ${String(column.name)}: "${value}"`);
 	};
 
@@ -101,15 +101,24 @@ export default function InlineEditingDemo() {
 			editable: true,
 			onCellEdit: handleCellEdit,
 		},
+		{
+			id: 'remote',
+			name: 'Remote',
+			selector: r => r.remote,
+			format: r => (r.remote ? 'Yes' : 'No'),
+			center: true,
+			editor: { type: 'checkbox' },
+			onCellEdit: handleCellEdit,
+		},
 	];
 
 	return (
 		<div className="space-y-2">
 			<p className="text-xs text-gray-400">
 				Click any cell to edit. <strong>Name</strong> and <strong>Salary</strong> are text inputs;{' '}
-				<strong>Department</strong> and <strong>Status</strong> are dropdowns. <kbd>Enter</kbd> commits, <kbd>Esc</kbd>{' '}
-				cancels. Keyboard navigation is enabled too: click or Tab into the table, move between cells and headers with
-				the arrow keys, and press <kbd>Enter</kbd> to edit or sort.
+				<strong>Department</strong> and <strong>Status</strong> are dropdowns; <strong>Remote</strong> is a checkbox.{' '}
+				<kbd>Enter</kbd> commits, <kbd>Esc</kbd> cancels. Keyboard navigation is enabled too: click or Tab into the
+				table, move between cells and headers with the arrow keys, and press <kbd>Enter</kbd> to edit or sort.
 			</p>
 			<DataTable columns={columns} data={data} highlightOnHover cellNavigation />
 			{lastEdit && <div className="text-xs text-emerald-600 font-mono">{lastEdit}</div>}
diff --git a/apps/docs/src/components/demos/LoadingDemo.tsx b/apps/docs/src/components/demos/LoadingDemo.tsx
index b9ae77f0..22676b15 100644
--- a/apps/docs/src/components/demos/LoadingDemo.tsx
+++ b/apps/docs/src/components/demos/LoadingDemo.tsx
@@ -31,10 +31,19 @@ function delay(ms: number) {
 
 type Mode = 'initial' | 'refetch' | 'idle';
 
+const customLoader = (
+	<div className="flex flex-col items-center gap-2 text-brand-600">
+		<div className="h-6 w-6 rounded-full border-2 border-brand-200 border-t-brand-600 animate-spin" />
+		<span className="text-xs font-medium">Fetching employees…</span>
+	</div>
+);
+
 export default function LoadingDemo() {
 	const [mode, setMode] = useState<Mode>('idle');
 	const [data, setData] = useState<Row[]>(ROWS);
 	const [pending, setPending] = useState(false);
+	const [useCustom, setUseCustom] = useState(false);
+	const [skeleton, setSkeleton] = useState(true);
 
 	async function simulateInitial() {
 		setData([]);
@@ -67,9 +76,31 @@ export default function LoadingDemo() {
 				<button className={btnSecondary} disabled={pending} onClick={simulateRefetch}>
 					Simulate re-fetch
 				</button>
+				<label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer select-none">
+					<input
+						type="checkbox"
+						checked={useCustom}
+						disabled={pending}
+						onChange={e => setUseCustom(e.target.checked)}
+					/>
+					Use custom loader
+				</label>
+				<label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer select-none">
+					<input
+						type="checkbox"
+						checked={skeleton}
+						disabled={pending}
+						onChange={e => setSkeleton(e.target.checked)}
+					/>
+					Skeleton on initial load
+				</label>
 				{mode !== 'idle' && (
 					<span className="text-xs text-gray-400 italic">
-						{mode === 'initial' ? 'Loading with no existing data — skeleton rows shown' : 'Re-fetching — existing rows dimmed, spinner overlaid'}
+						{mode === 'initial'
+							? skeleton
+								? 'Loading with no existing data — skeleton rows shown'
+								: 'Loading with no existing data — progress component shown'
+							: 'Re-fetching — existing rows dimmed, indicator overlaid'}
 					</span>
 				)}
 			</div>
@@ -77,6 +108,8 @@ export default function LoadingDemo() {
 				columns={columns}
 				data={data}
 				progressPending={pending}
+				progressComponent={useCustom ? customLoader : undefined}
+				progressSkeleton={skeleton}
 				highlightOnHover
 				striped
 			/>
diff --git a/apps/docs/src/pages/docs/api.md b/apps/docs/src/pages/docs/api.md
index 38da2f3c..18149cc0 100644
--- a/apps/docs/src/pages/docs/api.md
+++ b/apps/docs/src/pages/docs/api.md
@@ -29,7 +29,8 @@ Complete reference for every prop, type, and export in `react-data-table-compone
 | `columns` | `TableColumn<T>[]` | - | **Required.** Column definitions. |
 | `keyField` | `string` | `"id"` | Property on each row used as a stable React key. |
 | `progressPending` | `boolean` | `false` | Show a loading state. On initial load (no data yet) renders shimmer skeleton rows. On re-fetch (data already loaded) dims the existing rows and overlays a centered spinner. The column header always stays visible. |
-| `progressComponent` | `ReactNode` | built-in spinner | Custom loading indicator. |
+| `progressComponent` | `ReactNode` | built-in spinner | Custom loading indicator shown in the re-fetch overlay, and on initial load when `progressSkeleton` is `false`. |
+| `progressSkeleton` | `boolean` | `true` | Show shimmer skeleton rows on the initial load (no data yet). Set to `false` to show `progressComponent` on initial load instead. |
 | `noDataComponent` | `ReactNode` | built-in message | Rendered when `data` is empty. |
 
 ### Layout & appearance
diff --git a/apps/docs/src/pages/docs/loading.astro b/apps/docs/src/pages/docs/loading.astro
index 1c752b97..c457128f 100644
--- a/apps/docs/src/pages/docs/loading.astro
+++ b/apps/docs/src/pages/docs/loading.astro
@@ -18,6 +18,12 @@ import LoadingDemo from '../../components/demos/LoadingDemo';
     <li><strong>Re-fetch</strong> (rows already shown): existing rows stay in place, dim to 40% opacity, and a spinner overlays the centre. The header and pagination never disappear.</li>
   </ul>
 
+  <p>
+    Set <code>progressSkeleton</code> to <code>false</code> to opt out of the skeleton on initial load:
+    your <code>progressComponent</code> is shown instead of the shimmer rows. It defaults to <code>true</code>,
+    so a custom <code>progressComponent</code> still uses skeleton rows on first load unless you turn this off.
+  </p>
+
   <Demo
     title="Loading state"
     description="Click either button to see the two loading modes."
@@ -50,8 +56,9 @@ export default function UsersTable() {
   <h2>Custom spinner or message</h2>
 
   <p>
-    The default <code>progressComponent</code> is a CSS spinner circle. Pass any React node to replace it.
-    It will be centred in the overlay during re-fetches, or shown instead of skeletons on initial load.
+    The default <code>progressComponent</code> is a CSS spinner circle. Pass any React node to replace it:
+    your node is centred in the overlay during re-fetches. On initial load the skeleton rows show instead;
+    set <code>progressSkeleton={false}</code> to show your <code>progressComponent</code> there too.
   </p>
 
   <CodeBlock code={`<DataTable
diff --git a/src/DataTable.css b/src/DataTable.css
index 1309007d..7905bccf 100644
--- a/src/DataTable.css
+++ b/src/DataTable.css
@@ -1324,6 +1324,14 @@
 	pointer-events: none;
 }
 
+/* Initial load with a custom progressComponent: no rows behind it to fill height,
+ * so the overlay is in-flow and reserves its own vertical space. */
+.rdt_bodyOverlayEmpty {
+	position: static;
+	min-height: 96px;
+	padding: 24px 0;
+}
+
 /* ─── Footer ─────────────────────────────────────────────────────────────────
  * Lives inside .rdt_table so it shares the same flex layout as body rows —
  * column widths align automatically with the rest of the table.
diff --git a/src/__tests__/DataTable.test.tsx b/src/__tests__/DataTable.test.tsx
index fb21b3cc..f0c3c0ca 100644
--- a/src/__tests__/DataTable.test.tsx
+++ b/src/__tests__/DataTable.test.tsx
@@ -538,6 +538,31 @@ describe('DataTable::progress/nodata', () => {
 		expect(container.querySelector('.rdt_skeletonPulse')).not.toBeNull();
 	});
 
+	test('should skip skeleton rows on initial load when progressSkeleton is false', () => {
+		const mock = dataMock();
+		const { container, getByText } = render(
+			<DataTable
+				data={[]}
+				columns={mock.columns}
+				progressPending
+				progressSkeleton={false}
+				progressComponent={<div>Loading…</div>}
+			/>,
+		);
+
+		expect(container.querySelector('.rdt_skeletonPulse')).toBeNull();
+		expect(getByText('Loading…')).not.toBeNull();
+	});
+
+	test('should still render skeleton rows when a custom progressComponent is passed but progressSkeleton is left default', () => {
+		const mock = dataMock();
+		const { container } = render(
+			<DataTable data={[]} columns={mock.columns} progressPending progressComponent={<div>Loading…</div>} />,
+		);
+
+		expect(container.querySelector('.rdt_skeletonPulse')).not.toBeNull();
+	});
+
 	describe('when persistTableHead', () => {
 		test('should render the progress component and keep TableHead when progressPending toggles to true', () => {
 			const mock = dataMock();
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index 29aa892a..73743b23 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -78,6 +78,7 @@ function DataTableInner<T>(props: TableProps<T>, ref: React.ForwardedRef<DataTab
 		responsive = defaultProps.responsive,
 		progressPending = defaultProps.progressPending,
 		progressComponent = defaultProps.progressComponent,
+		progressSkeleton = defaultProps.progressSkeleton,
 		persistTableHead = defaultProps.persistTableHead,
 		noDataComponent = defaultProps.noDataComponent,
 		disabled = defaultProps.disabled,
@@ -564,6 +565,7 @@ function DataTableInner<T>(props: TableProps<T>, ref: React.ForwardedRef<DataTab
 										columnCount={tableColumns.length}
 										noDataComponent={noDataComponent}
 										progressComponent={progressComponent}
+										progressSkeleton={progressSkeleton}
 										expandableRowExpanded={expandableRowExpanded}
 										expandableRowDisabled={expandableRowDisabled}
 										bodyRef={bodyRef}
diff --git a/src/components/DataTableBody.tsx b/src/components/DataTableBody.tsx
index 0dd85e24..c6e1a8a8 100644
--- a/src/components/DataTableBody.tsx
+++ b/src/components/DataTableBody.tsx
@@ -40,6 +40,7 @@ interface DataTableBodyProps<T> {
 	columnCount: number;
 	noDataComponent: React.ReactNode;
 	progressComponent: React.ReactNode;
+	progressSkeleton: boolean;
 	expandableRowExpanded?: RowState<T>;
 	expandableRowDisabled?: RowState<T>;
 	bodyRef: React.RefObject<HTMLDivElement>;
@@ -57,6 +58,7 @@ function DataTableBody<T>({
 	columnCount,
 	noDataComponent,
 	progressComponent,
+	progressSkeleton,
 	expandableRowExpanded,
 	expandableRowDisabled,
 	bodyRef,
@@ -163,8 +165,8 @@ function DataTableBody<T>({
 			{/* Empty + not loading */}
 			{!hasData && !isBusy && <NoData>{noDataComponent}</NoData>}
 
-			{/* Initial load: no existing data — show skeleton rows */}
-			{isBusy && !hasData && (
+			{/* Initial load with skeleton enabled: no existing data — show skeleton rows */}
+			{isBusy && !hasData && progressSkeleton && (
 				<Body className="rdt_TableBody" role="rowgroup">
 					{Array.from({ length: SKELETON_ROW_COUNT }).map((_, i) => (
 						<SkeletonRow key={i} colCount={columnCount} index={i} />
@@ -172,6 +174,11 @@ function DataTableBody<T>({
 				</Body>
 			)}
 
+			{/* Initial load with skeleton disabled: show the progress component instead */}
+			{isBusy && !hasData && !progressSkeleton && (
+				<div className="rdt_bodyOverlay rdt_bodyOverlayEmpty">{progressComponent}</div>
+			)}
+
 			{/* Has data — always render rows, overlay when re-fetching */}
 			{hasData && (
 				<div style={{ position: 'relative' }}>
diff --git a/src/defaultProps.tsx b/src/defaultProps.tsx
index 29de9d5e..d666aa6c 100644
--- a/src/defaultProps.tsx
+++ b/src/defaultProps.tsx
@@ -66,6 +66,7 @@ export const defaultProps = {
 			}}
 		/>
 	),
+	progressSkeleton: true,
 	persistTableHead: false,
 	sortIcon: null,
 	sortFunction: null,
diff --git a/src/types.ts b/src/types.ts
index a7432fad..3f33e6d2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -341,6 +341,7 @@ type BaseTableProps<T> = {
 	pointerOnHover?: boolean;
 	progressComponent?: React.ReactNode;
 	progressPending?: boolean;
+	progressSkeleton?: boolean;
 	responsive?: boolean;
 	striped?: boolean;
 	style?: CSSObject;

From d3463ca6a5a19ec2eb173a254d23b6bb7922c123 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sun, 12 Jul 2026 12:02:25 +0000
Subject: [PATCH 2/3] chore: release v8.6.1 [skip ci]

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 012476c6..8c430c43 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "8.6.0",
+  "version": "8.6.1",
   "description": "A fast, feature-rich React data table. Working table in 10 lines.",
   "funding": [
     {

From 0dc7bec5008b49580d9e3f6dfc59993de1ae2531 Mon Sep 17 00:00:00 2001
From: John Betancur <1385932+jbetancur@users.noreply.github.com>
Date: Sun, 12 Jul 2026 09:34:15 -0400
Subject: [PATCH 3/3] docs: update doc api references (#1350)

---
 .github/FUNDING.yml                           |    1 -
 README.md                                     |   18 +-
 apps/docs/public/llms.txt                     |    3 +-
 apps/docs/src/components/PropsTable.astro     |   85 ++
 apps/docs/src/data/backers.ts                 |    9 +
 apps/docs/src/data/props.ts                   | 1000 +++++++++++++++++
 apps/docs/src/pages/docs/animations.astro     |    5 +
 apps/docs/src/pages/docs/api.astro            |  648 +++++++++++
 apps/docs/src/pages/docs/api.md               |  698 ------------
 apps/docs/src/pages/docs/column-groups.astro  |   11 +
 apps/docs/src/pages/docs/column-pinning.astro |    8 +-
 apps/docs/src/pages/docs/column-reorder.astro |   10 +
 .../src/pages/docs/column-separators.astro    |    5 +
 .../src/pages/docs/conditional-styles.astro   |   11 +
 apps/docs/src/pages/docs/context-menu.astro   |   10 +-
 apps/docs/src/pages/docs/custom-styles.astro  |   10 +
 apps/docs/src/pages/docs/expandable.astro     |   35 +-
 apps/docs/src/pages/docs/filtering.astro      |   10 +
 apps/docs/src/pages/docs/fixed-header.astro   |   11 +-
 apps/docs/src/pages/docs/footer.astro         |   10 +
 .../docs/src/pages/docs/getting-started.astro |   17 +-
 apps/docs/src/pages/docs/inline-editing.astro |   36 +-
 .../src/pages/docs/keyboard-navigation.astro  |    8 +-
 apps/docs/src/pages/docs/loading.astro        |    5 +
 apps/docs/src/pages/docs/localization.astro   |    5 +
 apps/docs/src/pages/docs/mobile.astro         |   10 +
 apps/docs/src/pages/docs/pagination.astro     |   30 +-
 apps/docs/src/pages/docs/resizable.astro      |    6 +-
 .../src/pages/docs/row-interactions.astro     |    5 +
 apps/docs/src/pages/docs/rtl.astro            |    8 +-
 apps/docs/src/pages/docs/selection.astro      |    5 +
 apps/docs/src/pages/docs/sorting.astro        |   19 +-
 apps/docs/src/pages/docs/themes.astro         |   15 +-
 apps/docs/src/pages/index.astro               |   22 +-
 apps/docs/src/pages/support.astro             |   53 +-
 package-lock.json                             |    4 -
 package.json                                  |    4 -
 37 files changed, 1956 insertions(+), 894 deletions(-)
 create mode 100644 apps/docs/src/components/PropsTable.astro
 create mode 100644 apps/docs/src/data/backers.ts
 create mode 100644 apps/docs/src/data/props.ts
 create mode 100644 apps/docs/src/pages/docs/api.astro
 delete mode 100644 apps/docs/src/pages/docs/api.md

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index e2eda8a3..fca15021 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -4,7 +4,6 @@ github: [jbetancur]
 # patreon: # Replace with a single Patreon username
 open_collective: react-data-table-component
 # ko_fi: # Replace with a single Ko-fi username
-tidelift: npm/react-data-table-component
 # community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 # liberapay: # Replace with a single Liberapay username
 # issuehunt: # Replace with a single IssueHunt username
diff --git a/README.md b/README.md
index 85487e17..f7b966ed 100644
--- a/README.md
+++ b/README.md
@@ -42,30 +42,28 @@ The documentation contains information about installation, usage and contributio
 
 # Supporting React Data Table Component
 
-React Data Table Component has been actively maintained since 2018 and is downloaded ~215k times a week. If your team ships products with it, your support keeps it maintained, bug-free, and moving forward.
+React Data Table Component has been actively maintained since 2018 and is downloaded ![weekly downloads](https://img.shields.io/npm/dw/react-data-table-component.svg?label=%20&color=blue&style=flat-square) times a week. If your team ships products with it, your support keeps it maintained, bug-free, and moving forward.
 
 ## Sponsor the project
 
-Sponsoring puts your company logo in front of ~215k developers a week: in the README, the docs site, and every release. It's the right move if your team depends on this library and you want it to keep improving.
+Sponsoring puts your company logo in front of the ![weekly downloads](https://img.shields.io/npm/dw/react-data-table-component.svg?label=%20&color=blue&style=flat-square) developers who use it every week: in the README, the docs site, and every release. It's the right move if your team depends on this library and you want it to keep improving.
 
 | Tier | Price/month | Perk |
 | --- | --- | --- |
 | ☕ Supporter | $5 | Your name in the README supporters list |
 | 🎗 Backer | $20 | Name + link in README + listed in the Backers section on reactdatatable.com |
-| 🥉 Bronze | $100 | Priority issue triage + small logo in README + docs site footer |
-| 🥈 Silver | $200 | Priority issue triage + medium logo in README + docs site sidebar |
-| 🥇 Gold | $500 | Priority issue triage + direct maintainer line + large logo in README + hero spot on reactdatatable.com. Limited to 3. |
+| 🥉 Bronze | $100 | Visibility: small logo in README + docs site footer, and sponsor credit in every release's notes |
+| 🥈 Silver | $200 | Everything in Bronze + medium logo in the docs sidebar + priority issue queue: sponsor issues go to the front of the backlog, first response within 2 business days |
+| 🥇 Gold | $500 | Everything in Silver + hero logo on reactdatatable.com + top README placement + written support commitments: 12-month patch window for the previous major, security advisories before public disclosure, one compliance questionnaire per year, direct email channel (async, business hours). Limited to 3. |
+
+These are honest, written commitments from a solo maintainer: async and business hours. No fake 24/7 SLA.
 
 [![Sponsor on GitHub Sponsors](https://img.shields.io/badge/Sponsor-GitHub%20Sponsors-ea4aaa?logo=github)](https://github.com/sponsors/jbetancur)
 [![Sponsor on OpenCollective](https://img.shields.io/badge/Sponsor-OpenCollective-blue?logo=opencollective)](https://opencollective.com/react-data-table-component)
 
 ## Enterprise support
 
-Available as part of the Tidelift Subscription.
-
-The maintainer of react-data-table-component and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-react-data-table-component?utm_source=npm-react-data-table-component&utm_medium=referral&utm_campaign=readme)
-
-<!-- TODO: replace the Tidelift link above with the exact referral URL from the dashboard's "Promote the Tidelift Subscription" marketing task. -->
+Need commercial support, an SLA, or help with a major version upgrade? I offer direct consulting and priority support arrangements for teams that depend on react-data-table-component in production. Reach out via the [support page](https://reactdatatable.com/support).
 
 ## Need help?
 
diff --git a/apps/docs/public/llms.txt b/apps/docs/public/llms.txt
index 61a38b93..b332f946 100644
--- a/apps/docs/public/llms.txt
+++ b/apps/docs/public/llms.txt
@@ -34,6 +34,7 @@ const columns = [
 - [Column Reordering](https://reactdatatable.com/docs/column-reorder): drag to reorder, mouse or touch (press-and-hold on touch)
 - [Column Resizing](https://reactdatatable.com/docs/resizable): drag column edges by mouse or touch, persist widths
 - [Column Pinning](https://reactdatatable.com/docs/column-pinning): pin columns left or right
+- [Column Separators](https://reactdatatable.com/docs/column-separators): vertical divider lines between header and body columns
 - [Column Filtering](https://reactdatatable.com/docs/filtering): per-column text, number, and select filters
 - [Sorting](https://reactdatatable.com/docs/sorting): client-side and server-side sorting
 
@@ -87,6 +88,6 @@ const columns = [
 ## Optional
 
 - [Changelog](https://reactdatatable.com/docs/changelog): release history
-- [Support & Sponsorship](https://reactdatatable.com/support): sponsor tiers, enterprise support via Tidelift
+- [Support & Sponsorship](https://reactdatatable.com/support): sponsor tiers, direct consulting and enterprise support
 - [GitHub repository](https://github.com/jbetancur/react-data-table-component)
 - [npm package](https://www.npmjs.com/package/react-data-table-component)
diff --git a/apps/docs/src/components/PropsTable.astro b/apps/docs/src/components/PropsTable.astro
new file mode 100644
index 00000000..93c6bd54
--- /dev/null
+++ b/apps/docs/src/components/PropsTable.astro
@@ -0,0 +1,85 @@
+---
+import DocsTable from './DocsTable.astro';
+import { dataTableProps, propGroupOrder, type PropDef, type PropFeature, type PropGroup } from '../data/props';
+
+type Column = 'prop' | 'type' | 'default' | 'description';
+
+interface Props {
+  // Filter by feature tag (feature pages) …
+  feature?: PropFeature;
+  // … or render whole api.md-style groups (the API reference).
+  group?: PropGroup;
+  groups?: PropGroup[];
+  // Restrict/order the rows explicitly by prop name (overrides feature/group).
+  only?: string[];
+  // Which columns to render. Default omits the Default column on feature pages.
+  columns?: Column[];
+  // Prefer the shorter `brief` copy where available. Defaults to true unless a
+  // group is given (the API reference wants the canonical description).
+  brief?: boolean;
+  // Header label for the first column.
+  propHeader?: string;
+}
+
+const {
+  feature,
+  group,
+  groups,
+  only,
+  columns,
+  brief = !group && !groups,
+  propHeader = 'Prop',
+} = Astro.props as Props;
+
+const byName = new Map(dataTableProps.map(p => [p.name, p] as const));
+
+let rows: PropDef[];
+if (only) {
+  rows = only.map(name => {
+    const p = byName.get(name);
+    if (!p) throw new Error(`PropsTable: unknown prop "${name}" in \`only\``);
+    return p;
+  });
+} else if (feature) {
+  rows = dataTableProps.filter(p => p.features.includes(feature));
+} else {
+  const wanted = groups ?? (group ? [group] : propGroupOrder);
+  rows = dataTableProps.filter(p => wanted.includes(p.group));
+}
+
+if (rows.length === 0) {
+  throw new Error(`PropsTable: no props matched (feature=${feature}, group=${group}).`);
+}
+
+// Row events have no defaults in the source; drop the Default column when none
+// of the selected rows define one, unless the caller pins the columns.
+const anyDefault = rows.some(p => p.default != null && p.default !== '');
+const cols: Column[] = columns ?? (anyDefault ? ['prop', 'type', 'default', 'description'] : ['prop', 'type', 'description']);
+
+const headerFor: Record<Column, string> = {
+  prop: propHeader,
+  type: 'Type',
+  default: 'Default',
+  description: 'Description',
+};
+const headers = cols.map(col => headerFor[col]);
+
+const cellFor = (p: PropDef, col: Column): string => {
+  switch (col) {
+    case 'prop': {
+      const label = `<code>${p.name}</code>`;
+      return p.deprecated ? `<s>${label}</s>` : label;
+    }
+    case 'type':
+      return p.type;
+    case 'default':
+      return p.default ?? '-';
+    case 'description':
+      return (brief && p.brief) || p.description;
+  }
+};
+
+const tableRows = rows.map(p => cols.map(col => cellFor(p, col)));
+---
+
+<DocsTable headers={headers} rows={tableRows} />
diff --git a/apps/docs/src/data/backers.ts b/apps/docs/src/data/backers.ts
new file mode 100644
index 00000000..7997b86b
--- /dev/null
+++ b/apps/docs/src/data/backers.ts
@@ -0,0 +1,9 @@
+// Single source of truth for Backer-tier ($20/mo) sponsors and above.
+// Rendered on both /support and the homepage sponsors section.
+// Add names here as they sign on — keep README.md's "## Backers" list in sync by hand.
+export interface Backer {
+  name: string;
+  url?: string;
+}
+
+export const backers: Backer[] = [{ name: 'Rich Tillman', url: 'https://opencollective.com/rich-tillman' }];
diff --git a/apps/docs/src/data/props.ts b/apps/docs/src/data/props.ts
new file mode 100644
index 00000000..e9136317
--- /dev/null
+++ b/apps/docs/src/data/props.ts
@@ -0,0 +1,1000 @@
+// Single source of truth for DataTable prop reference tables.
+//
+// Both the API reference (/docs/api) and every feature page render their prop
+// tables from this catalog via <PropsTable>. Add a prop once here, tag it with
+// the feature pages it belongs on, and it appears everywhere with no drift.
+//
+// `description` is the canonical (fuller) copy shown on the API reference.
+// `brief` is an optional shorter description shown on feature pages; when a
+// feature page renders a prop with no `brief`, it falls back to `description`.
+// All string fields are HTML (use <code>…</code>, &gt;, &lt;), matching how the
+// <DocsTable> component renders cells via set:html.
+
+export type PropFeature =
+  | 'core'
+  | 'layout'
+  | 'theming'
+  | 'sorting'
+  | 'pagination'
+  | 'footer'
+  | 'selection'
+  | 'expandable'
+  | 'row-events'
+  | 'keyboard'
+  | 'resizable'
+  | 'column-groups'
+  | 'column-pinning'
+  | 'filtering'
+  | 'column-reorder'
+  | 'context-menu'
+  | 'localization'
+  | 'cells'
+  | 'inline-editing'
+  | 'column-visibility'
+  | 'rtl'
+  | 'fixed-header'
+  | 'loading';
+
+// Which api.md `###` subsection a prop renders under, in source order.
+export type PropGroup =
+  | 'Data'
+  | 'Layout & appearance'
+  | 'Theming & styling'
+  | 'Sorting'
+  | 'Pagination'
+  | 'Footer'
+  | 'Row selection'
+  | 'Expandable rows'
+  | 'Row events'
+  | 'Keyboard navigation'
+  | 'Column features'
+  | 'Context menu'
+  | 'Localization';
+
+export interface PropDef {
+  name: string;
+  /** `true` = DataTable prop, `column` = TableColumn field, `ref` = imperative handle method. */
+  on?: 'table' | 'column' | 'ref';
+  type: string;
+  default?: string;
+  /** Canonical description, shown on the API reference. HTML. */
+  description: string;
+  /** Optional shorter description for feature pages. Falls back to `description`. HTML. */
+  brief?: string;
+  group: PropGroup;
+  features: PropFeature[];
+  deprecated?: boolean;
+}
+
+const c = (s: string) => `<code>${s}</code>`;
+
+export const dataTableProps: PropDef[] = [
+  // ── Data ─────────────────────────────────────────────────────────────────
+  {
+    name: 'data',
+    type: c('T[]'),
+    default: '-',
+    description: `<strong>Required.</strong> Array of row objects.`,
+    brief: 'Row data (required)',
+    group: 'Data',
+    features: ['core'],
+  },
+  {
+    name: 'columns',
+    type: c('TableColumn&lt;T&gt;[]'),
+    default: '-',
+    description: `<strong>Required.</strong> Column definitions.`,
+    brief: 'Column definitions (required)',
+    group: 'Data',
+    features: ['core'],
+  },
+  {
+    name: 'keyField',
+    type: c('string'),
+    default: c('"id"'),
+    description: `Property on each row used as a stable React key.`,
+    group: 'Data',
+    features: ['core'],
+  },
+  {
+    name: 'progressPending',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Show a loading state. On initial load (no data yet) renders shimmer skeleton rows. On re-fetch (data already loaded) dims the existing rows and overlays a centered spinner. The column header always stays visible.`,
+    brief: 'Show a loading state (skeleton on first load, overlay spinner on re-fetch).',
+    group: 'Data',
+    features: ['loading'],
+  },
+  {
+    name: 'progressComponent',
+    type: c('ReactNode'),
+    default: 'built-in spinner',
+    description: `Custom loading indicator shown in the re-fetch overlay, and on initial load when ${c('progressSkeleton')} is ${c('false')}.`,
+    group: 'Data',
+    features: ['loading'],
+  },
+  {
+    name: 'progressSkeleton',
+    type: c('boolean'),
+    default: c('true'),
+    description: `Show shimmer skeleton rows on the initial load (no data yet). Set to ${c('false')} to show ${c('progressComponent')} on initial load instead.`,
+    group: 'Data',
+    features: ['loading'],
+  },
+  {
+    name: 'noDataComponent',
+    type: c('ReactNode'),
+    default: 'built-in message',
+    description: `Rendered when ${c('data')} is empty.`,
+    group: 'Data',
+    features: ['loading'],
+  },
+
+  // ── Layout & appearance ──────────────────────────────────────────────────
+  {
+    name: 'title',
+    type: `${c('string')} | ${c('ReactNode')}`,
+    default: '-',
+    description: `Table title shown in the header bar.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+  {
+    name: 'actions',
+    type: `${c('ReactNode')} | ${c('ReactNode[]')}`,
+    default: '-',
+    description: `Content rendered on the right side of the header bar.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+  {
+    name: 'subHeader',
+    type: c('ReactNode'),
+    default: '-',
+    description: `Content for the sub-header bar. Providing any value shows the bar.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+  {
+    name: 'subHeaderAlign',
+    type: c('Alignment'),
+    default: c('"right"'),
+    description: `Alignment of sub-header content.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+  {
+    name: 'subHeaderWrap',
+    type: c('boolean'),
+    default: c('true'),
+    description: `Allow sub-header to wrap onto multiple lines.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+  {
+    name: 'noHeader',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Force-hide the title/actions header bar. The bar otherwise renders only when a ${c('title')} or ${c('actions')} is provided, so you rarely need this.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+  {
+    name: 'noTableHead',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Hide the column header row.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+  {
+    name: 'persistTableHead',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Show the column header even when data is empty. The header always stays visible during ${c('progressPending')} regardless of this prop.`,
+    group: 'Layout & appearance',
+    features: ['layout', 'loading'],
+  },
+  {
+    name: 'dense',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Reduce row height for a compact look.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+  {
+    name: 'responsive',
+    type: c('boolean'),
+    default: c('true'),
+    description: `Wrap the table in a horizontally scrollable container. Disable only when a parent element owns scrolling, see <a href="/docs/fixed-header#responsive-false">Turning the scroll container off</a>.`,
+    group: 'Layout & appearance',
+    features: ['layout', 'fixed-header'],
+  },
+  {
+    name: 'fixedHeader',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Stick the column header at the top when scrolling.`,
+    brief: 'Stick the column header at the top when scrolling.',
+    group: 'Layout & appearance',
+    features: ['fixed-header'],
+  },
+  {
+    name: 'fixedHeaderScrollHeight',
+    type: c('string'),
+    default: c('"100vh"'),
+    description: `Max height of the scrollable body when ${c('fixedHeader')} is on.`,
+    brief: `Max height of the scrollable body when ${c('fixedHeader')} is on.`,
+    group: 'Layout & appearance',
+    features: ['fixed-header'],
+  },
+  {
+    name: 'onScroll',
+    type: c('(event) =&gt; void'),
+    default: '-',
+    description: `Called when the user scrolls the table body. Works with both ${c('fixedHeader')} enabled and disabled.`,
+    brief: `Called when the user scrolls the table body. Works with ${c('fixedHeader')} on or off.`,
+    group: 'Layout & appearance',
+    features: ['fixed-header'],
+  },
+  {
+    name: 'direction',
+    type: c('Direction'),
+    default: c('Direction.AUTO'),
+    description: `Text direction (${c('ltr')}, ${c('rtl')}, ${c('auto')}).`,
+    brief: `Text direction: ${c('"ltr"')}, ${c('"rtl"')}, or ${c('"auto"')}.`,
+    group: 'Layout & appearance',
+    features: ['layout', 'rtl'],
+  },
+  {
+    name: 'className',
+    type: c('string'),
+    default: '-',
+    description: `Extra CSS class on the root element.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+  {
+    name: 'style',
+    type: c('CSSProperties'),
+    default: '-',
+    description: `Inline styles on the root element.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+  {
+    name: 'ariaLabel',
+    type: c('string'),
+    default: '-',
+    description: `Value for the table's ${c('aria-label')}.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+  {
+    name: 'disabled',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Disable all interactive controls.`,
+    group: 'Layout & appearance',
+    features: ['layout'],
+  },
+
+  // ── Theming & styling ────────────────────────────────────────────────────
+  {
+    name: 'theme',
+    type: c('ThemeProp'),
+    default: c('"default"'),
+    description: `Named built-in theme, a ${c('Theme')} object from ${c('createTheme()')}, or a raw CSS-variable map.`,
+    brief: `Named theme (e.g. ${c('"material"')}, ${c('"catppuccin"')}, ${c('"crisp"')}).`,
+    group: 'Theming & styling',
+    features: ['theming'],
+  },
+  {
+    name: 'colorMode',
+    type: c('ColorMode'),
+    default: c('"system"'),
+    description: `Controls when the theme's dark-mode overrides apply. ${c('"system"')} follows ${c('localStorage')}, the ${c('html.dark')} class, then ${c('prefers-color-scheme')}. ${c('"light"')} / ${c('"dark"')} force a mode.`,
+    group: 'Theming & styling',
+    features: ['theming'],
+  },
+  {
+    name: 'customStyles',
+    type: c('TableStyles'),
+    default: '-',
+    description: `Fine-grained style overrides. See <a href="#tablestyles">TableStyles</a>.`,
+    brief: `Fine-grained style overrides. See <a href="/docs/custom-styles">Custom styles</a>.`,
+    group: 'Theming & styling',
+    features: ['theming'],
+  },
+  {
+    name: 'conditionalRowStyles',
+    type: c('ConditionalStyles&lt;T&gt;[]'),
+    default: '-',
+    description: `Apply styles or class names to rows when a predicate matches.`,
+    group: 'Theming & styling',
+    features: ['theming'],
+  },
+  {
+    name: 'striped',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Alternate row background colors.`,
+    group: 'Theming & styling',
+    features: ['theming'],
+  },
+  {
+    name: 'highlightOnHover',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Highlight rows on mouse-over.`,
+    group: 'Theming & styling',
+    features: ['theming'],
+  },
+  {
+    name: 'pointerOnHover',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Show a pointer cursor on row hover.`,
+    group: 'Theming & styling',
+    features: ['theming'],
+  },
+  {
+    name: 'columnSeparator',
+    type: `${c('boolean')} | ${c('"subtle"')} | ${c('"full"')}`,
+    default: '-',
+    description: `Vertical lines between body columns. ${c('true')}/${c('"subtle"')} = inset 60%-height line, ${c('"full"')} = full-height line.`,
+    brief: 'Body column separators (headers always shown).',
+    group: 'Theming & styling',
+    features: ['theming'],
+  },
+  {
+    name: 'headerSeparator',
+    type: `${c('boolean')} | ${c('"subtle"')} | ${c('"full"')}`,
+    default: c('true'),
+    description: `Vertical lines between header cells. ${c('true')}/${c('"subtle"')} = inset line (default), ${c('"full"')} = full-height, ${c('false')} = none.`,
+    group: 'Theming & styling',
+    features: ['theming'],
+  },
+  {
+    name: 'animateRows',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Staggered entrance and sort animations. Respects ${c('prefers-reduced-motion')}.`,
+    brief: 'Staggered row entrance + sort animation.',
+    group: 'Theming & styling',
+    features: ['theming', 'expandable'],
+  },
+
+  // ── Sorting ──────────────────────────────────────────────────────────────
+  {
+    name: 'defaultSortFieldId',
+    type: `${c('string')} | ${c('number')}`,
+    default: '-',
+    description: `Column ${c('id')} to sort by on initial render.`,
+    brief: `Column ${c('id')} to sort by on first render.`,
+    group: 'Sorting',
+    features: ['sorting'],
+  },
+  {
+    name: 'defaultSortAsc',
+    type: c('boolean'),
+    default: c('true'),
+    description: `Initial sort direction.`,
+    brief: `Initial sort direction. ${c('false')} = descending.`,
+    group: 'Sorting',
+    features: ['sorting'],
+  },
+  {
+    name: 'sortServer',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Disable client-side sorting; fire ${c('onSort')} and let the server sort.`,
+    brief: `Disable client-side sorting. Use with ${c('onSort')} to sort remotely.`,
+    group: 'Sorting',
+    features: ['sorting'],
+  },
+  {
+    name: 'sortMulti',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Enable multi-column sorting via Ctrl/⌘-click. Clicking still cycles asc → desc → off per column.`,
+    brief: 'Enable multi-column sorting. Ctrl/⌘-click a header to add it to the existing sort.',
+    group: 'Sorting',
+    features: ['sorting'],
+  },
+  {
+    name: 'sortFunction',
+    type: `${c('SortFunction&lt;T&gt;')} | ${c('null')}`,
+    default: '-',
+    description: `Global custom sort function applied to all sortable columns.`,
+    brief: 'Table-level sort algorithm. Replaces the default sort for all columns.',
+    group: 'Sorting',
+    features: ['sorting'],
+  },
+  {
+    name: 'sortIcon',
+    type: c('ReactNode'),
+    default: 'built-in chevron',
+    description: `Custom sort direction indicator.`,
+    brief: 'Custom icon rendered inside sortable column headers.',
+    group: 'Sorting',
+    features: ['sorting'],
+  },
+  {
+    name: 'onSort',
+    type: c('(column, direction, sortedRows, sortColumns) =&gt; void'),
+    default: '-',
+    description: `Called whenever the sort changes. ${c('sortColumns')} is the full sort config in priority order; an empty array means the sort was cleared.`,
+    brief: `Called on every sort change with the primary column, its direction, the sorted rows, and the full ${c('sortColumns')} config in priority order. An empty ${c('sortColumns')} array means the sort was cleared.`,
+    group: 'Sorting',
+    features: ['sorting'],
+  },
+  {
+    name: 'column.sortable',
+    on: 'column',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Enable sorting on this column.`,
+    group: 'Sorting',
+    features: ['sorting'],
+  },
+  {
+    name: 'column.sortFunction',
+    on: 'column',
+    type: c('(a, b) =&gt; number'),
+    default: '-',
+    description: `Per-column sort comparator. Takes priority over the table-level ${c('sortFunction')}.`,
+    group: 'Sorting',
+    features: ['sorting'],
+  },
+  {
+    name: 'column.sortField',
+    on: 'column',
+    type: c('string'),
+    default: '-',
+    description: `Backend field name passed to ${c('onSort')} when it differs from ${c('column.id')}.`,
+    group: 'Sorting',
+    features: ['sorting'],
+  },
+  {
+    name: 'ref.clearSort()',
+    on: 'ref',
+    type: c('DataTableHandle'),
+    default: '-',
+    description: `Imperatively reset sort to the default state. See <a href="#datatablehandle-ref">DataTableHandle</a>.`,
+    brief: `Imperatively reset sort to the default (${c('defaultSortFieldId')} / ${c('defaultSortAsc')}), or unsorted if no defaults are set. See <a href="/docs/api#datatablehandle-ref">DataTableHandle</a>.`,
+    group: 'Sorting',
+    features: ['sorting'],
+  },
+
+  // ── Pagination ───────────────────────────────────────────────────────────
+  {
+    name: 'pagination',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Enable built-in pagination controls.`,
+    brief: 'Enable built-in pagination',
+    group: 'Pagination',
+    features: ['pagination', 'core'],
+  },
+  {
+    name: 'paginationPerPage',
+    type: c('number'),
+    default: c('10'),
+    description: `Rows shown per page.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'paginationPosition',
+    type: `${c("'top'")} | ${c("'bottom'")} | ${c("'both'")}`,
+    default: c("'bottom'"),
+    description: `Where the pagination bar renders. ${c("'both'")} shows it above and below the table simultaneously.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'paginationRowsPerPageOptions',
+    type: c('number[]'),
+    default: c('[10,15,20,25,30]'),
+    description: `Options in the rows-per-page dropdown.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'paginationDefaultPage',
+    type: c('number'),
+    default: c('1'),
+    description: `Initial active page.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'paginationPage',
+    type: c('number'),
+    default: '-',
+    description: `Controlled active page. When provided, the table navigates to this page whenever the value changes. Use together with ${c('onChangePage')} to keep them in sync.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'paginationResetDefaultPage',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Toggle to reset to page 1 (e.g. after a filter change). Prefer ${c('paginationPage')} for new code.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'paginationTotalRows',
+    type: c('number'),
+    default: '-',
+    description: `Total row count for server-side pagination.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'paginationServer',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Delegate page changes to ${c('onChangePage')} / ${c('onChangeRowsPerPage')}.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'paginationServerOptions',
+    type: c('PaginationServerOptions'),
+    default: '-',
+    description: `Selection-persistence options for server-side mode.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'paginationComponentOptions',
+    type: c('PaginationOptions'),
+    default: '-',
+    description: `Localisation and display options for the built-in paginator.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'paginationComponent',
+    type: c('React.ComponentType'),
+    default: '-',
+    description: `Replace the built-in pagination UI entirely.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'paginationIcons',
+    type: c('PaginationIcons'),
+    default: '-',
+    description: `Override any or all pagination icons. Pass a partial object: ${c('{ next: &lt;MyIcon /&gt; }')}.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'onChangePage',
+    type: c('(page, totalRows) =&gt; void'),
+    default: '-',
+    description: `Called when the active page changes.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+  {
+    name: 'onChangeRowsPerPage',
+    type: c('(rowsPerPage, page) =&gt; void'),
+    default: '-',
+    description: `Called when rows-per-page selection changes.`,
+    group: 'Pagination',
+    features: ['pagination'],
+  },
+
+  // ── Footer ───────────────────────────────────────────────────────────────
+  {
+    name: 'footerComponent',
+    type: c('ComponentType&lt;FooterComponentProps&lt;T&gt;&gt;'),
+    default: '-',
+    description: `Replace the footer row with a custom component. Receives ${c('{ rows, columns }')}. Takes precedence over column-level ${c('footer')} fields.`,
+    group: 'Footer',
+    features: ['footer'],
+  },
+  {
+    name: 'showFooter',
+    type: c('boolean'),
+    default: '-',
+    description: `Force the footer row on or off. By default the footer renders when ${c('footerComponent')} is set or any visible column declares a ${c('footer')}. Set to ${c('false')} to suppress, ${c('true')} to render an empty footer row.`,
+    group: 'Footer',
+    features: ['footer'],
+  },
+
+  // ── Row selection ────────────────────────────────────────────────────────
+  {
+    name: 'selectableRows',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Show a checkbox column for row selection.`,
+    brief: 'Enable row checkboxes',
+    group: 'Row selection',
+    features: ['selection', 'core'],
+  },
+  {
+    name: 'selectableRowsSingle',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Allow only one row to be selected at a time.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+  {
+    name: 'selectableRowsNoSelectAll',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Hide the "select all" checkbox in the header.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+  {
+    name: 'selectableRowsVisibleOnly',
+    type: c('boolean'),
+    default: c('false'),
+    description: `"Select all" only selects rows on the current page.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+  {
+    name: 'selectableRowsHighlight',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Highlight selected rows using the theme's selected color.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+  {
+    name: 'selectableRowsRange',
+    type: c('boolean'),
+    default: c('true'),
+    description: `Enable Shift-click range selection. Disabled automatically in single-select mode.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+  {
+    name: 'selectableRowDisabled',
+    type: c('(row: T) =&gt; boolean'),
+    default: '-',
+    description: `Disable selection for a specific row.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+  {
+    name: 'selectableRowSelected',
+    type: c('(row: T) =&gt; boolean'),
+    default: '-',
+    description: `Pre-select rows that satisfy the predicate.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+  {
+    name: 'selectedRows',
+    type: c('T[]'),
+    default: '-',
+    description: `Controlled selection. When supplied, drives selection state from the outside; matched against ${c('keyField')}.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+  {
+    name: 'selectableRowsComponent',
+    type: `${c('"input"')} | ${c('ReactNode')}`,
+    default: 'built-in checkbox',
+    description: `Custom checkbox component.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+  {
+    name: 'selectableRowsComponentProps',
+    type: c('object'),
+    default: '-',
+    description: `Extra props forwarded to the custom checkbox component. Function values are called with the checkbox's indeterminate state and their return value is passed instead.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+  {
+    name: 'onSelectedRowsChange',
+    type: c('(state) =&gt; void'),
+    default: '-',
+    description: `Called whenever selection changes. Receives ${c('{ allSelected, selectedCount, selectedRows }')}.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+  {
+    name: 'clearSelectedRows',
+    type: c('boolean'),
+    default: '-',
+    description: `<strong>Deprecated.</strong> Toggle to clear selection. Use ${c('ref.current.clearSelectedRows()')} instead.`,
+    group: 'Row selection',
+    features: ['selection'],
+    deprecated: true,
+  },
+  {
+    name: 'ref.clearSelectedRows()',
+    on: 'ref',
+    type: c('DataTableHandle'),
+    default: '-',
+    description: `Imperatively deselect all selected rows. See <a href="#datatablehandle-ref">DataTableHandle</a>.`,
+    group: 'Row selection',
+    features: ['selection'],
+  },
+
+  // ── Expandable rows ──────────────────────────────────────────────────────
+  {
+    name: 'expandableRows',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Enable the expandable row feature.`,
+    brief: 'Enable expandable row panels',
+    group: 'Expandable rows',
+    features: ['expandable', 'core'],
+  },
+  {
+    name: 'expandableRowsComponent',
+    type: c('React.ComponentType'),
+    default: '-',
+    description: `Component rendered in the expanded panel. Receives ${c('{ data: T }')}.`,
+    group: 'Expandable rows',
+    features: ['expandable'],
+  },
+  {
+    name: 'expandableRowsComponentProps',
+    type: c('object'),
+    default: '-',
+    description: `Extra props merged into ${c('expandableRowsComponent')}.`,
+    group: 'Expandable rows',
+    features: ['expandable'],
+  },
+  {
+    name: 'expandableRowExpanded',
+    type: c('(row: T) =&gt; boolean'),
+    default: '-',
+    description: `Control which rows start expanded.`,
+    group: 'Expandable rows',
+    features: ['expandable'],
+  },
+  {
+    name: 'expandableRowDisabled',
+    type: c('(row: T) =&gt; boolean'),
+    default: '-',
+    description: `Prevent specific rows from being expanded.`,
+    group: 'Expandable rows',
+    features: ['expandable'],
+  },
+  {
+    name: 'expandableRowsHideExpander',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Hide the expander chevron column (use with ${c('expandOnRowClicked')}).`,
+    group: 'Expandable rows',
+    features: ['expandable'],
+  },
+  {
+    name: 'expandOnRowClicked',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Toggle expansion by clicking anywhere on the row.`,
+    group: 'Expandable rows',
+    features: ['expandable'],
+  },
+  {
+    name: 'expandOnRowDoubleClicked',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Toggle expansion by double-clicking anywhere on the row.`,
+    group: 'Expandable rows',
+    features: ['expandable'],
+  },
+  {
+    name: 'expandableInheritConditionalStyles',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Apply the parent row's conditional styles to the expanded panel.`,
+    group: 'Expandable rows',
+    features: ['expandable'],
+  },
+  {
+    name: 'expandableIcon',
+    type: c('{ collapsed, expanded }'),
+    default: 'built-in chevron',
+    description: `Custom expand/collapse icons.`,
+    group: 'Expandable rows',
+    features: ['expandable'],
+  },
+  {
+    name: 'onRowExpandToggled',
+    type: c('(expanded, row) =&gt; void'),
+    default: '-',
+    description: `Called when a row is expanded or collapsed.`,
+    group: 'Expandable rows',
+    features: ['expandable'],
+  },
+
+  // ── Row events ───────────────────────────────────────────────────────────
+  {
+    name: 'onRowClicked',
+    type: c('(row, event) =&gt; void'),
+    description: `Called when a row is left-clicked.`,
+    group: 'Row events',
+    features: ['row-events'],
+  },
+  {
+    name: 'onRowDoubleClicked',
+    type: c('(row, event) =&gt; void'),
+    description: `Called when a row is double-clicked.`,
+    group: 'Row events',
+    features: ['row-events'],
+  },
+  {
+    name: 'onRowMiddleClicked',
+    type: c('(row, event) =&gt; void'),
+    description: `Called when a row is middle-clicked (scroll-click). Use with ${c('onRowClicked')} to implement open-in-new-tab behaviour.`,
+    group: 'Row events',
+    features: ['row-events'],
+  },
+  {
+    name: 'onRowMouseEnter',
+    type: c('(row, event) =&gt; void'),
+    description: `Called when the pointer enters a row.`,
+    group: 'Row events',
+    features: ['row-events'],
+  },
+  {
+    name: 'onRowMouseLeave',
+    type: c('(row, event) =&gt; void'),
+    description: `Called when the pointer leaves a row.`,
+    group: 'Row events',
+    features: ['row-events'],
+  },
+
+  // ── Keyboard navigation ──────────────────────────────────────────────────
+  {
+    name: 'cellNavigation',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Spreadsheet-style keyboard navigation using the WAI-ARIA grid pattern (${c('role="grid"')}, single Tab stop, roving tabindex). Arrow keys move between cells, including header, selection, and expander cells; ${c('Home')}/${c('End')} and ${c('Ctrl+Home')}/${c('Ctrl+End')} jump to row and grid edges; ${c('Enter')}/${c('F2')} open a cell editor; ${c('Enter')}/${c('Space')} sort from a header. See <a href="/docs/keyboard-navigation">Keyboard navigation</a>.`,
+    brief: `Enable spreadsheet-style keyboard navigation (WAI-ARIA grid pattern: ${c("role='grid'")}, single Tab stop, roving tabindex). Defaults to ${c('false')}.`,
+    group: 'Keyboard navigation',
+    features: ['keyboard'],
+  },
+
+  // ── Column features ──────────────────────────────────────────────────────
+  {
+    name: 'resizable',
+    type: c('boolean'),
+    default: c('false'),
+    description: `Show drag handles on column headers for resizing.`,
+    brief: 'Show drag handles on column headers for resizing.',
+    group: 'Column features',
+    features: ['resizable'],
+  },
+  {
+    name: 'columnGroups',
+    type: c('ColumnGroup[]'),
+    default: '-',
+    description: `Spanning group headers rendered above the column header row.`,
+    group: 'Column features',
+    features: ['column-groups'],
+  },
+  {
+    name: 'filterValues',
+    type: c('Record&lt;string | number, FilterState&gt;'),
+    default: '-',
+    description: `Controlled filter state. Omit to use internal state. See <a href="/docs/filtering">Filtering</a>.`,
+    group: 'Column features',
+    features: ['filtering'],
+  },
+  {
+    name: 'onFilterChange',
+    type: c('(columnId, filter: FilterState) =&gt; void'),
+    default: '-',
+    description: `Called when the user clicks Apply or Clear in a filter popup.`,
+    group: 'Column features',
+    features: ['filtering'],
+  },
+  {
+    name: 'onColumnOrderChange',
+    type: c('(columns: TableColumn&lt;T&gt;[]) =&gt; void'),
+    default: '-',
+    description: `Called after a drag-to-reorder column operation with the new column order.`,
+    group: 'Column features',
+    features: ['column-reorder'],
+  },
+  {
+    name: 'onColumnGroupOrderChange',
+    type: c('(groups: ColumnGroup[], columns: TableColumn&lt;T&gt;[]) =&gt; void'),
+    default: '-',
+    description: `Called after a group drag-reorder with the new group order and the matching updated column order.`,
+    group: 'Column features',
+    features: ['column-reorder', 'column-groups'],
+  },
+  {
+    name: 'column.pinned',
+    on: 'column',
+    type: `${c("'left'")} | ${c("'right'")}`,
+    default: '-',
+    description: `Freeze the column to an edge during horizontal scroll. Only visible when the table overflows its container — give columns explicit widths. See <a href="/docs/column-pinning">Column pinning</a>.`,
+    brief: `Freeze the column to an edge during horizontal scroll. Only visible when the table overflows its container — give columns explicit widths.`,
+    group: 'Column features',
+    features: ['column-pinning'],
+  },
+
+  // ── Context menu ─────────────────────────────────────────────────────────
+  {
+    name: 'contextMenu',
+    type: `${c("boolean | { header?: boolean; row?: boolean; trigger?: 'right-click' | 'menu-button' | 'both'; menuPosition?: 'start' | 'end' }")}`,
+    default: '-',
+    description: `Enable the context menu. ${c('true')} enables header and row menus with the right-click trigger. The header menu has built-in sort/pin/hide/reset actions; the row menu only opens when ${c('contextMenuActions.row')} returns items. ${c('menuPosition')} sets which inline edge the row menu button sits on (default ${c("'end'")} — right in LTR). See <a href="/docs/context-menu">Context menu</a>.`,
+    brief: `Enable the context menu. ${c('true')} enables header and row menus with the right-click trigger. The header menu has built-in sort/pin/hide/reset actions; the row menu only opens when ${c('contextMenuActions.row')} returns items.`,
+    group: 'Context menu',
+    features: ['context-menu'],
+  },
+  {
+    name: 'contextMenuActions',
+    type: c('{ header?: ContextMenuAction[] | (column) =&gt; ContextMenuAction[]; row?: (row, rowIndex) =&gt; ContextMenuAction[] }'),
+    default: '-',
+    description: `Custom menu items. Header items are appended after the built-ins; row items are the entire row menu.`,
+    group: 'Context menu',
+    features: ['context-menu'],
+  },
+  {
+    name: 'onContextMenuAction',
+    type: c('(action: ContextMenuAction, ctx: ContextMenuActionContext&lt;T&gt;) =&gt; void'),
+    default: '-',
+    description: `Called for every selected item, built-ins included (after their effect is applied). ${c('ctx')} is ${c("{ type: 'header', column }")} or ${c("{ type: 'row', row, rowIndex }")}.`,
+    group: 'Context menu',
+    features: ['context-menu'],
+  },
+
+  // ── Localization ─────────────────────────────────────────────────────────
+  {
+    name: 'localization',
+    type: c('Localization'),
+    default: '-',
+    description: `Override every user-visible string and aria-label in the table. Pass a pre-built locale or build your own. See <a href="/docs/localization">Localization</a>.`,
+    brief: `Override every user-visible string and aria-label in the table. Pass a pre-built locale or build your own.`,
+    group: 'Localization',
+    features: ['localization', 'expandable', 'pagination'],
+  },
+  {
+    name: 'columnFilterOptions',
+    type: c('ColumnFilterOptions'),
+    default: '-',
+    description: `<strong>Deprecated.</strong> Use ${c('localization={{ filter: { ... } }}')} instead. Will be removed in v9.`,
+    group: 'Localization',
+    features: ['localization'],
+    deprecated: true,
+  },
+  {
+    name: 'expandableRowsOptions',
+    type: c('ExpandableRowsOptions'),
+    default: '-',
+    description: `<strong>Deprecated.</strong> Use ${c('localization={{ expandable: { ... } }}')} instead. Will be removed in v9.`,
+    group: 'Localization',
+    features: ['localization'],
+    deprecated: true,
+  },
+];
+
+export const propGroupOrder: PropGroup[] = [
+  'Data',
+  'Layout & appearance',
+  'Theming & styling',
+  'Sorting',
+  'Pagination',
+  'Footer',
+  'Row selection',
+  'Expandable rows',
+  'Row events',
+  'Keyboard navigation',
+  'Column features',
+  'Context menu',
+  'Localization',
+];
diff --git a/apps/docs/src/pages/docs/animations.astro b/apps/docs/src/pages/docs/animations.astro
index 1ce7491c..4ef0db4c 100644
--- a/apps/docs/src/pages/docs/animations.astro
+++ b/apps/docs/src/pages/docs/animations.astro
@@ -3,6 +3,7 @@ import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 import AnimationsDemo from '../../components/demos/AnimationsDemo.tsx';
 ---
 
@@ -111,4 +112,8 @@ export default function App() {
   --rdt-row-anim-duration: 300ms;
   --rdt-row-anim-stagger:  20ms;
 }`} lang="css" />
+
+  <h2>Prop reference</h2>
+
+  <PropsTable only={['animateRows']} columns={['prop', 'type', 'default', 'description']} />
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/api.astro b/apps/docs/src/pages/docs/api.astro
new file mode 100644
index 00000000..6677604f
--- /dev/null
+++ b/apps/docs/src/pages/docs/api.astro
@@ -0,0 +1,648 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+import CodeBlock from '../../components/CodeBlock.astro';
+import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
+---
+
+<DocsLayout
+  title="API reference | react-data-table-component"
+  description="Complete prop, type, and export reference for react-data-table-component v8."
+>
+  <h1>API reference</h1>
+
+  <p>
+    Complete reference for every prop, type, and export in <code>react-data-table-component</code> v8.
+  </p>
+
+  <blockquote>
+    <p>
+      <strong>Looking for examples or recipes?</strong> This page is the flat reference for "what does prop X do?".
+      Each feature has its own page with examples. Start there if you're new:
+    </p>
+    <ul>
+      <li><a href="/docs/columns">Columns</a> · <a href="/docs/cells">Cell rendering</a> · <a href="/docs/inline-editing">Inline editing</a></li>
+      <li><a href="/docs/sorting">Sorting</a> · <a href="/docs/pagination">Pagination</a> · <a href="/docs/filtering">Filtering</a></li>
+      <li><a href="/docs/selection">Selection</a> · <a href="/docs/expandable">Expandable rows</a></li>
+      <li><a href="/docs/resizable">Resizable</a> · <a href="/docs/column-pinning">Pinning</a> · <a href="/docs/column-groups">Groups</a></li>
+      <li><a href="/docs/themes">Themes</a> · <a href="/docs/custom-styles">Custom styles</a> · <a href="/docs/performance">Performance</a></li>
+      <li><a href="/docs/typescript">TypeScript</a> · <a href="/docs/headless">Headless hooks</a></li>
+    </ul>
+  </blockquote>
+
+  <h2 id="datatable-props">DataTable props</h2>
+
+  <p>
+    <code>DataTable&lt;T&gt;</code> accepts the following props where <code>T</code> is the row data type.
+    Only <code>columns</code> and <code>data</code> are required.
+  </p>
+
+  <h3 id="data">Data</h3>
+  <PropsTable group="Data" />
+
+  <h3 id="layout-appearance">Layout &amp; appearance</h3>
+  <PropsTable group="Layout & appearance" />
+
+  <h3 id="theming-styling">Theming &amp; styling</h3>
+  <PropsTable group="Theming & styling" />
+
+  <h3 id="sorting">Sorting</h3>
+  <PropsTable group="Sorting" propHeader="Prop / method" />
+
+  <h3 id="pagination">Pagination</h3>
+  <PropsTable group="Pagination" />
+
+  <h3 id="footer">Footer</h3>
+  <PropsTable group="Footer" />
+  <p>
+    Column-level footers live on each <a href="#tablecolumnt"><code>TableColumn&lt;T&gt;</code></a> as the
+    <code>footer</code> field. See <a href="/docs/footer">Footer</a> for the full walkthrough.
+  </p>
+
+  <h3 id="row-selection">Row selection</h3>
+  <PropsTable group="Row selection" propHeader="Prop / method" />
+
+  <h3 id="expandable-rows">Expandable rows</h3>
+  <PropsTable group="Expandable rows" />
+
+  <h3 id="row-events">Row events</h3>
+  <PropsTable group="Row events" columns={['prop', 'type', 'description']} />
+
+  <h3 id="keyboard-navigation">Keyboard navigation</h3>
+  <PropsTable group="Keyboard navigation" />
+
+  <h3 id="column-features">Column features</h3>
+  <PropsTable group="Column features" />
+
+  <h3 id="context-menu">Context menu</h3>
+  <PropsTable group="Context menu" />
+
+  <h3 id="localization">Localization</h3>
+  <PropsTable group="Localization" />
+
+  <h2 id="columngroup">ColumnGroup</h2>
+
+  <p>
+    Defines a spanning group header above one or more columns. Pass an array to the
+    <code>columnGroups</code> prop.
+  </p>
+
+  <CodeBlock code={`import { type ColumnGroup } from 'react-data-table-component';
+
+const columnGroups: ColumnGroup[] = [
+  { name: 'Employee',     columnIds: ['first', 'last', 'dept'] },
+  { name: 'Compensation', columnIds: ['base', 'bonus'], align: 'left' },
+];`} lang="ts" />
+
+  <DocsTable
+    headers={['Field', 'Type', 'Default', 'Description']}
+    rows={[
+      ['<code>name</code>', '<code>ReactNode</code>', '-', '<strong>Required.</strong> Group header label. Accepts JSX.'],
+      ['<code>columnIds</code>', '<code>(string | number)[]</code>', '-', '<strong>Required.</strong> Ids of columns under this group. Must match each column&apos;s <code>id</code> exactly.'],
+      ['<code>align</code>', "<code>'left' | 'center' | 'right'</code>", "<code>'center'</code>", 'Horizontal alignment of the group label.'],
+      ['<code>reorder</code>', '<code>boolean</code>', '-', 'Allow drag-to-reorder for this group. Dragging moves all member columns as a block. Fires <code>onColumnGroupOrderChange</code>.'],
+    ]}
+  />
+
+  <p>Columns not listed in any group span the full group-row height with no label.</p>
+
+  <h2 id="tablecolumnt">TableColumn&lt;T&gt;</h2>
+
+  <CodeBlock code={`import { type TableColumn } from 'react-data-table-component';
+
+const columns: TableColumn<MyRow>[] = [
+  {
+    id: 'name',
+    name: 'Full name',
+    selector: row => row.name,
+    sortable: true,
+    width: '200px',
+  },
+];`} lang="ts" />
+
+  <DocsTable
+    headers={['Prop', 'Type', 'Description']}
+    rows={[
+      ['<code>id</code>', '<code>string | number</code>', 'Stable identity used by <code>defaultSortFieldId</code>, <code>columnGroups</code>, and <code>filterValues</code>.'],
+      ['<code>name</code>', '<code>ReactNode</code>', 'Column header label.'],
+      ['<code>selector</code>', '<code>(row, index?) =&gt; Primitive | ReactNode</code>', 'Data accessor. For sortable columns return a <code>Primitive</code> (<code>string | number | boolean | bigint | Date</code>). Rows whose selector returns <code>null</code> or <code>undefined</code> sort to the end. <code>bigint</code> displays as its decimal string; <code>Date</code> displays via <code>toLocaleString()</code>, which follows the viewer&apos;s locale and timezone. Use <code>format</code> when you need deterministic or SSR-stable output.'],
+      ['<code>cell</code>', '<code>(row, index, column, id) =&gt; ReactNode</code>', 'Custom cell renderer. Overrides the <code>selector</code> display value.'],
+      ['<code>format</code>', '<code>(row, index) =&gt; ReactNode</code>', 'Format the selector value for display without changing the sort key.'],
+      ['<code>sortable</code>', '<code>boolean</code>', 'Enable sorting on this column.'],
+      ['<code>sortFunction</code>', '<code>(a: T, b: T) =&gt; number</code>', 'Custom comparator for this column.'],
+      ['<code>sortField</code>', '<code>string</code>', 'Field key passed to <code>onSort</code> for server-side sort identification.'],
+      ['<code>filterable</code>', '<code>boolean</code>', 'Show a filter popup for this column.'],
+      ['<code>filterType</code>', '<code>"text" | "number" | "date"</code>', 'Filter operator set and input widget. Defaults to <code>"text"</code>. See <a href="/docs/filtering">Filtering</a>.'],
+      ['<code>filterFunction</code>', '<code>(row, filter: FilterState) =&gt; boolean</code>', 'Custom filter predicate. Overrides built-in operator logic. Receives the full <code>FilterState</code> including both conditions.'],
+      ['<code>width</code>', '<code>string</code>', 'Fixed column width, e.g. <code>"120px"</code>.'],
+      ['<code>minWidth</code>', '<code>string</code>', 'Minimum width.'],
+      ['<code>maxWidth</code>', '<code>string</code>', 'Maximum width.'],
+      ['<code>grow</code>', '<code>number</code>', 'Flex-grow factor (default <code>1</code>). Set to <code>0</code> to prevent growing.'],
+      ['<code>right</code>', '<code>boolean</code>', 'Right-align cell content.'],
+      ['<code>center</code>', '<code>boolean</code>', 'Center cell content.'],
+      ['<code>wrap</code>', '<code>boolean</code>', 'Allow cell text to wrap.'],
+      ['<code>compact</code>', '<code>boolean</code>', 'Remove cell padding.'],
+      ['<code>button</code>', '<code>boolean</code>', 'Center content and suppress row click propagation.'],
+      ['<code>allowOverflow</code>', '<code>boolean</code>', 'Allow cell content to overflow (useful for dropdowns and popovers).'],
+      ['<code>ignoreRowClick</code>', '<code>boolean</code>', 'Prevent clicks in this cell from firing <code>onRowClicked</code>.'],
+      ['<code>hide</code>', '<code>Media | number</code>', 'Hide the column below the given breakpoint (<code>Media.SM</code> = 599px, <code>MD</code> = 959px, <code>LG</code> = 1280px) or a custom pixel value.'],
+      ['<code>omit</code>', '<code>boolean</code>', 'Exclude the column entirely. Toggle this to show/hide a column.'],
+      ['<code>reorder</code>', '<code>boolean</code>', 'Allow drag-to-reorder for this column (requires <code>reorder</code> on at least two columns).'],
+      ['<code>pinned</code>', "<code>'left' | 'right'</code>", 'Freeze the column to an edge during horizontal scroll. Only visible when the table overflows its container — give columns explicit widths. See <a href="/docs/column-pinning">Column pinning</a>.'],
+      ['<code>style</code>', '<code>CSSProperties</code>', 'Inline styles applied to every cell in this column.'],
+      ['<code>conditionalCellStyles</code>', '<code>ConditionalStyles&lt;T&gt;[]</code>', 'Per-cell conditional styles.'],
+      ['<code>footer</code>', '<code>ReactNode | (rows: T[]) =&gt; ReactNode</code>', 'Footer cell for this column. Static node or a function receiving the filtered+sorted rows (typically used to render aggregates like sums or averages). When any visible column has a <code>footer</code>, a footer row renders below the body. See <a href="/docs/footer">Footer</a>.'],
+    ]}
+  />
+
+  <h3 id="inline-editing">Inline editing</h3>
+
+  <DocsTable
+    headers={['Prop', 'Type', 'Description']}
+    rows={[
+      ['<code>editable</code>', '<code>boolean</code>', 'Shorthand for <code>editor: { type: &apos;text&apos; }</code>. Ignored when <code>editor</code> is also set.'],
+      ['<code>editor</code>', '<code>CellEditor</code>', 'Editor configuration. See <a href="#celleditor">CellEditor</a> below. Takes precedence over <code>editable</code>.'],
+      ['<code>validate</code>', '<code>(value, row, column) =&gt; true | false | string</code>', 'Gate the edit before <code>onCellEdit</code> fires. Return <code>true</code> to accept, <code>false</code> to reject silently, or a string error to keep the editor open with an inline tooltip.'],
+      ['<code>onCellEdit</code>', '<code>CellEditCallback&lt;T&gt;</code>', 'Called when the user commits an edit. Receives <code>(row: T, value: string, column: TableColumn&lt;T&gt;)</code>. The <code>value</code> is always a string; parse it to the target type in your handler.'],
+    ]}
+  />
+
+  <p>See <a href="/docs/inline-editing">Inline editing</a> for examples, CSS variables, and styling guidance.</p>
+
+  <h2 id="celleditor">CellEditor</h2>
+
+  <CodeBlock code={`import { type CellEditor } from 'react-data-table-component';
+
+type CellEditor<T = unknown> =
+  | { type: 'text'; placeholder?: string }
+  | { type: 'number'; placeholder?: string; min?: number; max?: number; step?: number }
+  | { type: 'date'; min?: string; max?: string }
+  | { type: 'checkbox' }
+  | {
+      type: 'select';
+      options: Array<{ value: string; label: React.ReactNode }>;
+      placeholder?: string;
+    }
+  | {
+      type: 'custom';
+      render: (ctx: CustomCellEditorContext<T>) => React.ReactNode;
+    };
+
+interface CustomCellEditorContext<T> {
+  row: T;
+  value: string;
+  setValue: (next: string) => void;
+  commit: (value?: string) => void;
+  cancel: () => void;
+  column: TableColumn<T>;
+}`} lang="ts" />
+
+  <DocsTable
+    headers={['Variant', 'Field', 'Type', 'Description']}
+    rows={[
+      ['All', '<code>type</code>', '<code>"text" | "number" | "date" | "checkbox" | "select" | "custom"</code>', 'Editor widget to render.'],
+      ['<code>text</code> / <code>number</code> / <code>select</code>', '<code>placeholder</code>', '<code>string</code>', 'Placeholder text. For <code>select</code>, shown as a disabled hidden option when the current value is empty.'],
+      ['<code>number</code>', '<code>min</code> / <code>max</code> / <code>step</code>', '<code>number</code>', 'Forwarded to the native <code>&lt;input type="number"&gt;</code>.'],
+      ['<code>date</code>', '<code>min</code> / <code>max</code>', '<code>string</code>', 'Forwarded to the native <code>&lt;input type="date"&gt;</code> as ISO dates.'],
+      ['<code>select</code>', '<code>options</code>', '<code>{ value: string; label: ReactNode }[]</code>', 'Dropdown options. The <code>value</code> is what gets committed; <code>label</code> is displayed (must be string or number inside native <code>&lt;option&gt;</code>).'],
+      ['<code>custom</code>', '<code>render</code>', '<code>(ctx) =&gt; ReactNode</code>', 'Render any editor. Call <code>ctx.commit(value)</code> to save, <code>ctx.cancel()</code> to discard.'],
+    ]}
+  />
+
+  <h3 id="inline-editing-css-classes">Inline editing CSS classes</h3>
+
+  <DocsTable
+    headers={['Class', 'Applied to', 'Purpose']}
+    rows={[
+      ['<code>rdt_cellEditable</code>', 'Cell container', 'Added on every cell that has an editor defined (idle state).'],
+      ['<code>rdt_cellEditing</code>', 'Cell container', 'Added while the editor is open. Removes padding and paints the focus ring.'],
+      ['<code>rdt_editInput</code>', '<code>&lt;input&gt;</code>', 'Text editor control inside an editing cell.'],
+      ['<code>rdt_editSelect</code>', '<code>&lt;select&gt;</code>', 'Dropdown editor control inside an editing cell.'],
+    ]}
+  />
+
+  <h3 id="inline-editing-css-variables">Inline editing CSS variables</h3>
+
+  <DocsTable
+    headers={['Variable', 'Default', 'Purpose']}
+    rows={[
+      ['<code>--rdt-color-cell-edit-bg</code>', '8% primary on bg', 'Background of the cell while editing.'],
+      ['<code>--rdt-color-cell-edit-hover</code>', '6% primary', 'Background of an editable cell on hover.'],
+      ['<code>--rdt-color-cell-edit-hover-border</code>', '40% primary', 'Dashed underline colour on editable cell hover.'],
+    ]}
+  />
+
+  <h2 id="contextmenuaction">ContextMenuAction</h2>
+
+  <p>
+    A single item in a context menu. Pass arrays of these via <code>contextMenuActions</code>;
+    selections arrive in <code>onContextMenuAction</code>.
+  </p>
+
+  <CodeBlock code={`import { type ContextMenuAction } from 'react-data-table-component';
+
+const rowActions = (row: MyRow): ContextMenuAction[] => [
+  { id: 'edit', label: 'Edit' },
+  { id: 'delete', label: 'Delete', disabled: row.locked },
+];`} lang="ts" />
+
+  <DocsTable
+    headers={['Field', 'Type', 'Description']}
+    rows={[
+      ['<code>id</code>', '<code>string</code>', 'Identifier passed to <code>onContextMenuAction</code>. The built-in header actions reserve <code>sort-asc</code>, <code>sort-desc</code>, <code>clear-sort</code>, <code>pin-left</code>, <code>pin-right</code>, <code>unpin</code>, <code>hide-column</code>, and <code>reset</code>.'],
+      ['<code>label</code>', '<code>ReactNode</code>', 'Item content.'],
+      ['<code>disabled</code>', '<code>boolean</code>', 'Render the item disabled.'],
+      ['<code>icon</code>', '<code>ReactNode</code>', 'Optional icon rendered before the label.'],
+    ]}
+  />
+
+  <p>
+    Related types: <code>ContextMenuConfig</code> (the object form of the <code>contextMenu</code> prop),
+    <code>ContextMenuActions&lt;T&gt;</code> (the <code>contextMenuActions</code> prop shape), and
+    <code>ContextMenuActionContext&lt;T&gt;</code> (the <code>ctx</code> argument of <code>onContextMenuAction</code>)
+    are all exported. See <a href="/docs/context-menu">Context menu</a>.
+  </p>
+
+  <h2 id="datatablehandle-ref">DataTableHandle (ref)</h2>
+
+  <p>Attach a ref to <code>DataTable</code> to imperatively control it.</p>
+
+  <CodeBlock code={`import DataTable, { type DataTableHandle } from 'react-data-table-component';
+import { useRef } from 'react';
+
+function App() {
+  const ref = useRef<DataTableHandle>(null);
+
+  return (
+    <>
+      <button onClick={() => ref.current?.clearSelectedRows()}>Clear selection</button>
+      <button onClick={() => ref.current?.clearSort()}>Reset sort</button>
+      <DataTable ref={ref} columns={columns} data={data} selectableRows />
+    </>
+  );
+}`} lang="tsx" />
+
+  <DocsTable
+    headers={['Method', 'Description']}
+    rows={[
+      ['<code>clearSelectedRows()</code>', 'Deselect all currently selected rows.'],
+      ['<code>clearSort()</code>', 'Reset sort to the default (<code>defaultSortFieldId</code> / <code>defaultSortAsc</code>), or unsorted if no defaults are set.'],
+    ]}
+  />
+
+  <h2 id="tablestyles">TableStyles</h2>
+
+  <p>
+    Pass to <code>customStyles</code> to override styles for any part of <code>DataTable</code>.
+    Each key accepts a <code>style</code> object (<code>React.CSSProperties</code>) and optional extra properties.
+  </p>
+
+  <CodeBlock code={`import DataTable, { type TableStyles } from 'react-data-table-component';
+
+const customStyles: TableStyles = {
+  headRow: {
+    style: {
+      backgroundColor: '#f8fafc',
+      borderBottomWidth: '2px',
+    },
+  },
+  headCells: {
+    style: {
+      fontSize: '13px',
+      fontWeight: 700,
+      color: '#374151',
+    },
+  },
+  rows: {
+    style: { minHeight: '56px' },
+    highlightOnHoverStyle: {
+      backgroundColor: '#f0f9ff',
+      borderBottomColor: '#e0f2fe',
+      outline: '1px solid #bae6fd',
+    },
+  },
+};`} lang="tsx" />
+
+  <DocsTable
+    headers={['Key', 'Extra fields', 'Description']}
+    rows={[
+      ['<code>table</code>', '-', 'The outermost table element.'],
+      ['<code>tableWrapper</code>', '-', 'Wrapper <code>&lt;div&gt;</code> around the table.'],
+      ['<code>responsiveWrapper</code>', '-', 'Horizontal-scroll wrapper (only present when <code>responsive</code>).'],
+      ['<code>header</code>', '<code>fontColor</code>, <code>fontSize</code>', 'Title / actions bar at the top.'],
+      ['<code>subHeader</code>', '-', 'Sub-header bar.'],
+      ['<code>head</code>', '-', 'The <code>&lt;thead&gt;</code> element.'],
+      ['<code>headRow</code>', '<code>denseStyle</code>', 'Column header row.'],
+      ['<code>headCells</code>', '<code>draggingStyle</code>', 'Individual header cells.'],
+      ['<code>cells</code>', '<code>draggingStyle</code>', 'Body cells.'],
+      ['<code>rows</code>', '<code>selectedHighlightStyle</code>, <code>denseStyle</code>, <code>highlightOnHoverStyle</code>, <code>stripedStyle</code>', 'Body rows.'],
+      ['<code>expanderRow</code>', '-', 'The expanded content row.'],
+      ['<code>expanderCell</code>', '-', 'Cell containing the expand/collapse button.'],
+      ['<code>expanderButton</code>', '-', 'The expand/collapse button itself.'],
+      ['<code>pagination</code>', '<code>pageButtonsStyle</code>', 'Pagination bar and page buttons.'],
+      ['<code>footer</code>', '-', 'The footer row container.'],
+      ['<code>footerCells</code>', '-', 'Individual footer cells.'],
+      ['<code>noData</code>', '-', 'Empty-state container.'],
+      ['<code>progress</code>', '-', 'Loading indicator container.'],
+    ]}
+  />
+
+  <h2 id="conditionalstylest">ConditionalStyles&lt;T&gt;</h2>
+
+  <p>
+    Used with <code>conditionalRowStyles</code> and <code>conditionalCellStyles</code> to apply styles
+    or class names based on row data.
+  </p>
+
+  <CodeBlock code={`const conditionalRowStyles = [
+  {
+    when: row => row.status === 'active',
+    style: { backgroundColor: '#f0fdf4', color: '#166534' },
+  },
+  {
+    when: row => row.salary > 100000,
+    // style can also be a function:
+    style: row => ({ fontWeight: row.salary > 150000 ? 700 : 400 }),
+  },
+  {
+    when: row => row.flagged,
+    classNames: ['flagged-row'],
+  },
+];`} lang="tsx" />
+
+  <DocsTable
+    headers={['Field', 'Type', 'Description']}
+    rows={[
+      ['<code>when</code>', '<code>(row: T) =&gt; boolean</code>', '<strong>Required.</strong> Predicate that applies styles when this returns <code>true</code>.'],
+      ['<code>style</code>', '<code>CSSProperties | ((row: T) =&gt; CSSProperties)</code>', 'Inline styles to apply.'],
+      ['<code>classNames</code>', '<code>string[]</code>', 'CSS class names to add.'],
+    ]}
+  />
+
+  <h2 id="createtheme">createTheme()</h2>
+
+  <p>Registers a custom named theme. Call this outside your component tree so it runs once.</p>
+
+  <CodeBlock code={`import { createTheme } from 'react-data-table-component';
+
+createTheme(
+  'brand',       // name (pass to the theme prop)
+  {
+    text:             { primary: '#1a1a2e', secondary: '#4a4a6a', disabled: 'rgba(26,26,46,.38)' },
+    background:       { default: '#f0f4ff' },
+    divider:          { default: '#dde3f0' },
+    button:           { default: '#6366f1', hover: '#4f46e5', focus: 'rgba(99,102,241,.25)', disabled: '#c7d2fe' },
+    selected:         { default: '#ede9fe', text: '#3730a3' },
+    highlightOnHover: { default: '#e0e7ff', text: '#1a1a2e' },
+    striped:          { default: '#f5f3ff', text: '#1a1a2e' },
+  },
+  'default',     // optional: inherit from this theme
+);`} lang="ts" />
+
+  <DocsTable
+    headers={['Parameter', 'Type', 'Description']}
+    rows={[
+      ['<code>name</code>', '<code>string</code>', 'Theme name to reference in the <code>theme</code> prop.'],
+      ['<code>overrides</code>', '<code>Partial&lt;Theme&gt;</code>', 'Token overrides. Only the keys you provide are changed.'],
+      ['<code>inherit</code>', '<code>string</code>', 'Optional name of a built-in or previously registered theme to inherit from.'],
+    ]}
+  />
+
+  <p>The <code>Theme</code> interface token keys:</p>
+
+  <DocsTable
+    headers={['Token', 'Fields']}
+    rows={[
+      ['<code>text</code>', '<code>primary</code>, <code>secondary</code>, <code>disabled</code>'],
+      ['<code>background</code>', '<code>default</code>'],
+      ['<code>context</code>', '<code>background</code>, <code>text</code>'],
+      ['<code>divider</code>', '<code>default</code>'],
+      ['<code>button</code>', '<code>default</code>, <code>hover</code>, <code>focus</code>, <code>disabled</code>'],
+      ['<code>selected</code>', '<code>default</code>, <code>text</code>'],
+      ['<code>highlightOnHover</code>', '<code>default</code>, <code>text</code>'],
+      ['<code>striped</code>', '<code>default</code>, <code>text</code>'],
+      ['<code>colorScheme</code>', '<code>"light" | "dark"</code>. Sets native form control rendering.'],
+    ]}
+  />
+
+  <h2 id="pagination-types">Pagination types</h2>
+
+  <h3 id="paginationoptions">PaginationOptions</h3>
+
+  <p>Passed to <code>paginationComponentOptions</code>.</p>
+
+  <DocsTable
+    headers={['Field', 'Type', 'Default', 'Description']}
+    rows={[
+      ['<code>rowsPerPageText</code>', '<code>string</code>', '<code>"Rows per page:"</code>', 'Label for the rows-per-page select.'],
+      ['<code>rangeSeparatorText</code>', '<code>string</code>', '<code>"of"</code>', 'Separator between current range and total, e.g. "1–10 of 50".'],
+      ['<code>noRowsPerPage</code>', '<code>boolean</code>', '<code>false</code>', 'Hide the rows-per-page selector.'],
+      ['<code>selectAllRowsItem</code>', '<code>boolean</code>', '<code>false</code>', 'Add an "All" option to the rows-per-page selector.'],
+      ['<code>selectAllRowsItemText</code>', '<code>string</code>', '<code>"All"</code>', 'Label for the "All" option.'],
+    ]}
+  />
+
+  <h3 id="paginationserveroptions">PaginationServerOptions</h3>
+
+  <p>Passed to <code>paginationServerOptions</code> when using server-side pagination.</p>
+
+  <DocsTable
+    headers={['Field', 'Type', 'Default', 'Description']}
+    rows={[
+      ['<code>persistSelectedOnPageChange</code>', '<code>boolean</code>', '<code>false</code>', 'Keep the current selection when the page changes.'],
+      ['<code>persistSelectedOnSort</code>', '<code>boolean</code>', '<code>false</code>', 'Keep the current selection when the sort column or direction changes.'],
+    ]}
+  />
+
+  <h3 id="paginationcomponentprops">PaginationComponentProps</h3>
+
+  <p>The props your custom <code>paginationComponent</code> will receive.</p>
+
+  <DocsTable
+    headers={['Field', 'Type', 'Description']}
+    rows={[
+      ['<code>rowsPerPage</code>', '<code>number</code>', 'Currently selected rows-per-page value.'],
+      ['<code>rowCount</code>', '<code>number</code>', 'Total row count.'],
+      ['<code>currentPage</code>', '<code>number</code>', 'Current active page (1-based).'],
+      ['<code>onChangePage</code>', '<code>(page, totalRows) =&gt; void</code>', 'Call this to change page.'],
+      ['<code>onChangeRowsPerPage</code>', '<code>(rowsPerPage, page) =&gt; void</code>', 'Call this to change rows-per-page.'],
+    ]}
+  />
+
+  <h2 id="enums-constants">Enums &amp; constants</h2>
+
+  <p>All enums and constants are re-exported from the package root.</p>
+
+  <CodeBlock code={`import { Media, Direction, Alignment, SortOrder } from 'react-data-table-component';`} lang="ts" />
+
+  <DocsTable
+    headers={['Enum', 'Values', 'Description']}
+    rows={[
+      ['<code>Media</code>', '<code>SM = "sm"</code> (≤ 599px), <code>MD = "md"</code> (≤ 959px), <code>LG = "lg"</code> (≤ 1280px)', 'Breakpoints for the column <code>hide</code> prop.'],
+      ['<code>Direction</code>', '<code>LTR = "ltr"</code>, <code>RTL = "rtl"</code>, <code>AUTO = "auto"</code>', 'Text direction for the <code>direction</code> prop.'],
+      ['<code>Alignment</code>', '<code>LEFT = "left"</code>, <code>RIGHT = "right"</code>, <code>CENTER = "center"</code>', 'Alignment for <code>subHeaderAlign</code>.'],
+      ['<code>SortOrder</code>', '<code>ASC = "asc"</code>, <code>DESC = "desc"</code>', 'Sort direction passed to <code>onSort</code> and <code>sortFunction</code>.'],
+    ]}
+  />
+
+  <h2 id="usecolumnvisibility">useColumnVisibility</h2>
+
+  <p>
+    Hook for managing column show/hide state outside of <code>DataTable</code>. Pairs with the
+    <code>omit</code> column prop.
+  </p>
+
+  <CodeBlock code={`import { useColumnVisibility, type TableColumn } from 'react-data-table-component';
+
+const rawColumns: TableColumn<Row>[] = [
+  { id: 'name', name: 'Name', selector: r => r.name },
+  { id: 'dept', name: 'Department', selector: r => r.dept },
+];
+
+function App() {
+  const { columns, visibility, toggle, setAll } = useColumnVisibility(rawColumns);
+
+  return (
+    <>
+      {visibility.map(({ id, name, visible }) => (
+        <label key={id}>
+          <input type="checkbox" checked={visible} onChange={() => toggle(id)} />
+          {name}
+        </label>
+      ))}
+      <button onClick={() => setAll(true)}>Show all</button>
+      <DataTable columns={columns} data={data} />
+    </>
+  );
+}`} lang="tsx" />
+
+  <h3 id="usecolumnvisibilityresult">UseColumnVisibilityResult</h3>
+
+  <DocsTable
+    headers={['Field', 'Type', 'Description']}
+    rows={[
+      ['<code>columns</code>', '<code>TableColumn&lt;T&gt;[]</code>', 'Columns with <code>omit</code> set according to current visibility. Pass directly to <code>DataTable</code>.'],
+      ['<code>visibility</code>', '<code>ColumnVisibilityEntry[]</code>', 'Current visibility state for every column.'],
+      ['<code>toggle</code>', '<code>(id: string | number) =&gt; void</code>', 'Toggle the visibility of a single column by id.'],
+      ['<code>setAll</code>', '<code>(visible: boolean) =&gt; void</code>', 'Show or hide all columns at once.'],
+    ]}
+  />
+
+  <h3 id="columnvisibilityentry">ColumnVisibilityEntry</h3>
+
+  <DocsTable
+    headers={['Field', 'Type', 'Description']}
+    rows={[
+      ['<code>id</code>', '<code>string | number</code>', 'Column id.'],
+      ['<code>name</code>', '<code>ReactNode</code>', 'Column name (mirrors the <code>name</code> field from the column definition).'],
+      ['<code>visible</code>', '<code>boolean</code>', 'Whether the column is currently visible.'],
+    ]}
+  />
+
+  <h2 id="usetableexport">useTableExport</h2>
+
+  <p>
+    Hook for generating CSV / JSON from your columns and rows, with download + clipboard helpers.
+    See <a href="/docs/export">Export (CSV / JSON)</a> for the full guide.
+  </p>
+
+  <CodeBlock code={`import { useTableExport, type TableColumn } from 'react-data-table-component';
+
+const columns: TableColumn<Row>[] = [
+  { id: 'id', name: 'ID', selector: r => r.id },
+  { id: 'name', name: 'Name', selector: r => r.name },
+];
+
+function App({ rows }: { rows: Row[] }) {
+  const { download, copy, toCSV, toJSON } = useTableExport({ columns, rows });
+
+  return (
+    <>
+      <button onClick={() => download('rows.csv')}>CSV</button>
+      <button onClick={() => download('rows.json', 'json')}>JSON</button>
+      <button onClick={() => copy()}>Copy CSV</button>
+    </>
+  );
+}`} lang="tsx" />
+
+  <h3 id="usetableexportoptions">UseTableExportOptions</h3>
+
+  <DocsTable
+    headers={['Field', 'Type', 'Default', 'Description']}
+    rows={[
+      ['<code>columns</code>', '<code>TableColumn&lt;T&gt;[]</code>', 'required', 'Same array you pass to DataTable. <code>omit: true</code> columns are skipped.'],
+      ['<code>rows</code>', '<code>T[]</code>', 'required', 'Rows to export.'],
+      ['<code>valueSource</code>', "<code>'selector' | 'format'</code>", "<code>'selector'</code>", "<code>'selector'</code> exports raw values; <code>'format'</code> runs <code>column.format</code> first."],
+      ['<code>headerOverrides</code>', '<code>Record&lt;string | number, string&gt;</code>', '–', 'Replace header label per column id.'],
+      ['<code>columnOrder</code>', '<code>(string | number)[]</code>', '–', 'Restrict and reorder columns by id.'],
+    ]}
+  />
+
+  <h3 id="usetableexportresult">UseTableExportResult</h3>
+
+  <DocsTable
+    headers={['Field', 'Type', 'Description']}
+    rows={[
+      ['<code>toCSV</code>', '<code>() =&gt; string</code>', 'Build a CSV string.'],
+      ['<code>toJSON</code>', '<code>() =&gt; string</code>', 'Build a pretty-printed JSON string.'],
+      ['<code>download</code>', "<code>(filename: string, format?: 'csv' | 'json') =&gt; void</code>", 'Trigger a browser download. SSR-safe (no-op when <code>document</code> is undefined).'],
+      ['<code>copy</code>', "<code>(format?: 'csv' | 'json') =&gt; Promise&lt;void&gt;</code>", 'Copy to clipboard via <code>navigator.clipboard</code>. Rejects when unavailable.'],
+    ]}
+  />
+
+  <h2 id="package-exports">Package exports</h2>
+
+  <CodeBlock code={`// Default export
+import DataTable from 'react-data-table-component';
+
+// Named exports
+import {
+  createTheme,
+  defaultThemes,
+  Media,
+  Direction,
+  Alignment,
+  SortOrder,
+  // Default icon sets (useful when building custom pagination/expander UIs)
+  DEFAULT_PAGINATION_ICONS,
+  DEFAULT_EXPANDABLE_ICON,
+  // Headless hooks
+  useTableState,
+  useColumns,
+  useTableData,
+  useColumnFilter,
+  useColumnVisibility,
+  useTableExport,
+  // Filter utilities
+  emptyFilterState,
+  isFilterActive,
+} from 'react-data-table-component';
+
+// TypeScript types
+import type {
+  TableProps,
+  TableColumn,
+  ColumnGroup,
+  TableRow,
+  TableStyles,
+  Theme,
+  ThemeProp,
+  ConditionalStyles,
+  DataTableHandle,
+  ExpanderComponentProps,
+  PaginationComponentProps,
+  PaginationOptions,
+  PaginationServerOptions,
+  PaginationIcons,
+  SortFunction,
+  Selector,
+  // Column visibility hook types
+  UseColumnVisibilityResult,
+  ColumnVisibilityEntry,
+  // Filter types
+  FilterType,
+  FilterOperator,
+  FilterCondition,
+  FilterState,
+} from 'react-data-table-component';`} lang="ts" />
+</DocsLayout>
diff --git a/apps/docs/src/pages/docs/api.md b/apps/docs/src/pages/docs/api.md
deleted file mode 100644
index 18149cc0..00000000
--- a/apps/docs/src/pages/docs/api.md
+++ /dev/null
@@ -1,698 +0,0 @@
----
-layout: '../../layouts/DocsLayout.astro'
-title: 'API reference | react-data-table-component'
-description: 'Complete prop, type, and export reference for react-data-table-component v8.'
----
-
-# API reference
-
-Complete reference for every prop, type, and export in `react-data-table-component` v8.
-
-> **Looking for examples or recipes?** This page is the flat reference for "what does prop X do?". Each feature has its own page with examples. Start there if you're new:
->
-> - [Columns](/docs/columns) · [Cell rendering](/docs/cells) · [Inline editing](/docs/inline-editing)
-> - [Sorting](/docs/sorting) · [Pagination](/docs/pagination) · [Filtering](/docs/filtering)
-> - [Selection](/docs/selection) · [Expandable rows](/docs/expandable)
-> - [Resizable](/docs/resizable) · [Pinning](/docs/column-pinning) · [Groups](/docs/column-groups)
-> - [Themes](/docs/themes) · [Custom styles](/docs/custom-styles) · [Performance](/docs/performance)
-> - [TypeScript](/docs/typescript) · [Headless hooks](/docs/headless)
-
-## DataTable props
-
-`DataTable<T>` accepts the following props where `T` is the row data type. Only `columns` and `data` are required.
-
-### Data
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `data` | `T[]` | - | **Required.** Array of row objects. |
-| `columns` | `TableColumn<T>[]` | - | **Required.** Column definitions. |
-| `keyField` | `string` | `"id"` | Property on each row used as a stable React key. |
-| `progressPending` | `boolean` | `false` | Show a loading state. On initial load (no data yet) renders shimmer skeleton rows. On re-fetch (data already loaded) dims the existing rows and overlays a centered spinner. The column header always stays visible. |
-| `progressComponent` | `ReactNode` | built-in spinner | Custom loading indicator shown in the re-fetch overlay, and on initial load when `progressSkeleton` is `false`. |
-| `progressSkeleton` | `boolean` | `true` | Show shimmer skeleton rows on the initial load (no data yet). Set to `false` to show `progressComponent` on initial load instead. |
-| `noDataComponent` | `ReactNode` | built-in message | Rendered when `data` is empty. |
-
-### Layout & appearance
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `title` | `string \| ReactNode` | - | Table title shown in the header bar. |
-| `actions` | `ReactNode \| ReactNode[]` | - | Content rendered on the right side of the header bar. |
-| `subHeader` | `ReactNode` | - | Content for the sub-header bar. Providing any value shows the bar. |
-| `subHeaderAlign` | `Alignment` | `"right"` | Alignment of sub-header content. |
-| `subHeaderWrap` | `boolean` | `true` | Allow sub-header to wrap onto multiple lines. |
-| `noHeader` | `boolean` | `false` | Force-hide the title/actions header bar. The bar otherwise renders only when a `title` or `actions` is provided, so you rarely need this. |
-| `noTableHead` | `boolean` | `false` | Hide the column header row. |
-| `persistTableHead` | `boolean` | `false` | Show the column header even when data is empty. The header always stays visible during `progressPending` regardless of this prop. |
-| `dense` | `boolean` | `false` | Reduce row height for a compact look. |
-| `responsive` | `boolean` | `true` | Wrap the table in a horizontally scrollable container. Disable only when a parent element owns scrolling, see [Turning the scroll container off](/docs/fixed-header#responsive-false). |
-| `fixedHeader` | `boolean` | `false` | Stick the column header at the top when scrolling. |
-| `fixedHeaderScrollHeight` | `string` | `"100vh"` | Max height of the scrollable body when `fixedHeader` is on. |
-| `onScroll` | `(event) => void` | - | Called when the user scrolls the table body. Works with both `fixedHeader` enabled and disabled. |
-| `direction` | `Direction` | `"ltr"` | Text direction (`ltr`, `rtl`, `auto`). |
-| `className` | `string` | - | Extra CSS class on the root element. |
-| `style` | `CSSProperties` | - | Inline styles on the root element. |
-| `ariaLabel` | `string` | - | Value for the table's `aria-label`. |
-| `disabled` | `boolean` | `false` | Disable all interactive controls. |
-
-### Theming & styling
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `theme` | `string` | `"default"` | Named theme registered with `createTheme()`. |
-| `customStyles` | `TableStyles` | - | Fine-grained style overrides. See [TableStyles](#tablestyles). |
-| `conditionalRowStyles` | `ConditionalStyles<T>[]` | - | Apply styles or class names to rows when a predicate matches. |
-| `striped` | `boolean` | `false` | Alternate row background colors. |
-| `highlightOnHover` | `boolean` | `false` | Highlight rows on mouse-over. |
-| `pointerOnHover` | `boolean` | `false` | Show a pointer cursor on row hover. |
-| `columnSeparator` | `boolean \| "subtle" \| "full"` | - | Vertical lines between body columns. `true`/`"subtle"` = inset 60%-height line, `"full"` = full-height line. |
-| `headerSeparator` | `boolean \| "subtle" \| "full"` | `true` | Vertical lines between header cells. `true`/`"subtle"` = inset line (default), `"full"` = full-height, `false` = none. |
-| `animateRows` | `boolean` | `false` | Staggered entrance and sort animations. Respects `prefers-reduced-motion`. |
-
-### Sorting
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `defaultSortFieldId` | `string \| number` | - | Column `id` to sort by on initial render. |
-| `defaultSortAsc` | `boolean` | `true` | Initial sort direction. |
-| `sortServer` | `boolean` | `false` | Disable client-side sorting; fire `onSort` and let the server sort. |
-| `sortMulti` | `boolean` | `false` | Enable multi-column sorting via Ctrl/⌘-click. Clicking still cycles asc → desc → off per column. |
-| `sortFunction` | `SortFunction<T> \| null` | - | Global custom sort function applied to all sortable columns. |
-| `sortIcon` | `ReactNode` | built-in chevron | Custom sort direction indicator. |
-| `onSort` | `(column, direction, sortedRows, sortColumns) => void` | - | Called whenever the sort changes. `sortColumns` is the full sort config in priority order; an empty array means the sort was cleared. |
-| `ref.clearSort()` | `DataTableHandle` | - | Imperatively reset sort to the default state. See [DataTableHandle](#datatablehandle-ref). |
-
-### Pagination
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `pagination` | `boolean` | `false` | Enable built-in pagination controls. |
-| `paginationPerPage` | `number` | `10` | Rows shown per page. |
-| `paginationPosition` | `'top' \| 'bottom' \| 'both'` | `'bottom'` | Where the pagination bar renders. `'both'` shows it above and below the table simultaneously. |
-| `paginationRowsPerPageOptions` | `number[]` | `[10,15,20,25,30]` | Options in the rows-per-page dropdown. |
-| `paginationDefaultPage` | `number` | `1` | Initial active page. |
-| `paginationPage` | `number` | - | Controlled active page. When provided, the table navigates to this page whenever the value changes. Use together with `onChangePage` to keep them in sync. |
-| `paginationResetDefaultPage` | `boolean` | `false` | Toggle to reset to page 1 (e.g. after a filter change). Prefer `paginationPage` for new code. |
-| `paginationTotalRows` | `number` | - | Total row count for server-side pagination. |
-| `paginationServer` | `boolean` | `false` | Delegate page changes to `onChangePage` / `onChangeRowsPerPage`. |
-| `paginationServerOptions` | `PaginationServerOptions` | - | Selection-persistence options for server-side mode. |
-| `paginationComponentOptions` | `PaginationOptions` | - | Localisation and display options for the built-in paginator. |
-| `paginationComponent` | `React.ComponentType` | - | Replace the built-in pagination UI entirely. |
-| `paginationIcons` | `PaginationIcons` | - | Override any or all pagination icons. Pass a partial object: `{ next: <MyIcon /> }`. |
-| `onChangePage` | `(page, totalRows) => void` | - | Called when the active page changes. |
-| `onChangeRowsPerPage` | `(rowsPerPage, page) => void` | - | Called when rows-per-page selection changes. |
-
-### Footer
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `footerComponent` | `ComponentType<FooterComponentProps<T>>` | - | Replace the footer row with a custom component. Receives `{ rows, columns }`. Takes precedence over column-level `footer` fields. |
-| `showFooter` | `boolean` | - | Force the footer row on or off. By default the footer renders when `footerComponent` is set or any visible column declares a `footer`. Set to `false` to suppress, `true` to render an empty footer row. |
-
-Column-level footers live on each [`TableColumn<T>`](#tablecolumnt) as the `footer` field. See [Footer](/docs/footer) for the full walkthrough.
-
-### Row selection
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `selectableRows` | `boolean` | `false` | Show a checkbox column for row selection. |
-| `selectableRowsSingle` | `boolean` | `false` | Allow only one row to be selected at a time. |
-| `selectableRowsNoSelectAll` | `boolean` | `false` | Hide the "select all" checkbox in the header. |
-| `selectableRowsVisibleOnly` | `boolean` | `false` | "Select all" only selects rows on the current page. |
-| `selectableRowsHighlight` | `boolean` | `false` | Highlight selected rows using the theme's selected color. |
-| `selectableRowsRange` | `boolean` | `true` | Enable Shift-click range selection. Disabled automatically in single-select mode. |
-| `selectableRowDisabled` | `(row: T) => boolean` | - | Disable selection for a specific row. |
-| `selectableRowSelected` | `(row: T) => boolean` | - | Pre-select rows that satisfy the predicate. |
-| `selectedRows` | `T[]` | - | Controlled selection. When supplied, drives selection state from the outside; matched against `keyField`. |
-| `selectableRowsComponent` | `"input" \| ReactNode` | built-in checkbox | Custom checkbox component. |
-| `selectableRowsComponentProps` | `object` | - | Extra props forwarded to the custom checkbox component. Function values are called with the checkbox's indeterminate state and their return value is passed instead. |
-| `onSelectedRowsChange` | `(state) => void` | - | Called whenever selection changes. Receives `{ allSelected, selectedCount, selectedRows }`. |
-| `clearSelectedRows` | `boolean` | - | **Deprecated.** Toggle to clear selection. Use `ref.current.clearSelectedRows()` instead. |
-| `ref.clearSelectedRows()` | `DataTableHandle` | - | Imperatively deselect all selected rows. See [DataTableHandle](#datatablehandle-ref). |
-
-### Expandable rows
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `expandableRows` | `boolean` | `false` | Enable the expandable row feature. |
-| `expandableRowsComponent` | `React.ComponentType` | - | Component rendered in the expanded panel. Receives `{ data: T }`. |
-| `expandableRowsComponentProps` | `object` | - | Extra props merged into `expandableRowsComponent`. |
-| `expandableRowExpanded` | `(row: T) => boolean` | - | Control which rows start expanded. |
-| `expandableRowDisabled` | `(row: T) => boolean` | - | Prevent specific rows from being expanded. |
-| `expandableRowsHideExpander` | `boolean` | `false` | Hide the expander chevron column (use with `expandOnRowClicked`). |
-| `expandOnRowClicked` | `boolean` | `false` | Toggle expansion by clicking anywhere on the row. |
-| `expandOnRowDoubleClicked` | `boolean` | `false` | Toggle expansion by double-clicking anywhere on the row. |
-| `expandableInheritConditionalStyles` | `boolean` | `false` | Apply the parent row's conditional styles to the expanded panel. |
-| `expandableIcon` | `{ collapsed, expanded }` | built-in chevron | Custom expand/collapse icons. |
-| `onRowExpandToggled` | `(expanded, row) => void` | - | Called when a row is expanded or collapsed. |
-
-### Row events
-
-| Prop | Type | Description |
-|---|---|---|
-| `onRowClicked` | `(row, event) => void` | Called when a row is left-clicked. |
-| `onRowDoubleClicked` | `(row, event) => void` | Called when a row is double-clicked. |
-| `onRowMiddleClicked` | `(row, event) => void` | Called when a row is middle-clicked (scroll-click). Use with `onRowClicked` to implement open-in-new-tab behaviour. |
-| `onRowMouseEnter` | `(row, event) => void` | Called when the pointer enters a row. |
-| `onRowMouseLeave` | `(row, event) => void` | Called when the pointer leaves a row. |
-
-### Keyboard navigation
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `cellNavigation` | `boolean` | `false` | Spreadsheet-style keyboard navigation using the WAI-ARIA grid pattern (`role="grid"`, single Tab stop, roving tabindex). Arrow keys move between cells, including header, selection, and expander cells; `Home`/`End` and `Ctrl+Home`/`Ctrl+End` jump to row and grid edges; `Enter`/`F2` open a cell editor; `Enter`/`Space` sort from a header. See [Keyboard navigation](/docs/keyboard-navigation). |
-
-### Column features
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `resizable` | `boolean` | `false` | Show drag handles on column headers for resizing. |
-| `columnGroups` | `ColumnGroup[]` | - | Spanning group headers rendered above the column header row. |
-| `filterValues` | `Record<string \| number, FilterState>` | - | Controlled filter state. Omit to use internal state. See [Filtering](/docs/filtering). |
-| `onFilterChange` | `(columnId, filter: FilterState) => void` | - | Called when the user clicks Apply or Clear in a filter popup. |
-| `onColumnOrderChange` | `(columns: TableColumn<T>[]) => void` | - | Called after a drag-to-reorder column operation with the new column order. |
-| `onColumnGroupOrderChange` | `(groups: ColumnGroup[], columns: TableColumn<T>[]) => void` | - | Called after a group drag-reorder with the new group order and the matching updated column order. |
-
-### Context menu
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `contextMenu` | `boolean \| { header?: boolean; row?: boolean; trigger?: 'right-click' \| 'menu-button' \| 'both'; menuPosition?: 'start' \| 'end' }` | - | Enable the context menu. `true` enables header and row menus with the right-click trigger. The header menu has built-in sort/pin/hide/reset actions; the row menu only opens when `contextMenuActions.row` returns items. `menuPosition` sets which inline edge the row menu button sits on (default `'end'` — right in LTR). See [Context menu](/docs/context-menu). |
-| `contextMenuActions` | `{ header?: ContextMenuAction[] \| (column) => ContextMenuAction[]; row?: (row, rowIndex) => ContextMenuAction[] }` | - | Custom menu items. Header items are appended after the built-ins; row items are the entire row menu. |
-| `onContextMenuAction` | `(action: ContextMenuAction, ctx: ContextMenuActionContext<T>) => void` | - | Called for every selected item, built-ins included (after their effect is applied). `ctx` is `{ type: 'header', column }` or `{ type: 'row', row, rowIndex }`. |
-
-### Localization
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `localization` | `Localization` | - | Override every user-visible string and aria-label in the table. Pass a pre-built locale or build your own. See [Localization](/docs/localization). |
-| ~~`columnFilterOptions`~~ | `ColumnFilterOptions` | - | **Deprecated.** Use `localization={{ filter: { ... } }}` instead. Will be removed in v9. |
-| ~~`expandableRowsOptions`~~ | `ExpandableRowsOptions` | - | **Deprecated.** Use `localization={{ expandable: { ... } }}` instead. Will be removed in v9. |
-
-## ColumnGroup
-
-Defines a spanning group header above one or more columns. Pass an array to the `columnGroups` prop.
-
-```ts
-import { type ColumnGroup } from 'react-data-table-component';
-
-const columnGroups: ColumnGroup[] = [
-  { name: 'Employee',     columnIds: ['first', 'last', 'dept'] },
-  { name: 'Compensation', columnIds: ['base', 'bonus'], align: 'left' },
-];
-```
-
-| Field | Type | Default | Description |
-|---|---|---|---|
-| `name` | `ReactNode` | - | **Required.** Group header label. Accepts JSX. |
-| `columnIds` | `(string \| number)[]` | - | **Required.** Ids of columns under this group. Must match each column's `id` exactly. |
-| `align` | `'left' \| 'center' \| 'right'` | `'center'` | Horizontal alignment of the group label. |
-| `reorder` | `boolean` | - | Allow drag-to-reorder for this group. Dragging moves all member columns as a block. Fires `onColumnGroupOrderChange`. |
-
-Columns not listed in any group span the full group-row height with no label.
-
-## TableColumn\<T\>
-
-```ts
-import { type TableColumn } from 'react-data-table-component';
-
-const columns: TableColumn<MyRow>[] = [
-  {
-    id: 'name',
-    name: 'Full name',
-    selector: row => row.name,
-    sortable: true,
-    width: '200px',
-  },
-];
-```
-
-| Prop | Type | Description |
-|---|---|---|
-| `id` | `string \| number` | Stable identity used by `defaultSortFieldId`, `columnGroups`, and `filterValues`. |
-| `name` | `ReactNode` | Column header label. |
-| `selector` | `(row, index?) => Primitive \| ReactNode` | Data accessor. For sortable columns return a `Primitive` (`string \| number \| boolean \| bigint \| Date`). Rows whose selector returns `null` or `undefined` sort to the end. `bigint` displays as its decimal string; `Date` displays via `toLocaleString()`, which follows the viewer's locale and timezone. Use `format` when you need deterministic or SSR-stable output. |
-| `cell` | `(row, index, column, id) => ReactNode` | Custom cell renderer. Overrides the `selector` display value. |
-| `format` | `(row, index) => ReactNode` | Format the selector value for display without changing the sort key. |
-| `sortable` | `boolean` | Enable sorting on this column. |
-| `sortFunction` | `(a: T, b: T) => number` | Custom comparator for this column. |
-| `sortField` | `string` | Field key passed to `onSort` for server-side sort identification. |
-| `filterable` | `boolean` | Show a filter popup for this column. |
-| `filterType` | `"text" \| "number" \| "date"` | Filter operator set and input widget. Defaults to `"text"`. See [Filtering](/docs/filtering). |
-| `filterFunction` | `(row, filter: FilterState) => boolean` | Custom filter predicate. Overrides built-in operator logic. Receives the full `FilterState` including both conditions. |
-| `width` | `string` | Fixed column width, e.g. `"120px"`. |
-| `minWidth` | `string` | Minimum width. |
-| `maxWidth` | `string` | Maximum width. |
-| `grow` | `number` | Flex-grow factor (default `1`). Set to `0` to prevent growing. |
-| `right` | `boolean` | Right-align cell content. |
-| `center` | `boolean` | Center cell content. |
-| `wrap` | `boolean` | Allow cell text to wrap. |
-| `compact` | `boolean` | Remove cell padding. |
-| `button` | `boolean` | Center content and suppress row click propagation. |
-| `allowOverflow` | `boolean` | Allow cell content to overflow (useful for dropdowns and popovers). |
-| `ignoreRowClick` | `boolean` | Prevent clicks in this cell from firing `onRowClicked`. |
-| `hide` | `Media \| number` | Hide the column below the given breakpoint (`Media.SM` = 599px, `MD` = 959px, `LG` = 1280px) or a custom pixel value. |
-| `omit` | `boolean` | Exclude the column entirely. Toggle this to show/hide a column. |
-| `reorder` | `boolean` | Allow drag-to-reorder for this column (requires `reorder` on at least two columns). |
-| `pinned` | `'left' \| 'right'` | Freeze the column to an edge during horizontal scroll. Only visible when the table overflows its container — give columns explicit widths. See [Column pinning](/docs/column-pinning). |
-| `style` | `CSSProperties` | Inline styles applied to every cell in this column. |
-| `conditionalCellStyles` | `ConditionalStyles<T>[]` | Per-cell conditional styles. |
-| `footer` | `ReactNode \| (rows: T[]) => ReactNode` | Footer cell for this column. Static node or a function receiving the filtered+sorted rows (typically used to render aggregates like sums or averages). When any visible column has a `footer`, a footer row renders below the body. See [Footer](/docs/footer). |
-
-### Inline editing
-
-| Prop | Type | Description |
-|---|---|---|
-| `editable` | `boolean` | Shorthand for `editor: { type: 'text' }`. Ignored when `editor` is also set. |
-| `editor` | `CellEditor` | Editor configuration. See [CellEditor](#celleditor) below. Takes precedence over `editable`. |
-| `validate` | `(value, row, column) => true \| false \| string` | Gate the edit before `onCellEdit` fires. Return `true` to accept, `false` to reject silently, or a string error to keep the editor open with an inline tooltip. |
-| `onCellEdit` | `CellEditCallback<T>` | Called when the user commits an edit. Receives `(row: T, value: string, column: TableColumn<T>)`. The `value` is always a string; parse it to the target type in your handler. |
-
-See [Inline editing](/docs/inline-editing) for examples, CSS variables, and styling guidance.
-
-## CellEditor
-
-```ts
-import { type CellEditor } from 'react-data-table-component';
-
-type CellEditor<T = unknown> =
-  | { type: 'text'; placeholder?: string }
-  | { type: 'number'; placeholder?: string; min?: number; max?: number; step?: number }
-  | { type: 'date'; min?: string; max?: string }
-  | { type: 'checkbox' }
-  | {
-      type: 'select';
-      options: Array<{ value: string; label: React.ReactNode }>;
-      placeholder?: string;
-    }
-  | {
-      type: 'custom';
-      render: (ctx: CustomCellEditorContext<T>) => React.ReactNode;
-    };
-
-interface CustomCellEditorContext<T> {
-  row: T;
-  value: string;
-  setValue: (next: string) => void;
-  commit: (value?: string) => void;
-  cancel: () => void;
-  column: TableColumn<T>;
-}
-```
-
-| Variant | Field | Type | Description |
-| --- | --- | --- | --- |
-| All | `type` | `"text" \| "number" \| "date" \| "checkbox" \| "select" \| "custom"` | Editor widget to render. |
-| `text` / `number` / `select` | `placeholder` | `string` | Placeholder text. For `select`, shown as a disabled hidden option when the current value is empty. |
-| `number` | `min` / `max` / `step` | `number` | Forwarded to the native `<input type="number">`. |
-| `date` | `min` / `max` | `string` | Forwarded to the native `<input type="date">` as ISO dates. |
-| `select` | `options` | `{ value: string; label: ReactNode }[]` | Dropdown options. The `value` is what gets committed; `label` is displayed (must be string or number inside native `<option>`). |
-| `custom` | `render` | `(ctx) => ReactNode` | Render any editor. Call `ctx.commit(value)` to save, `ctx.cancel()` to discard. |
-
-### Inline editing CSS classes
-
-| Class | Applied to | Purpose |
-|---|---|---|
-| `rdt_cellEditable` | Cell container | Added on every cell that has an editor defined (idle state). |
-| `rdt_cellEditing` | Cell container | Added while the editor is open. Removes padding and paints the focus ring. |
-| `rdt_editInput` | `<input>` | Text editor control inside an editing cell. |
-| `rdt_editSelect` | `<select>` | Dropdown editor control inside an editing cell. |
-
-### Inline editing CSS variables
-
-| Variable | Default | Purpose |
-|---|---|---|
-| `--rdt-color-cell-edit-bg` | 8% primary on bg | Background of the cell while editing. |
-| `--rdt-color-cell-edit-hover` | 6% primary | Background of an editable cell on hover. |
-| `--rdt-color-cell-edit-hover-border` | 40% primary | Dashed underline colour on editable cell hover. |
-
-## ContextMenuAction
-
-A single item in a context menu. Pass arrays of these via `contextMenuActions`; selections arrive in `onContextMenuAction`.
-
-```ts
-import { type ContextMenuAction } from 'react-data-table-component';
-
-const rowActions = (row: MyRow): ContextMenuAction[] => [
-  { id: 'edit', label: 'Edit' },
-  { id: 'delete', label: 'Delete', disabled: row.locked },
-];
-```
-
-| Field | Type | Description |
-|---|---|---|
-| `id` | `string` | Identifier passed to `onContextMenuAction`. The built-in header actions reserve `sort-asc`, `sort-desc`, `clear-sort`, `pin-left`, `pin-right`, `unpin`, `hide-column`, and `reset`. |
-| `label` | `ReactNode` | Item content. |
-| `disabled` | `boolean` | Render the item disabled. |
-| `icon` | `ReactNode` | Optional icon rendered before the label. |
-
-Related types: `ContextMenuConfig` (the object form of the `contextMenu` prop), `ContextMenuActions<T>` (the `contextMenuActions` prop shape), and `ContextMenuActionContext<T>` (the `ctx` argument of `onContextMenuAction`) are all exported. See [Context menu](/docs/context-menu).
-
-## DataTableHandle (ref)
-
-Attach a ref to `DataTable` to imperatively control it.
-
-```tsx
-import DataTable, { type DataTableHandle } from 'react-data-table-component';
-import { useRef } from 'react';
-
-function App() {
-  const ref = useRef<DataTableHandle>(null);
-
-  return (
-    <>
-      <button onClick={() => ref.current?.clearSelectedRows()}>Clear selection</button>
-      <button onClick={() => ref.current?.clearSort()}>Reset sort</button>
-      <DataTable ref={ref} columns={columns} data={data} selectableRows />
-    </>
-  );
-}
-```
-
-| Method | Description |
-|---|---|
-| `clearSelectedRows()` | Deselect all currently selected rows. |
-| `clearSort()` | Reset sort to the default (`defaultSortFieldId` / `defaultSortAsc`), or unsorted if no defaults are set. |
-
-## TableStyles
-
-Pass to `customStyles` to override styles for any part of `DataTable`. Each key accepts a `style` object (`React.CSSProperties`) and optional extra properties.
-
-```tsx
-import DataTable, { type TableStyles } from 'react-data-table-component';
-
-const customStyles: TableStyles = {
-  headRow: {
-    style: {
-      backgroundColor: '#f8fafc',
-      borderBottomWidth: '2px',
-    },
-  },
-  headCells: {
-    style: {
-      fontSize: '13px',
-      fontWeight: 700,
-      color: '#374151',
-    },
-  },
-  rows: {
-    style: { minHeight: '56px' },
-    highlightOnHoverStyle: {
-      backgroundColor: '#f0f9ff',
-      borderBottomColor: '#e0f2fe',
-      outline: '1px solid #bae6fd',
-    },
-  },
-};
-```
-
-| Key | Extra fields | Description |
-|---|---|---|
-| `table` | - | The outermost table element. |
-| `tableWrapper` | - | Wrapper `<div>` around the table. |
-| `responsiveWrapper` | - | Horizontal-scroll wrapper (only present when `responsive`). |
-| `header` | `fontColor`, `fontSize` | Title / actions bar at the top. |
-| `subHeader` | - | Sub-header bar. |
-| `head` | - | The `<thead>` element. |
-| `headRow` | `denseStyle` | Column header row. |
-| `headCells` | `draggingStyle` | Individual header cells. |
-| `cells` | `draggingStyle` | Body cells. |
-| `rows` | `selectedHighlightStyle`, `denseStyle`, `highlightOnHoverStyle`, `stripedStyle` | Body rows. |
-| `expanderRow` | - | The expanded content row. |
-| `expanderCell` | - | Cell containing the expand/collapse button. |
-| `expanderButton` | - | The expand/collapse button itself. |
-| `pagination` | `pageButtonsStyle` | Pagination bar and page buttons. |
-| `footer` | - | The footer row container. |
-| `footerCells` | - | Individual footer cells. |
-| `noData` | - | Empty-state container. |
-| `progress` | - | Loading indicator container. |
-
-## ConditionalStyles\<T\>
-
-Used with `conditionalRowStyles` and `conditionalCellStyles` to apply styles or class names based on row data.
-
-```tsx
-const conditionalRowStyles = [
-  {
-    when: row => row.status === 'active',
-    style: { backgroundColor: '#f0fdf4', color: '#166534' },
-  },
-  {
-    when: row => row.salary > 100000,
-    // style can also be a function:
-    style: row => ({ fontWeight: row.salary > 150000 ? 700 : 400 }),
-  },
-  {
-    when: row => row.flagged,
-    classNames: ['flagged-row'],
-  },
-];
-```
-
-| Field | Type | Description |
-|---|---|---|
-| `when` | `(row: T) => boolean` | **Required.** Predicate that applies styles when this returns `true`. |
-| `style` | `CSSProperties \| ((row: T) => CSSProperties)` | Inline styles to apply. |
-| `classNames` | `string[]` | CSS class names to add. |
-
-## createTheme()
-
-Registers a custom named theme. Call this outside your component tree so it runs once.
-
-```ts
-import { createTheme } from 'react-data-table-component';
-
-createTheme(
-  'brand',       // name (pass to the theme prop)
-  {
-    text:             { primary: '#1a1a2e', secondary: '#4a4a6a', disabled: 'rgba(26,26,46,.38)' },
-    background:       { default: '#f0f4ff' },
-    divider:          { default: '#dde3f0' },
-    button:           { default: '#6366f1', hover: '#4f46e5', focus: 'rgba(99,102,241,.25)', disabled: '#c7d2fe' },
-    selected:         { default: '#ede9fe', text: '#3730a3' },
-    highlightOnHover: { default: '#e0e7ff', text: '#1a1a2e' },
-    striped:          { default: '#f5f3ff', text: '#1a1a2e' },
-  },
-  'default',     // optional: inherit from this theme
-);
-```
-
-| Parameter | Type | Description |
-|---|---|---|
-| `name` | `string` | Theme name to reference in the `theme` prop. |
-| `overrides` | `Partial<Theme>` | Token overrides. Only the keys you provide are changed. |
-| `inherit` | `string` | Optional name of a built-in or previously registered theme to inherit from. |
-
-The `Theme` interface token keys:
-
-| Token | Fields |
-|---|---|
-| `text` | `primary`, `secondary`, `disabled` |
-| `background` | `default` |
-| `context` | `background`, `text` |
-| `divider` | `default` |
-| `button` | `default`, `hover`, `focus`, `disabled` |
-| `selected` | `default`, `text` |
-| `highlightOnHover` | `default`, `text` |
-| `striped` | `default`, `text` |
-| `colorScheme` | `"light" \| "dark"`. Sets native form control rendering. |
-
-## Pagination types
-
-### PaginationOptions
-
-Passed to `paginationComponentOptions`.
-
-| Field | Type | Default | Description |
-|---|---|---|---|
-| `rowsPerPageText` | `string` | `"Rows per page:"` | Label for the rows-per-page select. |
-| `rangeSeparatorText` | `string` | `"of"` | Separator between current range and total, e.g. "1–10 of 50". |
-| `noRowsPerPage` | `boolean` | `false` | Hide the rows-per-page selector. |
-| `selectAllRowsItem` | `boolean` | `false` | Add an "All" option to the rows-per-page selector. |
-| `selectAllRowsItemText` | `string` | `"All"` | Label for the "All" option. |
-
-### PaginationServerOptions
-
-Passed to `paginationServerOptions` when using server-side pagination.
-
-| Field | Type | Default | Description |
-|---|---|---|---|
-| `persistSelectedOnPageChange` | `boolean` | `false` | Keep the current selection when the page changes. |
-| `persistSelectedOnSort` | `boolean` | `false` | Keep the current selection when the sort column or direction changes. |
-
-### PaginationComponentProps
-
-The props your custom `paginationComponent` will receive.
-
-| Field | Type | Description |
-|---|---|---|
-| `rowsPerPage` | `number` | Currently selected rows-per-page value. |
-| `rowCount` | `number` | Total row count. |
-| `currentPage` | `number` | Current active page (1-based). |
-| `onChangePage` | `(page, totalRows) => void` | Call this to change page. |
-| `onChangeRowsPerPage` | `(rowsPerPage, page) => void` | Call this to change rows-per-page. |
-
-## Enums & constants
-
-All enums and constants are re-exported from the package root.
-
-```ts
-import { Media, Direction, Alignment, SortOrder } from 'react-data-table-component';
-```
-
-| Enum | Values | Description |
-|---|---|---|
-| `Media` | `SM = "sm"` (≤ 599px), `MD = "md"` (≤ 959px), `LG = "lg"` (≤ 1280px) | Breakpoints for the column `hide` prop. |
-| `Direction` | `LTR = "ltr"`, `RTL = "rtl"`, `AUTO = "auto"` | Text direction for the `direction` prop. |
-| `Alignment` | `LEFT = "left"`, `RIGHT = "right"`, `CENTER = "center"` | Alignment for `subHeaderAlign`. |
-| `SortOrder` | `ASC = "asc"`, `DESC = "desc"` | Sort direction passed to `onSort` and `sortFunction`. |
-
-## useColumnVisibility
-
-Hook for managing column show/hide state outside of `DataTable`. Pairs with the `omit` column prop.
-
-```tsx
-import { useColumnVisibility, type TableColumn } from 'react-data-table-component';
-
-const rawColumns: TableColumn<Row>[] = [
-  { id: 'name', name: 'Name', selector: r => r.name },
-  { id: 'dept', name: 'Department', selector: r => r.dept },
-];
-
-function App() {
-  const { columns, visibility, toggle, setAll } = useColumnVisibility(rawColumns);
-
-  return (
-    <>
-      {visibility.map(({ id, name, visible }) => (
-        <label key={id}>
-          <input type="checkbox" checked={visible} onChange={() => toggle(id)} />
-          {name}
-        </label>
-      ))}
-      <button onClick={() => setAll(true)}>Show all</button>
-      <DataTable columns={columns} data={data} />
-    </>
-  );
-}
-```
-
-### UseColumnVisibilityResult
-
-| Field | Type | Description |
-|---|---|---|
-| `columns` | `TableColumn<T>[]` | Columns with `omit` set according to current visibility. Pass directly to `DataTable`. |
-| `visibility` | `ColumnVisibilityEntry[]` | Current visibility state for every column. |
-| `toggle` | `(id: string \| number) => void` | Toggle the visibility of a single column by id. |
-| `setAll` | `(visible: boolean) => void` | Show or hide all columns at once. |
-
-### ColumnVisibilityEntry
-
-| Field | Type | Description |
-|---|---|---|
-| `id` | `string \| number` | Column id. |
-| `name` | `ReactNode` | Column name (mirrors the `name` field from the column definition). |
-| `visible` | `boolean` | Whether the column is currently visible. |
-
-## useTableExport
-
-Hook for generating CSV / JSON from your columns and rows, with download + clipboard helpers. See [Export (CSV / JSON)](/docs/export) for the full guide.
-
-```tsx
-import { useTableExport, type TableColumn } from 'react-data-table-component';
-
-const columns: TableColumn<Row>[] = [
-  { id: 'id', name: 'ID', selector: r => r.id },
-  { id: 'name', name: 'Name', selector: r => r.name },
-];
-
-function App({ rows }: { rows: Row[] }) {
-  const { download, copy, toCSV, toJSON } = useTableExport({ columns, rows });
-
-  return (
-    <>
-      <button onClick={() => download('rows.csv')}>CSV</button>
-      <button onClick={() => download('rows.json', 'json')}>JSON</button>
-      <button onClick={() => copy()}>Copy CSV</button>
-    </>
-  );
-}
-```
-
-### UseTableExportOptions
-
-| Field | Type | Default | Description |
-| --- | --- | --- | --- |
-| `columns` | `TableColumn<T>[]` | required | Same array you pass to DataTable. `omit: true` columns are skipped. |
-| `rows` | `T[]` | required | Rows to export. |
-| `valueSource` | `'selector' \| 'format'` | `'selector'` | `'selector'` exports raw values; `'format'` runs `column.format` first. |
-| `headerOverrides` | `Record<string \| number, string>` | – | Replace header label per column id. |
-| `columnOrder` | `(string \| number)[]` | – | Restrict and reorder columns by id. |
-
-### UseTableExportResult
-
-| Field | Type | Description |
-| --- | --- | --- |
-| `toCSV` | `() => string` | Build a CSV string. |
-| `toJSON` | `() => string` | Build a pretty-printed JSON string. |
-| `download` | `(filename: string, format?: 'csv' \| 'json') => void` | Trigger a browser download. SSR-safe (no-op when `document` is undefined). |
-| `copy` | `(format?: 'csv' \| 'json') => Promise<void>` | Copy to clipboard via `navigator.clipboard`. Rejects when unavailable. |
-
-## Package exports
-
-```ts
-// Default export
-import DataTable from 'react-data-table-component';
-
-// Named exports
-import {
-  createTheme,
-  defaultThemes,
-  Media,
-  Direction,
-  Alignment,
-  SortOrder,
-  // Default icon sets (useful when building custom pagination/expander UIs)
-  DEFAULT_PAGINATION_ICONS,
-  DEFAULT_EXPANDABLE_ICON,
-  // Headless hooks
-  useTableState,
-  useColumns,
-  useTableData,
-  useColumnFilter,
-  useColumnVisibility,
-  useTableExport,
-  // Filter utilities
-  emptyFilterState,
-  isFilterActive,
-} from 'react-data-table-component';
-
-// TypeScript types
-import type {
-  TableProps,
-  TableColumn,
-  ColumnGroup,
-  TableRow,
-  TableStyles,
-  Theme,
-  ThemeProp,
-  ConditionalStyles,
-  DataTableHandle,
-  ExpanderComponentProps,
-  PaginationComponentProps,
-  PaginationOptions,
-  PaginationServerOptions,
-  PaginationIcons,
-  SortFunction,
-  Selector,
-  // Column visibility hook types
-  UseColumnVisibilityResult,
-  ColumnVisibilityEntry,
-  // Filter types
-  FilterType,
-  FilterOperator,
-  FilterCondition,
-  FilterState,
-} from 'react-data-table-component';
-```
diff --git a/apps/docs/src/pages/docs/column-groups.astro b/apps/docs/src/pages/docs/column-groups.astro
index 4fb59841..a3dab6a4 100644
--- a/apps/docs/src/pages/docs/column-groups.astro
+++ b/apps/docs/src/pages/docs/column-groups.astro
@@ -2,6 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
+import PropsTable from '../../components/PropsTable.astro';
 import ColumnGroupsDemo from '../../components/demos/ColumnGroupsDemo.tsx';
 ---
 
@@ -146,4 +147,14 @@ export default function App() {
   <CodeBlock code={`.my-table {
   --rdt-color-text-secondary: #4f46e5;
 }`} lang="css" />
+
+  <h2>Prop reference</h2>
+
+  <PropsTable feature="column-groups" columns={['prop', 'type', 'default', 'description']} />
+
+  <p>
+    Each group is a <a href="/docs/api#columngroup"><code>ColumnGroup</code></a> object — see the API
+    reference for its <code>name</code>, <code>columnIds</code>, <code>align</code>, and
+    <code>reorder</code> fields.
+  </p>
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/column-pinning.astro b/apps/docs/src/pages/docs/column-pinning.astro
index c95a745c..a2aa66ec 100644
--- a/apps/docs/src/pages/docs/column-pinning.astro
+++ b/apps/docs/src/pages/docs/column-pinning.astro
@@ -3,6 +3,7 @@ import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 import ColumnPinningDemo from '../../components/demos/ColumnPinningDemo.tsx';
 ---
 
@@ -184,12 +185,7 @@ const columns: TableColumn<Row>[] = [
 
   <h2>Prop reference</h2>
 
-  <DocsTable
-    headers={['Column prop', 'Type', 'Default', 'Description']}
-    rows={[
-      ['<code>pinned</code>', "<code>'left' | 'right'</code>", '-', 'Pin the column to the left or right edge. Requires an explicit <code>id</code>.'],
-    ]}
-  />
+  <PropsTable feature="column-pinning" columns={['prop', 'type', 'default', 'description']} propHeader="Column prop" />
 
   <h2>CSS custom properties</h2>
 
diff --git a/apps/docs/src/pages/docs/column-reorder.astro b/apps/docs/src/pages/docs/column-reorder.astro
index eac35f13..833a8bd4 100644
--- a/apps/docs/src/pages/docs/column-reorder.astro
+++ b/apps/docs/src/pages/docs/column-reorder.astro
@@ -2,6 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
+import PropsTable from '../../components/PropsTable.astro';
 import DraggableColumnsDemo from '../../components/demos/DraggableColumnsDemo.tsx';
 import DraggableGroupsDemo from '../../components/demos/DraggableGroupsDemo.tsx';
 ---
@@ -185,4 +186,13 @@ const columnGroups: ColumnGroup[] = [
   { name: 'Employee',     columnIds: ['first', 'last', 'dept'], reorder: true },
   { name: 'Compensation', columnIds: ['base', 'bonus'],         reorder: true },
 ];`} />
+
+  <h2>Prop reference</h2>
+
+  <PropsTable feature="column-reorder" columns={['prop', 'type', 'default', 'description']} />
+
+  <p>
+    Set <code>reorder: true</code> on each <a href="/docs/api#tablecolumnt"><code>TableColumn</code></a>
+    (or <a href="/docs/api#columngroup"><code>ColumnGroup</code></a>) you want to be draggable.
+  </p>
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/column-separators.astro b/apps/docs/src/pages/docs/column-separators.astro
index 71c02dba..279c77a5 100644
--- a/apps/docs/src/pages/docs/column-separators.astro
+++ b/apps/docs/src/pages/docs/column-separators.astro
@@ -2,6 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 import ColumnSeparatorsDemo from '../../components/demos/ColumnSeparatorsDemo.tsx';
 ---
 
@@ -55,4 +56,8 @@ import ColumnSeparatorsDemo from '../../components/demos/ColumnSeparatorsDemo.ts
     <li><code>headerSeparator</code>: defaults to <code>true</code> (subtle inset line)</li>
     <li><code>columnSeparator</code>: defaults to <code>false</code> (no body separators)</li>
   </ul>
+
+  <h2>Prop reference</h2>
+
+  <PropsTable only={['columnSeparator', 'headerSeparator']} columns={['prop', 'type', 'default', 'description']} />
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/conditional-styles.astro b/apps/docs/src/pages/docs/conditional-styles.astro
index dfa21eeb..63c07a76 100644
--- a/apps/docs/src/pages/docs/conditional-styles.astro
+++ b/apps/docs/src/pages/docs/conditional-styles.astro
@@ -2,6 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
+import PropsTable from '../../components/PropsTable.astro';
 import ConditionalStylesDemo from '../../components/demos/ConditionalStylesDemo.tsx';
 ---
 
@@ -155,4 +156,14 @@ const conditionalRowStyles: ConditionalStyles<Deal>[] = [
   <p>
     See it combined with other features in the <a href="/docs/recipes/live-updates">Live-updating data grid</a> recipe.
   </p>
+
+  <h2>Prop reference</h2>
+
+  <PropsTable only={['conditionalRowStyles']} columns={['prop', 'type', 'default', 'description']} />
+
+  <p>
+    Per-cell styling uses <code>conditionalCellStyles</code> on each
+    <a href="/docs/api#tablecolumnt"><code>TableColumn</code></a>. Both accept the same
+    <a href="/docs/api#conditionalstylest"><code>ConditionalStyles</code></a> shape.
+  </p>
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/context-menu.astro b/apps/docs/src/pages/docs/context-menu.astro
index 0edf2e8d..cc52c754 100644
--- a/apps/docs/src/pages/docs/context-menu.astro
+++ b/apps/docs/src/pages/docs/context-menu.astro
@@ -3,6 +3,7 @@ import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 import ContextMenuDemo from '../../components/demos/ContextMenuDemo.tsx';
 import RowContextMenuDemo from '../../components/demos/RowContextMenuDemo.tsx';
 ---
@@ -152,14 +153,7 @@ const rowActions = (row: Task): ContextMenuAction[] => [
   </ul>
 
   <h2>Props</h2>
-  <DocsTable
-    headers={['Prop', 'Type', 'Description']}
-    rows={[
-      ['contextMenu', "boolean | { header?: boolean; row?: boolean; trigger?: 'right-click' | 'menu-button' | 'both'; menuPosition?: 'start' | 'end' }", "Enable the context menu. true enables header and row menus with the right-click trigger. menuPosition sets which inline edge the row menu button sits on (default 'end' — right in LTR)."],
-      ['contextMenuActions', '{ header?: ContextMenuAction[] | (column) => ContextMenuAction[]; row?: (row, rowIndex) => ContextMenuAction[] }', 'Custom menu items. Header items append after the built-ins; row items are the entire row menu.'],
-      ['onContextMenuAction', '(action, ctx) => void', 'Fires for every selected item, built-ins included. ctx is { type: "header", column } or { type: "row", row, rowIndex }.'],
-    ]}
-  />
+  <PropsTable feature="context-menu" columns={['prop', 'type', 'description']} />
 
   <h3>ContextMenuAction</h3>
   <DocsTable
diff --git a/apps/docs/src/pages/docs/custom-styles.astro b/apps/docs/src/pages/docs/custom-styles.astro
index 12bcc033..b1cc7e19 100644
--- a/apps/docs/src/pages/docs/custom-styles.astro
+++ b/apps/docs/src/pages/docs/custom-styles.astro
@@ -4,6 +4,7 @@ import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
 import CustomStylesDemo from '../../components/demos/CustomStylesDemo.tsx';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="Custom styles | react-data-table-component">
@@ -204,4 +205,13 @@ const conditionalRowStyles: ConditionalStyles<Employee>[] = [
     pseudo-selectors like <code>&amp;:hover</code> are not valid here.
     Use <code>conditionalRowStyles</code> or CSS classes for hover and focus states.
   </p>
+
+  <h2>Prop reference</h2>
+
+  <PropsTable only={['customStyles', 'conditionalRowStyles']} columns={['prop', 'type', 'default', 'description']} />
+
+  <p>
+    <code>customStyles</code> takes a <a href="/docs/api#tablestyles"><code>TableStyles</code></a> object —
+    see the API reference for every styleable slot.
+  </p>
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/expandable.astro b/apps/docs/src/pages/docs/expandable.astro
index 2284c365..2f4b025a 100644
--- a/apps/docs/src/pages/docs/expandable.astro
+++ b/apps/docs/src/pages/docs/expandable.astro
@@ -3,7 +3,7 @@ import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
 import ExpandableDemo from '../../components/demos/ExpandableDemo.tsx';
-import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="Expandable rows | react-data-table-component">
@@ -253,31 +253,6 @@ export default function App() {
   animateRows
 />`} />
 
-  <h2>All expandable props</h2>
-  <DocsTable
-    headers={['Prop', 'Type', 'Description']}
-    rows={[
-      ['<code>expandableRows</code>', '<code>boolean</code>', 'Enable expandable rows'],
-      ['<code>expandableRowsComponent</code>', '<code>ComponentType&lt;&#123; data: T &#125;&gt;</code>', 'Component rendered inside each expanded row'],
-      ['<code>expandableRowsComponentProps</code>', '<code>Record&lt;string, unknown&gt;</code>', 'Extra props injected into every expander instance'],
-      ['<code>expandableRowExpanded</code>', '<code>(row: T) =&gt; boolean</code>', 'Pre-expand rows matching this predicate'],
-      ['<code>expandableRowDisabled</code>', '<code>(row: T) =&gt; boolean</code>', 'Prevent rows matching this predicate from being expanded'],
-      ['<code>expandOnRowClicked</code>', '<code>boolean</code>', 'Expand/collapse on row click'],
-      ['<code>expandOnRowDoubleClicked</code>', '<code>boolean</code>', 'Expand/collapse on row double-click'],
-      ['<code>expandableRowsHideExpander</code>', '<code>boolean</code>', 'Hide the expander icon column'],
-      ['<code>expandableIcon</code>', '<code>&#123; collapsed: ReactNode; expanded: ReactNode &#125;</code>', 'Custom expand/collapse icons'],
-      ['<code>expandableInheritConditionalStyles</code>', '<code>boolean</code>', "Apply the parent row's <code>conditionalRowStyles</code> to the expander row"],
-      ['<code>onRowExpandToggled</code>', '<code>(expanded: boolean, row: T) =&gt; void</code>', 'Fired when a row is expanded or collapsed'],
-      ['<code>animateRows</code>', '<code>boolean</code>', 'Animate expand/collapse (respects <code>prefers-reduced-motion</code>)'],
-      ['<code>localization</code>', '<code>Localization</code>', 'Localizable aria-labels for the expand/collapse button — see Localization below.'],
-    ]}
-  />
-
-  <p>
-    See it combined with other features in the <a href="/docs/recipes/master-detail">Dashboard with drill-down</a> recipe
-    and <a href="/docs/recipes/row-groups">Grouped rows with aggregates</a>.
-  </p>
-
   <h2>Localization</h2>
   <p>
     Override the aria-labels on the expand/collapse button via the <code>localization</code> prop.
@@ -313,4 +288,12 @@ const custom: Localization = {
   expandableRowsComponent={MyExpander}
   localization={custom}
 />`} />
+
+  <h2>Prop reference</h2>
+  <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
+    and <a href="/docs/recipes/row-groups">Grouped rows with aggregates</a>.
+  </p>
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/filtering.astro b/apps/docs/src/pages/docs/filtering.astro
index b8feaf10..60440d05 100644
--- a/apps/docs/src/pages/docs/filtering.astro
+++ b/apps/docs/src/pages/docs/filtering.astro
@@ -4,6 +4,7 @@ import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
 import FilteringDemo from '../../components/demos/FilteringDemo.tsx';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="Filtering | react-data-table-component">
@@ -246,4 +247,13 @@ const rows = filteredData(tableRows);`} />
     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>.
   </p>
+
+  <h2>Prop reference</h2>
+
+  <PropsTable feature="filtering" columns={['prop', 'type', 'default', 'description']} />
+
+  <p>
+    Per-column filtering is configured on each <a href="/docs/api#tablecolumnt"><code>TableColumn</code></a>
+    via <code>filterable</code>, <code>filterType</code>, and <code>filterFunction</code>.
+  </p>
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/fixed-header.astro b/apps/docs/src/pages/docs/fixed-header.astro
index d00bb138..6e242a45 100644
--- a/apps/docs/src/pages/docs/fixed-header.astro
+++ b/apps/docs/src/pages/docs/fixed-header.astro
@@ -4,7 +4,7 @@ import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
 import FixedHeaderDemo from '../../components/demos/FixedHeaderDemo.tsx';
 import OnScrollDemo from '../../components/demos/OnScrollDemo.tsx';
-import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="Fixed header | react-data-table-component">
@@ -147,14 +147,7 @@ const columns: TableColumn<Employee>[] = [
 
   <h2>Prop reference</h2>
 
-  <DocsTable
-    headers={['Prop', 'Type', 'Default', 'Description']}
-    rows={[
-      ['<code>fixedHeader</code>', '<code>boolean</code>', '<code>false</code>', 'Stick column headers to the top of the scroll container.'],
-      ['<code>fixedHeaderScrollHeight</code>', '<code>string</code>', '<code>"100vh"</code>', 'Any valid CSS length (<code>px</code>, <code>vh</code>, <code>%</code>, etc.).\n          Sets the <code>max-height</code> of the scrollable body region.\n          Only applies when <code>fixedHeader</code> is <code>true</code>.'],
-      ['<code>onScroll</code>', '<code>(event: React.UIEvent&lt;HTMLDivElement&gt;) =&gt; void</code>', '-', 'Called when the user scrolls the table body. Works with both <code>fixedHeader</code> enabled and disabled.'],
-    ]}
-  />
+  <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.
diff --git a/apps/docs/src/pages/docs/footer.astro b/apps/docs/src/pages/docs/footer.astro
index 48174df1..552fcd54 100644
--- a/apps/docs/src/pages/docs/footer.astro
+++ b/apps/docs/src/pages/docs/footer.astro
@@ -2,6 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
+import PropsTable from '../../components/PropsTable.astro';
 import FooterBasicDemo from '../../components/demos/FooterBasicDemo.tsx';
 import FooterCustomDemo from '../../components/demos/FooterCustomDemo.tsx';
 ---
@@ -224,4 +225,13 @@ function SummaryFooter({ rows }: FooterComponentProps<Row>) {
       container for accessibility and has no constraints on its internal structure.
     </li>
   </ul>
+
+  <h2>Prop reference</h2>
+
+  <PropsTable feature="footer" columns={['prop', 'type', 'default', 'description']} />
+
+  <p>
+    Column-level footers live on each <a href="/docs/api#tablecolumnt"><code>TableColumn</code></a> as
+    the <code>footer</code> field.
+  </p>
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/getting-started.astro b/apps/docs/src/pages/docs/getting-started.astro
index cd46ab6f..10d23922 100644
--- a/apps/docs/src/pages/docs/getting-started.astro
+++ b/apps/docs/src/pages/docs/getting-started.astro
@@ -1,7 +1,7 @@
 ---
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
-import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="Getting started | react-data-table-component" description="Install react-data-table-component and build a sortable, paginated data table in React with 10 lines of code.">
@@ -42,18 +42,9 @@ export default function App() {
 
   <h2>Common props at a glance</h2>
 
-  <DocsTable
-    headers={['Prop', 'Type', 'Description']}
-    rows={[
-      ['<code>columns</code>', '<code>TableColumn&lt;T&gt;[]</code>', 'Column definitions (required)'],
-      ['<code>data</code>', '<code>T[]</code>', 'Row data (required)'],
-      ['<code>pagination</code>', '<code>boolean</code>', 'Enable built-in pagination'],
-      ['<code>selectableRows</code>', '<code>boolean</code>', 'Enable row checkboxes'],
-      ['<code>expandableRows</code>', '<code>boolean</code>', 'Enable expandable row panels'],
-      ['<code>theme</code>', '<code>string</code>', 'Named theme (e.g. <code>"material"</code>, <code>"catppuccin"</code>, <code>"crisp"</code>)'],
-      ['<code>animateRows</code>', '<code>boolean</code>', 'Staggered row entrance + sort animation'],
-      ['<code>columnSeparator</code>', '<code>boolean | "full"</code>', 'Body column separators (headers always shown)'],
-    ]}
+  <PropsTable
+    only={['columns', 'data', 'pagination', 'selectableRows', 'expandableRows', 'theme', 'animateRows', 'columnSeparator']}
+    columns={['prop', 'type', 'description']}
   />
 
   <p>See the full <a href="/docs/api">API reference</a> for all props.</p>
diff --git a/apps/docs/src/pages/docs/inline-editing.astro b/apps/docs/src/pages/docs/inline-editing.astro
index d14b53ba..52d804c9 100644
--- a/apps/docs/src/pages/docs/inline-editing.astro
+++ b/apps/docs/src/pages/docs/inline-editing.astro
@@ -419,24 +419,7 @@ const columns: TableColumn<Employee>[] = [
     <li>Editing does not trigger row selection or row click handlers. Clicks inside the editor are stopped from propagating.</li>
   </ul>
 
-  <h2>Prop reference</h2>
-
-  <DocsTable
-    headers={['Column prop', 'Type', 'Description']}
-    rows={[
-      ['<code>editable</code>', '<code>boolean</code>', 'Shorthand for a text editor. Equivalent to <code>editor: &#123; type: \'text\' &#125;</code>. Ignored when <code>editor</code> is set.'],
-      ['<code>editor</code>', '<code>CellEditor</code>', 'Editor configuration. See <code>CellEditor</code> below for the full union.'],
-      ['<code>validate</code>', '<code>(value, row, column) =&gt; true | false | string</code>', 'Runs before <code>onCellEdit</code>. Return <code>true</code> to accept, <code>false</code> to reject silently, or a string to keep the editor open with an inline error.'],
-      ['<code>onCellEdit</code>', '<code>(row: T, value: string, column: TableColumn&lt;T&gt;) =&gt; void</code>', 'Called when the user commits an edit (<kbd>Enter</kbd>, blur, or selection change for dropdowns). Receives the original row, the new string value, and the column definition.'],
-    ]}
-  />
-
-  <p>
-    <code>cellNavigation</code> is a table-level prop covered on its own page — see
-    <a href="/docs/keyboard-navigation">Keyboard navigation</a>.
-  </p>
-
-  <h3>CellEditor</h3>
+  <h2 id="celleditor">CellEditor</h2>
 
   <CodeBlock code={`type CellEditor<T = unknown> =
   | { type: 'text'; placeholder?: string }
@@ -465,4 +448,21 @@ interface CustomCellEditorContext<T> {
   <p>
     See it combined with other features in the <a href="/docs/recipes/inventory-editor">Editable inventory grid</a> recipe.
   </p>
+
+  <h2>Prop reference</h2>
+
+  <DocsTable
+    headers={['Column prop', 'Type', 'Description']}
+    rows={[
+      ['<code>editable</code>', '<code>boolean</code>', 'Shorthand for a text editor. Equivalent to <code>editor: &#123; type: \'text\' &#125;</code>. Ignored when <code>editor</code> is set.'],
+      ['<code>editor</code>', '<code>CellEditor</code>', 'Editor configuration. See <a href="#celleditor">CellEditor</a> above for the full union.'],
+      ['<code>validate</code>', '<code>(value, row, column) =&gt; true | false | string</code>', 'Runs before <code>onCellEdit</code>. Return <code>true</code> to accept, <code>false</code> to reject silently, or a string to keep the editor open with an inline error.'],
+      ['<code>onCellEdit</code>', '<code>(row: T, value: string, column: TableColumn&lt;T&gt;) =&gt; void</code>', 'Called when the user commits an edit (<kbd>Enter</kbd>, blur, or selection change for dropdowns). Receives the original row, the new string value, and the column definition.'],
+    ]}
+  />
+
+  <p>
+    <code>cellNavigation</code> is a table-level prop covered on its own page — see
+    <a href="/docs/keyboard-navigation">Keyboard navigation</a>.
+  </p>
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/keyboard-navigation.astro b/apps/docs/src/pages/docs/keyboard-navigation.astro
index 9d123744..bc16da67 100644
--- a/apps/docs/src/pages/docs/keyboard-navigation.astro
+++ b/apps/docs/src/pages/docs/keyboard-navigation.astro
@@ -7,6 +7,7 @@ import KeyboardSortDemo from '../../components/demos/KeyboardSortDemo.tsx';
 import KeyboardEditDemo from '../../components/demos/KeyboardEditDemo.tsx';
 import KeyboardNavigationDemo from '../../components/demos/KeyboardNavigationDemo.tsx';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="Keyboard navigation | react-data-table-component">
@@ -161,10 +162,5 @@ import DocsTable from '../../components/DocsTable.astro';
 
   <h2>Prop reference</h2>
 
-  <DocsTable
-    headers={['Table prop', 'Type', 'Description']}
-    rows={[
-      ['<code>cellNavigation</code>', '<code>boolean</code>', "Enable spreadsheet-style keyboard navigation (WAI-ARIA grid pattern: <code>role='grid'</code>, single Tab stop, roving tabindex). Defaults to <code>false</code>."],
-    ]}
-  />
+  <PropsTable feature="keyboard" columns={['prop', 'type', 'description']} propHeader="Table prop" />
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/loading.astro b/apps/docs/src/pages/docs/loading.astro
index c457128f..135e5167 100644
--- a/apps/docs/src/pages/docs/loading.astro
+++ b/apps/docs/src/pages/docs/loading.astro
@@ -2,6 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
+import PropsTable from '../../components/PropsTable.astro';
 import LoadingDemo from '../../components/demos/LoadingDemo';
 ---
 
@@ -88,4 +89,8 @@ export default function UsersTable() {
 
   <CodeBlock code={`// Keep header visible when data is empty (e.g. after a filter returns nothing)
 <DataTable persistTableHead data={[]} columns={columns} />`} lang="tsx" />
+
+  <h2>Prop reference</h2>
+
+  <PropsTable feature="loading" columns={['prop', 'type', 'default', 'description']} />
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/localization.astro b/apps/docs/src/pages/docs/localization.astro
index 67d6a9eb..98e1168d 100644
--- a/apps/docs/src/pages/docs/localization.astro
+++ b/apps/docs/src/pages/docs/localization.astro
@@ -2,6 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="Localization | react-data-table-component" description="Translate pagination labels, filter placeholders, and expandable row text in react-data-table-component using built-in locale strings or custom overrides.">
@@ -184,4 +185,8 @@ const custom: Localization = {
     <code>selectAllRowsItemText</code>) is still controlled by
     <code>paginationComponentOptions</code>, since those affect layout as well as text.
   </p>
+
+  <h2>Prop reference</h2>
+
+  <PropsTable feature="localization" columns={['prop', 'type', 'default', 'description']} />
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/mobile.astro b/apps/docs/src/pages/docs/mobile.astro
index a230376b..f8f0bbd1 100644
--- a/apps/docs/src/pages/docs/mobile.astro
+++ b/apps/docs/src/pages/docs/mobile.astro
@@ -2,6 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
+import DocsTable from '../../components/DocsTable.astro';
 import MobileDemo from '../../components/demos/MobileDemo.tsx';
 ---
 
@@ -104,4 +105,13 @@ function MyPage() {
 
   return <DataTable columns={columns} data={data} />;
 }`} />
+
+  <h2>Prop reference</h2>
+
+  <DocsTable
+    headers={['Column prop', 'Type', 'Description']}
+    rows={[
+      ['<code>hide</code>', '<code>Media | number</code>', 'Hide the column below the given breakpoint (<code>Media.SM</code> = 599px, <code>MD</code> = 959px, <code>LG</code> = 1280px) or a custom pixel value. See the <a href="/docs/api#tablecolumnt">API reference</a> for every column field.'],
+    ]}
+  />
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/pagination.astro b/apps/docs/src/pages/docs/pagination.astro
index 2f6f22e0..dd9387a2 100644
--- a/apps/docs/src/pages/docs/pagination.astro
+++ b/apps/docs/src/pages/docs/pagination.astro
@@ -8,6 +8,7 @@ import ServerSidePaginationDemo from '../../components/demos/ServerSidePaginatio
 import ServerSideSortPaginationDemo from '../../components/demos/ServerSideSortPaginationDemo.tsx';
 import ServerSideDemo from '../../components/demos/ServerSideDemo.tsx';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="Pagination | react-data-table-component">
@@ -479,31 +480,6 @@ function MyPagination({ rowsPerPage, rowCount, currentPage, onChangePage }: Pagi
   paginationComponent={MyPagination}
 />`} />
 
-  <h2>Prop reference</h2>
-
-  <DocsTable
-    headers={['Prop', 'Type', 'Default', 'Description']}
-    rows={[
-      ['<code>pagination</code>', '<code>boolean</code>', '<code>false</code>', 'Enable the built-in pagination bar.'],
-      ['<code>paginationPerPage</code>', '<code>number</code>', '<code>10</code>', 'Initial number of rows per page.'],
-      ['<code>paginationDefaultPage</code>', '<code>number</code>', '<code>1</code>', 'Initial page number.'],
-      ['<code>paginationRowsPerPageOptions</code>', '<code>number[]</code>', '<code>[10, 25, 50, 100]</code>', 'Options shown in the rows-per-page dropdown.'],
-      ['<code>paginationPosition</code>', "<code>'top' | 'bottom' | 'both'</code>", "<code>'bottom'</code>", "Where the pagination bar renders relative to the table. <code>'both'</code> renders it above and below simultaneously."],
-      ['<code>paginationServer</code>', '<code>boolean</code>', '<code>false</code>', 'Delegate pagination to the server. Use with <code>paginationTotalRows</code> and the change callbacks.'],
-      ['<code>paginationTotalRows</code>', '<code>number</code>', '<code>0</code>', 'Total row count across all pages (server-side only). Used to calculate total pages.'],
-      ['<code>paginationResetDefaultPage</code>', '<code>boolean</code>', '<code>false</code>', 'Toggle this value to reset the pagination bar to page 1 (e.g. after a search).'],
-      ['<code>paginationServerOptions</code>', '<code>&#123; persistSelectedOnPageChange?, persistSelectedOnSort? &#125;</code>', '-', 'Server-side selection persistence options.'],
-      ['<code>paginationComponent</code>', '<code>ComponentType&lt;PaginationComponentProps&gt;</code>', '-', 'Replaces the built-in pagination bar with a custom component.'],
-      ['<code>paginationComponentOptions</code>', '<code>PaginationOptions</code>', '-', 'Options forwarded to the default pagination component. Covers visible text (<code>rowsPerPageText</code>, <code>rangeSeparatorText</code>, <code>selectAllRowsItemText</code>). Navigation aria-labels are set via the <code>localization</code> prop.'],
-      ['<code>paginationIconFirstPage</code>', '<code>ReactNode</code>', '-', 'Icon for the "first page" button.'],
-      ['<code>paginationIconLastPage</code>', '<code>ReactNode</code>', '-', 'Icon for the "last page" button.'],
-      ['<code>paginationIconNext</code>', '<code>ReactNode</code>', '-', 'Icon for the "next page" button.'],
-      ['<code>paginationIconPrevious</code>', '<code>ReactNode</code>', '-', 'Icon for the "previous page" button.'],
-      ['<code>onChangePage</code>', '<code>(page: number, totalRows: number) =&gt; void</code>', '-', 'Called when the user navigates to a different page.'],
-      ['<code>onChangeRowsPerPage</code>', '<code>(currentRowsPerPage: number, currentPage: number) =&gt; void</code>', '-', 'Called when the user changes the rows-per-page selection.'],
-    ]}
-  />
-
   <h2>Localization</h2>
   <p>
     All navigation aria-labels on the built-in pagination bar are controlled via the
@@ -548,6 +524,10 @@ const custom: Localization = {
 
 <DataTable columns={columns} data={data} pagination localization={custom} />`} />
 
+  <h2>Prop reference</h2>
+
+  <PropsTable feature="pagination" columns={['prop', 'type', 'default', 'description']} />
+
   <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>.
diff --git a/apps/docs/src/pages/docs/resizable.astro b/apps/docs/src/pages/docs/resizable.astro
index 5e76215a..0b4a476c 100644
--- a/apps/docs/src/pages/docs/resizable.astro
+++ b/apps/docs/src/pages/docs/resizable.astro
@@ -4,6 +4,7 @@ import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
 import ResizableDemo from '../../components/demos/ResizableDemo.tsx';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="Resizable columns | react-data-table-component">
@@ -162,10 +163,11 @@ export default function App() {
 
   <h2>Prop reference</h2>
 
+  <PropsTable feature="resizable" columns={['prop', 'type', 'default', 'description']} />
+
   <DocsTable
-    headers={['Prop', 'Type', 'Default', 'Description']}
+    headers={['Column prop', 'Type', 'Default', 'Description']}
     rows={[
-      ['<code>resizable</code>', '<code>boolean</code>', '<code>false</code>', 'Show resize handles on column header right edges.'],
       ['<code>column.width</code>', '<code>string</code>', '-', 'Initial width (e.g. <code>"180px"</code>).'],
       ['<code>column.minWidth</code>', '<code>string</code>', '<code>"100px"</code>', 'Minimum width the user can resize to. Hard floor of 40 px applies regardless.'],
     ]}
diff --git a/apps/docs/src/pages/docs/row-interactions.astro b/apps/docs/src/pages/docs/row-interactions.astro
index ae0cd943..2398e85e 100644
--- a/apps/docs/src/pages/docs/row-interactions.astro
+++ b/apps/docs/src/pages/docs/row-interactions.astro
@@ -2,6 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import { RowClickDemo, RowLinkDemo, ActionCellDemo } from '../../components/demos/RowInteractionsDemo.tsx';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="Row interactions | react-data-table-component">
@@ -162,4 +163,8 @@ export default function App() {
   >
     <ActionCellDemo client:load />
   </Demo>
+
+  <h2>Prop reference</h2>
+
+  <PropsTable feature="row-events" columns={['prop', 'type', 'description']} />
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/rtl.astro b/apps/docs/src/pages/docs/rtl.astro
index 6d153914..14f56975 100644
--- a/apps/docs/src/pages/docs/rtl.astro
+++ b/apps/docs/src/pages/docs/rtl.astro
@@ -4,6 +4,7 @@ import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
 import RTLDemo from '../../components/demos/RTLDemo.tsx';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="RTL support | react-data-table-component">
@@ -104,12 +105,7 @@ import { ar } from 'react-data-table-component/locales';
 
   <h2>Prop reference</h2>
 
-  <DocsTable
-    headers={['Prop', 'Type', 'Default', 'Description']}
-    rows={[
-      ['<code>direction</code>', '<code>Direction</code>', '<code>Direction.AUTO</code>', 'Text direction for the table. <code>ltr</code>, <code>rtl</code>, or <code>auto</code>.'],
-    ]}
-  />
+  <PropsTable feature="rtl" columns={['prop', 'type', 'default', 'description']} />
 
   <CodeBlock code={`import { Direction } from 'react-data-table-component';
 
diff --git a/apps/docs/src/pages/docs/selection.astro b/apps/docs/src/pages/docs/selection.astro
index d0710f68..379de913 100644
--- a/apps/docs/src/pages/docs/selection.astro
+++ b/apps/docs/src/pages/docs/selection.astro
@@ -2,6 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
+import PropsTable from '../../components/PropsTable.astro';
 import SelectionDemo from '../../components/demos/SelectionDemo.tsx';
 ---
 
@@ -237,4 +238,8 @@ tableRef.current?.clearSelectedRows();`} />
     indeterminate: (isIndeterminate: boolean) => isIndeterminate,
   }}
 />`} />
+
+  <h2>Prop reference</h2>
+
+  <PropsTable feature="selection" columns={['prop', 'type', 'default', 'description']} propHeader="Prop / method" />
 </DocsLayout>
diff --git a/apps/docs/src/pages/docs/sorting.astro b/apps/docs/src/pages/docs/sorting.astro
index f79d15d4..c632c9d9 100644
--- a/apps/docs/src/pages/docs/sorting.astro
+++ b/apps/docs/src/pages/docs/sorting.astro
@@ -2,7 +2,7 @@
 import DocsLayout from '../../layouts/DocsLayout.astro';
 import Demo from '../../components/Demo.astro';
 import CodeBlock from '../../components/CodeBlock.astro';
-import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 import SortingDemo from '../../components/demos/SortingDemo.tsx';
 import PrioritySortDemo from '../../components/demos/PrioritySortDemo.tsx';
 import ServerSideSortingDemo from '../../components/demos/ServerSideSortingDemo.tsx';
@@ -481,22 +481,7 @@ function App() {
 
   <h2>Prop reference</h2>
 
-  <DocsTable
-    headers={['Prop / method', 'Type', 'Default', 'Description']}
-    rows={[
-      ['<code>defaultSortFieldId</code>', '<code>string | number</code>', '-', 'Column <code>id</code> to sort by on first render.'],
-      ['<code>defaultSortAsc</code>', '<code>boolean</code>', '<code>true</code>', 'Initial sort direction. <code>false</code> = descending.'],
-      ['<code>onSort</code>', '<code>(column, direction, sortedRows, sortColumns) =&gt; void</code>', '-', 'Called on every sort change with the primary column, its direction, the sorted rows, and the full <code>sortColumns</code> config in priority order. An empty <code>sortColumns</code> array means the sort was cleared.'],
-      ['<code>sortMulti</code>', '<code>boolean</code>', '<code>false</code>', 'Enable multi-column sorting. Ctrl/⌘-click a header to add it to the existing sort.'],
-      ['<code>sortServer</code>', '<code>boolean</code>', '<code>false</code>', 'Disable client-side sorting. Use with <code>onSort</code> to sort remotely.'],
-      ['<code>sortFunction</code>', '<code>SortFunction&lt;T&gt;</code>', '-', 'Table-level sort algorithm. Replaces the default sort for all columns.'],
-      ['<code>sortIcon</code>', '<code>ReactNode</code>', '-', 'Custom icon rendered inside sortable column headers.'],
-      ['<code>column.sortable</code>', '<code>boolean</code>', '<code>false</code>', 'Enable sorting on this column.'],
-      ['<code>column.sortFunction</code>', '<code>(a, b) =&gt; number</code>', '-', 'Per-column sort comparator. Takes priority over the table-level <code>sortFunction</code>.'],
-      ['<code>column.sortField</code>', '<code>string</code>', '-', 'Backend field name passed to <code>onSort</code> when it differs from <code>column.id</code>.'],
-      ['<code>ref.clearSort()</code>', '<code>DataTableHandle</code>', '-', 'Imperatively reset sort to the default (<code>defaultSortFieldId</code> / <code>defaultSortAsc</code>), or unsorted if no defaults are set. See <a href="/docs/api#datatablehandle-ref">DataTableHandle</a>.'],
-    ]}
-  />
+  <PropsTable feature="sorting" columns={['prop', 'type', 'default', 'description']} propHeader="Prop / method" />
 
   <p>
     See it combined with other features in the <a href="/docs/recipes/server-side">Server-side sort, page & filter</a> recipe
diff --git a/apps/docs/src/pages/docs/themes.astro b/apps/docs/src/pages/docs/themes.astro
index 4e280f5f..8e1d982f 100644
--- a/apps/docs/src/pages/docs/themes.astro
+++ b/apps/docs/src/pages/docs/themes.astro
@@ -5,6 +5,7 @@ import CodeBlock from '../../components/CodeBlock.astro';
 import ThemesDemo from '../../components/demos/ThemesDemo.tsx';
 import ColumnSeparatorsDemo from '../../components/demos/ColumnSeparatorsDemo.tsx';
 import DocsTable from '../../components/DocsTable.astro';
+import PropsTable from '../../components/PropsTable.astro';
 ---
 
 <DocsLayout title="Themes & Color Mode | react-data-table-component">
@@ -366,16 +367,8 @@ MyCheckbox.displayName = 'MyCheckbox';
 
   <h2>Prop reference</h2>
 
-  <DocsTable
-    headers={['Prop', 'Type', 'Default', 'Description']}
-    rows={[
-      ['<code>theme</code>', '<code>string | Theme | Record&lt;string, string&gt;</code>', '<code>"default"</code>', 'Named built-in theme, a <code>Theme</code> object from <code>createTheme(overrides, inherit)</code>, or a raw CSS variable map (<code>&#123; \'--rdt-color-bg\': \'#000\', ... &#125;</code>).'],
-      ['<code>colorMode</code>', '<code>"light" | "dark" | "system"</code>', '<code>"system"</code>', 'Controls when the theme\'s <code>darkMode</code> overrides are applied. <code>"system"</code> follows <code>localStorage</code>, the <code>html.dark</code> class, then <code>prefers-color-scheme</code>.'],
-      ['<code>selectableRowsComponent</code>', '<code>React.ComponentType&lt;InputHTMLAttributes&gt; | "input"</code>', '<code>"input"</code>', 'Custom checkbox component. Must accept standard input props and forward its ref to an <code>&lt;input&gt;</code> element so DataTable can set <code>indeterminate</code>.'],
-      ['<code>selectableRowsComponentProps</code>', '<code>Record&lt;string, unknown&gt;</code>', '-', 'Extra props forwarded to every instance of the custom checkbox component.'],
-      ['<code>headerSeparator</code>', '<code>boolean | "full"</code>', 'theme default or <code>true</code>', 'Line below the header row. <code>true</code> = subtle inset line. <code>"full"</code> = full-height divider. <code>false</code> = none. Overrides the theme\'s <code>headerSeparator</code> setting.'],
-      ['<code>columnSeparator</code>', '<code>boolean | "full"</code>', 'theme default or <code>false</code>', 'Vertical lines between body row cells. <code>true</code> = subtle inset. <code>"full"</code> = full-height. <code>false</code> = none. Overrides the theme\'s <code>columnSeparator</code> setting.'],
-      ['<code>customStyles</code>', '<code>TableStyles</code>', '-', 'Fine-grained style overrides per slot (rows, cells, header, pagination, etc.). Applied on top of the active theme. See the <a href="/docs/custom-styles">Custom Styles</a> page.'],
-    ]}
+  <PropsTable
+    only={['theme', 'colorMode', 'selectableRowsComponent', 'selectableRowsComponentProps', 'headerSeparator', 'columnSeparator', 'customStyles']}
+    columns={['prop', 'type', 'default', 'description']}
   />
 </DocsLayout>
diff --git a/apps/docs/src/pages/index.astro b/apps/docs/src/pages/index.astro
index 3f04e6cf..c1e0690d 100644
--- a/apps/docs/src/pages/index.astro
+++ b/apps/docs/src/pages/index.astro
@@ -2,6 +2,7 @@
 import { Code } from 'astro:components';
 import Layout from '../layouts/Layout.astro';
 import LiveDemo from '../components/LiveDemo.tsx';
+import { backers } from '../data/backers';
 
 const [npmRes, ghRes] = await Promise.allSettled([
   fetch('https://api.npmjs.org/downloads/point/last-week/react-data-table-component'),
@@ -275,16 +276,33 @@ export default function App() {
 			fixes and keeps pace with the React ecosystem.
 		</p>
 
-		<!-- First sponsor slot, add more logos as sponsors sign on -->
+		<!-- Logo slot, add more logos as Bronze+ sponsors sign on -->
 		<div class="flex flex-wrap items-center justify-center gap-6 mb-8">
 			<a
 				href="/support"
 				class="flex items-center justify-center gap-2 h-16 px-6 border-2 border-dashed border-gray-200 rounded-xl text-sm text-gray-400 hover:border-brand-300 hover:text-brand-500 transition-colors"
 			>
-				<span class="text-lg">♡</span> Be the first to sponsor
+				<span class="text-lg">♡</span> Be the first logo sponsor
 			</a>
 		</div>
 
+		{backers.length > 0 && (
+			<p class="text-sm text-gray-500 mb-8">
+				Thank you to our backers for their recurring support:{' '}
+				{backers.map(({ name, url }, i) => (
+					<>
+						{i > 0 && ', '}
+						{url ? (
+							<a href={url} target="_blank" rel="noopener noreferrer" class="text-brand-600 hover:text-brand-700 font-medium">{name}</a>
+						) : (
+							<span class="text-gray-700 font-medium">{name}</span>
+						)}
+					</>
+				))}
+				. <a href="/support#backers" class="text-brand-600 hover:text-brand-700 font-medium">See all →</a>
+			</p>
+		)}
+
 		<div class="flex items-center justify-center gap-4">
 			<a
 				href="/support"
diff --git a/apps/docs/src/pages/support.astro b/apps/docs/src/pages/support.astro
index 4d3b2b84..5b460a1a 100644
--- a/apps/docs/src/pages/support.astro
+++ b/apps/docs/src/pages/support.astro
@@ -1,16 +1,13 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import { backers } from '../data/backers';
 
 const GH_SPONSORS = 'https://github.com/sponsors/jbetancur';
 const OC_BASE = 'https://opencollective.com/react-data-table-component';
-// TODO: replace with the exact referral URL from Tidelift's "Promote the Tidelift Subscription" marketing task.
-const TIDELIFT_URL =
-  'https://tidelift.com/subscription/pkg/npm-react-data-table-component?utm_source=npm-react-data-table-component&utm_medium=referral&utm_campaign=docs';
 
-// Backer tier ($20/mo) and above. Add sponsors here as they sign on.
-const backers: { name: string; url?: string }[] = [
-  { name: 'Rich Tillman', url: 'https://opencollective.com/rich-tillman' },
-];
+const npmRes = await fetch('https://api.npmjs.org/downloads/point/last-week/react-data-table-component').catch(() => null);
+const weeklyDownloads: number = npmRes?.ok ? (await npmRes.json()).downloads : 215000;
+const fmt = (n: number) => (n >= 1000 ? `${Math.round(n / 1000)}k` : String(n));
 ---
 
 <Layout
@@ -21,21 +18,21 @@ const backers: { name: string; url?: string }[] = [
   <section class="max-w-4xl mx-auto px-6 pt-20 pb-12 text-center">
     <h1 class="text-4xl font-bold tracking-tight text-gray-900">Support &amp; Sponsorship</h1>
     <p class="mt-4 text-lg text-gray-500 max-w-xl mx-auto">
-      Actively maintained since 2018 and downloaded ~215k times a week. Your sponsorship funds bug fixes,
+      Actively maintained since 2018 and downloaded ~{fmt(weeklyDownloads)} times a week. Your sponsorship funds bug fixes,
       new features, and keeps pace with the React ecosystem.
     </p>
   </section>
 
   <!-- Sponsor tiers -->
   <section class="bg-gray-50 py-16">
-    <div class="max-w-4xl mx-auto px-6">
+    <div class="max-w-6xl mx-auto px-6">
       <h2 class="text-2xl font-bold text-gray-900 text-center mb-3">Sponsorship Tiers</h2>
       <p class="text-sm text-gray-500 text-center max-w-xl mx-auto mb-10">
-        Bronze and above is a support plan first, visibility second: your issues jump the queue of a
-        library your product already depends on.
+        Bronze buys visibility. Silver and Gold are support plans: your issues jump the queue of a
+        library your product already depends on, with written commitments at Gold.
       </p>
 
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5">
         {[
           {
             name: '☕ Supporter',
@@ -55,25 +52,25 @@ const backers: { name: string; url?: string }[] = [
             name: '🥉 Bronze',
             price: '$100',
             period: '/mo',
-            perks: ['Priority issue triage', 'Small logo on docs site footer', 'Small logo + link in README'],
+            perks: ['Small logo + link in README', 'Small logo on docs site footer', 'Sponsor credit in release notes'],
             ocSlug: 'bronze-103592',
           },
           {
             name: '🥈 Silver',
             price: '$200',
             period: '/mo',
-            perks: ['Priority issue triage', 'Medium logo on docs site sidebar', 'Logo + link in README'],
+            perks: ['Everything in Bronze', 'Medium logo on docs site sidebar', 'Priority issue queue: front of the backlog', 'First response within 2 business days'],
             ocSlug: 'silver-103593',
           },
           {
             name: '🥇 Gold',
             price: '$500',
             period: '/mo',
-            perks: ['Priority issue triage', 'Direct line to the maintainer', 'Large logo: hero spot on reactdatatable.com', 'Top placement in README', 'Limited to 3 sponsors'],
+            perks: ['Everything in Silver', 'Large logo: hero spot on reactdatatable.com', 'Top placement in README', '12-month patch window for the previous major', 'Security advisories before public disclosure', 'One compliance questionnaire per year', 'Direct email channel (async, business hours)', 'Limited to 3 sponsors'],
             ocSlug: 'gold-103594',
           },
         ].map(({ name, price, period, perks, ocSlug }) => (
-          <div class="bg-white border border-gray-200 rounded-xl p-5 flex flex-col">
+          <div class="bg-white border border-gray-200 rounded-xl p-6 flex flex-col">
             <div class="font-semibold text-gray-900">{name}</div>
             <div class="mt-1 text-2xl font-bold text-gray-900">
               {price}<span class="text-sm font-normal text-gray-400">{period}</span>
@@ -110,8 +107,12 @@ const backers: { name: string; url?: string }[] = [
         ))}
       </div>
 
+      <p class="text-center text-xs text-gray-400 mt-6">
+        These are honest, written commitments from a solo maintainer: async and business hours. No fake 24/7 SLA.
+      </p>
+
       <!-- One-time -->
-      <div class="mt-8 bg-white border border-gray-200 rounded-xl p-6 text-center">
+      <div class="mt-8 max-w-xl mx-auto bg-white border border-gray-200 rounded-xl p-6 text-center">
         <h3 class="font-semibold text-gray-900 mb-1">One-time donation</h3>
         <p class="text-sm text-gray-500 mb-4">No commitment. Every bit helps.</p>
         <div class="flex flex-wrap items-center justify-center gap-2">
@@ -141,7 +142,7 @@ const backers: { name: string; url?: string }[] = [
 
   <!-- Backers -->
   <section class="max-w-4xl mx-auto px-6 py-16">
-    <h2 class="text-2xl font-bold text-gray-900 text-center mb-2">Backers</h2>
+    <h2 id="backers" class="text-2xl font-bold text-gray-900 text-center mb-2">Backers</h2>
     <p class="text-sm text-gray-500 text-center mb-8">
       Thank you to everyone sponsoring at the Backer tier and above.
     </p>
@@ -164,22 +165,20 @@ const backers: { name: string; url?: string }[] = [
     )}
   </section>
 
-  <!-- Enterprise support (Tidelift) -->
+  <!-- Enterprise support -->
   <section class="max-w-4xl mx-auto px-6 py-16">
-    <div class="bg-gray-900 rounded-2xl px-8 py-10 text-center">
+    <div class="bg-gray-900 rounded-2xl px-8 py-10 text-center" data-contact data-user="sponsors" data-domain="reactdatatable.com">
       <h2 class="text-2xl font-bold text-white mb-3">Enterprise support</h2>
       <p class="text-sm text-gray-300 max-w-2xl mx-auto mb-6">
-        Need commercial support, security guarantees, and maintenance covered by an agreement? react-data-table-component
-        is available as part of the Tidelift Subscription, so your team gets enterprise-grade assurances while the
-        maintainer gets paid to keep it healthy.
+        Need commercial support, an SLA, or help with a major version upgrade? I offer direct consulting and
+        priority support arrangements for teams that depend on react-data-table-component in production.
       </p>
       <a
-        href={TIDELIFT_URL}
-        target="_blank"
-        rel="noopener noreferrer"
+        data-contact-link
+        href="#"
         class="inline-block bg-white text-gray-900 text-sm font-medium px-5 py-2.5 rounded-lg hover:bg-gray-100 transition-colors"
       >
-        Learn about Tidelift →
+        Get in touch →
       </a>
     </div>
   </section>
diff --git a/package-lock.json b/package-lock.json
index bc0f9cc9..4e14f0c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,10 +15,6 @@
         {
           "type": "opencollective",
           "url": "https://opencollective.com/react-data-table-component"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/react-data-table-component"
         }
       ],
       "license": "Apache-2.0",
diff --git a/package.json b/package.json
index 8c430c43..6544148d 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,6 @@
     {
       "type": "opencollective",
       "url": "https://opencollective.com/react-data-table-component"
-    },
-    {
-      "type": "tidelift",
-      "url": "https://tidelift.com/funding/github/npm/react-data-table-component"
     }
   ],
   "main": "dist/index.js",