Table | Shadow Panda

Component

Table

A responsive table component.

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

Installation

Copy and paste the following code into your project

components/ui/table/index.tsx

import * as React from 'react'
import { styled } from '@shadow-panda/styled-system/jsx'
import {
  tableContainer,
  table,
  tableHeader,
  tableBody,
  tableFooter,
  tableHead,
  tableRow,
  tableCell,
  tableCaption,
} from '@shadow-panda/styled-system/recipes'
 
const TableContainer = styled('div', tableContainer)
 
const BaseTable = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
  (props, ref) => (
    <TableContainer>
      <table ref={ref} {...props} />
    </TableContainer>
  ),
)
BaseTable.displayName = 'Table'
 
export const Table = styled(BaseTable, table)
export const TableHeader = styled('thead', tableHeader)
export const TableBody = styled('tbody', tableBody)
export const TableFooter = styled('tfoot', tableFooter)
export const TableHead = styled('th', tableHead)
export const TableRow = styled('tr', tableRow)
export const TableCell = styled('td', tableCell)
export const TableCaption = styled('caption', tableCaption)

Update the import paths to match your project setup

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 w="100px">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead textAlign="right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell fontWeight="medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell textAlign="right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Data Table

You can use the <Table /> component to build more complex data tables. Combine it with @tanstack/react-table to create tables with sorting, filtering and pagination.

See the Data Table documentation for more information.

Switch Tabs