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 (таблица)
Наследует [Div props](/docs/components/Div).

Компонент Table позволяет расположить данные в строках и столбцах. Таблица может содержать шапку и тело, которые задаются с помощью компонентов Thead и Tbody. Любая таблица состоит из строк и ячеек, которые задаются с помощью компонентов Tr и Th или Td.

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

## Простой пример

```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>
)
```


## Стилизация

```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>
)
```