import Table from '../Table'
import Thead from '../Thead'
import Tbody from '../Tbody'
import Tr from '../Tr'
import Th from '../Th'
import Td from '../Td'
import Span from '../../typography/Span'

# Table
Inherits [Div props](/docs/components/Div).

The Table component allows to arrange data in rows and columns. The table can contain a header and a body, which are specified using the Thead and Tbody components. Any table consists of rows and cells, which are specified using the Tr and Th or Td components.

```jsx
import { Table, Thead, Tbody, Tr, Th, Td } from '@startupjs/ui'
```

## Simple example

```jsx example
return (
  <Table>
    <Thead>
      <Tr>
        <Th>
          <Span bold>
            First
          </Span>
        </Th>
        <Th>
          <Span bold>
            Second
          </Span>
        </Th>
      </Tr>
    </Thead>
    <Tbody>
      <Tr>
        <Td>
          <Span>First 1</Span>
        </Td>
        <Td>
          <Span>Second 1</Span>
        </Td>
      </Tr>
      <Tr>
        <Td>
          <Span>First 2</Span>
        </Td>
        <Td>
          <Span>Second 3</Span>
        </Td>
      </Tr>
    </Tbody>
  </Table>
)
```

## Styling

```jsx example
const tableStyle = {
  backgroundColor: '#fff',
}

const hoverOptions = {
  style: {
    cursor: 'default',
  },
  hoverStyle: {
    backgroundColor: '#ebf8fd',
  },
  activeStyle: {
    opacity: 1,
    backgroundColor: '#ebf8fd',
  },
  onPress: () => undefined,
}

return (
  <Table style={tableStyle}>
    <Thead>
      <Tr>
        <Th {...hoverOptions}>
          <Span bold italic>
            First
          </Span>
        </Th>
        <Th {...hoverOptions}>Second</Th>
        <Th {...hoverOptions}>Third</Th>
      </Tr>
    </Thead>
    <Tbody>
      <Tr {...hoverOptions}>
        <Td>
          <Span italic>First 1</Span>
        </Td>
        <Td>Second 1</Td>
        <Td>Third 1</Td>
      </Tr>
      <Tr {...hoverOptions}>
        <Td>
          <Span italic>First 2</Span>
        </Td>
        <Td>Second 2</Td>
        <Td>Third 2</Td>
      </Tr>
    </Tbody>
  </Table>
)
```