forked from freeCodeCamp/freeCodeCamp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
table.tsx
45 lines (37 loc) · 1020 Bytes
/
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
import React from 'react';
import { TableProps } from './types';
const defaultClassNames = [
'table',
'table-auto',
'w-full',
'max-w-full',
'border-collapse',
'text-left',
'text-foreground-tertiary',
'[&_th]:font-normal'
];
const computeClassNames = ({
condensed,
striped
}: {
condensed: boolean;
striped: boolean;
}) => {
const classNames = [...defaultClassNames];
if (condensed) classNames.push('[&_td]:p-1 [&_th]:p-1');
else classNames.push('[&_td]:p-2 [&_th]:p-2');
if (striped)
classNames.push('[&>tbody>tr:nth-of-type(odd)]:bg-background-tertiary');
return classNames.join(' ');
};
export const Table = React.forwardRef<HTMLTableElement, TableProps>(
({ striped = false, condensed = false, ...props }, ref) => {
const classNames = React.useMemo(
() => computeClassNames({ condensed, striped }),
[condensed, striped]
);
const table = <table {...props} ref={ref} className={classNames} />;
return table;
}
);
Table.displayName = 'Table';