Table
A table is a specific pattern for comparing datasets in a very direct and analytical way.
| install | yarn add @clayui/core |
|---|---|
| version | 3.120.0 |
Beta3.120.0View in LexiconCHANGELOG
Don't forget to check WAI-ARIA accessibility pratices for tables when writting your markup.
show-quick-actions-on-hover will need Javascript to add class table-focus on the table row when an item inside is focused to make it keyboard accessible.
A table is styled like a list. The active state can be invoked by adding class table-active to the <tr></tr> element.
| ID | Title | Modified Date | Author | Type | ||||
|---|---|---|---|---|---|---|---|---|
| Group 1 | ||||||||
|
|
21146 |
.table-list-title (not a link)
Some regular text
|
2 Hours Ago | Stanley Nelson | Folder | |||
|
|
21148 | 2 Hours Ago | Stanley Nelson | Folder | ||||
<table
class="show-quick-actions-on-hover table table-autofit table-list table-nowrap"
>
<thead>
<tr>
<th></th>
<th class="table-head-title">
<span class="inline-item inline-item-before">
<a href="#1">
<svg
class="lexicon-icon lexicon-icon-drag"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#drag"></use>
</svg>
</a> </span
><a class="inline-item text-truncate-inline" href="#1">
<span class="text-truncate">ID</span
><span class="inline-item inline-item-after">
<svg
class="lexicon-icon lexicon-icon-arrow-down"
focusable="false"
role="presentation"
>
<use
href="/images/icons/icons.svg#arrow-down"
></use>
</svg>
</span>
</a>
</th>
<th class="table-cell-expand table-head-title">
<a class="inline-item text-truncate-inline" href="#1">
<span class="text-truncate">Title</span>
</a>
</th>
<th><span class="inline-item">Status</span></th>
<th class="table-head-title">
<a class="inline-item text-truncate-inline" href="#1">
<span class="text-truncate">Modified Date</span>
</a>
</th>
<th><span class="inline-item">Display Date</span></th>
<th class="table-head-title">
<a class="inline-item text-truncate-inline" href="#1">
<span class="text-truncate">Author</span>
</a>
</th>
<th><span class="inline-item">Type</span></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="table-divider">
<td colspan="9">Group 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox" />
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td>21146</td>
<td class="table-cell-expand">
<div class="table-list-title">
.table-list-title (not a link)
</div>
<div class="table-list-title">
<a href="#1">.table-list-title a</a>
</div>
<div>
<a class="table-list-link" href="#1">.table-list-link</a>
</div>
<div><a href="#1">link</a></div>
<div>Some regular text</div>
</td>
<td>2 Hours Ago</td>
<td>Stanley Nelson</td>
<td>Folder</td>
<td>
<div class="quick-action-menu">
<a
class="component-action quick-action-item"
href="#1"
role="button"
>
...
</a>
<a
class="component-action quick-action-item"
href="#1"
role="button"
>
...
</a>
</div>
<div class="dropdown dropdown-action">...</div>
</td>
</tr>
<tr class="table-active">
<td>
<div class="custom-control custom-checkbox">
<label>
<input
checked=""
class="custom-control-input"
type="checkbox"
/>
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td>21148</td>
<td class="table-cell-expand">
<div class="table-list-title">
<a class="text-truncate-inline" href="#1">
<span
class="text-truncate"
title="Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds."
>Wings eu, pumpkin spice robusta, kopi-luwak mocha
caffeine froth grounds.</span
>
</a>
</div>
</td>
<td>2 Hours Ago</td>
<td>Stanley Nelson</td>
<td>Folder</td>
<td>
<div class="quick-action-menu">
<a
class="component-action quick-action-item"
href="#1"
role="button"
>
...
</a>
<a
class="component-action quick-action-item"
href="#1"
role="button"
>
...
</a>
</div>
<div class="dropdown dropdown-action">...</div>
</td>
</tr>
</tbody>
</table>Variants
Striped
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| Country | Purchasing Power Parity | Official Exchange Rate | Real Growth Rate |
|---|---|---|---|
| $45.3 billion | $20.65 billion | 3.1% | |
| $2.416 trillion | $2.19 trillion | 2.3% | |
| $29.39 billion | $18.56 billion | 6.2% | |
| $1.389 trillion | $1.356 trillion | -1.3% |
<table class="table table-striped">
<thead>
<tr>
<th>Country</th>
<th>Purchasing Power Parity</th>
<th>Official Exchange Rate</th>
<th>Real Growth Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="table-title">
<a href="#1">Afganistan</a>
</div>
</td>
<td>$45.3 billion</td>
<td>$20.65 billion</td>
<td>3.1%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Brazil</a>
</div>
</td>
<td>$2.416 trillion</td>
<td>$2.19 trillion</td>
<td>2.3%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Congo, Democratic Republic of the</a>
</div>
</td>
<td>$29.39 billion</td>
<td>$18.56 billion</td>
<td>6.2%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Spain</a>
</div>
</td>
<td>$1.389 trillion</td>
<td>$1.356 trillion</td>
<td>-1.3%</td>
</tr>
</tbody>
</table>Bordered
Add .table-bordered for borders on all sides of the table and cells.
| Country | Purchasing Power Parity | Official Exchange Rate | Real Growth Rate |
|---|---|---|---|
| $45.3 billion | $20.65 billion | 3.1% | |
| $2.416 trillion | $2.19 trillion | 2.3% | |
| $29.39 billion | $18.56 billion | 6.2% | |
| $1.389 trillion | $1.356 trillion | -1.3% |
<table class="table table-bordered">
<thead>
<tr>
<th>Country</th>
<th>Purchasing Power Parity</th>
<th>Official Exchange Rate</th>
<th>Real Growth Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="table-title">
<a href="#1">Afganistan</a>
</div>
</td>
<td>$45.3 billion</td>
<td>$20.65 billion</td>
<td>3.1%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Brazil</a>
</div>
</td>
<td>$2.416 trillion</td>
<td>$2.19 trillion</td>
<td>2.3%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Congo, Democratic Republic of the</a>
</div>
</td>
<td>$29.39 billion</td>
<td>$18.56 billion</td>
<td>6.2%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Spain</a>
</div>
</td>
<td>$1.389 trillion</td>
<td>$1.356 trillion</td>
<td>-1.3%</td>
</tr>
</tbody>
</table>Hoverable
| Country | Purchasing Power Parity | Official Exchange Rate | Real Growth Rate |
|---|---|---|---|
| $45.3 billion | $20.65 billion | 3.1% | |
| $2.416 trillion | $2.19 trillion | 2.3% | |
| $29.39 billion | $18.56 billion | 6.2% | |
| $1.389 trillion | $1.356 trillion | -1.3% |
<table class="table table-hover">
<thead>
<tr>
<th>Country</th>
<th>Purchasing Power Parity</th>
<th>Official Exchange Rate</th>
<th>Real Growth Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="table-title">
<a href="#1">Afganistan</a>
</div>
</td>
<td>$45.3 billion</td>
<td>$20.65 billion</td>
<td>3.1%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Brazil</a>
</div>
</td>
<td>$2.416 trillion</td>
<td>$2.19 trillion</td>
<td>2.3%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Congo, Democratic Republic of the</a>
</div>
</td>
<td>$29.39 billion</td>
<td>$18.56 billion</td>
<td>6.2%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Spain</a>
</div>
</td>
<td>$1.389 trillion</td>
<td>$1.356 trillion</td>
<td>-1.3%</td>
</tr>
</tbody>
</table>Small
Add .table-sm to make tables more compact by cutting cell padding in half.
| Country | Purchasing Power Parity | Official Exchange Rate | Real Growth Rate |
|---|---|---|---|
| $45.3 billion | $20.65 billion | 3.1% | |
| $2.416 trillion | $2.19 trillion | 2.3% | |
| $29.39 billion | $18.56 billion | 6.2% | |
| $1.389 trillion | $1.356 trillion | -1.3% |
<table class="table table-sm">
<thead>
<tr>
<th>Country</th>
<th>Purchasing Power Parity</th>
<th>Official Exchange Rate</th>
<th>Real Growth Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="table-title">
<a href="#1">Afganistan</a>
</div>
</td>
<td>$45.3 billion</td>
<td>$20.65 billion</td>
<td>3.1%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Brazil</a>
</div>
</td>
<td>$2.416 trillion</td>
<td>$2.19 trillion</td>
<td>2.3%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Congo, Democratic Republic of the</a>
</div>
</td>
<td>$29.39 billion</td>
<td>$18.56 billion</td>
<td>6.2%</td>
</tr>
<tr>
<td>
<div class="table-title">
<a href="#1">Spain</a>
</div>
</td>
<td>$1.389 trillion</td>
<td>$1.356 trillion</td>
<td>-1.3%</td>
</tr>
</tbody>
</table>Nested Rows
Example markup for Nested Rows in Frontend Dataset.
Inline Edit Table
| Title | Modified Date | ||
|---|---|---|---|
|
|
35 Seconds Ago | ||
|
|
20 Minutes Ago |
|
<table class="table table-autofit table-list table-nowrap table-responsive">
<thead>
<tr>
<th>
<span class="text-truncate-inline">
<span class="text-truncate"></span>
</span>
</th>
<th class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate">Title</span>
</span>
</th>
<th class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate">Modified Date</span>
</span>
</th>
<th class="table-column-text-end"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox" />
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand">
<div class="table-list-title">
<a class="text-truncate-inline" href="#1">
<span class="text-truncate"
>Web Content 342122-322-abcdefg</span
>
</a>
</div>
</td>
<td class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate">35 Seconds Ago</span>
</span>
</td>
<td class="table-column-text-end">
<div class="btn-group btn-group-nowrap">
<div class="btn-group-item">
<button class="btn btn-secondary btn-sm" type="button">
Edit
</button>
</div>
<div class="btn-group-item">
<div class="dropdown dropdown-action">
<a
aria-expanded="false"
aria-haspopup="true"
class="component-action dropdown-toggle"
data-toggle="dropdown"
href="#1"
id="dropdownAction1"
role="button"
>
<svg
class="lexicon-icon lexicon-icon-ellipsis-v"
focusable="false"
role="presentation"
>
<use
href="/images/icons/icons.svg#ellipsis-v"
></use>
</svg>
</a>
<ul
aria-labelledby=""
class="dropdown-menu dropdown-menu-right"
>
<li>
<a
class="dropdown-item"
href="#1"
role="button"
>Edit</a
>
</li>
<li>
<a
class="dropdown-item"
href="#1"
role="button"
>Recycle Bin</a
>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox" />
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand">
<input
class="form-control form-control-sm"
type="text"
value="Web Content B"
/>
</td>
<td class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate">20 Minutes Ago</span>
</span>
</td>
<td class="table-column-text-end">
<div class="btn-group btn-group-nowrap">
<div class="btn-group-item">
<button class="btn btn-primary btn-sm" type="button">
Save
</button>
</div>
<div class="btn-group-item">
<button class="btn btn-secondary btn-sm" type="button">
Cancel
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>Responsiveness
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.
Always Responsive
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
<div class="table-responsive">
<table class="table">
...
</table>
</div>| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
Breakpoints
Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>Helpers
Autofit
table-autofit constrains table columns to be only as wide as its content, but must be used with table-cell-expand. table-cell-expand will fill the remaining space.
Alignment
You can align table items either vertically or horizontally following the rules below.
Vertical
We have added some classes to help vertically align contents inside a table. The classes table-valign-bottom, table-valign-middle, and table-valign-top on <table> will vertically align table cell contents on the bottom, middle, and top, respectively.
The classes thead-valign-bottom, thead-valign-middle, and thead-valign-top on <table> will vertically align the contents inside the table head.
The classes tbody-valign-bottom, tbody-valign-middle, and tbody-valign-top on <table> will vertically align the contents inside the table body.
Horizontal
We have added some classes to help horizontally align contents inside a table column. The classes table-column-text-start, table-column-text-center, and table-column-text-end will align text left, center, and right respectively.
Cell Utilities
Use table-cell-expand-small, table-cell-expand-smaller, table-cell-expand-smallest with table-cell-expand to size columns smaller relative to the widest column.
We have added table-cell-minw-50, table-cell-minw-75, table-cell-minw-100, table-cell-minw-150, table-cell-minw-200, table-cell-minw-250, table-cell-minw-300, table-cell-minw-350, table-cell-minw-400 to set min-width 50px, 75px, 100px, 150px, 200px, 250px, 300px, 350px, 400px on a specific table column, respectively.
The helpers table-cell-ws-normal and table-cell-ws-nowrap sets white-space to normal or nowrap on a specific table column, respectively.
| ID | Title | Modified Date | Display Date | Author | Type | |
|---|---|---|---|---|---|---|
|
|
21146 |
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
|
2 Hours Ago | -- | Stanley Nelson | Folder |
<table class="table table-autofit">
<thead>
<tr>
<th></th>
<th>ID</th>
<th class="table-cell-minw-300 table-cell-expand">
<a class="inline-item text-truncate-inline" href="#1">
<span class="text-truncate">Title</span>
</a>
</th>
<th class="table-cell-expand-small table-cell-ws-nowrap">
Modified Date
</th>
<th class="table-cell-expand-smaller">Display Date</th>
<th class="table-cell-minw-150 table-cell-expand-smallest">
Author
</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox" />
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td>21146</td>
<td class="table-cell-minw-300 table-cell-expand">
<div class="table-title">
<span class="text-truncate-inline">
<span
class="text-truncate"
title="Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds."
>Wings eu, pumpkin spice robusta, kopi-luwak mocha
caffeine froth grounds.</span
>
</span>
</div>
</td>
<td class="table-cell-expand-small table-cell-ws-nowrap">
2 Hours Ago
</td>
<td class="table-cell-expand-smaller">--</td>
<td class="table-cell-minw-150 table-cell-expand-smallest">
Stanley Nelson
</td>
<td>Folder</td>
</tr>
</tbody>
</table>Heading No Wrap
table-heading-nowrap keeps headings on one line.
| ID | Title | Status | Modified Date | Display Date | Author | Type | |
|---|---|---|---|---|---|---|---|
|
|
21146 |
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
|
-- | 2 Hours Ago | -- | Stanley Nelson | Folder |
<table class="table table-autofit table-heading-nowrap">
<thead>
<tr>
<th></th>
<th>ID</th>
<th class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate">Title</span>
</span>
</th>
<th>Status</th>
<th>Modified Date</th>
<th>Display Date</th>
<th>Author</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox" />
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td>21146</td>
<td class="table-cell-expand">
<div class="table-title">
<span class="text-truncate-inline">
<span
class="text-truncate"
title="Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds."
>Wings eu, pumpkin spice robusta, kopi-luwak mocha
caffeine froth grounds.</span
>
</span>
</div>
</td>
<td>--</td>
<td>2 Hours Ago</td>
<td>--</td>
<td>Stanley Nelson</td>
<td>Folder</td>
</tr>
</tbody>
</table>Table No Wrap
table-nowrap keeps everything on one line.
| ID | Title | Status | Modified Date | Display Date | Author | Type | |
|---|---|---|---|---|---|---|---|
|
|
21146 |
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
|
-- | 2 Hours Ago | -- | Stanley Nelson | Folder |
Image
table-img is a helper that sets the max-height to 100px on an image inside a table. Depending on your use case, you may need to use it with the autofit-row pattern.
| ID | Title | Status | Modified Date | Display Date | Author | Type | |
|---|---|---|---|---|---|---|---|
|
|
21146 |
|
-- | 2 Hours Ago | -- | Stanley Nelson | Folder |
<table class="table table-autofit table-nowrap">
<thead>
<tr>
<th></th>
<th>ID</th>
<th class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate">Title</span>
</span>
</th>
<th>Status</th>
<th>Modified Date</th>
<th>Display Date</th>
<th>Author</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox" />
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td>21146</td>
<td class="table-cell-expand">
<div class="autofit-row">
<div class="autofit-col">
<img
alt="thumbnail"
class="table-img"
src="/images/thumbnail_coffee.jpg"
/>
</div>
<div class="autofit-col autofit-col-expand">
<div class="table-title">
<span class="text-truncate-inline">
<span
class="text-truncate"
title="Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds."
>Wings eu, pumpkin spice robusta, kopi-luwak
mocha caffeine froth grounds.</span
>
</span>
</div>
</div>
</div>
</td>
<td>--</td>
<td>2 Hours Ago</td>
<td>--</td>
<td>Stanley Nelson</td>
<td>Folder</td>
</tr>
</tbody>
</table>