feat: update sponsorship details and add security policy documentation (jbetancur#1329)

Author: jbetancur

.github/FUNDING.yml

@@ -4,7 +4,7 @@ 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: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+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

CLAUDE.md

@@ -95,6 +95,33 @@ Rules:
 
 ---
 
+## Sponsors and backers
+
+Tier definitions must stay in sync across three places:
+
+1. `README.md` tier table (canonical wording for perks and pricing).
+2. `apps/docs/src/pages/support.astro` tier cards, including the `ocSlug` Open Collective checkout links.
+3. The GitHub Sponsors and Open Collective dashboards. These are manual and John-only: never assume they changed, and remind John to update them whenever tiers change.
+
+Open Collective slugs survive tier renames, so they may not match the tier name (Supporter uses `backer-14044`, Backer uses `sponsor-14045`). Verify live tiers by fetching `https://opencollective.com/react-data-table-component`.
+
+**Adding a backer (Backer tier, $20/mo recurring, and above):**
+
+- Add to the `backers` array at the top of `support.astro` and to the `## Backers` list in `README.md`.
+- Recurring sponsors only. One-time donors never go in these lists, regardless of amount.
+- Link only their Open Collective or GitHub profile, verified against the collective's contributor list. Never guess personal sites or emails.
+
+**Adding a logo sponsor:**
+
+- Bronze ($100): small logo in the docs footer (`apps/docs/src/layouts/Layout.astro`) + small logo in README.
+- Silver ($200): medium logo in the docs sidebar (`apps/docs/src/layouts/DocsLayout.astro`) + logo in README.
+- Gold ($500): homepage sponsors section (`apps/docs/src/pages/index.astro`, replace the "Be the first to sponsor" placeholder) + top placement in README. Limited to 3.
+- Logos are curated by hand: get the asset and target URL from John, never source logos yourself.
+
+The contact email is `sponsors@reactdatatable.com` (Cloudflare Email Routing alias). It must never appear in static HTML; on the site it is assembled client-side from `data-user`/`data-domain` attributes (see the contact block in `support.astro`).
+
+---
+
 ## Release process
 
 Releases are triggered manually via the **Release** GitHub Actions workflow (`workflow_dispatch`). Before triggering:

README.md

@@ -51,14 +51,22 @@ Sponsoring puts your company logo in front of ~215k developers a week: in the RE
 | Tier | Price/month | Perk |
 | --- | --- | --- |
 | ☕ Supporter | $5 | Your name in the README supporters list |
-| 🎗 Backer | $20 | Name + link in README |
+| 🎗 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 + large logo in README + hero spot on reactdatatable.com. Limited to 3. |
+| 🥇 Gold | $500 | Priority issue triage + direct maintainer line + large logo in README + hero spot on reactdatatable.com. Limited to 3. |
 
 [![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 help?
 
 Open a [GitHub issue](https://github.com/jbetancur/react-data-table-component/issues). Priority support is available for teams that [sponsor the project](https://github.com/sponsors/jbetancur).

SECURITY.md

@@ -0,0 +1,23 @@
+# Security Policy
+
+## Supported versions
+
+| Version | Supported |
+| ------- | --------- |
+| 8.x     | Yes       |
+| < 8.0   | No        |
+
+## Reporting a vulnerability
+
+Please do not open a public issue for security reports.
+
+Report vulnerabilities privately using one of:
+
+1. **GitHub private vulnerability reporting** (preferred): use the [Report a vulnerability](https://github.com/jbetancur/react-data-table-component/security/advisories/new) form on this repository.
+2. **Email**: <security@reactdatatable.com>
+
+You will receive an acknowledgment within 5 business days. Once the report is validated, a fix will be prioritized and released as a patch to the current major version, followed by a coordinated disclosure through a GitHub Security Advisory crediting the reporter.
+
+## Scope
+
+react-data-table-component is a client-side UI library. Reports most likely to qualify: XSS via table data or props, prototype pollution, and supply-chain issues in the published npm package. The library has zero runtime dependencies, which keeps the supply-chain surface small.

apps/docs/src/layouts/DocsLayout.astro

@@ -135,9 +135,7 @@ const nextLink = currentIndex < allLinks.length - 1 ? allLinks[currentIndex + 1]
           </select>
         </div>
         <a
-          href="https://github.com/sponsors/jbetancur"
-          target="_blank"
-          rel="noopener noreferrer"
+          href="/support"
           class="block rounded-lg border border-pink-100 bg-pink-50 px-3 py-2.5 hover:border-pink-200 hover:bg-pink-100 transition-colors"
         >
           <div class="flex items-center gap-1.5 text-xs font-semibold text-pink-600">

apps/docs/src/layouts/Layout.astro

@@ -61,9 +61,7 @@ const {
             GitHub
           </a>
           <a
-            href="https://github.com/sponsors/jbetancur"
-            target="_blank"
-            rel="noopener noreferrer"
+            href="/support"
             class="flex items-center gap-1 hover:text-pink-500 transition-colors"
             aria-label="Sponsor this project"
           >
@@ -124,7 +122,7 @@ const {
         <a href="/docs/api" class="block px-2 py-2 rounded-md text-gray-700 hover:bg-gray-50 hover:text-gray-900">API</a>
         <a href="/support" class="block px-2 py-2 rounded-md text-gray-700 hover:bg-gray-50 hover:text-gray-900">Support</a>
         <a href="https://github.com/jbetancur/react-data-table-component" target="_blank" rel="noopener noreferrer" class="block px-2 py-2 rounded-md text-gray-700 hover:bg-gray-50 hover:text-gray-900">GitHub ↗</a>
-        <a href="https://github.com/sponsors/jbetancur" target="_blank" rel="noopener noreferrer" class="block px-2 py-2 rounded-md text-pink-500 hover:bg-pink-50">♥ Sponsor</a>
+        <a href="/support" class="block px-2 py-2 rounded-md text-pink-500 hover:bg-pink-50">♥ Sponsor</a>
         <div class="pt-2">
           <a href="/docs/getting-started" class="block w-full text-center bg-brand-600 text-white px-4 py-2 rounded-md hover:bg-brand-700 font-medium">Get started →</a>
         </div>

apps/docs/src/pages/index.astro

@@ -42,13 +42,13 @@ function fmt(n: number): string {
 		</div>
 
 		<h1 class="text-5xl font-bold tracking-tight text-gray-900 max-w-3xl mx-auto leading-tight">
-			A data table that just<br />
-			<span class="text-brand-600">works out of the box</span>
+			A working data table<br />
+			<span class="text-brand-600">in 10 lines of React</span>
 		</h1>
 
 		<p class="mt-5 text-lg text-gray-500 max-w-xl mx-auto">
-			Sorting, pagination, row selection, theming, expandable rows, all included. No boilerplate. No styling work. No
-			$999 license.
+			Sorting, pagination, row selection, theming, and expandable rows, all included. No boilerplate. No CSS
+			file. No paid tier.
 		</p>
 
 		<div class="mt-8 flex items-center justify-center gap-4">
@@ -215,7 +215,11 @@ export default function App() {
 	<!-- Comparison table -->
 	<section class="bg-gray-50 py-20">
 		<div class="max-w-4xl mx-auto px-6">
-			<h2 class="text-2xl font-bold text-center text-gray-900 mb-10">How it compares</h2>
+			<h2 class="text-2xl font-bold text-center text-gray-900 mb-3">How it compares</h2>
+			<p class="text-center text-sm text-gray-500 max-w-2xl mx-auto mb-10">
+				All four are solid choices. The difference is how much you assemble yourself. This library optimizes
+				for a styled, working table with the least code, not for the largest feature surface.
+			</p>
 			<div class="overflow-x-auto">
 				<table
 					class="w-full text-sm border-collapse bg-white rounded-xl overflow-hidden shadow-sm border border-gray-200"
@@ -225,31 +229,40 @@ export default function App() {
 							<th class="text-left px-4 py-3 text-gray-600 font-medium"></th>
 							<th class="text-center px-4 py-3 text-gray-600 font-medium">TanStack Table</th>
 							<th class="text-center px-4 py-3 text-gray-600 font-medium">AG Grid Community</th>
+							<th class="text-center px-4 py-3 text-gray-600 font-medium">MUI X Data Grid</th>
 							<th class="text-center px-4 py-3 text-brand-700 font-semibold bg-brand-50">This library</th>
 						</tr>
 					</thead>
 					<tbody>
 						{
 							[
-								['Setup effort', 'High (headless)', 'Medium', 'Low'],
-								['Styling required', 'Yes', 'No', 'No'],
-								['Built-in pagination', 'DIY', '✓', '✓'],
-								['Built-in sorting', 'DIY', '✓', '✓'],
-								['Row selection', 'DIY', '✓', '✓'],
-								['Expandable rows', 'DIY', '✗', '✓'],
-								['Zero peer deps', '✓', '✗', '✓'],
-								['Price', 'Free', 'Free', 'Free'],
-							].map(([feature, tanstack, ag, rdt], i) => (
+								['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'],
+								['Size (min+gzip)', '~15 KB', '~338 KB', '~117 KB + MUI', '~35 KB'],
+								['Paid tiers', 'None', 'Enterprise', 'Pro & Premium', 'None'],
+							].map(([feature, tanstack, ag, mui, rdt], i) => (
 								<tr class={i % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'}>
 									<td class="px-4 py-2.5 text-gray-700 font-medium">{feature}</td>
 									<td class="px-4 py-2.5 text-center text-gray-500">{tanstack}</td>
 									<td class="px-4 py-2.5 text-center text-gray-500">{ag}</td>
+									<td class="px-4 py-2.5 text-center text-gray-500">{mui}</td>
 									<td class="px-4 py-2.5 text-center text-brand-700 font-medium bg-brand-50/30">{rdt}</td>
 								</tr>
 							))
 						}
 					</tbody>
 				</table>
+				<p class="text-center text-sm text-gray-500 mt-6 max-w-2xl mx-auto">
+					They're all great at what they do. This one's for when you want a styled, sortable,
+					paginated table working today, with nothing to configure and no tier to upgrade to.
+				</p>
+				<p class="text-center text-xs text-gray-400 mt-1">
+					Sizes are min+gzip via Bundlephobia, July 2026 (TanStack v8.21, AG Grid v36, MUI X v9.8).
+				</p>
 			</div>
 		</div>
 	</section>
@@ -258,43 +271,23 @@ export default function App() {
 	<section class="max-w-4xl mx-auto px-6 py-20 text-center">
 		<h2 class="text-xl font-semibold text-gray-900 mb-2">Sponsors</h2>
 		<p class="text-sm text-gray-500 mb-8">
-			Actively maintained since 2018. If your team ships products with it, consider sponsoring — it funds bug
+			Actively maintained since 2018. If your team ships products with it, consider sponsoring. It funds bug
 			fixes and keeps pace with the React ecosystem.
 		</p>
 
-		<!-- Sponsor logo slots — replace with real logos as sponsors sign on -->
-		<div class="flex flex-wrap items-center justify-center gap-6 mb-8 min-h-[64px]">
+		<!-- First sponsor slot, add more logos as sponsors sign on -->
+		<div class="flex flex-wrap items-center justify-center gap-6 mb-8">
 			<a
-				href="https://github.com/sponsors/jbetancur"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="flex items-center justify-center w-40 h-16 border-2 border-dashed border-gray-200 rounded-xl text-xs text-gray-400 hover:border-brand-300 hover:text-brand-500 transition-colors"
-			>
-				Your logo here
-			</a>
-			<a
-				href="https://github.com/sponsors/jbetancur"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="flex items-center justify-center w-40 h-16 border-2 border-dashed border-gray-200 rounded-xl text-xs text-gray-400 hover:border-brand-300 hover:text-brand-500 transition-colors"
-			>
-				Your logo here
-			</a>
-			<a
-				href="https://github.com/sponsors/jbetancur"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="flex items-center justify-center w-40 h-16 border-2 border-dashed border-gray-200 rounded-xl text-xs text-gray-400 hover:border-brand-300 hover:text-brand-500 transition-colors"
+				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"
 			>
-				Your logo here
+				<span class="text-lg">♡</span> Be the first to sponsor
 			</a>
 		</div>
 
 		<div class="flex items-center justify-center gap-4">
 			<a
-				href="https://github.com/sponsors/jbetancur"
-				target="_blank"
-				rel="noopener noreferrer"
+				href="/support"
 				class="bg-brand-600 text-white px-5 py-2 rounded-lg font-medium hover:bg-brand-700 shadow-sm text-sm"
 			>
 				Become a sponsor