Table

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';

Table of Contents

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)

.table-list-title a
Some regular text
2 Hours AgoStanley NelsonFolder
21148

Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.

2 Hours AgoStanley NelsonFolder
<table
	className="show-quick-actions-on-hover table table-autofit table-list table-nowrap"
>
	<thead>
		<tr>
			<th></th>
			<th className="table-head-title">
				<span className="inline-item inline-item-before">
					<a href="#1">
						<svg
							className="lexicon-icon lexicon-icon-drag"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#drag"></use>
						</svg>
					</a> </span
				><a className="inline-item text-truncate-inline" href="#1">
					<span className="text-truncate">ID</span
					><span className="inline-item inline-item-after">
						<svg
							className="lexicon-icon lexicon-icon-arrow-down"
							focusable="false"
							role="presentation"
						>
							<use
								href="/images/icons/icons.svg#arrow-down"
							></use>
						</svg>
					</span>
				</a>
			</th>
			<th className="table-cell-expand table-head-title">
				<a className="inline-item text-truncate-inline" href="#1">
					<span className="text-truncate">Title</span>
				</a>
			</th>
			<th><span className="inline-item">Status</span></th>
			<th className="table-head-title">
				<a className="inline-item text-truncate-inline" href="#1">
					<span className="text-truncate">Modified Date</span>
				</a>
			</th>
			<th><span className="inline-item">Display Date</span></th>
			<th className="table-head-title">
				<a className="inline-item text-truncate-inline" href="#1">
					<span className="text-truncate">Author</span>
				</a>
			</th>
			<th><span className="inline-item">Type</span></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr className="table-divider">
			<td colspan="9">Group 1</td>
		</tr>
		<tr>
			<td>
				<div className="custom-control custom-checkbox">
					<label>
						<input
							className="custom-control-input"
							type="checkbox"
						/>
						<span className="custom-control-label"></span>
					</label>
				</div>
			</td>
			<td>21146</td>
			<td className="table-cell-expand">
				<div className="table-list-title">
					.table-list-title (not a link)
				</div>
				<div className="table-list-title">
					<a href="#1">.table-list-title a</a>
				</div>
				<div>
					<a className="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 className="quick-action-menu">
					<a
						className="component-action quick-action-item"
						href="#1"
						role="button"
					>
						...
					</a>
					<a
						className="component-action quick-action-item"
						href="#1"
						role="button"
					>
						...
					</a>
				</div>
				<div className="dropdown dropdown-action">...</div>
			</td>
		</tr>
		<tr className="table-active">
			<td>
				<div className="custom-control custom-checkbox">
					<label>
						<input
							checked=""
							className="custom-control-input"
							type="checkbox"
						/>
						<span className="custom-control-label"></span>
					</label>
				</div>
			</td>
			<td>21148</td>
			<td className="table-cell-expand">
				<div className="table-list-title">
					<a className="text-truncate-inline" href="#1">
						<span
							className="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 className="quick-action-menu">
					<a
						className="component-action quick-action-item"
						href="#1"
						role="button"
					>
						...
					</a>
					<a
						className="component-action quick-action-item"
						href="#1"
						role="button"
					>
						...
					</a>
				</div>
				<div className="dropdown dropdown-action">...</div>
			</td>
		</tr>
	</tbody>
</table>

Variants

Striped

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

CountryPurchasing Power ParityOfficial Exchange RateReal Growth Rate
Afganistan
$45.3 billion$20.65 billion3.1%
Brazil
$2.416 trillion$2.19 trillion2.3%
Congo, Democratic Republic of the
$29.39 billion$18.56 billion6.2%
Spain
$1.389 trillion$1.356 trillion-1.3%
<table className="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 className="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 className="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 className="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 className="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.

CountryPurchasing Power ParityOfficial Exchange RateReal Growth Rate
Afganistan
$45.3 billion$20.65 billion3.1%
Brazil
$2.416 trillion$2.19 trillion2.3%
Congo, Democratic Republic of the
$29.39 billion$18.56 billion6.2%
Spain
$1.389 trillion$1.356 trillion-1.3%
<table className="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 className="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 className="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 className="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 className="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

CountryPurchasing Power ParityOfficial Exchange RateReal Growth Rate
Afganistan
$45.3 billion$20.65 billion3.1%
Brazil
$2.416 trillion$2.19 trillion2.3%
Congo, Democratic Republic of the
$29.39 billion$18.56 billion6.2%
Spain
$1.389 trillion$1.356 trillion-1.3%
<table className="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 className="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 className="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 className="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 className="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.

CountryPurchasing Power ParityOfficial Exchange RateReal Growth Rate
Afganistan
$45.3 billion$20.65 billion3.1%
Brazil
$2.416 trillion$2.19 trillion2.3%
Congo, Democratic Republic of the
$29.39 billion$18.56 billion6.2%
Spain
$1.389 trillion$1.356 trillion-1.3%
<table className="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 className="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 className="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 className="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 className="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.

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––

Inline Edit Table

TitleModified Date

Web Content 342122-322-abcdefg

35 Seconds Ago
20 Minutes Ago
<table className="table table-autofit table-list table-nowrap table-responsive">
	<thead>
		<tr>
			<th>
				<span className="text-truncate-inline">
					<span className="text-truncate"></span>
				</span>
			</th>
			<th className="table-cell-expand">
				<span className="text-truncate-inline">
					<span className="text-truncate">Title</span>
				</span>
			</th>
			<th className="table-cell-expand">
				<span className="text-truncate-inline">
					<span className="text-truncate">Modified Date</span>
				</span>
			</th>
			<th className="table-column-text-end"></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<div className="custom-control custom-checkbox">
					<label>
						<input
							className="custom-control-input"
							type="checkbox"
						/>
						<span className="custom-control-label"></span>
					</label>
				</div>
			</td>
			<td className="table-cell-expand">
				<div className="table-list-title">
					<a className="text-truncate-inline" href="#1">
						<span className="text-truncate"
							>Web Content 342122-322-abcdefg</span
						>
					</a>
				</div>
			</td>
			<td className="table-cell-expand">
				<span className="text-truncate-inline">
					<span className="text-truncate">35 Seconds Ago</span>
				</span>
			</td>
			<td className="table-column-text-end">
				<div className="btn-group btn-group-nowrap">
					<div className="btn-group-item">
						<button
							className="btn btn-secondary btn-sm"
							type="button"
						>
							Edit
						</button>
					</div>
					<div className="btn-group-item">
						<div className="dropdown dropdown-action">
							<a
								aria-expanded="false"
								aria-haspopup="true"
								className="component-action dropdown-toggle"
								data-toggle="dropdown"
								href="#1"
								id="dropdownAction1"
								role="button"
							>
								<svg
									className="lexicon-icon lexicon-icon-ellipsis-v"
									focusable="false"
									role="presentation"
								>
									<use
										href="/images/icons/icons.svg#ellipsis-v"
									></use>
								</svg>
							</a>
							<ul
								aria-labelledby=""
								className="dropdown-menu dropdown-menu-right"
							>
								<li>
									<a
										className="dropdown-item"
										href="#1"
										role="button"
										>Edit</a
									>
								</li>
								<li>
									<a
										className="dropdown-item"
										href="#1"
										role="button"
										>Recycle Bin</a
									>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div className="custom-control custom-checkbox">
					<label>
						<input
							className="custom-control-input"
							type="checkbox"
						/>
						<span className="custom-control-label"></span>
					</label>
				</div>
			</td>
			<td className="table-cell-expand">
				<input
					className="form-control form-control-sm"
					type="text"
					value="Web Content B"
				/>
			</td>
			<td className="table-cell-expand">
				<span className="text-truncate-inline">
					<span className="text-truncate">20 Minutes Ago</span>
				</span>
			</td>
			<td className="table-column-text-end">
				<div className="btn-group btn-group-nowrap">
					<div className="btn-group-item">
						<button
							className="btn btn-primary btn-sm"
							type="button"
						>
							Save
						</button>
					</div>
					<div className="btn-group-item">
						<button
							className="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 className="table-responsive">
	<table className="table">
		...
	</table>
</div>
#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
<div className="table-responsive-sm">
	<table className="table">
		...
	</table>
</div>

<div className="table-responsive-md">
	<table className="table">
		...
	</table>
</div>

<div className="table-responsive-lg">
	<table className="table">
		...
	</table>
</div>

<div className="table-responsive-xl">
	<table className="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.

IDTitle

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 className="table table-autofit">
	<thead>
		<tr>
			<th></th>
			<th>ID</th>
			<th className="table-cell-minw-300 table-cell-expand">
				<a className="inline-item text-truncate-inline" href="#1">
					<span className="text-truncate">Title</span>
				</a>
			</th>
			<th className="table-cell-expand-small table-cell-ws-nowrap">
				Modified Date
			</th>
			<th className="table-cell-expand-smaller">Display Date</th>
			<th className="table-cell-minw-150 table-cell-expand-smallest">
				Author
			</th>
			<th>Type</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<div className="custom-control custom-checkbox">
					<label>
						<input
							className="custom-control-input"
							type="checkbox"
						/>
						<span className="custom-control-label"></span>
					</label>
				</div>
			</td>
			<td>21146</td>
			<td className="table-cell-minw-300 table-cell-expand">
				<div className="table-title">
					<span className="text-truncate-inline">
						<span
							className="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 className="table-cell-expand-small table-cell-ws-nowrap">
				2 Hours Ago
			</td>
			<td className="table-cell-expand-smaller">--</td>
			<td className="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.

IDTitleStatusModified DateDisplay DateAuthorType
21146

Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.

–2 Hours Ago–Stanley NelsonFolder
<table className="table table-autofit table-heading-nowrap">
	<thead>
		<tr>
			<th></th>
			<th>ID</th>
			<th className="table-cell-expand">
				<span className="text-truncate-inline">
					<span className="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 className="custom-control custom-checkbox">
					<label>
						<input
							className="custom-control-input"
							type="checkbox"
						/>
						<span className="custom-control-label"></span>
					</label>
				</div>
			</td>
			<td>21146</td>
			<td className="table-cell-expand">
				<div className="table-title">
					<span className="text-truncate-inline">
						<span
							className="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.

IDTitleStatusModified DateDisplay DateAuthorType
21146

Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.

–2 Hours Ago–Stanley 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 Ago–Stanley NelsonFolder
<table className="table table-autofit table-nowrap">
	<thead>
		<tr>
			<th></th>
			<th>ID</th>
			<th className="table-cell-expand">
				<span className="text-truncate-inline">
					<span className="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 className="custom-control custom-checkbox">
					<label>
						<input
							className="custom-control-input"
							type="checkbox"
						/>
						<span className="custom-control-label"></span>
					</label>
				</div>
			</td>
			<td>21146</td>
			<td className="table-cell-expand">
				<div className="autofit-row">
					<div className="autofit-col">
						<img
							alt="thumbnail"
							className="table-img"
							src="/images/thumbnail_coffee.jpg"
						/>
					</div>
					<div className="autofit-col autofit-col-expand">
						<div className="table-title">
							<span className="text-truncate-inline">
								<span
									className="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>
Edit this page on GitHub

Contributors

Table of Contents