@leafygreen-ui/table
leafyGreen UI Kit Table
Last updated 2 months ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/table 
SYNC missed versions from official npm registry.

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
... 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 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
... 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
... React.ComponentPropsWithRef<'tr'> 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 wrapper
... native td attributes Any other props will be spread on the root td element

Current Tags

  • 1.2.1                                ...           latest (2 months ago)

11 Versions

  • 1.2.1                                ...           2 months ago
  • 1.2.0                                ...           2 months ago
  • 1.1.0                                ...           3 months ago
  • 1.0.0                                ...           3 months ago
  • 0.2.1                                ...           3 months ago
  • 0.2.0                                ...           3 months ago
  • 0.1.5                                ...           4 months ago
  • 0.1.4                                ...           4 months ago
  • 0.1.3                                ...           5 months ago
  • 0.1.2                                ...           5 months ago
  • 0.1.0                                ...           5 months ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 19
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |