npm package: @paprika/table
Description: The Table component is a simple wrap for the html table, for more advanced features see the DataGrid component.
Author: @paprika
Latest version: 1.2.36

<!-- start: Autogenerated - do not modify -->

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

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

<!-- end: Autogenerated - do not modify -->
<!-- content -->

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

```js
<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.

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

```js
<Table data={data} borderType={Table.types.HORIZONTAL}>
  <Table.ColumnDefinition header="Name" cell="name" />
  <Table.ColumnDefinition header="LastName" cell="lastName" />
</Table>
```

#### VERTICAL

```js
<Table data={data} borderType={Table.types.VERTICAL}>
  <Table.ColumnDefinition header="Name" cell="name" />
  <Table.ColumnDefinition header="LastName" cell="lastName" />
</Table>
```

#### NONE

```js
<Table data={data} borderType={Table.types.NONE}>
  <Table.ColumnDefinition header="Name" cell="name" />
  <Table.ColumnDefinition header="LastName" cell="lastName" />
</Table>
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/table-table--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Table/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/table%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Table/CHANGELOG.md)