83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
|
import { splitProps, type JSX } from "solid-js";
|
||
|
|
import { cn } from "../../lib/cn";
|
||
|
|
|
||
|
|
export type TableProps = JSX.HTMLAttributes<HTMLTableElement> & {
|
||
|
|
containerClass?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
/** Responsive native table with a horizontal overflow boundary. */
|
||
|
|
export function Table(props: TableProps) {
|
||
|
|
const [local, rest] = splitProps(props, ["class", "containerClass", "children"]);
|
||
|
|
return (
|
||
|
|
<div data-slot="table-container" class={cn("w-full overflow-x-auto", local.containerClass)}>
|
||
|
|
<table
|
||
|
|
{...rest}
|
||
|
|
data-slot="table"
|
||
|
|
class={cn("w-full min-w-[760px] border-collapse text-left text-sm", local.class)}
|
||
|
|
>
|
||
|
|
{local.children}
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TableHeader(props: JSX.HTMLAttributes<HTMLTableSectionElement>) {
|
||
|
|
const [local, rest] = splitProps(props, ["class", "children"]);
|
||
|
|
return (
|
||
|
|
<thead {...rest} data-slot="table-header" class={cn(local.class)}>
|
||
|
|
{local.children}
|
||
|
|
</thead>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TableBody(props: JSX.HTMLAttributes<HTMLTableSectionElement>) {
|
||
|
|
const [local, rest] = splitProps(props, ["class", "children"]);
|
||
|
|
return (
|
||
|
|
<tbody {...rest} data-slot="table-body" class={cn(local.class)}>
|
||
|
|
{local.children}
|
||
|
|
</tbody>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TableRow(props: JSX.HTMLAttributes<HTMLTableRowElement>) {
|
||
|
|
const [local, rest] = splitProps(props, ["class", "children"]);
|
||
|
|
return (
|
||
|
|
<tr
|
||
|
|
{...rest}
|
||
|
|
data-slot="table-row"
|
||
|
|
class={cn("transition-colors hover:bg-[#f8faf9] [&:last-child_td]:border-b-0", local.class)}
|
||
|
|
>
|
||
|
|
{local.children}
|
||
|
|
</tr>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TableHead(props: JSX.ThHTMLAttributes<HTMLTableCellElement>) {
|
||
|
|
const [local, rest] = splitProps(props, ["class", "children"]);
|
||
|
|
return (
|
||
|
|
<th
|
||
|
|
{...rest}
|
||
|
|
data-slot="table-head"
|
||
|
|
class={cn(
|
||
|
|
"border-b border-line bg-canvas px-4 py-2.5 text-[11px] font-semibold uppercase text-muted",
|
||
|
|
local.class,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{local.children}
|
||
|
|
</th>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TableCell(props: JSX.TdHTMLAttributes<HTMLTableCellElement>) {
|
||
|
|
const [local, rest] = splitProps(props, ["class", "children"]);
|
||
|
|
return (
|
||
|
|
<td
|
||
|
|
{...rest}
|
||
|
|
data-slot="table-cell"
|
||
|
|
class={cn("border-b border-line px-4 py-3 align-middle", local.class)}
|
||
|
|
>
|
||
|
|
{local.children}
|
||
|
|
</td>
|
||
|
|
);
|
||
|
|
}
|