feat: add comparisons page and improve SEO with structured data (jbetancur#1330)

Author: jbetancur

apps/docs/public/llms.txt

@@ -0,0 +1,85 @@
+# react-data-table-component
+
+> A fast, accessible React data table component with sorting, pagination, row selection, expandable rows, column filtering, and theming built in. Zero runtime dependencies, Apache-2.0 licensed, free with no paid tier. A working table takes about 10 lines of code.
+
+Install: `npm install react-data-table-component`
+
+Minimal usage:
+
+```tsx
+import DataTable from 'react-data-table-component';
+
+const columns = [
+  { name: 'Name', selector: row => row.name, sortable: true },
+  { name: 'Role', selector: row => row.role },
+];
+
+<DataTable columns={columns} data={data} pagination />
+```
+
+## Getting started
+
+- [Getting Started](https://reactdatatable.com/docs/getting-started): install and render a first table
+- [Installation](https://reactdatatable.com/docs/installation): package managers, CSS import, framework setup
+- [API Reference](https://reactdatatable.com/docs/api): all props and types
+- [Migration Guide](https://reactdatatable.com/docs/migration): upgrading from v7 to v8
+
+## Columns
+
+- [Columns Overview](https://reactdatatable.com/docs/columns): defining columns, selectors, formatting
+- [Cell Rendering](https://reactdatatable.com/docs/cells): custom cell components
+- [Column Groups](https://reactdatatable.com/docs/column-groups): spanning headers across columns
+- [Column Visibility](https://reactdatatable.com/docs/column-visibility): show and hide columns
+- [Column Reordering](https://reactdatatable.com/docs/column-reorder): drag to reorder
+- [Column Resizing](https://reactdatatable.com/docs/resizable): drag column edges, persist widths
+- [Column Pinning](https://reactdatatable.com/docs/column-pinning): pin columns left or right
+- [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
+
+## Rows
+
+- [Row Selection](https://reactdatatable.com/docs/selection): checkbox multi-select, select all, controlled selection
+- [Expandable Rows](https://reactdatatable.com/docs/expandable): detail panels with any component
+- [Row Interactions](https://reactdatatable.com/docs/row-interactions): click, double-click, hover handlers
+- [Row Pinning](https://reactdatatable.com/docs/row-pinning): pin rows to top
+- [Pagination](https://reactdatatable.com/docs/pagination): built-in and custom pagination, server-side
+- [Conditional Styles](https://reactdatatable.com/docs/conditional-styles): style rows and cells by data
+- [Fixed Header](https://reactdatatable.com/docs/fixed-header): sticky header with scrollable body
+- [Footer](https://reactdatatable.com/docs/footer): summary and pagination footers
+- [Loading State](https://reactdatatable.com/docs/loading): progress and skeleton states
+- [Inline Editing](https://reactdatatable.com/docs/inline-editing): edit cells in place
+
+## Styling
+
+- [Themes](https://reactdatatable.com/docs/themes): 5 built-in themes with dark mode, createTheme()
+- [Custom Styles](https://reactdatatable.com/docs/custom-styles): style every table region
+
+## Advanced
+
+- [TypeScript](https://reactdatatable.com/docs/typescript): generic column and row typing
+- [SSR](https://reactdatatable.com/docs/ssr): Next.js App Router, Remix, Astro
+- [Performance](https://reactdatatable.com/docs/performance): large datasets, memoization
+- [Headless Hooks](https://reactdatatable.com/docs/headless): use the logic without the UI
+- [Accessibility](https://reactdatatable.com/docs/accessibility): keyboard and screen reader support
+- [Localization](https://reactdatatable.com/docs/localization): translated labels and locales
+- [RTL Support](https://reactdatatable.com/docs/rtl): right-to-left layouts
+- [Mobile](https://reactdatatable.com/docs/mobile): responsive columns and layouts
+- [Export](https://reactdatatable.com/docs/export): CSV and JSON export
+- [Animations](https://reactdatatable.com/docs/animations): row animations
+
+## Recipes
+
+- [Server-side sort & filter](https://reactdatatable.com/docs/recipes/server-side)
+- [Approval workflow with bulk actions](https://reactdatatable.com/docs/recipes/bulk-action-toolbar)
+- [URL-synced table state](https://reactdatatable.com/docs/recipes/editable-grid)
+- [Dashboard drill-down](https://reactdatatable.com/docs/recipes/master-detail)
+- [Audit log viewer](https://reactdatatable.com/docs/recipes/sticky-footer)
+- [Persist column widths](https://reactdatatable.com/docs/recipes/persist-column-widths)
+- [Inline row actions](https://reactdatatable.com/docs/recipes/row-grouping)
+
+## Optional
+
+- [Changelog](https://reactdatatable.com/docs/changelog): release history
+- [Support & Sponsorship](https://reactdatatable.com/support): sponsor tiers, enterprise support via Tidelift
+- [GitHub repository](https://github.com/jbetancur/react-data-table-component)
+- [npm package](https://www.npmjs.com/package/react-data-table-component)

apps/docs/public/og-image.png

@@ -16,6 +16,7 @@ const nav = [
     links: [
       { label: 'Getting Started', href: '/docs/getting-started' },
       { label: 'Installation', href: '/docs/installation' },
+      { label: 'Comparisons', href: '/docs/comparisons' },
       { label: 'Changelog', href: '/docs/changelog' },
     ],
   },

apps/docs/src/layouts/DocsLayout.astro

@@ -10,6 +10,24 @@ const {
   title = 'react-data-table-component',
   description = 'A fast, feature-rich React data table. Working table in 10 lines.',
 } = Astro.props;
+
+const jsonLd = JSON.stringify({
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'react-data-table-component',
+  description:
+    'A fast, accessible React data table component with sorting, pagination, row selection, expandable rows, column filtering, and theming built in. Zero runtime dependencies.',
+  url: 'https://reactdatatable.com',
+  applicationCategory: 'DeveloperApplication',
+  operatingSystem: 'Any',
+  license: 'https://www.apache.org/licenses/LICENSE-2.0',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+  softwareHelp: { '@type': 'CreativeWork', url: 'https://reactdatatable.com/docs' },
+  downloadUrl: 'https://www.npmjs.com/package/react-data-table-component',
+  codeRepository: 'https://github.com/jbetancur/react-data-table-component',
+  programmingLanguage: 'TypeScript',
+  author: { '@type': 'Person', name: 'John Betancur', url: 'https://github.com/jbetancur' },
+});
 ---
 
 <!doctype html>
@@ -30,6 +48,7 @@ const {
     <meta name="twitter:image" content={new URL('/og-image.png', Astro.url).href} />
     <link rel="canonical" href={Astro.url.href} />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <script is:inline type="application/ld+json" set:html={jsonLd} />
     <title>{title}</title>
   </head>
   <body class="min-h-screen flex flex-col bg-white text-gray-900">

apps/docs/src/layouts/Layout.astro

@@ -0,0 +1,88 @@
+---
+layout: '../../layouts/DocsLayout.astro'
+title: 'Comparisons: TanStack Table, AG Grid, MUI X | react-data-table-component'
+description: 'How react-data-table-component compares to TanStack Table, AG Grid Community, and MUI X Data Grid: setup effort, bundle size, features, and pricing.'
+---
+
+# How react-data-table-component compares
+
+All four libraries on this page are solid, actively maintained choices. They differ in how much you assemble yourself, what ships free, and what ecosystem they assume. This page gives you the honest picture so you can pick the right tool, even if it is not this one.
+
+The short version: react-data-table-component is a **full component**. You pass `columns` and `data` and get a styled, sortable, paginated table with selection, expandable rows, and theming. Nothing is gated behind a paid tier.
+
+---
+
+## react-data-table-component vs TanStack Table
+
+TanStack Table is **headless**: it manages table state (sorting, pagination, selection, expansion) and you write every piece of markup and CSS yourself. That is its superpower, total render control, and its cost, you build the UI.
+
+Choose **TanStack Table** when:
+
+- You need pixel-level control over markup and styling
+- Your design system dictates exactly how tables must render
+- Bundle size is critical (~15 KB min+gzip)
+
+Choose **react-data-table-component** when:
+
+- You want a working, styled table without building the UI layer
+- Sorting, pagination, and selection should come with their controls included
+- You want built-in themes and dark mode instead of writing CSS
+
+## react-data-table-component vs AG Grid
+
+AG Grid Community is a full-featured data grid with sorting, pagination, selection, and built-in themes included free. It is the heavyweight option: ~338 KB min+gzip, with advanced features such as master/detail (expandable rows), pivoting, and the server-side row model reserved for the commercial AG Grid Enterprise license.
+
+Choose **AG Grid** when:
+
+- You need enterprise grid features: pivoting, row grouping, Excel export, master/detail
+- You are rendering very large datasets and need built-in row virtualization
+- An Enterprise license is within budget for gated features
+
+Choose **react-data-table-component** when:
+
+- You need a table, not a spreadsheet engine
+- Expandable rows should be free, not part of a paid tier
+- A ~35 KB footprint fits your app better than ~338 KB
+
+## react-data-table-component vs MUI X Data Grid
+
+MUI X Data Grid is the natural choice inside a Material UI application. The Community version includes sorting, pagination, and selection, and it inherits your MUI theme. It requires the MUI ecosystem (`@mui/material`, `@mui/system`, Emotion) as peer dependencies, and features such as master/detail panels are part of the paid Pro tier.
+
+Choose **MUI X Data Grid** when:
+
+- Your app is already built on Material UI
+- You want the grid to inherit your existing MUI theme automatically
+- Pro or Premium features fit your budget when you need them
+
+Choose **react-data-table-component** when:
+
+- You are not using Material UI and do not want to adopt it for one component
+- You want zero runtime dependencies
+- Expandable rows and theming should work out of the box, free
+
+---
+
+## Feature comparison
+
+| | TanStack Table | AG Grid Community | MUI X Data Grid | react-data-table-component |
+| --- | --- | --- | --- | --- |
+| Approach | Headless | Full data grid | Full data grid | Full component |
+| Styled table out of the box | You build the UI | ✓ | ✓ | ✓ |
+| Sorting, pagination & selection UI | State only | ✓ | ✓ | ✓ |
+| Expandable row panels | State only | Enterprise tier | Pro tier | ✓ |
+| Dark mode & themes | Bring your own | ✓ built-in | Via MUI theme | 5 built-in |
+| Requires a UI framework | No | No | @mui/material + Emotion | No |
+| Row virtualization | Via TanStack Virtual | ✓ built-in | ✓ built-in | ✗ (paginate instead) |
+| Size (min+gzip) | ~15 KB | ~338 KB | ~117 KB + MUI | ~35 KB |
+| Paid tiers | None | Enterprise | Pro & Premium | None |
+
+Sizes measured via Bundlephobia, July 2026 (TanStack v8.21, AG Grid v36, MUI X v9.8).
+
+## Which should you choose?
+
+- **Full render control, smallest bundle:** TanStack Table
+- **Spreadsheet-grade features and virtualized big data:** AG Grid
+- **Already on Material UI:** MUI X Data Grid
+- **A styled, working table in about 10 lines, with nothing to configure and no tier to upgrade to:** react-data-table-component
+
+See [Getting Started](/docs/getting-started) to try it, or the [live demo](/) on the homepage.