Shadcn Table

React table for displaying structured data with sorting and accessibility support. Built with TypeScript and Tailwind CSS for Next.js.

Table styling challenges?

Join our Discord community for help from other developers.

You know how tables can either make your data crystal clear or turn into an unreadable mess? Ever tried building a responsive table that doesn't break on mobile? Or handled a client asking "can we just make it work like Excel?" That's the reality of data display in modern web apps. This shadcn/ui table gives you the foundation to build tables that actually work—from simple invoices to complex data grids in your React applications.

Table showcase

Clean, structured data presentation:

Loading component...

"use client"import {  Table,  TableBody,  TableCaption,  TableCell,  TableFooter,  TableHead,  TableHeader,  TableRow,} from "@/components/ui/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 (    <div className="w-full max-w-4xl mx-auto p-6">      <Table>        <TableCaption>A list of your recent invoices.</TableCaption>      <TableHeader>        <TableRow>          <TableHead className="w-[100px]">Invoice</TableHead>          <TableHead>Status</TableHead>          <TableHead>Method</TableHead>          <TableHead className="text-right">Amount</TableHead>        </TableRow>      </TableHeader>      <TableBody>        {invoices.map((invoice) => (          <TableRow key={invoice.invoice}>            <TableCell className="font-medium">{invoice.invoice}</TableCell>            <TableCell>{invoice.paymentStatus}</TableCell>            <TableCell>{invoice.paymentMethod}</TableCell>            <TableCell className="text-right">{invoice.totalAmount}</TableCell>          </TableRow>        ))}      </TableBody>      <TableFooter>        <TableRow>          <TableCell colSpan={3}>Total</TableCell>          <TableCell className="text-right">$2,500.00</TableCell>        </TableRow>      </TableFooter>    </Table>    </div>  )}

"use client"import * as React from "react"import { cn } from "@/lib/utils"function Table({ className, ...props }: React.ComponentProps<"table">) {  return (    <div      data-slot="table-container"      className="relative w-full overflow-x-auto"    >      <table        data-slot="table"        className={cn("w-full caption-bottom text-sm", className)}        {...props}      />    </div>  )}function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {  return (    <thead      data-slot="table-header"      className={cn("[&_tr]:border-b", className)}      {...props}    />  )}function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {  return (    <tbody      data-slot="table-body"      className={cn("[&_tr:last-child]:border-0", className)}      {...props}    />  )}function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {  return (    <tfoot      data-slot="table-footer"      className={cn(        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",        className      )}      {...props}    />  )}function TableRow({ className, ...props }: React.ComponentProps<"tr">) {  return (    <tr      data-slot="table-row"      className={cn(        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",        className      )}      {...props}    />  )}function TableHead({ className, ...props }: React.ComponentProps<"th">) {  return (    <th      data-slot="table-head"      className={cn(        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",        className      )}      {...props}    />  )}function TableCell({ className, ...props }: React.ComponentProps<"td">) {  return (    <td      data-slot="table-cell"      className={cn(        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",        className      )}      {...props}    />  )}function TableCaption({  className,  ...props}: React.ComponentProps<"caption">) {  return (    <caption      data-slot="table-caption"      className={cn("text-muted-foreground mt-4 text-sm", className)}      {...props}    />  )}export {  Table,  TableHeader,  TableBody,  TableFooter,  TableHead,  TableRow,  TableCell,  TableCaption,}

Simple semantic HTML table with proper structure—caption, header, body, and footer. This free open source React component gives you all the building blocks for accessible data presentation. Built with TypeScript for full type safety while styled with Tailwind CSS to match your design system.

npx shadcn@latest add table

Why tables still beat trendy alternatives

Here's the thing—everyone wants to reinvent tables with cards, lists, or fancy grids. But when you need to compare data across multiple dimensions, nothing beats a well-structured table. Users know how to read them. Screen readers understand them. They print properly. They export to CSV naturally.

Think about your banking app showing transactions. A spreadsheet displaying sales data. Your project management tool listing tasks. Tables work because they show relationships—this row relates to this column at this intersection. That's powerful for data comprehension.

This free shadcn table handles the foundation—semantic HTML, accessibility, responsive design. Whether you're building admin dashboards, financial reports, or inventory systems in your Next.js applications, tables that respect user expectations while looking modern keep your JavaScript projects professional.

Common table patterns you'll actually build

Invoice and financial tables

Structured payment data with totals:

Loading component...

"use client"import {  Table,  TableBody,  TableCaption,  TableCell,  TableFooter,  TableHead,  TableHeader,  TableRow,} from "@/components/ui/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 (    <div className="w-full max-w-4xl mx-auto p-6">      <Table>        <TableCaption>A list of your recent invoices.</TableCaption>      <TableHeader>        <TableRow>          <TableHead className="w-[100px]">Invoice</TableHead>          <TableHead>Status</TableHead>          <TableHead>Method</TableHead>          <TableHead className="text-right">Amount</TableHead>        </TableRow>      </TableHeader>      <TableBody>        {invoices.map((invoice) => (          <TableRow key={invoice.invoice}>            <TableCell className="font-medium">{invoice.invoice}</TableCell>            <TableCell>{invoice.paymentStatus}</TableCell>            <TableCell>{invoice.paymentMethod}</TableCell>            <TableCell className="text-right">{invoice.totalAmount}</TableCell>          </TableRow>        ))}      </TableBody>      <TableFooter>        <TableRow>          <TableCell colSpan={3}>Total</TableCell>          <TableCell className="text-right">$2,500.00</TableCell>        </TableRow>      </TableFooter>    </Table>    </div>  )}

"use client"import * as React from "react"import { cn } from "@/lib/utils"function Table({ className, ...props }: React.ComponentProps<"table">) {  return (    <div      data-slot="table-container"      className="relative w-full overflow-x-auto"    >      <table        data-slot="table"        className={cn("w-full caption-bottom text-sm", className)}        {...props}      />    </div>  )}function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {  return (    <thead      data-slot="table-header"      className={cn("[&_tr]:border-b", className)}      {...props}    />  )}function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {  return (    <tbody      data-slot="table-body"      className={cn("[&_tr:last-child]:border-0", className)}      {...props}    />  )}function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {  return (    <tfoot      data-slot="table-footer"      className={cn(        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",        className      )}      {...props}    />  )}function TableRow({ className, ...props }: React.ComponentProps<"tr">) {  return (    <tr      data-slot="table-row"      className={cn(        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",        className      )}      {...props}    />  )}function TableHead({ className, ...props }: React.ComponentProps<"th">) {  return (    <th      data-slot="table-head"      className={cn(        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",        className      )}      {...props}    />  )}function TableCell({ className, ...props }: React.ComponentProps<"td">) {  return (    <td      data-slot="table-cell"      className={cn(        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",        className      )}      {...props}    />  )}function TableCaption({  className,  ...props}: React.ComponentProps<"caption">) {  return (    <caption      data-slot="table-caption"      className={cn("text-muted-foreground mt-4 text-sm", className)}      {...props}    />  )}export {  Table,  TableHeader,  TableBody,  TableFooter,  TableHead,  TableRow,  TableCell,  TableCaption,}

User management dashboard

Admin tables with actions and status:

Loading component...

"use client"import {  Table,  TableBody,  TableCaption,  TableCell,  TableFooter,  TableHead,  TableHeader,  TableRow,} from "@/components/ui/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 (    <div className="w-full max-w-4xl mx-auto p-6">      <Table>        <TableCaption>A list of your recent invoices.</TableCaption>      <TableHeader>        <TableRow>          <TableHead className="w-[100px]">Invoice</TableHead>          <TableHead>Status</TableHead>          <TableHead>Method</TableHead>          <TableHead className="text-right">Amount</TableHead>        </TableRow>      </TableHeader>      <TableBody>        {invoices.map((invoice) => (          <TableRow key={invoice.invoice}>            <TableCell className="font-medium">{invoice.invoice}</TableCell>            <TableCell>{invoice.paymentStatus}</TableCell>            <TableCell>{invoice.paymentMethod}</TableCell>            <TableCell className="text-right">{invoice.totalAmount}</TableCell>          </TableRow>        ))}      </TableBody>      <TableFooter>        <TableRow>          <TableCell colSpan={3}>Total</TableCell>          <TableCell className="text-right">$2,500.00</TableCell>        </TableRow>      </TableFooter>    </Table>    </div>  )}

"use client"import * as React from "react"import { cn } from "@/lib/utils"function Table({ className, ...props }: React.ComponentProps<"table">) {  return (    <div      data-slot="table-container"      className="relative w-full overflow-x-auto"    >      <table        data-slot="table"        className={cn("w-full caption-bottom text-sm", className)}        {...props}      />    </div>  )}function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {  return (    <thead      data-slot="table-header"      className={cn("[&_tr]:border-b", className)}      {...props}    />  )}function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {  return (    <tbody      data-slot="table-body"      className={cn("[&_tr:last-child]:border-0", className)}      {...props}    />  )}function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {  return (    <tfoot      data-slot="table-footer"      className={cn(        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",        className      )}      {...props}    />  )}function TableRow({ className, ...props }: React.ComponentProps<"tr">) {  return (    <tr      data-slot="table-row"      className={cn(        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",        className      )}      {...props}    />  )}function TableHead({ className, ...props }: React.ComponentProps<"th">) {  return (    <th      data-slot="table-head"      className={cn(        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",        className      )}      {...props}    />  )}function TableCell({ className, ...props }: React.ComponentProps<"td">) {  return (    <td      data-slot="table-cell"      className={cn(        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",        className      )}      {...props}    />  )}function TableCaption({  className,  ...props}: React.ComponentProps<"caption">) {  return (    <caption      data-slot="table-caption"      className={cn("text-muted-foreground mt-4 text-sm", className)}      {...props}    />  )}export {  Table,  TableHeader,  TableBody,  TableFooter,  TableHead,  TableRow,  TableCell,  TableCaption,}

Data grid with sorting

Interactive table with column operations:

Loading component...

"use client"import * as React from "react"import {  ColumnDef,  ColumnFiltersState,  SortingState,  VisibilityState,  flexRender,  getCoreRowModel,  getFilteredRowModel,  getPaginationRowModel,  getSortedRowModel,  useReactTable,} from "@tanstack/react-table"import { Button } from "@/components/ui/button"import { Checkbox } from "@/components/ui/checkbox"import { Input } from "@/components/ui/input"import {  DropdownMenu,  DropdownMenuCheckboxItem,  DropdownMenuContent,  DropdownMenuItem,  DropdownMenuLabel,  DropdownMenuSeparator,  DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"import {  Table,  TableBody,  TableCell,  TableHead,  TableHeader,  TableRow,} from "@/components/ui/table"import { Badge } from "@/components/ui/badge"import { ArrowUpDown, ChevronDown, ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"type Payment = {  id: string  amount: number  status: "pending" | "processing" | "success" | "failed"  email: string}const data: Payment[] = [  { id: "m5gr84i9", amount: 316, status: "success", email: "[email protected]" },  { id: "3u1reuv4", amount: 242, status: "success", email: "[email protected]" },  { id: "derv1ws0", amount: 837, status: "processing", email: "[email protected]" },  { id: "5kma53ae", amount: 874, status: "success", email: "[email protected]" },  { id: "bhqecj4p", amount: 721, status: "failed", email: "[email protected]" },]const columns: ColumnDef<Payment>[] = [  {    id: "select",    header: ({ table }) => (      <Checkbox        checked={          table.getIsAllPageRowsSelected() ||          (table.getIsSomePageRowsSelected() && "indeterminate")        }        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}        aria-label="Select all"      />    ),    cell: ({ row }) => (      <Checkbox        checked={row.getIsSelected()}        onCheckedChange={(value) => row.toggleSelected(!!value)}        aria-label="Select row"      />    ),    enableSorting: false,    enableHiding: false,  },  {    accessorKey: "id",    header: "Transaction",    cell: ({ row }) => <div className="font-medium">{row.getValue("id")}</div>,  },  {    accessorKey: "email",    header: ({ column }) => {      return (        <Button          variant="ghost"          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}        >          Email          <ArrowUpDown className="ml-2 h-4 w-4" />        </Button>      )    },    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,  },  {    accessorKey: "status",    header: "Status",    cell: ({ row }) => {      const status = row.getValue("status") as string      return (        <Badge variant={          status === "success" ? "default" :          status === "processing" ? "secondary" :          status === "pending" ? "outline" : "destructive"        }>          {status}        </Badge>      )    },  },  {    accessorKey: "amount",    header: ({ column }) => {      return (        <div className="text-right">          <Button            variant="ghost"            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}          >            Amount            <ArrowUpDown className="ml-2 h-4 w-4" />          </Button>        </div>      )    },    cell: ({ row }) => {      const amount = parseFloat(row.getValue("amount"))      const formatted = new Intl.NumberFormat("en-US", {        style: "currency",        currency: "USD",      }).format(amount)       return <div className="text-right font-medium">{formatted}</div>    },  },  {    id: "actions",    enableHiding: false,    cell: ({ row }) => {      const payment = row.original      return (        <DropdownMenu>          <DropdownMenuTrigger asChild>            <Button variant="ghost" className="h-8 w-8 p-0">              <span className="sr-only">Open menu</span>              <MoreHorizontal className="h-4 w-4" />            </Button>          </DropdownMenuTrigger>          <DropdownMenuContent align="end">            <DropdownMenuLabel>Actions</DropdownMenuLabel>            <DropdownMenuItem              onClick={() => navigator.clipboard.writeText(payment.id)}            >              Copy payment ID            </DropdownMenuItem>            <DropdownMenuSeparator />            <DropdownMenuItem>View customer</DropdownMenuItem>            <DropdownMenuItem>View payment details</DropdownMenuItem>          </DropdownMenuContent>        </DropdownMenu>      )    },  },]export default function TableData() {  const [sorting, setSorting] = React.useState<SortingState>([])  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})  const [rowSelection, setRowSelection] = React.useState({})  const table = useReactTable({    data,    columns,    onSortingChange: setSorting,    onColumnFiltersChange: setColumnFilters,    getCoreRowModel: getCoreRowModel(),    getSortedRowModel: getSortedRowModel(),    getFilteredRowModel: getFilteredRowModel(),    onColumnVisibilityChange: setColumnVisibility,    onRowSelectionChange: setRowSelection,    state: {      sorting,      columnFilters,      columnVisibility,      rowSelection,    },  })  return (    <div className="w-full max-w-4xl mx-auto p-6">      <div className="flex items-center py-4">        <Input          placeholder="Filter emails..."          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}          onChange={(event) =>            table.getColumn("email")?.setFilterValue(event.target.value)          }          className="max-w-sm"        />        <DropdownMenu>          <DropdownMenuTrigger asChild>            <Button variant="outline" className="ml-auto">              Columns <ChevronDown className="ml-2 h-4 w-4" />            </Button>          </DropdownMenuTrigger>          <DropdownMenuContent align="end">            {table              .getAllColumns()              .filter((column) => column.getCanHide())              .map((column) => {                return (                  <DropdownMenuCheckboxItem                    key={column.id}                    className="capitalize"                    checked={column.getIsVisible()}                    onCheckedChange={(value) =>                      column.toggleVisibility(!!value)                    }                  >                    {column.id}                  </DropdownMenuCheckboxItem>                )              })}          </DropdownMenuContent>        </DropdownMenu>      </div>      <div className="rounded-md border">        <Table>          <TableHeader>            {table.getHeaderGroups().map((headerGroup) => (              <TableRow key={headerGroup.id}>                {headerGroup.headers.map((header) => {                  return (                    <TableHead key={header.id}>                      {header.isPlaceholder                        ? null                        : flexRender(                            header.column.columnDef.header,                            header.getContext()                          )}                    </TableHead>                  )                })}              </TableRow>            ))}          </TableHeader>          <TableBody>            {table.getRowModel().rows?.length ? (              table.getRowModel().rows.map((row) => (                <TableRow                  key={row.id}                  data-state={row.getIsSelected() && "selected"}                >                  {row.getVisibleCells().map((cell) => (                    <TableCell key={cell.id}>                      {flexRender(                        cell.column.columnDef.cell,                        cell.getContext()                      )}                    </TableCell>                  ))}                </TableRow>              ))            ) : (              <TableRow>                <TableCell                  colSpan={columns.length}                  className="h-24 text-center"                >                  No results.                </TableCell>              </TableRow>            )}          </TableBody>        </Table>      </div>      <div className="flex items-center justify-between pt-4">        <div className="text-sm text-muted-foreground">          {table.getFilteredSelectedRowModel().rows.length} of{" "}          {table.getFilteredRowModel().rows.length} row(s) selected.        </div>      </div>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Mobile-responsive cards

Tables that transform gracefully on small screens:

Loading component...

"use client"import {  Table,  TableBody,  TableCaption,  TableCell,  TableHead,  TableHeader,  TableRow,} from "@/components/ui/table"import { Badge } from "@/components/ui/badge"import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"const orders = [  {    id: "ORD001",    customer: "John Doe",    product: "MacBook Pro",    status: "shipped",    date: "2024-01-15",    amount: "$2,499.00",  },  {    id: "ORD002",     customer: "Sarah Wilson",    product: "iPhone 15",    status: "processing",    date: "2024-01-16",    amount: "$999.00",  },  {    id: "ORD003",    customer: "Mike Johnson",     product: "AirPods Pro",    status: "delivered",    date: "2024-01-14",    amount: "$249.00",  },  {    id: "ORD004",    customer: "Emma Brown",    product: "iPad Air",    status: "pending",    date: "2024-01-17",    amount: "$599.00",  },  {    id: "ORD005",    customer: "David Lee",    product: "Apple Watch",    status: "shipped",    date: "2024-01-13",    amount: "$399.00",  },]function getStatusBadgeVariant(status: string) {  switch (status) {    case "delivered":      return "default"    case "shipped":      return "secondary"    case "processing":      return "outline"    case "pending":      return "destructive"    default:      return "outline"  }}export default function TableResponsive() {  return (    <div className="w-full max-w-4xl mx-auto p-6">      {/* Desktop Table */}      <div className="hidden md:block">        <Table>          <TableCaption>Recent orders from your store.</TableCaption>          <TableHeader>            <TableRow>              <TableHead className="w-[100px]">Order</TableHead>              <TableHead>Customer</TableHead>              <TableHead>Product</TableHead>              <TableHead>Status</TableHead>              <TableHead>Date</TableHead>              <TableHead className="text-right">Amount</TableHead>            </TableRow>          </TableHeader>          <TableBody>            {orders.map((order) => (              <TableRow key={order.id}>                <TableCell className="font-medium">{order.id}</TableCell>                <TableCell>{order.customer}</TableCell>                <TableCell>{order.product}</TableCell>                <TableCell>                  <Badge variant={getStatusBadgeVariant(order.status)}>                    {order.status}                  </Badge>                </TableCell>                <TableCell>{order.date}</TableCell>                <TableCell className="text-right">{order.amount}</TableCell>              </TableRow>            ))}          </TableBody>        </Table>      </div>      {/* Mobile Cards */}      <div className="md:hidden space-y-4">        {orders.map((order) => (          <Card key={order.id}>            <CardHeader className="pb-3">              <CardTitle className="flex items-center justify-between text-base">                <span>{order.id}</span>                <Badge variant={getStatusBadgeVariant(order.status)}>                  {order.status}                </Badge>              </CardTitle>            </CardHeader>            <CardContent className="space-y-2">              <div className="flex justify-between">                <span className="text-sm text-muted-foreground">Customer</span>                <span className="text-sm font-medium">{order.customer}</span>              </div>              <div className="flex justify-between">                <span className="text-sm text-muted-foreground">Product</span>                <span className="text-sm font-medium">{order.product}</span>              </div>              <div className="flex justify-between">                <span className="text-sm text-muted-foreground">Date</span>                <span className="text-sm font-medium">{order.date}</span>              </div>              <div className="flex justify-between pt-1 border-t">                <span className="text-sm text-muted-foreground">Amount</span>                <span className="text-sm font-semibold">{order.amount}</span>              </div>            </CardContent>          </Card>        ))}      </div>    </div>  )}

"use client"import * as React from "react"import { cn } from "@/lib/utils"function Table({ className, ...props }: React.ComponentProps<"table">) {  return (    <div      data-slot="table-container"      className="relative w-full overflow-x-auto"    >      <table        data-slot="table"        className={cn("w-full caption-bottom text-sm", className)}        {...props}      />    </div>  )}function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {  return (    <thead      data-slot="table-header"      className={cn("[&_tr]:border-b", className)}      {...props}    />  )}function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {  return (    <tbody      data-slot="table-body"      className={cn("[&_tr:last-child]:border-0", className)}      {...props}    />  )}function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {  return (    <tfoot      data-slot="table-footer"      className={cn(        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",        className      )}      {...props}    />  )}function TableRow({ className, ...props }: React.ComponentProps<"tr">) {  return (    <tr      data-slot="table-row"      className={cn(        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",        className      )}      {...props}    />  )}function TableHead({ className, ...props }: React.ComponentProps<"th">) {  return (    <th      data-slot="table-head"      className={cn(        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",        className      )}      {...props}    />  )}function TableCell({ className, ...props }: React.ComponentProps<"td">) {  return (    <td      data-slot="table-cell"      className={cn(        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",        className      )}      {...props}    />  )}function TableCaption({  className,  ...props}: React.ComponentProps<"caption">) {  return (    <caption      data-slot="table-caption"      className={cn("text-muted-foreground mt-4 text-sm", className)}      {...props}    />  )}export {  Table,  TableHeader,  TableBody,  TableFooter,  TableHead,  TableRow,  TableCell,  TableCaption,}

Analytics and metrics

Performance data with visual indicators:

Loading component...

"use client"import {  Table,  TableBody,  TableCaption,  TableCell,  TableFooter,  TableHead,  TableHeader,  TableRow,} from "@/components/ui/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 (    <div className="w-full max-w-4xl mx-auto p-6">      <Table>        <TableCaption>A list of your recent invoices.</TableCaption>      <TableHeader>        <TableRow>          <TableHead className="w-[100px]">Invoice</TableHead>          <TableHead>Status</TableHead>          <TableHead>Method</TableHead>          <TableHead className="text-right">Amount</TableHead>        </TableRow>      </TableHeader>      <TableBody>        {invoices.map((invoice) => (          <TableRow key={invoice.invoice}>            <TableCell className="font-medium">{invoice.invoice}</TableCell>            <TableCell>{invoice.paymentStatus}</TableCell>            <TableCell>{invoice.paymentMethod}</TableCell>            <TableCell className="text-right">{invoice.totalAmount}</TableCell>          </TableRow>        ))}      </TableBody>      <TableFooter>        <TableRow>          <TableCell colSpan={3}>Total</TableCell>          <TableCell className="text-right">$2,500.00</TableCell>        </TableRow>      </TableFooter>    </Table>    </div>  )}

"use client"import * as React from "react"import { cn } from "@/lib/utils"function Table({ className, ...props }: React.ComponentProps<"table">) {  return (    <div      data-slot="table-container"      className="relative w-full overflow-x-auto"    >      <table        data-slot="table"        className={cn("w-full caption-bottom text-sm", className)}        {...props}      />    </div>  )}function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {  return (    <thead      data-slot="table-header"      className={cn("[&_tr]:border-b", className)}      {...props}    />  )}function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {  return (    <tbody      data-slot="table-body"      className={cn("[&_tr:last-child]:border-0", className)}      {...props}    />  )}function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {  return (    <tfoot      data-slot="table-footer"      className={cn(        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",        className      )}      {...props}    />  )}function TableRow({ className, ...props }: React.ComponentProps<"tr">) {  return (    <tr      data-slot="table-row"      className={cn(        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",        className      )}      {...props}    />  )}function TableHead({ className, ...props }: React.ComponentProps<"th">) {  return (    <th      data-slot="table-head"      className={cn(        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",        className      )}      {...props}    />  )}function TableCell({ className, ...props }: React.ComponentProps<"td">) {  return (    <td      data-slot="table-cell"      className={cn(        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",        className      )}      {...props}    />  )}function TableCaption({  className,  ...props}: React.ComponentProps<"caption">) {  return (    <caption      data-slot="table-caption"      className={cn("text-muted-foreground mt-4 text-sm", className)}      {...props}    />  )}export {  Table,  TableHeader,  TableBody,  TableFooter,  TableHead,  TableRow,  TableCell,  TableCaption,}

These patterns show tables handling everything from financial data to user management. Each example demonstrates how this open source component adapts to different data types while maintaining clarity and usability.

Features

This free open source table component includes everything you need:

TypeScript-first - Full type safety for table data and column definitions in React
Semantic HTML - Proper table elements that screen readers understand naturally
Responsive ready - Transform to cards or scroll horizontally on mobile devices
Tailwind CSS styled - Customize with utilities, not fighting table-specific CSS
TanStack compatible - Upgrade to advanced features when you need them
Accessibility built-in - Caption, headers, proper structure for assistive tech
Print friendly - Tables that actually look good on paper (remember paper?)
Export ready - Semantic structure makes CSV/Excel export straightforward

API Reference

Table Components

Prop	Type	Default
`Table?`		-
`TableHeader?`		-
`TableBody?`		-
`TableRow?`		-
`TableHead?`		-
`TableCell?`		-

Common Props

Prop	Type	Purpose
`className`	string	Tailwind CSS classes for styling
`children`	ReactNode	Table content and structure
Standard HTML attributes	various	All native table element props

Accessibility Features

Feature	How It Helps
Semantic HTML	Screen readers understand structure naturally
TableCaption	Describes table purpose for context
Header associations	Links data cells to column headers
Keyboard navigation	Tab through interactive elements

Production tips

Always include a TableCaption even if visually hidden. This free shadcn/ui table component supports captions natively—use them to describe what data the table contains. Screen reader users need context before diving into rows and columns. "Invoice items for Order #12345" beats no caption.

Handle empty states with helpful messages instead of blank tables. When there's no data, show users why and what they can do about it. This open source shadcn table is just the structure—you provide meaningful empty states that guide users to add their first items or adjust filters.

Consider mobile layouts before defaulting to horizontal scroll. Tables get cramped on phones. This TypeScript component can transform into cards or lists with Tailwind CSS breakpoints. Test with real devices—sometimes a complete layout change serves mobile users better than a scrollable table.

Use consistent alignment for similar data types across tables. Numbers right, text left, currencies with proper formatting. This React component handles the display—you establish the data patterns. When users see multiple tables in your Next.js application, consistent alignment reduces cognitive load.

Test with extreme data to find edge cases early. Long email addresses, missing values, numbers with many digits, text in different languages. The JavaScript component handles rendering—you ensure the layout doesn't break. Better to find issues during development than in production.

Integration with other components

Tables naturally pair with Pagination components for large datasets in your React applications. Use Badge components for status indicators and Button components for row actions like edit or delete.

For advanced features, combine tables with DataTable components that add sorting, filtering, and column visibility. This open source pattern provides powerful data management while maintaining clean structure.

When building forms, use tables with Checkbox components for row selection or Input components for inline editing. Dropdown Menu components work great for row action menus that don't clutter the interface.

For loading states, pair tables with Skeleton components to show structure while data loads. ScrollArea components help with fixed-height tables. Your JavaScript application can compose these shadcn components for complete data experiences.

Shadcn Table

Table showcase

Why tables still beat trendy alternatives

Common table patterns you'll actually build

Invoice and financial tables

User management dashboard

Data grid with sorting

Mobile-responsive cards

Analytics and metrics

Features

API Reference

Table Components

Common Props

Accessibility Features

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Table

Reacttable

Reacttable

Reacttable

Reactbutton

Reactcheckbox

Reactinput

Reactdropdown-menu

Reacttable

Reactbadge

Reacttable

Reactbadge

Reactcard

Reacttable

How do I make tables work on mobile devices?

When should I use Table vs DataTable component?

How do I add CSV or Excel export to tables?

Can I make table headers sticky when scrolling?

How do I handle tables with thousands of rows?

What's the best way to show loading states in tables?

How do I add sortable columns to my table?

Can I add row selection with checkboxes?

On this page