@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

$3

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

$3

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

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

`js






`

$3

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

component.

`js






`

$3

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

`js






`

#### VERTICAL

`js






`

#### NONE

`js






``

Links

- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG