Docs
Table
Table
A responsive table component.
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@repo/tailwindcss/ui/table";
import { For } from "solid-js";
const invoices = [
{
invoice: "INV001",
paymentStatus: "Paid",
totalAmount: "$250.00",
paymentMethod: "Credit Card",
},
{
invoice: "INV002",
paymentStatus: "Pending",
totalAmount: "$150.00",
paymentMethod: "PayPal",
},
{
invoice: "INV003",
paymentStatus: "Unpaid",
totalAmount: "$350.00",
paymentMethod: "Bank Transfer",
},
{
invoice: "INV004",
paymentStatus: "Paid",
totalAmount: "$450.00",
paymentMethod: "Credit Card",
},
{
invoice: "INV005",
paymentStatus: "Paid",
totalAmount: "$550.00",
paymentMethod: "PayPal",
},
{
invoice: "INV006",
paymentStatus: "Pending",
totalAmount: "$200.00",
paymentMethod: "Bank Transfer",
},
{
invoice: "INV007",
paymentStatus: "Unpaid",
totalAmount: "$300.00",
paymentMethod: "Credit Card",
},
];
const TableDemo = () => {
return (
<Table>
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead class="w-[100px]">Invoice</TableHead>
<TableHead>Status</TableHead>
<TableHead>Method</TableHead>
<TableHead class="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<For each={invoices}>
{(invoice) => (
<TableRow>
<TableCell class="font-medium">{invoice.invoice}</TableCell>
<TableCell>{invoice.paymentStatus}</TableCell>
<TableCell>{invoice.paymentMethod}</TableCell>
<TableCell class="text-right">{invoice.totalAmount}</TableCell>
</TableRow>
)}
</For>
</TableBody>
</Table>
);
};
export default TableDemo;Installation
npx shadcn-solid@latest add tableCopy and paste the following code into your project:
import { cn } from "@/libs/cn";
import { type ComponentProps, splitProps } from "solid-js";
export const Table = (props: ComponentProps<"table">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<div class="w-full overflow-auto">
<table
class={cn("w-full caption-bottom text-sm", local.class)}
{...rest}
/>
</div>
);
};
export const TableHeader = (props: ComponentProps<"thead">) => {
const [local, rest] = splitProps(props, ["class"]);
return <thead class={cn("[&_tr]:border-b", local.class)} {...rest} />;
};
export const TableBody = (props: ComponentProps<"tbody">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<tbody class={cn("[&_tr:last-child]:border-0", local.class)} {...rest} />
);
};
export const TableFooter = (props: ComponentProps<"tfoot">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<tbody
class={cn("bg-primary font-medium text-primary-foreground", local.class)}
{...rest}
/>
);
};
export const TableRow = (props: ComponentProps<"tr">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<tr
class={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
local.class,
)}
{...rest}
/>
);
};
export const TableHead = (props: ComponentProps<"th">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<th
class={cn(
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
local.class,
)}
{...rest}
/>
);
};
export const TableCell = (props: ComponentProps<"td">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<td
class={cn(
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
local.class,
)}
{...rest}
/>
);
};
export const TableCaption = (props: ComponentProps<"caption">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<caption
class={cn("mt-4 text-sm text-muted-foreground", local.class)}
{...rest}
/>
);
};Copy and paste the following code into your project:
import { cn } from "@/libs/cn";
import { type ComponentProps, splitProps } from "solid-js";
export const Table = (props: ComponentProps<"table">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<div class="w-full overflow-auto">
<table
class={cn("w-full caption-bottom text-sm", local.class)}
{...rest}
/>
</div>
);
};
export const TableHeader = (props: ComponentProps<"thead">) => {
const [local, rest] = splitProps(props, ["class"]);
return <thead class={cn("[&_tr]:border-b", local.class)} {...rest} />;
};
export const TableBody = (props: ComponentProps<"tbody">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<tbody class={cn("[&_tr:last-child]:border-0", local.class)} {...rest} />
);
};
export const TableFooter = (props: ComponentProps<"tfoot">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<tbody
class={cn("bg-primary font-medium text-primary-foreground", local.class)}
{...rest}
/>
);
};
export const TableRow = (props: ComponentProps<"tr">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<tr
class={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
local.class,
)}
{...rest}
/>
);
};
export const TableHead = (props: ComponentProps<"th">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<th
class={cn(
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
local.class,
)}
{...rest}
/>
);
};
export const TableCell = (props: ComponentProps<"td">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<td
class={cn(
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
local.class,
)}
{...rest}
/>
);
};
export const TableCaption = (props: ComponentProps<"caption">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<caption
class={cn("mt-4 text-sm text-muted-foreground", local.class)}
{...rest}
/>
);
};Usage
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";<Table>
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead class="w-[100px]">Invoice</TableHead>
<TableHead>Status</TableHead>
<TableHead>Method</TableHead>
<TableHead class="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell class="font-medium">INV001</TableCell>
<TableCell>Paid</TableCell>
<TableCell>Credit Card</TableCell>
<TableCell class="text-right">$250.00</TableCell>
</TableRow>
</TableBody>
</Table>