Table

A responsive table component.

Preview

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

Code

import Table from '@dinui/react/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>
      <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>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add table

   yarn

   yarn dlx @dinui/cli@latest add table

   pnpm

   pnpm dlx @dinui/cli@latest add table

   bun

   bunx @dinui/cli@latest add table

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install tailwind-variants type-fest

   yarn

   yarn add tailwind-variants type-fest

   pnpm

   pnpm add tailwind-variants type-fest

   bun

   bun add tailwind-variants type-fest

3. Copy and paste the following code into your project

   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const table = tv({
     slots: {
       rootWrapper: 'relative w-full overflow-auto',
       root: 'w-full caption-bottom text-sm',
       header: null,
       body: 'border-t',
       footer: 'border-t',
       row: 'border-b transition-colors hover:bg-bg--hover data-[state=selected]:bg-bg--active last:border-0',
       head: 'h-10 px-2 text-left align-middle font-medium text-fg-weaker',
       cell: 'p-2 align-middle',
       caption: 'mt-4 text-sm text-fg-weaker',
     },
   })
   
   const TableRoot = forwardRef<
     HTMLTableElement,
     Merge<
       React.HTMLAttributes<HTMLTableElement>,
       {
         wrapperProps?: React.ComponentProps<'div'>
       }
     >
   >(({ wrapperProps, ...props }, ref) => {
     const { root, rootWrapper } = table()
   
     return (
       <div {...wrapperProps} className={rootWrapper({ className: wrapperProps?.className })}>
         <table {...props} ref={ref} className={root({ className: props.className })} />
       </div>
     )
   })
   TableRoot.displayName = 'Table'
   
   const TableHeader = forwardRef<
     HTMLTableSectionElement,
     React.HTMLAttributes<HTMLTableSectionElement>
   >((props, ref) => {
     const { header } = table()
   
     return <thead {...props} ref={ref} className={header({ className: props.className })} />
   })
   TableHeader.displayName = 'TableHeader'
   
   const TableBody = forwardRef<
     HTMLTableSectionElement,
     React.HTMLAttributes<HTMLTableSectionElement>
   >((props, ref) => {
     const { body } = table()
   
     return <tbody {...props} ref={ref} className={body({ className: props.className })} />
   })
   TableBody.displayName = 'TableBody'
   
   const TableFooter = forwardRef<
     HTMLTableSectionElement,
     React.HTMLAttributes<HTMLTableSectionElement>
   >((props, ref) => {
     const { footer } = table()
   
     return <tfoot {...props} ref={ref} className={footer({ className: props.className })} />
   })
   TableFooter.displayName = 'TableFooter'
   
   const TableRow = forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
     (props, ref) => {
       const { row } = table()
   
       return <tr {...props} ref={ref} className={row({ className: props.className })} />
     },
   )
   TableRow.displayName = 'TableRow'
   
   const TableHead = forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
     (props, ref) => {
       const { head } = table()
   
       return <th {...props} ref={ref} className={head({ className: props.className })} />
     },
   )
   TableHead.displayName = 'TableHead'
   
   const TableCell = forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
     (props, ref) => {
       const { cell } = table()
   
       return <td {...props} ref={ref} className={cell({ className: props.className })} />
     },
   )
   TableCell.displayName = 'TableCell'
   
   const TableCaption = forwardRef<
     HTMLTableCaptionElement,
     React.HTMLAttributes<HTMLTableCaptionElement>
   >((props, ref) => {
     const { caption } = table()
   
     return <caption {...props} ref={ref} className={caption({ className: props.className })} />
   })
   TableCaption.displayName = 'TableCaption'
   
   const Table = Object.assign(TableRoot, {
     Header: TableHeader,
     Body: TableBody,
     Footer: TableFooter,
     Caption: TableCaption,
   
     Head: TableHead,
     Row: TableRow,
     Cell: TableCell,
   })
   
   export default Table
   export { table }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.