[pull] master from jbetancur:master

README.md

@@ -42,11 +42,11 @@ The documentation contains information about installation, usage and contributio
 
 # Supporting React Data Table Component
 
-React Data Table Component is maintained by one person and downloaded ~200k 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 ~215k 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 ~200k 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 ~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.
 
 | Tier | Price/month | Perk |
 | --- | --- | --- |

apps/docs/astro.config.mjs

@@ -1,12 +1,14 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
 import tailwind from '@astrojs/tailwind';
+import sitemap from '@astrojs/sitemap';
 
 export default defineConfig({
+	site: 'https://reactdatatable.com',
 	markdown: {
 		shikiConfig: { theme: 'catppuccin-macchiato' },
 	},
-	integrations: [react(), tailwind({ applyBaseStyles: false })],
+	integrations: [react(), tailwind({ applyBaseStyles: false }), sitemap()],
 	vite: {
 		resolve: {
 			alias: {

apps/docs/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@astrojs/react": "^4.2.0",
+    "@astrojs/sitemap": "^3.7.2",
     "@astrojs/tailwind": "^5.1.4",
     "@shikijs/langs": "^4.1.0",
     "astro": "^5.7.0",

apps/docs/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://reactdatatable.com/sitemap-index.xml

apps/docs/src/components/CodeBlock.astro

@@ -13,7 +13,7 @@ const { code, lang = 'tsx' } = Astro.props;
 <div class="not-prose my-6 rounded-xl overflow-hidden text-sm leading-relaxed relative group">
   <Code code={code} lang={lang} theme="catppuccin-macchiato" defaultColor={false} />
   <button
-    class="copy-btn absolute top-3 right-3 flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-white/10 text-gray-300 hover:bg-white/20 hover:text-white opacity-0 group-hover:opacity-100 transition-all"
+    class="copy-btn absolute top-[24px] right-4 flex items-center p-1.5 rounded-md bg-white/10 text-gray-300 hover:bg-white/20 hover:text-white opacity-0 group-hover:opacity-100 transition-all"
     aria-label="Copy code"
     data-code={code}
   >
@@ -24,7 +24,6 @@ const { code, lang = 'tsx' } = Astro.props;
     <svg class="icon-check hidden" width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <polyline points="2 8 6 12 14 4"/>
     </svg>
-    <span class="label">Copy</span>
   </button>
 </div>
 
@@ -35,14 +34,11 @@ const { code, lang = 'tsx' } = Astro.props;
       await navigator.clipboard.writeText(code);
       const iconCopy = btn.querySelector<SVGElement>('.icon-copy');
       const iconCheck = btn.querySelector<SVGElement>('.icon-check');
-      const label = btn.querySelector<HTMLSpanElement>('.label');
       iconCopy?.classList.add('hidden');
       iconCheck?.classList.remove('hidden');
-      if (label) label.textContent = 'Copied!';
       setTimeout(() => {
         iconCopy?.classList.remove('hidden');
         iconCheck?.classList.add('hidden');
-        if (label) label.textContent = 'Copy';
       }, 2000);
     });
   });

apps/docs/src/components/LiveDemo.tsx

@@ -90,9 +90,21 @@ const columns = [
 	},
 ];
 
+function ExpandedRow({ data }: { data: Row }) {
+	return (
+		<div className="px-6 py-4 bg-gray-50 border-t border-gray-100 text-sm text-gray-600 grid grid-cols-2 gap-x-8 gap-y-1.5">
+			<div><span className="font-medium text-gray-700">Department:</span> {data.department}</div>
+			<div><span className="font-medium text-gray-700">Status:</span> {data.status}</div>
+			<div><span className="font-medium text-gray-700">Salary:</span> ${data.salary.toLocaleString()}</div>
+			<div><span className="font-medium text-gray-700">Role:</span> {data.role}</div>
+		</div>
+	);
+}
+
 export default function LiveDemo() {
 	const [theme, setTheme] = useState<Theme>('default');
 	const [selectable, setSelectable] = useState(true);
+	const [expandable, setExpandable] = useState(false);
 	const [striped, setStriped] = useState(false);
 	const [animateRows, setAnimateRows] = useState(true);
 	const [selectedCount, setSelectedCount] = useState(0);
@@ -108,10 +120,16 @@ export default function LiveDemo() {
 				: 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
 		}`;
 
+	const toggleClass = (active: boolean) =>
+		`relative inline-flex h-4 w-7 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${
+			active ? 'bg-brand-600' : 'bg-gray-200'
+		}`;
+
 	return (
 		<div className="rounded-xl border border-gray-200 overflow-hidden shadow-sm">
 			{/* Toolbar */}
-			<div className="flex flex-col sm:flex-row sm:items-center gap-2 px-4 py-3 bg-gray-50 border-b border-gray-200 text-sm">
+			<div className="flex flex-col gap-3 px-4 py-3 bg-gray-50 border-b border-gray-200 text-sm">
+				{/* Theme row */}
 				<div className="flex items-center gap-2 flex-wrap">
 					<span className="text-gray-500 font-medium shrink-0">Theme</span>
 					{THEMES.map(t => (
@@ -121,34 +139,29 @@ export default function LiveDemo() {
 					))}
 				</div>
 
-				<div className="flex items-center gap-3 sm:ml-auto flex-wrap">
-					<label className="flex items-center gap-1.5 text-gray-500 cursor-pointer select-none">
-						<input
-							type="checkbox"
-							checked={selectable}
-							onChange={e => setSelectable(e.target.checked)}
-							className="rounded"
-						/>
-						Selectable
-					</label>
-
-					<label className="flex items-center gap-1.5 text-gray-500 cursor-pointer select-none">
-						<input type="checkbox" checked={striped} onChange={e => setStriped(e.target.checked)} className="rounded" />
-						Striped
-					</label>
-
-					<label className="flex items-center gap-1.5 text-gray-500 cursor-pointer select-none">
-						<input
-							type="checkbox"
-							checked={animateRows}
-							onChange={e => setAnimateRows(e.target.checked)}
-							className="rounded"
-						/>
-						Animate
-					</label>
+				{/* Toggles row */}
+				<div className="flex items-center gap-4 flex-wrap">
+					{([
+						['Selectable', selectable, setSelectable],
+						['Expandable', expandable, setExpandable],
+						['Striped', striped, setStriped],
+						['Animate', animateRows, setAnimateRows],
+					] as [string, boolean, (v: boolean) => void][]).map(([label, value, setter]) => (
+						<label key={label} className="flex items-center gap-1.5 text-gray-500 cursor-pointer select-none">
+							<button
+								role="switch"
+								aria-checked={value}
+								onClick={() => setter(!value)}
+								className={toggleClass(value)}
+							>
+								<span className={`pointer-events-none block h-3 w-3 rounded-full bg-white shadow transition-transform ${value ? 'translate-x-3' : 'translate-x-0'}`} />
+							</button>
+							{label}
+						</label>
+					))}
 
 					{selectable && selectedCount > 0 && (
-						<span className="text-brand-600 font-medium shrink-0">{selectedCount} selected</span>
+						<span className="text-brand-600 font-medium shrink-0 ml-auto">{selectedCount} selected</span>
 					)}
 				</div>
 			</div>
@@ -163,6 +176,8 @@ export default function LiveDemo() {
 				highlightOnHover
 				selectableRows={selectable}
 				onSelectedRowsChange={handleSelectedChange}
+				expandableRows={expandable}
+				expandableRowsComponent={ExpandedRow}
 				animateRows={animateRows}
 				resizable
 				pagination