Table

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

import * as Table from '@components/caprice-ui/table';

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',
  },
];

export default function TableDemo() {
  return (
    <Table.Root>
      <Table.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>
        {invoices.map((invoice) => (
          <Table.Row key={invoice.invoice}>
            <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
            <Table.Cell>{invoice.paymentStatus}</Table.Cell>
            <Table.Cell>{invoice.paymentMethod}</Table.Cell>
            <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
      <Table.Footer>
        <Table.Row>
          <Table.Cell colSpan={3}>Total</Table.Cell>
          <Table.Cell className="text-right">$2,500.00</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table.Root>
  );
}

Installation

npx shadcn@latest add @caprice/table

npx shadcn@latest add @caprice/table

npm install @caprice-ui/react

npm install @caprice-ui/react

Install the following dependencies:

npm install @base-ui/react lucide-react

npm install @base-ui/react lucide-react

Add 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 };

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}
    />
  );
}

'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 "@/components/caprice-ui/table"

import * as Table from "@caprice-ui/react/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>

import * as Table from '@components/caprice-ui/table'; 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', }, ]; export default function TableDemo() { return ( <Table.Root> <Table.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> {invoices.map((invoice) => ( <Table.Row key={invoice.invoice}> <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell> <Table.Cell>{invoice.paymentStatus}</Table.Cell> <Table.Cell>{invoice.paymentMethod}</Table.Cell> <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell> </Table.Row> ))} </Table.Body> <Table.Footer> <Table.Row> <Table.Cell colSpan={3}>Total</Table.Cell> <Table.Cell className="text-right">$2,500.00</Table.Cell> </Table.Row> </Table.Footer> </Table.Root> ); }

'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} /> ); }