Sortable Data Table

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>
  );
}