A table is a specific pattern for comparing datasets in a very direct and analytical way.

installyarn add @clayui/core
versionNPM Version
useimport {Body, Cell, Head, Row, Table} from '@clayui/core';
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.

IDTitleModified DateAuthorType
Group 1
21146
.table-list-title (not a link)
Some regular text
2 Hours AgoStanley NelsonFolder
211482 Hours AgoStanley NelsonFolder

Snippet

Variants

Striped

Use .table-striped to add zebra-striping to any table row within the <tbody>.

CountryPurchasing Power ParityOfficial Exchange RateReal Growth Rate
$45.3 billion$20.65 billion3.1%
$2.416 trillion$2.19 trillion2.3%
$29.39 billion$18.56 billion6.2%
$1.389 trillion$1.356 trillion-1.3%

Snippet

Bordered

Add .table-bordered for borders on all sides of the table and cells.

CountryPurchasing Power ParityOfficial Exchange RateReal Growth Rate
$45.3 billion$20.65 billion3.1%
$2.416 trillion$2.19 trillion2.3%
$29.39 billion$18.56 billion6.2%
$1.389 trillion$1.356 trillion-1.3%

Snippet

Hoverable

CountryPurchasing Power ParityOfficial Exchange RateReal Growth Rate
$45.3 billion$20.65 billion3.1%
$2.416 trillion$2.19 trillion2.3%
$29.39 billion$18.56 billion6.2%
$1.389 trillion$1.356 trillion-1.3%

Snippet

Small

Add .table-sm to make tables more compact by cutting cell padding in half.

CountryPurchasing Power ParityOfficial Exchange RateReal Growth Rate
$45.3 billion$20.65 billion3.1%
$2.416 trillion$2.19 trillion2.3%
$29.39 billion$18.56 billion6.2%
$1.389 trillion$1.356 trillion-1.3%

Snippet

Nested Rows

Example markup for Nested Rows in Frontend Dataset.

Caption: Table List with filler content
LabelScopeSystemModified DateStatus
Group 1
Root Object
CompanyNoJune 12, 2023, 6:07:25PMDraft
Root Object - First Level
CompanyNoJune 12, 2023, 6:07:25PMDraft
Second Level Object
CompanyNoJune 13, 2023, 12:00PM
Third Level Object
CompanyNoJune 13, 2023, 12:00PM

Snippet

Inline Edit Table

TitleModified Date
35 Seconds Ago
20 Minutes Ago

Snippet

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.

Snippet

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell

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.

#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell

Snippet

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.

IDTitleModified DateDisplay DateAuthorType
21146
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
2 Hours AgoStanley NelsonFolder

Snippet

Heading No Wrap

table-heading-nowrap keeps headings on one line.

IDTitleStatusModified DateDisplay DateAuthorType
21146
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
2 Hours AgoStanley NelsonFolder

Snippet

Table No Wrap

table-nowrap keeps everything on one line.

IDTitleStatusModified DateDisplay DateAuthorType
21146
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
2 Hours AgoStanley NelsonFolder

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.

IDTitleStatusModified DateDisplay DateAuthorType
21146
thumbnail
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
2 Hours AgoStanley NelsonFolder

Snippet

Edit this page on GitHub

Contributors

Matuzalém Teles, Selena Aungst

Last edited May 12, 2025 at 7:56:02 PM