@paprika/table
Description
The Table component is a simple wrap for the html table, for more advanced features see the DataGrid component.
Installation
yarn add @paprika/table
or with npm:
npm install @paprika/table
Props
Table
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| borderType | [ Table.types.border.GRID, Table.types.border.NONE, Table.types.border.HORIZONTAL, Table.types.border.VERTICAL] | false | Table.types.border.HORIZONTAL | Define the look for borders in the table |
| a11yText | string | true | - | Accessible description of the table |
| children | node | true | - | 👶👶👶👶👶👶😸 |
| hasZebraStripes | bool | false | false | Add an alternating background on the table rows |
| data | arrayOf | false | [] | Array of data to be stored in the Table |
| enableArrowKeyNavigation | bool | false | false | For authors use only, use case: inline editing. |
| onFocus | func | false | () => {} | Will fire each time a new cell receives focus |
| onBlur | func | false | () => {} | Will fire each time a selected cell loses focus |
| onClick | func | false | () => {} | Will fire each time user clicks on a cell |
Table.ColumnDefinition
element| Prop | Type | required | default | Description | |
|---|---|---|---|---|---|
| cell | [string,func] | true | - | Each time a cell is renderer this prop will be call either to read a string value or to execute a cell function | |
| cellProps | func | false | undefined | Give you access to return an object (styles, className, data-qa, etc) to render on top of each | |
| header | [string,func] | true | - | Represent the header for the column can either be a string or a function | |
| sticky | number | false | undefined | Determine if a column should behave as a sticky column or not, received a number representing the space between the left side and the column pixels | |
| internally the default value is zero |
Basic
To create a basic Table simply add the <Table> component and set the data property to the data object you wish to pass in.
Inside your table you can create columns by adding the <Table.ColumnDefinition /> sub component. Add a header name with the header property and set the cell property to specify the data object property name you wish to pas into said column. You can add additional attributes like className which will be applied to both the header element (th) and the cells (td).
<Table data={data}>
<Table.ColumnDefinition header="Name" cell="name" />
<Table.ColumnDefinition header="LastName" cell="lastName" />
</Table>With Zebra Stripes
A table with zebra stripes can help differentiate each row for easier scan and readability. To add zebra stripes to the table add the hasZebraStripes property to the <Table> component.
<Table data={data} hasZebraStripes>
<Table.ColumnDefinition header="Name" cell="name" />
<Table.ColumnDefinition header="LastName" cell="lastName" />
</Table>Border Types
The table can further be customized by adjusting the borders. The table can be set to display no borders, only horizontal borders, or only vertical borders. To set the border type add the borderType property. The borderType property can be set to Table.types.HORIZONTAL, Table.types.VERTICAL, or Table.types.NONE.
HORIZONTAL
<Table data={data} borderType={Table.types.HORIZONTAL}>
<Table.ColumnDefinition header="Name" cell="name" />
<Table.ColumnDefinition header="LastName" cell="lastName" />
</Table>VERTICAL
<Table data={data} borderType={Table.types.VERTICAL}>
<Table.ColumnDefinition header="Name" cell="name" />
<Table.ColumnDefinition header="LastName" cell="lastName" />
</Table>NONE
<Table data={data} borderType={Table.types.NONE}>
<Table.ColumnDefinition header="Name" cell="name" />
<Table.ColumnDefinition header="LastName" cell="lastName" />
</Table>