@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
192 lines • 8.57 kB
TypeScript
import * as React from "react";
import type { Props } from "./types";
/**
* @orbit-doc-start
* README
* ----------
* # Table
*
* To implement Table component into your project you'll need to add the import:
*
* ```jsx
* import Table, {
* TableHead,
* TableBody,
* TableRow,
* TableCell,
* TableFooter,
* } from "@kiwicom/orbit-components/lib/Table";
* ```
*
* After adding import into your project you can use it simply like:
*
* ```jsx
* <Table>
* <TableHead>
* <TableRow>
* <TableCell>Header</TableCell>
* </TableRow>
* </TableHead>
* <TableBody>
* <TableRow>
* <TableCell>Content</TableCell>
* </TableRow>
* </TableBody>
* <TableFooter>
* <TableRow>
* <TableCell>Footer</TableCell>
* </TableRow>
* </TableFooter>
* </Table>
* ```
*
* ## Props
*
* Table below contains all types of the props available in the Table component.
*
* | Name | Type | Default | Description |
* | :----------- | :-------------- | :---------- | :----------------------------------------------------------------------------------------- |
* | **children** | `React.Node` | | The content of the Table, normally [`TableHead`](#tablehead) or [`TableBody`](#tablebody). |
* | compact | `boolean` | `false` | If `true`, the Table will have more compact styles. |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | id | `string` | | Set `id` for Table. |
* | striped | `boolean` | `true` | Functionality of table where every second line is grey |
* | type | [`enum`](#enum) | `"primary"` | The type of Table. |
*
* ### enum
*
* | type |
* | :------------ |
* | `"primary"` |
* | `"secondary"` |
*
* ## Subcomponents
*
* There are four subcomponents which you need to use.
*
* ### TableHead
*
* ```jsx
* import TableHead from "@kiwicom/orbit-components/lib/Table/TableHead";
* ```
*
* #### Props
*
* Table below contains all types of the props in TableHead component.
*
* | Name | Type | Default | Description |
* | :----------- | :----------- | :------ | :-------------------------------------------------------------- |
* | **children** | `React.Node` | | The content of the TableHead, normally [`TableRow`](#tablerow). |
* | dataTest | `string` | | Optional prop for testing purposes. |
*
* ### TableBody
*
* ```jsx
* import TableBody from "@kiwicom/orbit-components/lib/Table/TableBody";
* ```
*
* #### Props
*
* Table below contains all types of the props in TableBody component.
*
* | Name | Type | Default | Description |
* | :----------- | :----------- | :------ | :-------------------------------------------------------------- |
* | **children** | `React.Node` | | The content of the TableBody, normally [`TableRow`](#tablerow). |
* | dataTest | `string` | | Optional prop for testing purposes. |
*
* ### TableRow
*
* ```jsx
* import TableRow from "@kiwicom/orbit-components/lib/Table/TableRow";
* ```
*
* #### Props
*
* Table below contains all types of the props in TableRow component.
*
* | Name | Type | Default | Description |
* | :----------- | :----------- | :------ | :--------------------------------------------------------------- |
* | **children** | `React.Node` | | The content of the TableRow, normally [`TableCell`](#tablecell). |
* | dataTest | `string` | | Optional prop for testing purposes. |
*
* ### TableCell
*
* ```jsx
* import TableCell from "@kiwicom/orbit-components/lib/Table/TableCell";
* ```
*
* #### Props
*
* Table below contains all types of the props in TableCell component.
*
* | Name | Type | Default | Description |
* | :------------ | :-------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------- |
* | align | [`enum`](#enum) | `"left"` | The align of text in the TableCell. |
* | as | [`enum`](#enum) | `"td"` | Possibility to render TableCell in different HTML. |
* | children | `React.Node` | | The content of the TableCell. |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | scope | [`enum`](#enum) | | Can be set only when `as="th"`. Identifies whether a table header is a column header or a row header. See the Accessibility tab. |
* | verticalAlign | [`enum`](#enum) | | The vertical align of the content in the TableCell. |
* | whiteSpace | [`enum`](#enum) | | The white-space setting of text in the TableCell. |
*
* #### enum
*
* | align | whiteSpace | VerticalAlign | as | scope |
* | :--------- | :----------- | ------------- | :----- | :----------- |
* | `"left"` | `"nowrap"` | `"baseline"` | `"th"` | `"col"` |
* | `"center"` | `"pre"` | `"middle"` | `"td"` | `"row"` |
* | `"right"` | `"pre-line"` | `"top"` | | `"colgroup"` |
* | | `"normal"` | `"bottom"` | | `"rowgroup"` |
*
* ### TableFooter
*
* ```jsx
* import TableFooter from "@kiwicom/orbit-components/lib/Table/TableFooter";
* ```
*
* #### Props
*
* Table below contains all types of the props in TableFooter component.
*
* | Name | Type | Default | Description |
* | :----------- | :----------- | :------ | :---------------------------------------------------------------- |
* | **children** | `React.Node` | | The content of the TableFooter, normally [`TableRow`](#tablerow). |
* | dataTest | `string` | | Optional prop for testing purposes. |
*
*
* Accessibility
* -------------
* # Accessibility
*
* ## Table
*
* The Table component has been designed with accessibility in mind, and it can be used with keyboard navigation.
*
* ### Scope attribute in the TableCell component
*
* If the `as` prop is set to `"th"`, it's possible to set the `scope` prop to identify whether a table header is a column header or a row header.
* You can find more information about the usage in the [official documentation of the scope property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement/scope).
*
* ```jsx
* <TableRow>
* <TableCell as="th" scope="row">
* Freja Møller
* </TableCell>
* <TableCell>39</TableCell>
* <TableCell>freja21@example.com</TableCell>
* </TableRow>
* ```
*
* Screen readers will recognize markup structured like this, and allow their users to read out the entire column or row at once, for example.
*
*
* @orbit-doc-end
*/
declare const Table: ({ children, striped, compact, dataTest, id, type, }: Props) => React.JSX.Element;
export default Table;
export { default as TableHead } from "./TableHead";
export { default as TableBody } from "./TableBody";
export { default as TableFooter } from "./TableFooter";
export { default as TableRow } from "./TableRow";
export { default as TableCell } from "./TableCell";
//# sourceMappingURL=index.d.ts.map