Table

Un componente de tabla responsivo para mostrar datos tabulares.

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
Total			$1,750.00

1'use client';
2
3import { Table } from '@/components/ui/table';
4
5const invoices = [
6  {
7    invoice: 'INV001',
8    paymentStatus: 'Paid',
9    totalAmount: '$250.00',
10    paymentMethod: 'Credit Card',
11  },
12  {
13    invoice: 'INV002',
14    paymentStatus: 'Pending',
15    totalAmount: '$150.00',
16    paymentMethod: 'PayPal',
17  },
18  {
19    invoice: 'INV003',
20    paymentStatus: 'Unpaid',
21    totalAmount: '$350.00',
22    paymentMethod: 'Bank Transfer',
23  },
24  {
25    invoice: 'INV004',
26    paymentStatus: 'Paid',
27    totalAmount: '$450.00',
28    paymentMethod: 'Credit Card',
29  },
30  {
31    invoice: 'INV005',
32    paymentStatus: 'Paid',
33    totalAmount: '$550.00',
34    paymentMethod: 'PayPal',
35  },
36];
37
38export function Default() {
39  return (
40    <Table>
41      <Table.Header>
42        <Table.Row>
43          <Table.Head className="w-[100px]">Invoice</Table.Head>
44          <Table.Head>Status</Table.Head>
45          <Table.Head>Method</Table.Head>
46          <Table.Head className="text-right">Amount</Table.Head>
47        </Table.Row>
48      </Table.Header>
49      <Table.Body>
50        {invoices.map((invoice) => (
51          <Table.Row key={invoice.invoice}>
52            <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
53            <Table.Cell>{invoice.paymentStatus}</Table.Cell>
54            <Table.Cell>{invoice.paymentMethod}</Table.Cell>
55            <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
56          </Table.Row>
57        ))}
58      </Table.Body>
59      <Table.Footer>
60        <Table.Row>
61          <Table.Cell colSpan={3}>Total</Table.Cell>
62          <Table.Cell className="text-right">$1,750.00</Table.Cell>
63        </Table.Row>
64      </Table.Footer>
65    </Table>
66  );
67}

Instalación

Copia y pega el siguiente código en tu proyecto.

'use client';

import * as React from 'react';
import { cn } from '../lib/cn';

const TableRoot = ({
  className,
  ref,
  ...props
}: React.HTMLAttributes<HTMLTableElement> & { ref?: React.Ref<HTMLTableElement> }) => (
  <div className="border-border relative w-full overflow-auto rounded-sm border">
    <table ref={ref} className={cn('w-full text-xs', className)} {...props} />
  </div>
);
TableRoot.displayName = 'Table';

const TableHeader = ({
  className,
  ref,
  ...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
  ref?: React.Ref<HTMLTableSectionElement>;
}) => <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />;
TableHeader.displayName = 'TableHeader';

const TableBody = ({
  className,
  ref,
  ...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
  ref?: React.Ref<HTMLTableSectionElement>;
}) => <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />;
TableBody.displayName = 'TableBody';

const TableFooter = ({
  className,
  ref,
  ...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
  ref?: React.Ref<HTMLTableSectionElement>;
}) => (
  <tfoot
    ref={ref}
    className={cn('border-t font-medium [&>tr]:last:border-b-0', className)}
    {...props}
  />
);
TableFooter.displayName = 'TableFooter';

const TableRow = ({
  className,
  ref,
  ...props
}: React.HTMLAttributes<HTMLTableRowElement> & { ref?: React.Ref<HTMLTableRowElement> }) => (
  <tr
    ref={ref}
    className={cn(
      'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
      className,
    )}
    {...props}
  />
);
TableRow.displayName = 'TableRow';

const TableHead = ({
  className,
  ref,
  ...props
}: React.ThHTMLAttributes<HTMLTableCellElement> & { ref?: React.Ref<HTMLTableCellElement> }) => (
  <th
    ref={ref}
    className={cn(
      'border-border text-muted-foreground h-10 border-r px-3 py-4 text-left align-middle font-medium last:border-r-0 [&:has([role=checkbox])]:pr-0',
      className,
    )}
    {...props}
  />
);
TableHead.displayName = 'TableHead';

const TableCell = ({
  className,
  ref,
  ...props
}: React.TdHTMLAttributes<HTMLTableCellElement> & { ref?: React.Ref<HTMLTableCellElement> }) => (
  <td
    ref={ref}
    className={cn(
      'border-border border-r px-3 py-4 align-middle last:border-r-0 [&:has([role=checkbox])]:pr-0',
      className,
    )}
    {...props}
  />
);
TableCell.displayName = 'TableCell';

const TableCaption = ({
  className,
  ref,
  ...props
}: React.HTMLAttributes<HTMLTableCaptionElement> & {
  ref?: React.Ref<HTMLTableCaptionElement>;
}) => (
  <caption ref={ref} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
);
TableCaption.displayName = 'TableCaption';

const Table = Object.assign(TableRoot, {
  Header: TableHeader,
  Body: TableBody,
  Footer: TableFooter,
  Row: TableRow,
  Head: TableHead,
  Cell: TableCell,
  Caption: TableCaption,
});

export { Table };

Asegúrate de actualizar las rutas de importación según la estructura de tu proyecto.

Anatomía

import { Table } from '@/components/ui/table';

<Table>
  <Table.Caption>A list of your recent invoices.</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head>Head</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Cell</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.Cell>Footer</Table.Cell>
    </Table.Row>
  </Table.Footer>
</Table>

Referencia de API

Table

Prop	Tipo	Default	Descripción
`className`	`string`	—	Clases adicionales.

Table.Header

Prop	Tipo	Default	Descripción
`className`	`string`	—	Clases adicionales.

Table.Body

Prop	Tipo	Default	Descripción
`className`	`string`	—	Clases adicionales.

Table.Footer

Prop	Tipo	Default	Descripción
`className`	`string`	—	Clases adicionales.

Table.Row

Prop	Tipo	Default	Descripción
`className`	`string`	—	Clases adicionales.

Table.Head

Prop	Tipo	Default	Descripción
`className`	`string`	—	Clases adicionales.

Table.Cell

Prop	Tipo	Default	Descripción
`className`	`string`	—	Clases adicionales.

Table.Caption

Prop	Tipo	Default	Descripción
`className`	`string`	—	Clases adicionales.

AnteriorSheet SiguienteTabs