Table

Displays structured data in rows and columns for easy comparison, sorting, and scanning of information.

Sr no.	Name	Email	Role	Status
1	John Smith	john.smith@email.com	Admin	Active
2	Emma Johnson	emma.j@email.com	User	Inactive
3	Liam Brown	liam.b@email.com	Moderator	Active
4	Olivia Davis	olivia.d@email.com	User	Active
5	Noah Wilson	noah.w@email.com	Editor	Suspended
6	Ava Taylor	ava.t@email.com	User	Active
7	James Martin	james.m@email.com	Admin	Inactive
8	Sophia Clark	sophia.c@email.com	Moderator	Active
9	Mason Lee	mason.l@email.com	Editor	Active
10	Isabella Hall	isabella.h@email.com	User	Active

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/Table

Usage

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeadCell,
  TableRow,
} from "@/components/display-ui/Table"

<Table>
  <TableHead>
    <TableRow>
      <TableHeadCell>Sr no.</TableHeadCell>
      <TableHeadCell>Name</TableHeadCell>
      <TableHeadCell>Email</TableHeadCell>
      <TableHeadCell>Role</TableHeadCell>
      <TableHeadCell>Status</TableHeadCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>1</TableCell>
      <TableCell>User Name</TableCell>
      <TableCell>user@gmail.com</TableCell>
      <TableCell>Web Developer</TableCell>
      <TableCell>Active </TableCell>
    </TableRow>
  </TableBody>
</Table>

API

Separator Props

For Table Component

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Table structure content. Typically includes TableHead and TableBody components.	-
className	`string`	Additional CSS classes to customize the table styling.	-

For Table Head

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Header rows of the table. Typically composed of TableRow and TableHeadCell components.	-
className	`string`	Additional CSS classes to customize the table header styling.	-

For Table Body

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Body rows of the table. Typically composed of TableRow and TableCell components.	-
className	`string`	Additional CSS classes to customize the table body styling.	-

For Table Row

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Cells rendered within a table row.	-
className	`string`	Additional CSS classes to customize the table row styling.	-

For Table Head Cell

Attribute	Type	Description	Default
children	`ReactNode`	Content displayed inside a table header cell (th).	-
className	`string`	Additional CSS classes to customize the table header cell styling.	-

For Table Cell

Attribute	Type	Description	Default
children	`ReactNode`	Content displayed inside a table data cell (td).	-
className	`string`	Additional CSS classes to customize the table cell styling.	-

Credits

This component is inspired by Rehman Kalawant Design Shared On Github.

Installation

Usage

API

Separator Props

Credits

On this page