Data Table

export function DataTable<T extends Record<string, string>>({ columns, rows }: { columns: (keyof T & string)[]; rows: T[] }) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-border">
            {columns.map((h) => <th key={h} className="px-4 py-2 text-left font-medium capitalize">{h}</th>)}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i} className="border-b border-border/50">
              {columns.map((c, n) => (
                <td key={c} className={n === 0 ? "px-4 py-2" : "px-4 py-2 text-muted-foreground"}>{r[c]}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}