Tables
Sortable Data Table
Click headers to sort, striped rows, sticky header.
2,043 downloads
4.9 rating
React + Tailwind
sortablesticky-headerdata
export function DataTable({ columns, rows, sortKey, onSort }) {
return (
<div className="overflow-x-auto rounded-xl border border-slate-200">
<table className="w-full text-left text-sm">
<thead className="sticky top-0 bg-slate-50 text-slate-500">
<tr>
{columns.map((c) => (
<th
key={c.key}
onClick={() => onSort(c.key)}
className="cursor-pointer select-none px-4 py-3 font-medium hover:text-slate-900"
>
{c.label} {sortKey === c.key && "↓"}
</th>
))}
</tr>
</thead>
<tbody className="divide-y divide-slate-100">
{rows.map((row, i) => (
<tr key={i} className="odd:bg-white even:bg-slate-50/50 hover:bg-indigo-50/40">
{columns.map((c) => (
<td key={c.key} className="px-4 py-3 text-slate-700">{row[c.key]}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
}