Table
A flexible data table component following USWDS patterns. Supports bordered, borderless, striped, compact, scrollable, stacked, and sticky header variants.
Props
| Prop |
Default |
Description |
caption |
|
Table caption text |
striped |
|
Add horizontal stripes to rows |
borderless |
|
Remove table borders |
compact |
|
Reduce row padding for denser display |
scrollable |
|
Wrap table in scrollable container |
stacked |
|
Stack cells on mobile screens |
stacked_header |
|
Stack cells with visible headers on mobile |
sticky_header |
|
Keep header row fixed when scrolling |
Slots
| Slot |
Description |
| (default) |
Table content (<thead>, <tbody>, <tfoot>) |
Example Usage
Bordered Table
<c-table caption="Document list">
<thead>
<tr>
<th scope="col">Document title</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Declaration of Independence</th>
<td>Statement adopted by the Continental Congress.</td>
<td>1776</td>
</tr>
<tr>
<th scope="row">Bill of Rights</th>
<td>The first ten amendments of the U.S. Constitution.</td>
<td>1791</td>
</tr>
</tbody>
</c-table>
Striped Table
<c-table caption="Striped table" striped="true">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Item 1</th>
<td>Value 1</td>
</tr>
<tr>
<th scope="row">Item 2</th>
<td>Value 2</td>
</tr>
</tbody>
</c-table>
Scrollable Table
<c-table caption="Scrollable table" scrollable="true">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Row 1</th>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</c-table>
Sticky Header Table
<c-table caption="Sticky header table" scrollable="true" sticky_header="true">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Item 1</th>
<td>Description text</td>
<td>2020</td>
</tr>
<tr>
<th scope="row">Item 2</th>
<td>Description text</td>
<td>2021</td>
</tr>
</tbody>
</c-table>
Compact Borderless Table
<c-table caption="Compact borderless table" compact="true" borderless="true">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Item</th>
<td>Value</td>
</tr>
</tbody>
</c-table>
{% load cotton %}
<div class="component-variants">
<h1>Table Component</h1>
{% for variant in variants %}
<div class="component-variant">
<h2 class="variant-title">{{ variant.title }}</h2>
{% cotton table caption="{{ variant.caption }}" striped="{{ variant.striped }}" borderless="{{ variant.borderless }}" compact="{{ variant.compact }}" scrollable="{{ variant.scrollable }}" stacked="{{ variant.stacked }}" stacked_header="{{ variant.stacked_header }}" sticky_header="{{ variant.sticky_header }}" %}
<thead>
<tr>
{% for header in variant.headers %}
<th scope="col">{{ header }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in variant.rows %}
<tr>
<th scope="row">{{ row.title }}</th>
{% for cell in row.cells %}
<td>{{ cell }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
{% endcotton %}
</div>
{% endfor %}
</div>
name: Table
context:
variants:
- title: "Bordered Table"
caption: "Bordered table"
headers:
- "Document title"
- "Description"
- "Year"
rows:
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Emancipation Proclamation"
cells:
- "An executive order granting freedom to slaves in designated southern states."
- "1863"
- title: "Striped Table"
caption: "Bordered table with horizontal stripes"
striped: "true"
headers:
- "Document title"
- "Description"
- "Year"
rows:
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Emancipation Proclamation"
cells:
- "An executive order granting freedom to slaves in designated southern states."
- "1863"
- title: "Borderless Table"
caption: "Borderless table"
borderless: "true"
headers:
- "Document title"
- "Description"
- "Year"
rows:
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Scrollable Table"
caption: "Scrollable table"
scrollable: "true"
headers:
- "Document title"
- "Description"
- "Year"
rows:
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Compact Table"
caption: "Compact table"
compact: "true"
scrollable: "true"
headers:
- "Document title"
- "Description"
- "Year"
rows:
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Sticky Header Table"
caption: "Table with sticky header"
sticky_header: "true"
headers:
- "Document title"
- "Description"
- "Year"
rows:
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Declaration of Sentiments"
cells:
- "A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens."
- "1848"
- title: "Emancipation Proclamation"
cells:
- "An executive order granting freedom to slaves in designated southern states."
- "1863"
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Declaration of Sentiments"
cells:
- "A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens."
- "1848"
- title: "Emancipation Proclamation"
cells:
- "An executive order granting freedom to slaves in designated southern states."
- "1863"
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Declaration of Sentiments"
cells:
- "A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens."
- "1848"
- title: "Emancipation Proclamation"
cells:
- "An executive order granting freedom to slaves in designated southern states."
- "1863"
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Declaration of Sentiments"
cells:
- "A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens."
- "1848"
- title: "Emancipation Proclamation"
cells:
- "An executive order granting freedom to slaves in designated southern states."
- "1863"
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Declaration of Sentiments"
cells:
- "A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens."
- "1848"
- title: "Emancipation Proclamation"
cells:
- "An executive order granting freedom to slaves in designated southern states."
- "1863"
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Declaration of Sentiments"
cells:
- "A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens."
- "1848"
- title: "Emancipation Proclamation"
cells:
- "An executive order granting freedom to slaves in designated southern states."
- "1863"
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Declaration of Sentiments"
cells:
- "A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens."
- "1848"
- title: "Emancipation Proclamation"
cells:
- "An executive order granting freedom to slaves in designated southern states."
- "1863"
- title: "Declaration of Independence"
cells:
- "Statement adopted by the Continental Congress declaring independence from the British Empire."
- "1776"
- title: "Bill of Rights"
cells:
- "The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms."
- "1791"
- title: "Declaration of Sentiments"
cells:
- "A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens."
- "1848"
- title: "Emancipation Proclamation"
cells:
- "An executive order granting freedom to slaves in designated southern states."
- "1863"