Table

A content area which can be collapsed and expanded. Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. Visit our TanStack Table integration page for a full table example with TanStack Table.

import { Table } from "rizzui";

Default

The default style of Table component.

ID	Employee	Designation	Status
#12345	John Doe	FrontEnd Developer	Active
#12346	Jane Smith	UI/UX Designer	Active
#12347	James Burns	Project Manager	Active

import { Badge, Table } from "rizzui";

export default function App() {
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.Head>ID</Table.Head>
          <Table.Head>Employee</Table.Head>
          <Table.Head>Designation</Table.Head>
          <Table.Head>Status</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>#12345</Table.Cell>
          <Table.Cell>John Doe</Table.Cell>
          <Table.Cell>FrontEnd Developer</Table.Cell>
          <Table.Cell>
            <Badge>Active</Badge>
          </Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>#12346</Table.Cell>
          <Table.Cell>Jane Smith</Table.Cell>
          <Table.Cell>UI/UX Designer</Table.Cell>
          <Table.Cell>
            <Badge>Active</Badge>
          </Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>#12347</Table.Cell>
          <Table.Cell>James Burns</Table.Cell>
          <Table.Cell>Project Manager</Table.Cell>
          <Table.Cell>
            <Badge>Active</Badge>
          </Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Minimal

You can change the style of Table by changing property variant.

ID	Employee	Designation	Status
#12345	John Doe	FrontEnd Developer	Active
#12346	Jane Smith	UI/UX Designer	Active
#12347	James Burns	Project Manager	Active

import { Table } from "rizzui";

export default function App() {
  return (
    <Table variant="minimal">
      <Table.Header>...</Table.Header>
      <Table.Body>...</Table.Body>
    </Table>
  );
}

Elegant

You can change the style of Table by changing property variant.

ID	Employee	Designation	Status
#12345	John Doe	FrontEnd Developer	Active
#12346	Jane Smith	UI/UX Designer	Active
#12347	James Burns	Project Manager	Active

import { Table } from "rizzui";

export default function App() {
  return (
    <Table variant="elegant">
      <Table.Header>...</Table.Header>
      <Table.Body>...</Table.Body>
    </Table>
  );
}

Retro

You can change the style of Table by changing property variant.

ID	Employee	Designation	Status
#12345	John Doe	FrontEnd Developer	Active
#12346	Jane Smith	UI/UX Designer	Active
#12347	James Burns	Project Manager	Active

import { Table } from "rizzui";

export default function App() {
  return (
    <Table variant="retro">
      <Table.Header>...</Table.Header>
      <Table.Body>...</Table.Body>
    </Table>
  );
}

Classic

You can change the style of Table by changing property variant.

ID	Employee	Designation	Status
#12345	John Doe	FrontEnd Developer	Active
#12346	Jane Smith	UI/UX Designer	Active
#12347	James Burns	Project Manager	Active

import { Table } from "rizzui";

export default function App() {
  return (
    <Table variant="classic">
      <Table.Header>...</Table.Header>
      <Table.Body>...</Table.Body>
    </Table>
  );
}

API Reference

---

Table Props

Here is the API documentation of the Table component.

Props	Type	Description	Default
children	ReactElement	Use any valid React element or string	__
variant	TableVariants	The variants of the component are:	"classic"
className	string	Add custom classes for extra style	__

Table.Header Props

Here is the API documentation of the Table.Header component.

Props	Type	Description	Default
children	ReactElement	Use any valid React element or string	__
className	string	Add classes to the Table.Header of this component	__

Table.Body Props

Here is the API documentation of the Table.Body component.

Props	Type	Description	Default
children	ReactElement	Use any valid React element or string	__
className	string	Add classes to the Table.Body of this component	__

Table.Footer Props

Here is the API documentation of the Table.Footer component.

Props	Type	Description	Default
children	ReactElement	Use any valid React element or string	__
className	string	Add classes to the Table.Footer of this component	__

Table.Row Props

Here is the API documentation of the Table.Row component.

Props	Type	Description	Default
children	ReactElement	Use any valid React element or string	__
className	string	Add classes to the Table.Row of this component	__

Table.Head Props

Here is the API documentation of the Table.Head component.

Props	Type	Description	Default
children	ReactElement	Use any valid React element or string	__
className	string	Add classes to the Table.Head of this component	__

Table.Cell Props

Here is the API documentation of the Table.Cell component.

Props	Type	Description	Default
children	ReactElement	Use any valid React element or string	__
className	string	Add classes to the Table.Cell of this component	__

Table Variants

type TableVariants = "modern" | "minimal" | "elegant" | "retro" | "classic";