A responsive table component.
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
A list of your recent invoices. Copy import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" Copy < Table > < TableHeader > < TableHead isRowHeader className = "w-[100px]" > Invoice </ TableHead > < TableHead > Status </ TableHead > < TableHead > Method </ TableHead > < TableHead className = "text-right" > Amount </ TableHead > </ TableHeader > < TableBody > < TableRow > < TableCell className = "font-medium" > INV001 </ TableCell > < TableCell > Paid </ TableCell > < TableCell > Credit Card </ TableCell > < TableCell className = "text-right" > $250.00 </ TableCell > </ TableRow > </ TableBody > </ Table > < TableCaption > A list of your recent invoices. </ TableCaption > Use the following composition to build a Table:
Copy Table ├── TableCaption ├── TableHeader │ └── TableRow │ ├── TableHead │ ├── TableHead │ ├── TableHead │ └── TableHead ├── TableBody │ ├── TableRow │ │ ├── TableCell │ │ ├── TableCell │ │ ├── TableCell │ │ └── TableCell │ └── TableRow │ ├── TableCell │ ├── TableCell │ ├── TableCell │ └── TableCell └── TableFooter Use the <TableFooter /> component to add a footer to the table.
Invoice Status Method Amount INV001 Paid Credit Card $250.00 INV002 Pending PayPal $150.00 INV003 Unpaid Bank Transfer $350.00 Total $2,500.00
A list of your recent invoices. A table showing actions for each row using a <DropdownMenu /> component.
Product Price Actions Wireless Mouse $29.99 Open menu Mechanical Keyboard $129.99 Open menu USB-C Hub $49.99 Open menu
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.
You can also see an example of a data table in the Tasks demo.
To enable RTL support, see the RTL configuration guide .
الفاتورة الحالة الطريقة المبلغ INV001 مدفوع بطاقة ائتمانية $250.00 INV002 قيد الانتظار PayPal $150.00 INV003 غير مدفوع تحويل بنكي $350.00 INV004 مدفوع بطاقة ائتمانية $450.00 INV005 مدفوع PayPal $550.00 INV006 قيد الانتظار تحويل بنكي $200.00 INV007 غير مدفوع بطاقة ائتمانية $300.00 المجموع $2,500.00
قائمة بفواتيرك الأخيرة. See the React Aria Table documentation.