STYLED MDL

Tables

Organize data.

Table with selectable rows

arrow_downwardMaterialQuantityUnit price
Acrylic (Transparent)25$2.90
Laminate (Gold on Blue)10$2.35
Plywood (Birch)50$1.25
/*--- Data table ---*/
const DemoTable = Table.extend`
  ${shadow2dp()}
`

const DemoTh = HeaderCell.extend`
  ${({ sorted }) => sorted && css`
    color: ${theme.textColorPrimary}
  `}
`

// somewhere in a render
<DemoTable>
  <TableHeader>
    <Row>
      <DemoTh><Checkbox /></DemoTh>
      <DemoTh nonNumeric sorted>
        <TableIcon name="arrow_downward" />
        Material
      </DemoTh>
      <DemoTh>Quantity</DemoTh>
      <DemoTh>Unit price</DemoTh>
    </Row>
  </TableHeader>
  <TableBody>
    <Row isSelected>
      <Cell><Checkbox defaultChecked /></Cell>
      <Cell nonNumeric>Acrylic (Transparent)</Cell>
      <Cell>25</Cell>
      <Cell>$2.90</Cell>
    </Row>
    <Row>
      <Cell><Checkbox /></Cell>
      <Cell nonNumeric>Laminate (Gold on Blue)</Cell>
      <Cell>10</Cell>
      <Cell>$2.35</Cell>
    </Row>
    <Row>
      <Cell><Checkbox /></Cell>
      <Cell nonNumeric>Plywood (Birch)</Cell>
      <Cell>50</Cell>
      <Cell>$1.25</Cell>
    </Row>
  </TableBody>
</DemoTable>

Usage

<Table>

No Custom Props

<TableHeader>

No Custom Props

<TableBody>

No Custom Props

<Row>

PropTypeDefaultDescription
isSelectedbooleanfalseDisplays the row as selected

<Cell>

PropTypeDefaultDescription
nonNumericbooleanfalseUse this for non-numeric values that should be left aligned

<HeaderCell>

PropTypeDefaultDescription
nonNumericbooleanfalseUse this for non-numeric values that should be left aligned

<TableIcon>

PropTypeDefaultDescription
namestringundefinedControls the icon type. Reference the Material Icons page for a full list of icons