### Array-Driven Data Tables

Display a collection of similarly-structured arrays as a table.

```jsx
import HTTPStatus from '@ui/components/HTTPStatus';
const data = [
  [<b>Asia Blue</b>, 'Hayes', <code>217f0f</code>, 31, 'she', 'married', <HTTPStatus status={200}/>],
  [<b>Alex</b>, 'Okebe', <code>45b6df</code>, 29, 'he', 'involved', <HTTPStatus status={202}/>],
  [<b>KT</b>, 'Klein', <code>44ca92</code>, 36, 'they', 'involved', <HTTPStatus status={301}/>],
  [<b>Rafe</b>, 'Goldberg', <code>13e9b3</code>, 28, 'he', 'single', <HTTPStatus status={200}/>],
];

<Table
  head={[ [['Name', 2], 'ID', 'Age', 'Pronoun', 'Satus', 'Status'] ]}
  body={data}
  striped={true}
  style={{ width: '100%' }}
  />
```

<!--|
```jsx
<Table
  striped={true}
  body={[
    ['مرحبا', 'بالعالم'],
    ['Hello', 'World'],
    ['Bonjour', 'le Monde'],
    ['Hallo', 'Welt'],
    ['नमस्ते', 'दुनिया'],
  ]} />
```
|-->

### Object-Based Data Tables

Display a table of values for each key given in the `[pick]` prop (using `lodash/at`.) This mode is automatically enabled when you pass a collection of objects as the `[body]` data.

```jsx
const data = [
  {
    _id: "c28bccce",
    subdomain: "readme",
    clientIPAddress: "::1",
    error: null,
    startedDateTime: "2020-01-25T00:01:05.838Z",
    responseTime: 0,
    method: "GET",
    url: "http://localhost:8888/",
    httpVersion: "1.0",
    requestHeaders: [],
    queryString: [],
    status: 200,
    statusText: "OK",
    responseHeaders: [],
    createdAt: "2020-01-25T00:02:28.901Z",
    updatedAt: "2020-01-25T00:02:28.901Z",
    __v: 0
  },
  {
    _id: "6440e787",
    subdomain: "readme",
    clientIPAddress: "::1",
    error: null,
    startedDateTime: "2020-01-25T00:01:05.837Z",
    responseTime: 0,
    method: "GET",
    url: "http://localhost:8888/",
    httpVersion: "1.0",
    requestHeaders: [],
    queryString: [],
    status: 200,
    statusText: "OK",
    responseHeaders: [],
    createdAt: "2020-01-25T00:02:26.540Z",
    updatedAt: "2020-01-25T00:02:26.540Z",
    __v: 0
  },
  {
    _id: "18dc4ae6",
    subdomain: "readme",
    clientIPAddress: "::1",
    error: null,
    startedDateTime: "2020-01-25T00:01:05.837Z",
    responseTime: 0,
    method: "GET",
    url: "http://localhost:8888/",
    httpVersion: "1.0",
    requestHeaders: [],
    queryString: [],
    status: 200,
    statusText: "OK",
    responseHeaders: [],
    createdAt: "2020-01-25T00:02:28.901Z",
    updatedAt: "2020-01-25T00:02:28.901Z",
    __v: 0
  },
  {
    _id: "6f193932",
    subdomain: "readme",
    clientIPAddress: "::1",
    error: null,
    startedDateTime: "2020-01-25T00:01:05.834Z",
    responseTime: 0,
    method: "GET",
    url: "http://localhost:8888/",
    httpVersion: "1.0",
    requestHeaders: [],
    queryString: [],
    status: 200,
    statusText: "OK",
    responseHeaders: [],
    createdAt: "2020-01-25T00:02:24.880Z",
    updatedAt: "2020-01-25T00:02:24.880Z",
    __v: 0
  },
  {
    _id: "8c75e520",
    subdomain: "readme",
    clientIPAddress: "::1",
    error: null,
    startedDateTime: "2020-01-25T00:01:05.832Z",
    responseTime: 0,
    method: "GET",
    url: "http://localhost:8888/",
    httpVersion: "1.0",
    requestHeaders: [],
    queryString: [],
    status: 404,
    statusText: "NOT FOUND",
    responseHeaders: [],
    createdAt: "2020-01-25T00:02:28.901Z",
    updatedAt: "2020-01-25T00:02:28.901Z",
    __v: 0
  },
];

<div style={{overflow: 'scroll'}}>
  <Table
    striped={true}
    head={[Object.keys(data[0])]}
    body={data}
    />
</div>
```