Skip to content

Latest commit

 

History

History
88 lines (69 loc) · 7.13 KB

V10_README.md

File metadata and controls

88 lines (69 loc) · 7.13 KB

Table

npm (scoped)

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