@stratakit/structures
Version:
Medium-sized component structures for the Strata design system
185 lines (184 loc) • 6.56 kB
TypeScript
import * as React from "react";
import type { BaseProps } from "@stratakit/foundations/secret-internals";
interface HtmlTableProps extends BaseProps {
}
/**
* 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:
* ```tsx
* <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>
* ```
*/
declare const HtmlTable: React.ForwardRefExoticComponent<HtmlTableProps & React.RefAttributes<HTMLElement | HTMLTableElement>>;
interface CustomTableProps extends BaseProps {
}
/**
* A table is a grid of rows and columns that displays data in a structured format.
*
* `Table.CustomTable` implements the [WAI-ARIA table pattern](https://www.w3.org/WAI/ARIA/apg/patterns/table/) 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:
* ```tsx
* <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>
* ```
*/
declare const CustomTable: React.ForwardRefExoticComponent<CustomTableProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface TableHeaderProps extends BaseProps<"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:
* ```tsx
* <Table.Header>
* <Table.Row>
* <Table.Cell>Header 1</Table.Cell>
* <Table.Cell>Header 2</Table.Cell>
* </Table.Row>
* </Table.Header>
* ```
*/
declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface TableBodyProps extends BaseProps<"div"> {
}
/**
* `Table.Body` is a component that contains the rows of table data.
* Multiple `Table.Row`s and `Table.Cell`s 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:
* ```tsx
* <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>
* ```
*/
declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface TableRowProps extends BaseProps<"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:
* ```tsx
* <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:
* ```tsx
* <Table.Row>
* <Table.Cell><Checkbox /><Table.Cell>
* <Table.Cell>Cell 1.1</Table.Cell>
* <Table.Cell>Cell 1.2</Table.Cell>
* </Table.Row
* ```
*/
declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface TableCaptionProps extends BaseProps<"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:
* ```tsx
* <Table.CustomTable> // Or <Table.HtmlTable>
* <Table.Caption>Table Caption</Table.Caption>
* …
* </Table.CustomTable> // Or </Table.HtmlTable>
* ```
*/
declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface TableCellProps extends BaseProps<"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:
* ```tsx
* <Table.Cell>Cell 1.1</Table.Cell>
* ```
*/
declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
export { HtmlTable, CustomTable, TableHeader as Header, TableBody as Body, TableRow as Row, TableCaption as Caption, TableCell as Cell, };