-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
/
Table.tsx
52 lines (49 loc) · 1.01 KB
/
Table.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { useMemo, type ReactNode } from 'react';
export function Table({
rows,
columns,
columnStyles,
}: {
columnStyles?: Record<string, string>;
columns: string[];
rows: Record<string, ReactNode>[];
}) {
const cols = useMemo(
() =>
columns.map((column) => (
<th
key={column}
className="border-light-900 dark:border-dark-100 break-normal border-b px-3 py-2 text-left text-sm"
>
{column}
</th>
)),
[columns],
);
const data = useMemo(
() =>
rows.map((row, idx) => (
<tr key={idx} className="[&>td]:last-of-type:border-0">
{Object.entries(row).map(([colName, val]) => (
<td
key={colName}
className={`border-light-900 dark:border-dark-100 border-b px-3 py-2 text-left text-sm ${
columnStyles?.[colName] ?? ''
}`}
>
{val}
</td>
))}
</tr>
)),
[columnStyles, rows],
);
return (
<table className="w-full border-collapse">
<thead>
<tr>{cols}</tr>
</thead>
<tbody>{data}</tbody>
</table>
);
}