Table API

Component status:: stable

Import

import { Table } from "@stratakit/structures";
// OR
import * as Table from "@stratakit/structures/Table";

Table.HtmlTable

Base element: <table>

A table is a grid of rows and columns that displays data in a structured format.

Table.HtmlTable uses native HTML table elements for the table root and its descendants.

E.g. <table>, <thead>, <tbody>, <tr>, <th>, and <td>.

Related: Table.CustomTable

Example:

<Table.HtmlTable> // <table>
  <Table.Caption>Table Caption</Table.Caption> // <caption>

  <Table.Header> // <thead>
     <Table.Row> // <tr>
       <Table.Cell>Header 1</Table.Cell> // <th>
        <Table.Cell>Header 2</Table.Cell> // <th>
     </Table.Row>
  </Table.Header>

  <Table.Body> // <tbody>
     <Table.Row> // <tr>
       <Table.Cell>Cell 1.1</Table.Cell> // <td>
       <Table.Cell>Cell 1.2</Table.Cell> // <td>
     </Table.Row>
     <Table.Row> // <tr>
       <Table.Cell>Cell 2.1</Table.Cell> // <td>
       <Table.Cell>Cell 2.2</Table.Cell> // <td>
     </Table.Row>
  </Table.Body>
</Table.HtmlTable>

Additional props

render

Table.CustomTable

Base element: <div>

A table is a grid of rows and columns that displays data in a structured format.

Table.CustomTable implements the WAI-ARIA table pattern using divs + appropriate roles for the table root and its descendants.

E.g. <div role="table">, <div role="row">, <div role="columnheader">, and <div role="cell">.

Related: Table.HtmlTable

Example:

<Table.CustomTable> // <div role="table">
  <Table.Caption>Table Caption</Table.Caption> // <div role="caption">

  <Table.Header> // <div role="rowgroup">
     <Table.Row> // <div role="row">
       <Table.Cell>Header 1</Table.Cell> // <div role="columnheader">
        <Table.Cell>Header 2</Table.Cell> // <div role="columnheader">
     </Table.Row>
  </Table.Header>

  <Table.Body>
     <Table.Row> // <div role="row">
       <Table.Cell>Cell 1.1</Table.Cell> // <div role="cell">
       <Table.Cell>Cell 1.2</Table.Cell> // <div role="cell">
     </Table.Row>
     <Table.Row> // <div role="row">
       <Table.Cell>Cell 2.1</Table.Cell> // <div role="cell">
       <Table.Cell>Cell 2.2</Table.Cell> // <div role="cell">
     </Table.Row>
  </Table.Body>
</Table.CustomTable>

Additional props

render

Base element: <div>

Table.Header is a column component of cells that labels the columns of a table. Table.Row and Table.Cell can be nested inside a Table.Header to create a header row.

If within a Table.HtmlTable: it will render a <thead> element. If within a Table.CustomTable: it will render a <div role="rowgroup"> element.

Example:

<Table.Header>
  <Table.Row>
    <Table.Cell>Header 1</Table.Cell>
      <Table.Cell>Header 2</Table.Cell>
  </Table.Row>
</Table.Header>

render

Table.Body

Base element: <div>

Table.Body is a component that contains the rows of table data. Multiple Table.Rows and Table.Cells can be nested inside a Table.Body to create a table body.

If within a Table.HtmlTable: it will render a <tbody> element. If within a Table.CustomTable: it will render a <div> element.

Example:

<Table.Body>
  <Table.Row>
    <Table.Cell>Cell 1.1</Table.Cell>
    <Table.Cell>Cell 1.2</Table.Cell>
  </Table.Row>
  <Table.Row>
    <Table.Cell>Cell 2.1</Table.Cell>
    <Table.Cell>Cell 2.2</Table.Cell>
  </Table.Row>
</Table.Body>

Additional props

render

Table.Row

Base element: <div>

Table.Row is a component that contains the cells of a table row.

If within a Table.HtmlTable: it will render a <tr> element. If within a Table.CustomTable: it will render a <div role="row"> element.

Example:

<Table.Row>
  <Table.Cell>Cell 1.1</Table.Cell>
  <Table.Cell>Cell 1.2</Table.Cell>
</Table.Row>

Rows that contain checked checkboxes are considered selected. The Checkbox component can be rendered to add selection functionality for the table rows.

Example:

<Table.Row>
  <Table.Cell><Checkbox /><Table.Cell>
  <Table.Cell>Cell 1.1</Table.Cell>
  <Table.Cell>Cell 1.2</Table.Cell>
</Table.Row

Additional props

render

Table.Caption

Base element: <div>

Table.Caption is a component that contains the caption of a table.

If within a Table.HtmlTable: it will render a <caption> element. If within a Table.CustomTable: it will render a <div role="caption"> element.

Example:

<Table.CustomTable> // Or <Table.HtmlTable>
   <Table.Caption>Table Caption</Table.Caption>
   …
</Table.CustomTable> // Or </Table.HtmlTable>

Additional props

render

Table.Cell

Base element: <div>

Table.Cell is a component that contains the data of a table cell.

If within a Table.HtmlTable: it will render a <th> element if also within a Table.Header, or a <td> element if also within a Table.Body.
If within a Table.CustomTable: it will render a <div role="columnheader"> element if also within a Table.Header, or a <div role="cell"> element if also within a Table.Body.

Example:

<Table.Cell>Cell 1.1</Table.Cell>

Additional props

render