Table

Display tabular data using rows and columns.

Want to skip the docs? Try our MCP Server

These are very low level primitives used for implementing the basic table styles. Use DataTable if you are looking for a fully featured table component.

#
Documentation

#
Usage

First Name	Last Name	Company	Address
Fred	Jackson	Acme, Inc.	123 Broad St.
Sara	James	Acme, Inc.	123 Broad St.
Ralph	Jefferson	XYZ, Inc.	456 Main St.
Nancy	Jensen	XYZ, Inc.	456 Main St.

App.tsx


import {
  Table,
  TableBody,
  TableCell,
  TableHeader,
  TableHeaderCell,
  TableRow,
} from "@optiaxiom/react";
 
import { data } from "./data";
 
export function App() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>First Name</TableHeaderCell>
          <TableHeaderCell>Last Name</TableHeaderCell>
          <TableHeaderCell>Company</TableHeaderCell>
          <TableHeaderCell>Address</TableHeaderCell>
        </TableRow>
      </TableHeader>
 
      <TableBody>
        {data.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{row.firstName}</TableCell>
            <TableCell>{row.lastName}</TableCell>
            <TableCell>{row.company}</TableCell>
            <TableCell>{row.address}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

#
Anatomy


import {
  Table,
  TableBody,
  TableCell,
  TableHeader,
  TableHeaderCell,
  TableRow,
} from "@optiaxiom/react/unstable";
 
export default () => (
  <Table>
    <TableHeader>
      <TableRow>
        <TableHeaderCell />
      </TableRow>
    </TableHeader>
 
    <TableBody>
      <TableRow>
        <TableCell>
          <TableAction />
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
);

Pagination

Display active page and navigate between multiple pages.

DataTable

Easy to use table and datagrids built using TanStack Table.

#
Props

#
Table


import { Table } from "@optiaxiom/react";
// or
import { Table } from "@optiaxiom/react/table";

Supports all Box props in addition to its own. Renders a <table> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`
`layout` Use default table layout or grid for rows and cells. `"auto" \| "fixed"` Default: `auto`

#
TableHeader


import { TableHeader } from "@optiaxiom/react";
// or
import { TableHeader } from "@optiaxiom/react/table";

Supports all Box props in addition to its own. Renders a <thead> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`
`pinned` Whether to pin the header cell to left/right of table. `false \| true`

#
TableHeaderCell


import { TableHeaderCell } from "@optiaxiom/react";
// or
import { TableHeaderCell } from "@optiaxiom/react/table";

Supports all Box props in addition to its own. Renders a <th> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`
`pinned` Whether to pin the header cell to left/right of table. `false \| true` Default: `false`
`px` Set the element’s left and right padding. Only accepts predefined spacing tokens. `ResponsiveValue<typeof styling.padding>` Default: `16`
`py` Set the element’s top and bottom padding. Only accepts predefined spacing tokens. `ResponsiveValue<typeof styling.padding>` Default: `12`

#
TableBody


import { TableBody } from "@optiaxiom/react";
// or
import { TableBody } from "@optiaxiom/react/table";

Supports all Box props in addition to its own. Renders a <tbody> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`

#
TableRow


import { TableRow } from "@optiaxiom/react";
// or
import { TableRow } from "@optiaxiom/react/table";

Supports all Box props in addition to its own. Renders a <tr> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`

#
TableCell


import { TableCell } from "@optiaxiom/react";
// or
import { TableCell } from "@optiaxiom/react/table";

Supports all Box props in addition to its own. Renders a <td> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`
`pinned` Whether to pin the header cell to left/right of table. `false \| true` Default: `false`

#
TableAction


import { TableAction } from "@optiaxiom/react";
// or
import { TableAction } from "@optiaxiom/react/table";

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true` Default: `true`
`children` `ReactNode`
`className` `string`
`visible` Control whether to always show the contents or only when user is hovering or interacting with them. `"always" \| "if-needed"`

#
Changelog

#
1.4.0

Moved component out of Alpha.


// Before
import { Table } from "@optiaxiom/react/unstable";
 
// After
import { Table } from "@optiaxiom/react";

#
0.1.0

Added component

Table

App.tsx

data.ts