@paprika/table NPM

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