44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
|
import { ReactNode } from 'react';
|
||
|
|
|
||
|
|
interface TableProps<T> {
|
||
|
|
columns: { key: string; label: string; render?: (row: T) => ReactNode }[];
|
||
|
|
data: T[];
|
||
|
|
rowKey: (row: T) => string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Table<T extends Record<string, any>>({ columns, data, rowKey }: TableProps<T>) {
|
||
|
|
return (
|
||
|
|
<div className="overflow-x-auto">
|
||
|
|
<table className="w-full border-collapse">
|
||
|
|
<thead>
|
||
|
|
<tr className="border-b border-border">
|
||
|
|
{columns.map((col) => (
|
||
|
|
<th key={col.key} className="text-left py-3 px-4 font-medium text-text-muted text-sm">
|
||
|
|
{col.label}
|
||
|
|
</th>
|
||
|
|
))}
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{data.map((row) => (
|
||
|
|
<tr key={rowKey(row)} className="border-b border-border hover:bg-background/50">
|
||
|
|
{columns.map((col) => (
|
||
|
|
<td key={col.key} className="py-3 px-4 text-text">
|
||
|
|
{col.render ? col.render(row) : String(row[col.key] ?? '')}
|
||
|
|
</td>
|
||
|
|
))}
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
{data.length === 0 && (
|
||
|
|
<tr>
|
||
|
|
<td colSpan={columns.length} className="py-8 text-center text-text-muted">
|
||
|
|
No data available
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
)}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|