A responsive table component.
Installation
npx shadcn@latest add @caprice/tablenpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };Copy and paste the following code into your project.
'use client';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Groups all parts of the table. * Renders a `<div>` element. * * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table) */export namespace Root { export type Props = React.ComponentProps<'table'>;}export function Root({ className, ...props }: Root.Props) { return ( <div className="relative w-full overflow-x-auto" data-slot="table-container"> <table className={cn('w-full caption-bottom text-sm', className)} data-slot="table" {...props} /> </div> );}/** * A container for the table header. * Renders a `<thead>` element. * * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table) */export namespace Header { export type Props = React.ComponentProps<'thead'>;}export function Header({ className, ...props }: Header.Props) { return <thead className={cn('[&_tr]:border-b', className)} data-slot="table-header" {...props} />;}/** * A container for the table body. * Renders a `<tbody>` element. * * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table) */export namespace Body { export type Props = React.ComponentProps<'tbody'>;}export function Body({ className, ...props }: Body.Props) { return ( <tbody className={cn('[&_tr:last-child]:border-0', className)} data-slot="table-body" {...props} /> );}/** * A container for the table footer. * Renders a `<tfoot>` element. * * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table) */export namespace Footer { export type Props = React.ComponentProps<'tfoot'>;}export function Footer({ className, ...props }: Footer.Props) { return ( <tfoot className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)} data-slot="table-footer" {...props} /> );}/** * A row in the table. * Renders a `<tr>` element. * * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table) */export namespace Row { export type Props = React.ComponentProps<'tr'>;}export function Row({ className, ...props }: Row.Props) { return ( <tr className={cn( 'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className )} data-slot="table-row" {...props} /> );}/** * A cell in the table header. * Renders a `<th>` element. * * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table) */export namespace Head { export type Props = React.ComponentProps<'th'>;}export function Head({ className, ...props }: Head.Props) { return ( <th className={cn( 'h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]', className )} data-slot="table-head" {...props} /> );}/** * A cell in the table body. * Renders a `<td>` element. * * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table) */export namespace Cell { export type Props = React.ComponentProps<'td'>;}export function Cell({ className, ...props }: Cell.Props) { return ( <td className={cn( 'whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]', className )} data-slot="table-cell" {...props} /> );}/** * A caption for the table. * Renders a `<caption>` element. * * Documentation: [Caprice UI Table](https://caprice-ui.com/docs/components/table) */export namespace Caption { export type Props = React.ComponentProps<'caption'>;}export function Caption({ className, ...props }: Caption.Props) { return ( <caption className={cn('mt-4 text-muted-foreground text-sm', className)} data-slot="table-caption" {...props} /> );}Update the import paths to match your project setup.
Usage
import * as Table from "@/components/caprice-ui/table"import * as Table from "@caprice-ui/react/table"<Table.Root>
<Table.Caption Caption>A list of your recent invoices.</Table.Caption>
<Table.Header>
<Table.Row>
<Table.Head className="w-[100px]">Invoice</Table.Head>
<Table.Head>Status</Table.Head>
<Table.Head>Method</Table.Head>
<Table.Head className="text-right">Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell className="font-medium">INV001</Table.Cell>
<Table.Cell>Paid</Table.Cell>
<TableCell>Credit Card</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</Table.Row>
</Table.Body>
</Table.Root>