"use client";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import type React from "react";
import { cn } from "@/lib/utils";
export type TableVariant = "default" | "card";
export type TableProps = React.ComponentProps<"table"> & {
variant?: TableVariant;
render?: useRender.ComponentProps<"div">["render"];
};
export function Table({
className,
variant = "default",
render,
...props
}: TableProps): React.ReactElement {
const defaultProps = {
children: (
),
className: "relative w-full overflow-x-auto",
"data-slot": "table-container",
"data-variant": variant,
};
return useRender({
defaultTagName: "div",
props: mergeProps<"div">(defaultProps, {}),
render,
});
}
export function TableHeader({
className,
...props
}: React.ComponentProps<"thead">): React.ReactElement {
return (
);
}
export function TableBody({
className,
...props
}: React.ComponentProps<"tbody">): React.ReactElement {
return (
);
}
export function TableFooter({
className,
...props
}: React.ComponentProps<"tfoot">): React.ReactElement {
return (
tr]:last:border-b-0",
className,
)}
data-slot="table-footer"
{...props}
/>
);
}
export function TableRow({
className,
...props
}: React.ComponentProps<"tr">): React.ReactElement {
return (
|
);
}
export function TableHead({
className,
...props
}: React.ComponentProps<"th">): React.ReactElement {
return (
|
);
}
export function TableCell({
className,
...props
}: React.ComponentProps<"td">): React.ReactElement {
return (
|
);
}
export function TableCaption({
className,
...props
}: React.ComponentProps<"caption">): React.ReactElement {
return (
);
}