The `<table>` component was built off [react-table](https://react-table.js.org/). It is intended for displaying tabular data in organized and easy to read layout. It is not recommended for use outside of that requirement.

*Note:* Be sure to include [`useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) for the columns and data.

### Basic Example

```jsx in Markdown
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { Table } from 'src/elements/Table';
import { makeData } from 'src/elements/Table/examples/utils';

const columns = React.useMemo(
  () => [
    {
      columns: [
        {
          accessor: 'firstName',
          Header: 'First Name',
        },
        {
          accessor: 'lastName',
          Header: 'Last Name',
          styleProps: {
            borderRightWidth: 1,
          },
        },
      ],
      Header: 'Name',
      styleProps: {
        borderRightWidth: 1,
        textAlign: 'center',
      },
    },
    {
      columns: [
        {
          accessor: 'age',
          Header: 'Age',
          sortType: 'basic',
          styleProps: {
            textAlign: 'right',
          },
        },
        {
          accessor: 'visits',
          Header: 'Visits',
          sortType: 'basic',
          styleProps: {
            textAlign: 'right',
          },
        },
        {
          accessor: 'status',
          Header: 'Status',
        },
        {
          accessor: 'progress',
          Header: 'Profile Progress',
          sortType: 'basic',
          styleProps: {
            textAlign: 'right',
          },
        },
      ],
      Header: 'Info',
      styleProps: {
        textAlign: 'center',
      },
    },
  ],
  []
);

const theme = {};
const data = React.useMemo(() => makeData(10), []);

<ThemeProvider theme={theme}>
  <Table
    columns={columns}
    data={data}
  />
</ThemeProvider>
```
