---
name: Table
route: /Table
menu: components
---

import { Playground, Props } from 'docz'
import { Table } from './'

# Table

<Props of={Table} />

## Usage

Basic usage is simple and _just makes sense_.

<Playground style={{ backgroundColor: "var(--colorGrayUltraLight)",  margin: '-2em', padding: '2em', width: 'auto' }}>
  {() => {
    const DATA = [
      {
        id: 'a',
        name: 'tom',
        age: 99,
        gender: 'male',
        height: `5' 11"`,
        eye_count: 2,
      },
      {
        id: 'b',
        name: 'tammy',
        age: 88,
        gender: 'female',
        height: `5' 4"`,
        eye_count: 1,
      },
      {
        id: 'c',
        name: 'rhonda',
        age: 21,
        gender: 'female',
        height: `5' 4"`,
        eye_count: 4,
      },
      {
        id: 'd',
        name: 'eric',
        age: 24,
        gender: 'male',
        height: `5' 6"`,
        eye_count: 2,
      },
    ]

    return (
      <Table data={DATA}>
        <Table.Column dataKey="id" header="Id" />
        <Table.Column dataKey="name" header="Name" />
        <Table.Column dataKey="age" header="Age" />
        <Table.Column dataKey="gender" header="Gender" />
        <Table.Column dataKey="height" header="Height" />
        <Table.Column dataKey="eye_count" header="Eye Count" />
      </Table>
    )

}}

</Playground>

That said, `Table` doesn't get much more complicated. If you'd like to add
sorting capabilities to your columns, simply add the `sort` prop.

<Playground style={{ backgroundColor: "var(--colorGrayUltraLight)",  margin: '-2em', padding: '2em', width: 'auto' }}>
  {() => {
    const DATA = [
      {
        id: 'a',
        name: 'tom',
        age: 99,
        gender: 'male',
        height: `5' 11"`,
        eye_count: 2,
      },
      {
        id: 'b',
        name: 'tammy',
        age: 88,
        gender: 'female',
        height: `5' 4"`,
        eye_count: 1,
      },
      {
        id: 'c',
        name: 'rhonda',
        age: 21,
        gender: 'female',
        height: `5' 4"`,
        eye_count: 4,
      },
      {
        id: 'd',
        name: 'eric',
        age: 24,
        gender: 'male',
        height: `5' 6"`,
        eye_count: 2,
      },
    ]

    return (
      <Table data={DATA}>
        <Table.Column dataKey="id" header="Id" sort />
        <Table.Column dataKey="name" header="Name" sort />
        <Table.Column dataKey="age" header="Age" sort />
        <Table.Column dataKey="gender" header="Gender" sort />
        <Table.Column dataKey="height" header="Height" sort />
        <Table.Column dataKey="eye_count" header="Eye Count" sort />
      </Table>
    )

}}

</Playground>

For sorting requiring a bit more intelligence than the baked-in sorting functionality,
you can pass a sorting function to the `sort` prop.

<Playground style={{ backgroundColor: "var(--colorGrayUltraLight)",  margin: '-2em', padding: '2em', width: 'auto' }}>
  {() => {
    const DATA = [
      {
        id: 'a',
        name: 'tom',
        age: 99,
        gender: 'male',
        height: `5' 11"`,
        eye_count: 2,
      },
      {
        id: 'b',
        name: 'tammy',
        age: 88,
        gender: 'female',
        height: `5' 4"`,
        eye_count: 1,
      },
      {
        id: 'c',
        name: 'rhonda',
        age: 21,
        gender: 'female',
        height: `5' 4"`,
        eye_count: 4,
      },
      {
        id: 'd',
        name: 'eric',
        age: 24,
        gender: 'male',
        height: `5' 6"`,
        eye_count: 2,
      },
    ]

    const sortByHeight = data => {
      return data.tableProps.data.sort((a, b) => {
        const [aFeet, aInches] = a.height.match(/\d+/g).map(Number)
        const [bFeet, bInches] = b.height.match(/\d+/g).map(Number)
        const aTotalInches = (aFeet * 12) + aInches
        const bTotalInches = (bFeet * 12) + bInches

        return data.newSortDirection === 'ascending'
          ? aTotalInches > bTotalInches && 1 || -1
          : aTotalInches < bTotalInches && 1 || -1
      })
    }

    return (
      <Table data={DATA}>
        <Table.Column dataKey="id" header="Id" />
        <Table.Column dataKey="name" header="Name" />
        <Table.Column dataKey="age" header="Age" />
        <Table.Column dataKey="gender" header="Gender" />
        <Table.Column dataKey="height" header="Height" sort={sortByHeight} />
        <Table.Column dataKey="eye_count" header="Eye Count" />
      </Table>
    )

}}

</Playground>
