🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Table

A flexible table component for displaying structured data

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	Editor

Installation

The Table component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Table component into your React component.

import { Table } from 'reacui';

Basic Usage

A simple table with headers and body rows.

Product	Price
Product A	$100
Product B	$200

<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>Product</Table.HeaderCell>
      <Table.HeaderCell>Price</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Product A</Table.Cell>
      <Table.Cell>$100</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Product B</Table.Cell>
      <Table.Cell>$200</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Table Structure

The Table component is composed of several subcomponents: Header, Body, Row, HeaderCell, and Cell.

<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>Column 1</Table.HeaderCell>
      <Table.HeaderCell>Column 2</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Data 1</Table.Cell>
      <Table.Cell>Data 2</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Custom Styling

Apply custom styles to any part of the table using the className prop.

Name	Status
Project Alpha	Active
Project Beta	In Review

<Table>
  <Table.Header className="bg-primary-100 dark:bg-primary-900">
    <Table.Row>
      <Table.HeaderCell className="text-primary-800 dark:text-primary-300">Name</Table.HeaderCell>
      <Table.HeaderCell className="text-primary-800 dark:text-primary-300">Status</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row className="hover:bg-primary-50 dark:hover:bg-primary-900/50">
      <Table.Cell>Project Alpha</Table.Cell>
      <Table.Cell>
        <Badge variant="success" size="sm">Active</Badge>
      </Table.Cell>
    </Table.Row>
    <Table.Row className="hover:bg-primary-50 dark:hover:bg-primary-900/50">
      <Table.Cell>Project Beta</Table.Cell>
      <Table.Cell>
        <Badge variant="warning" size="sm">In Review</Badge>
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

API Reference

The following props are available for the Table components.

Component	Prop	Type	Default	Description
Table	children	ReactNode	-	The table content.
Table	className	string	''	Additional CSS classes.
Table.Header	children	ReactNode	-	The table header content.
Table.Header	className	string	''	Additional CSS classes.
Table.Body	children	ReactNode	-	The table body content.
Table.Body	className	string	''	Additional CSS classes.