Table

Display tabular data using rows and columns.

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>
);

#
Related

Pagination

Display active page and navigate between multiple pages.

#
Props

#
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`
`className` `string`
`layout` Use default table layout or grid for rows and cells. `"auto" \| "fixed"` Default: `auto`

#
TableHeader

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`
`className` `string`
`pinned` Whether to pin the header cell to left/right of table. `false \| true`

#
TableHeaderCell

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`
`className` `string`
`pinned` Whether to pin the header cell to left/right of table. `false \| true` Default: `false`

#
TableBody

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`
`className` `string`

#
TableRow

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`
`className` `string`

#
TableCell

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`
`className` `string`
`pinned` Whether to pin the header cell to left/right of table. `false \| true` Default: `false`

#
TableAction

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`
`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