@leafygreen-ui/table

Table

Installation

Yarn

yarn add @leafygreen-ui/table

NPM

npm install @leafygreen-ui/table

Example

import { Table, HeaderRow, TableHeader, Row, Cell } from '@leafygreen-ui/table';

<Table
  data={defaultData}
  columns={[
    <TableHeader label="Name" />,
    <TableHeader label="Age" />,
    <TableHeader label="Color" sortBy={datum => datum.color} />,
    <TableHeader label="Location" />,
  ]}
>
  {({ datum }) => (
    <Row key={datum.name}>
      <Cell>{datum.name}</Cell>
      <Cell>{datum.age}</Cell>
      <Cell>{datum.color}</Cell>
      <Cell>{datum.location}</Cell>
    </Row>
  )}
</Table>;

Table Properties

Prop	Type	Description	Default
data	Array<unknown>	Data that will be rendered inside of the table
columns	Array<React.ReactElement<HeaderRowProps, TableHeaderProps<Shape>>>, React.ReactFragment	Columns in the Table
children	(datum, string) => JSX.Element	Rows of the table
darkMode	boolean	Determines whether or not the component will appear in dark mode.	false
baseFontSize	14, 16	Font-size value that is applied to cell elements	14
...	native table attributes	Any other props will be spread on the root table element

HeaderRow

Prop	Type	Description	Default
children	TableHeader components	TableHeader components that comprise a header row in the table.
...	native tr attributes	Any other props will be spread on the root tr element

TableHeader

Prop	Type	Description	Default
label	string, React.ReactNode	Content that will be rendered inside of the th tags
sortBy	(data: any) => string, string	String or function that provides information about how the column should be sorted
dataType	'number', 'weight', 'zipCode', 'string', 'date'	Describes the type of data in the column
compareFn	(a: any, b: any, direction: 'asc' | 'desc') => number	A callback to provide more customization in column sorting. This callback has a similar signature to the Array.sort method, with the addition of a direction parameter, which has values asc or desc. Pin a row to the top by returning -1 if a matches, and 1 if b matches the desired row
handleSort	(direction: 'asc' | 'desc') => void	A callback that gets called when a user initiates sort on the column. Internal sorting is disabled when this callback is provided.
...	native th attributes	Any other props will be spread on the root th element

Row

Prop	Type	Description	Default
disabled	boolean	Determines whether or not the row is disabled	false
expanded	boolean	Determines whether or not the row is expanded on first render	false
...	native tr attributes	Any property that can be passed to a tr element will be spread on the root

Cell

Prop	Type	Description	Default
children	React.ReactNode	Contents to appear inside of the Cell
className	string	className applied to td or th wrapper (see isHeader prop)
isHeader	boolean	Renders the cell as a th element	false
...	native td or th attributes	Any other props will be spread on the root td or th element