Table

1"use client";
2 
3import "./table.css";
4import type React from "react";
5import { cn } from "tailwind-variants";
6 
7import { TableContext, useTableContext } from "./table.context";
8import { tableVariants, type TableVariants } from "./table.variants";
9 
10export type TableProps = TableVariants & React.HTMLAttributes<HTMLTableElement>;
11 
12export const TableRoot = ({ children, className, ...props }: TableProps) => {
13  const slots = tableVariants();
14 
15  return (
16    <TableContext.Provider value={{ slots }}>
17      <div className={slots.root()}>
18        <table className={cn(slots.table(), className)} {...props}>
19          {children}
20        </table>
21      </div>
22    </TableContext.Provider>
23  );
24};
25 
26export type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
27 
28export const TableHeader = ({ className, ...props }: TableHeaderProps) => {
29  const { slots } = useTableContext();
30  return <thead className={cn(slots.header(), className)} {...props} />;
31};
32 
33export type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
34 
35export const TableBody = ({ className, ...props }: TableBodyProps) => {
36  const { slots } = useTableContext();
37  return <tbody className={cn(slots.body(), className)} {...props} />;
38};
39 
40export type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;
41 
42export const TableFooter = ({ className, ...props }: TableFooterProps) => {
43  const { slots } = useTableContext();
44  return <tfoot className={cn(slots.footer(), className)} {...props} />;
45};
46 
47export type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>;
48 
49export const TableRow = ({ className, ...props }: TableRowProps) => {
50  const { slots } = useTableContext();
51  return <tr className={cn(slots.row(), className)} {...props} />;
52};
53 
54export type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement>;
55 
56export const TableHead = ({ className, ...props }: TableHeadProps) => {
57  const { slots } = useTableContext();
58  return <th className={cn(slots.head(), className)} {...props} />;
59};
60 
61export type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
62 
63export const TableCell = ({ className, ...props }: TableCellProps) => {
64  const { slots } = useTableContext();
65  return <td className={cn(slots.cell(), className)} {...props} />;
66};
67 
68export type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
69 
70export const TableCaption = ({ className, ...props }: TableCaptionProps) => {
71  const { slots } = useTableContext();
72// … truncated