Data Table
A free React data table built with Tailwind, featuring sorting, pagination, and a clean responsive layout. Copy-paste it to display structured data in any dashboard or admin panel.
Copy the code
export function DataTable() {
const rows = [['Ava Martin','Pro','$24'],['Liam Chen','Team','$49'],['Noé Roy','Free','$0']]
return (
<table className="w-80 overflow-hidden rounded-2xl border border-white/10 bg-white/5 text-sm text-white">
<thead>
<tr className="text-white/50">
<th className="px-3.5 py-2.5 text-left font-semibold">Name</th>
<th className="px-3.5 py-2.5 text-left font-semibold">Plan</th>
<th className="px-3.5 py-2.5 text-right font-semibold">MRR</th>
</tr>
</thead>
<tbody>
{rows.map(r => (
<tr key={r[0]} className="border-t border-white/5">
<td className="px-3.5 py-2.5">{r[0]}</td>
<td className="px-3.5 py-2.5 text-white/70">{r[1]}</td>
<td className="px-3.5 py-2.5 text-right font-bold">{r[2]}</td>
</tr>
))}
</tbody>
</table>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the data table
This data table is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.