# TableBody

**📖 Live documentation:** https://cds.coinbase.com/components/data-display/TableBody/

Defines the body section of Table.

## Import

```tsx
import { TableBody } from '@coinbase/cds-web/tables/TableBody'
```

## Examples

### Basic usage

```tsx live
<Table bordered>
  <TableHeader>
    <TableRow>
      <TableCell>Header</TableCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Content</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

### Loading State Example

```tsx live
<Table bordered variant="ruled">
  <TableHeader>
    <TableRow>
      <TableCell title="TableHeader" />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell height={320} alignItems="center" justifyContent="center">
        <Spinner size={4} color="primary" />
        <Text as="p" font="headline" spacingTop={2} color="foregroundMuted">
          Loading content...
        </Text>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>
```

### Multiple Rows Example

```tsx live
<Table bordered>
  <TableHeader>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell>Role</TableCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>Developer</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Jane Smith</TableCell>
      <TableCell>Designer</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `as` | `TableSectionTag` | No | `undefined` | Internal only |
| `className` | `string` | No | `-` | - |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |