---
name: TableCollapse
route: /components/common/tables/table-collapse
menu: Tables
edit: false
---

import { Playground, Props } from 'docz'
import TableCellCollapse from './table-cell-collapse'
import TableCollapse from './table-collapse'

# TableCollapse
**SUBCATEGORY:** Tables

<hr />

## Table collapse
### Description
For presenting data sets in a structured layout. Headers are styled differently to data;
both use lining figures (Econ Sans).

<Playground>
  <TableCollapse>
    <thead>
      <tr>
        <th scope='col'>Column 1</th>
        <th scope='col'>Column 2</th>
        <th scope='col'>Column 3</th>
        <th scope='col'>Column 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <TableCellCollapse dataLabel='Column1'>C1 Row 1</TableCellCollapse>
        <TableCellCollapse dataLabel='Column2'>C2 Row 1</TableCellCollapse>
        <TableCellCollapse dataLabel='Column3'>C3 Row 1</TableCellCollapse>
        <TableCellCollapse dataLabel='Column4'>C4 Row 1</TableCellCollapse>
      </tr>
      <tr>
        <TableCellCollapse dataLabel='Column1'>C1 Row 2</TableCellCollapse>
        <TableCellCollapse dataLabel='Column2'>C2 Row 2</TableCellCollapse>
        <TableCellCollapse dataLabel='Column3'>C3 Row 2</TableCellCollapse>
        <TableCellCollapse dataLabel='Column4'>C4 Row 2</TableCellCollapse>
      </tr>
      <tr>
         <TableCellCollapse dataLabel='Column1'>C1 Row 3</TableCellCollapse>
         <TableCellCollapse dataLabel='Column2'>C2 Row 3</TableCellCollapse>
         <TableCellCollapse dataLabel='Column3'>C3 Row 3</TableCellCollapse>
         <TableCellCollapse dataLabel='Column4'>C4 Row 3</TableCellCollapse>
       </tr>
       <tr>
          <TableCellCollapse dataLabel='Column1'>C1 Row 4</TableCellCollapse>
          <TableCellCollapse dataLabel='Column2'>C2 Row 4</TableCellCollapse>
          <TableCellCollapse dataLabel='Column3'>C3 Row 4</TableCellCollapse>
          <TableCellCollapse dataLabel='Column4'>C4 Row 4</TableCellCollapse>
        </tr>
    </tbody>
  </TableCollapse>
</Playground>

<hr />

## Properties
<Props of={TableCollapse} />