Table

Tables organize and display data in rows and columns with support for headers, footers, and various cell types.

Preview

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from "@e-infra/design-system";

<Table>
  <TableCaption>A list of recent transactions</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>;

Components

Component	Description
`Table`	Container for the table element
`TableHeader`	Header section container
`TableBody`	Body section container
`TableFooter`	Footer section container
`TableRow`	Table row element
`TableHead`	Header cell (th)
`TableCell`	Data cell (td)
`TableCaption`	Table caption

Props

Table

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native table props

TableRow

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native tr props

Table

Tables organize and display data in rows and columns with support for headers, footers, and various cell types.

Preview

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from "@e-infra/design-system";

<Table>
  <TableCaption>A list of recent transactions</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>;

Components

Component	Description
`Table`	Container for the table element
`TableHeader`	Header section container
`TableBody`	Body section container
`TableFooter`	Footer section container
`TableRow`	Table row element
`TableHead`	Header cell (th)
`TableCell`	Data cell (td)
`TableCaption`	Table caption

Props

Table

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native table props

TableRow

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native tr props