spb/autoscholar

1import type { ReactNode } from "react";23export function DataTable<T>({4  rows,5  columns,6  keyFor,7  empty = "Nothing to show.",8}: {9  rows: T[];10  columns: Array<{ key: string; header: ReactNode; cell: (r: T) => ReactNode; className?: string }>;11  keyFor: (r: T) => string;12  empty?: string;13}) {14  return (15    <div className="overflow-x-auto">16      <table className="table">17        <thead>18          <tr>19            {columns.map((c) => (20              <th key={c.key} scope="col" className={c.className}>21                {c.header}22              </th>23            ))}24          </tr>25        </thead>26        <tbody>27          {rows.length === 0 ? (28            <tr>29              <td colSpan={columns.length} className="muted py-6 text-center">30                {empty}31              </td>32            </tr>33          ) : (34            rows.map((r) => (35              <tr key={keyFor(r)}>36                {columns.map((c) => (37                  <td key={c.key} className={c.className}>38                    {c.cell(r)}39                  </td>40                ))}41              </tr>42            ))43          )}44        </tbody>45      </table>46    </div>47  );48}49