# Component/Table/TableCell

> Props: component-table-tablecell.props.txt

## Examples


### Base

```tsx
{
  render: props => <TableContainer>
      <Table>
        <thead>
          <TableRow>
            <TableCol>기본 TableCell</TableCol>
            <TableCol>변경 TableCell</TableCol>
          </TableRow>
        </thead>
        <tbody>
          <TableRow>
            <TableCell>
              1줄
              <br />
              2줄
              <br />
              3줄
            </TableCell>
            <TableCell {...props}>값</TableCell>
          </TableRow>
        </tbody>
      </Table>
    </TableContainer>
}
```

### Huge Contents

HugeContents 유무를 결정할 수 있습니다.

```tsx
{
  parameters: {
    docs: {
      description: {
        story: 'HugeContents 유무를 결정할 수 있습니다.'
      }
    }
  },
  render: () => <TableContainer>
      <Table>
        <thead>
          <TableRow>
            <TableCol>기본</TableCol>
            <TableCol>HugeContents 비활성화</TableCol>
          </TableRow>
        </thead>
        <tbody>
          <TableRow>
            <TableCell width={200} isHugeContents>
              TableCell의 스토리북의 HugeContents 유무를 결정할 수 있습니다. 스토리의 내용입니다. TableCell의 스토리북의
              HugeContents 유무를 결정할 수 있습니다. 스토리의 내용입니다. TableCell의 스토리북의 HugeContents 유무를
              결정할 수 있습니다. 스토리의 내용입니다.
            </TableCell>
            <TableCell width={200} isHugeContents={false}>
              TableCell의 스토리북의 HugeContents 유무를 결정할 수 있습니다. 스토리의 내용입니다. TableCell의 스토리북의
              HugeContents 유무를 결정할 수 있습니다. 스토리의 내용입니다. TableCell의 스토리북의 HugeContents 유무를
              결정할 수 있습니다. 스토리의 내용입니다.
            </TableCell>
          </TableRow>
        </tbody>
      </Table>
    </TableContainer>
}
```

### Size

Cell Size를 변경할 수 있습니다.

```tsx
{
  parameters: {
    docs: {
      description: {
        story: 'Cell Size를 변경할 수 있습니다.'
      }
    }
  },
  render: () => <TableContainer>
      <Table>
        <TableColGroup cols={[{
        width: 100
      }, {
        width: 500
      }]} />
        <tbody>
          <TableRow>
            <TableCol>large</TableCol>
            <TableCell size='large'>large</TableCell>
          </TableRow>
          <TableRow>
            <TableCol>Medium</TableCol>
            <TableCell size='medium'>medium</TableCell>
          </TableRow>
          <TableRow>
            <TableCol>Small</TableCol>
            <TableCell size='small'>small</TableCell>
          </TableRow>
        </tbody>
      </Table>
    </TableContainer>
}
```

### Truncate Text

Truncate Text 유무를 결정할 수 있습니다.

```tsx
{
  parameters: {
    docs: {
      description: {
        story: 'Truncate Text 유무를 결정할 수 있습니다.'
      }
    }
  },
  render: () => <TableContainer>
      <Table>
        <thead>
          <TableRow>
            <TableCol>기본</TableCol>
            <TableCol>Truncate 옵션 비활성화 </TableCol>
          </TableRow>
        </thead>
        <tbody>
          <TableRow>
            <TableCell width={200}>
              TableCell의 스토리북의 Truncate Text 유무를 결정할 수 있습니다. 스토리의 내용입니다. TableCell의
              스토리북의 Truncate Text 유무를 결정할 수 있습니다. 스토리의 내용입니다. TableCell의 스토리북의 Truncate
              Text 유무를 결정할 수 있습니다. 스토리의 내용입니다.
            </TableCell>
            <TableCell isTruncate={false}>TableCell의 스토리북의 Truncate Text 유무를 결정할 수 있습니다.</TableCell>
          </TableRow>
        </tbody>
      </Table>
    </TableContainer>
}
```

### Valign

vertical-align을 변경할 수 있습니다.

```tsx
{
  parameters: {
    docs: {
      description: {
        story: 'vertical-align을 변경할 수 있습니다.'
      }
    }
  },
  render: () => <Stack direction='column' gap={20}>
      <TableContainer>
        <Table>
          <tbody>
            <TableRow>
              <TableCol valign='middle'>middle</TableCol>
              <TableCell>
                1줄
                <br />
                2줄
                <br />
                3줄
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCol valign='top'>top</TableCol>
              <TableCell>
                1줄
                <br />
                2줄
                <br />
                3줄
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCol valign='bottom'>bottom</TableCol>
              <TableCell>
                1줄
                <br />
                2줄
                <br />
                3줄
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCol valign='baseline'>baseline</TableCol>
              <TableCell>
                1줄
                <br />
                2줄
                <br />
                3줄
              </TableCell>
            </TableRow>
          </tbody>
        </Table>
      </TableContainer>

      <TableContainer>
        <Table>
          <thead>
            <TableRow>
              <TableCol>valign</TableCol>
              <TableCol>middle (default)</TableCol>
              <TableCol>top</TableCol>
              <TableCol>bottom</TableCol>
              <TableCol>baseline</TableCol>
            </TableRow>
          </thead>
          <tbody>
            <TableRow>
              <TableCell>
                1줄
                <br />
                2줄
                <br />
                3줄
              </TableCell>
              <TableCell valign='middle'>middle</TableCell>
              <TableCell valign='top'>top</TableCell>
              <TableCell valign='bottom'>bottom</TableCell>
              <TableCell valign='baseline'>baseline</TableCell>
            </TableRow>
          </tbody>
        </Table>
      </TableContainer>
    </Stack>
}
```