Clay
Skip to ContentClayClay by Liferay
  • Get Started
    • Introduction
    • What is Clay
    • Importing the JS Component
    • Using JS Components with Metal.js
    • Web Components
  • Foundations
    • Grid
    • Typography
  • Lexicon Core Components
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Advanced Examples
        • Axis Label
        • Axis Range
        • Data Color
        • Gridlines
        • Predictive forecasting
        • Regions
        • X Axis Tick Formatting
      • Basic Examples
        • Bar Chart
        • Bubble Chart
        • Combination Chart
        • Donut Chart
        • Gauge Chart
        • Geomap Chart
        • Line Chart
        • Pie Chart
        • Scatter Chart
        • Spline Chart
        • Step Chart
    • Dataset Display
    • Dropdown Menu
    • Forms
      • Checkbox, Radio, and Toggle
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumbs
      • Navigation Bar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bars
    • Sidebar
      • Info Panel
    • Stickers
    • Table
      • Inline Edit Table
      • Table
    • Tabs
    • Toolbars
      • Management Toolbar
  • CSS Framework
    • SCSS
    • Class Helpers
    • Satellite Components
      • Alerts
      • Badges
      • Button Group
      • Cards
      • Dropdown Menu
      • Forms
        • Form Elements
        • Form Elements (Input Groups)
        • Form Elements (Validation)
      • Images (Aspect Ratios)
      • Images and Thumbnails
      • Labels
      • Links
      • List Groups
      • Modals
      • Nav
      • Navigation
        • Header
      • Paginations
      • Panels
      • Popovers and Tooltips
      • Progress Bars
      • Stickers
      • Tables
      • Tbar (Toolbar)
      • Timelines
      • Toggle Switch
    • Page Examples
      • Card View Template
      • Document Upload
      • List View Template
      • Table View Template
      • Users and Organizations
  • News

Table

Description

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

Check the Lexicon Table Pattern for a more in-depth look at the motivations and proper usage of this component.

Table List

A table styled like a list. The active state can be invoked by adding class table-active to the <tr></tr> element.

ID Title Status Modified Date Display Date Author Type
Group 1
21146
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
-- 2 Hours Ago -- Stanley Nelson Folder
Remove Edit Move Checkout
21148
Frappuccino medium americano
-- 2 Hours Ago -- Stanley Nelson Folder
Remove Edit Move Checkout
21149
Cultivar extra
-- 2 Hours Ago -- Stanley Nelson Folder
Remove Edit Move Checkout
21150
Cultivar extra
-- 2 Hours Ago -- Stanley Nelson Folder
Remove Edit Move Checkout
<div class="table-responsive">
	<table class="show-quick-actions-on-hover table table-autofit table-hover 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" />
							</svg>
						</a>
					</span>
					<a class="inline-item text-truncate-inline" href="#1">
						<span class="text-truncate" title="ID">ID</span><span class="inline-item inline-item-after">
							<svg class="lexicon-icon lexicon-icon-order-arrow-down" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#order-arrow-down" />
							</svg>
						</span>
					</a>
				</th>
				<th class="table-cell-expand 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" />
							</svg>
						</a>
					</span>
					<a class="inline-item text-truncate-inline" href="#1">
						<span class="text-truncate" title="Title">Title</span><span class="inline-item inline-item-after">
							<svg class="lexicon-icon lexicon-icon-order-arrow-down" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#order-arrow-down" />
							</svg>
						</span>
					</a>
				</th>
				<th>Status</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" />
							</svg>
						</a>
					</span>
					<a class="inline-item text-truncate-inline" href="#1">
						<span class="text-truncate" title="Modified Date">Modified Date</span>
					</a>
				</th>
				<th>Display Date</th>
				<th class="table-head-title">
					<a class="inline-item text-truncate-inline" href="#1">
						<span class="text-truncate" title="Author">Author</span><span class="inline-item inline-item-after">
							<svg class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#order-arrow-up" />
							</svg>
						</span>
					</a>
				</th>
				<th>Type</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">
						<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>
				<td>
					<div class="quick-action-menu">
						<a class="component-action quick-action-item" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#trash" />
							</svg>
						</a>
						<a class="component-action quick-action-item" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#download" />
							</svg>
						</a>
						<a class="component-action quick-action-item" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-info-circle-open" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#info-circle-open" />
							</svg>
						</a>
					</div>
					<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" />
							</svg>
						</a>
						<div aria-labelledby="" class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#1" role="button">Remove</a>
							<a class="dropdown-item" href="#1" role="button">Edit</a>
							<a class="dropdown-item" href="#1" role="button">Move</a>
							<a class="dropdown-item" href="#1" role="button">Checkout</a>
						</div>
					</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">
						<span class="text-truncate-inline">
							<span class="text-truncate" title="Frappuccino medium americano">Frappuccino medium americano</span>
						</span>
					</div>
				</td>
				<td>--</td>
				<td>2 Hours Ago</td>
				<td>--</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">
							<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#trash" />
							</svg>
						</a>
						<a class="component-action quick-action-item" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#download" />
							</svg>
						</a>
						<a class="component-action quick-action-item" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-info-circle-open" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#info-circle-open" />
							</svg>
						</a>
					</div>
					<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" />
							</svg>
						</a>
						<div aria-labelledby="" class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#1" role="button">Remove</a>
							<a class="dropdown-item" href="#1" role="button">Edit</a>
							<a class="dropdown-item" href="#1" role="button">Move</a>
							<a class="dropdown-item" href="#1" role="button">Checkout</a>
						</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>21149</td>
				<td class="table-cell-expand">
					<div class="table-list-title">
						<span class="text-truncate-inline">
							<span class="text-truncate" title="Cultivar extra">Cultivar extra</span>
						</span>
					</div>
				</td>
				<td>--</td>
				<td>2 Hours Ago</td>
				<td>--</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">
							<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#trash" />
							</svg>
						</a>
						<a class="component-action quick-action-item" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#download" />
							</svg>
						</a>
						<a class="component-action quick-action-item" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-info-circle-open" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#info-circle-open" />
							</svg>
						</a>
					</div>
					<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" />
							</svg>
						</a>
						<div aria-labelledby="" class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#1" role="button">Remove</a>
							<a class="dropdown-item" href="#1" role="button">Edit</a>
							<a class="dropdown-item" href="#1" role="button">Move</a>
							<a class="dropdown-item" href="#1" role="button">Checkout</a>
						</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>21150</td>
				<td class="table-cell-expand">
					<div class="table-list-title">
						<span class="text-truncate-inline">
							<span class="text-truncate" title="Cultivar extra">Cultivar extra</span>
						</span>
					</div>
				</td>
				<td>--</td>
				<td>2 Hours Ago</td>
				<td>--</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">
							<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#trash" />
							</svg>
						</a>
						<a class="component-action quick-action-item" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#download" />
							</svg>
						</a>
						<a class="component-action quick-action-item" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-info-circle-open" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#info-circle-open" />
							</svg>
						</a>
					</div>
					<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" />
							</svg>
						</a>
						<div aria-labelledby="" class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#1" role="button">Remove</a>
							<a class="dropdown-item" href="#1" role="button">Edit</a>
							<a class="dropdown-item" href="#1" role="button">Move</a>
							<a class="dropdown-item" href="#1" role="button">Checkout</a>
						</div>
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</div>

Table in Forms Hierarchy Example

Sites

Name Roles
.table-title (not a link)
.table-title a
Some regular text
.table-link, link, (.table-action-link), and some regular text
Liferay Remote Example One
Liferay Site Owner
Liferay Remote Example Two
Liferay Site Owner
Liferay Remote Example Three
Liferay Site Owner
<div class="sheet">
	<div class="sheet-header">
		<h4 class="sheet-title">Sites</h4>
	</div>
	<div class="sheet-section">
		<div class="table-responsive">
			<table class="table table-autofit">
				<thead>
					<tr>
						<th class="table-cell-expand">Name</th>
						<th class="table-cell-expand">Roles</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="table-cell-expand">
							<div class="table-title">.table-title (not a link)</div>
							<div class="table-title">
								<a class="text-truncate-inline" href="#1">
									<span class="text-truncate">.table-title a</span>
								</a>
							</div>
							<div>Some regular text</div>
						</td>
						<td class="table-cell-expand">
							<a class="table-link" href="#1">.table-link</a>,
							<a href="#1">link</a>,
							<a class="table-action-link" href="#1">
								<svg class="lexicon-icon lexicon-icon-share" focusable="false" role="presentation">
									<use href="/images/icons/icons.svg#share" />
								</svg>
							</a>(.table-action-link),
							<span>and some regular text</span>
						</td>
						<td>
							<button class="btn btn-unstyled table-action-link" type="button">
								<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
									<use href="/images/icons/icons.svg#times-circle" />
								</svg>
							</button>
						</td>
					</tr>
					<tr>
						<td class="table-cell-expand">
							<div class="table-title">
								<a href="#1">Liferay Remote Example One</a>
							</div>
						</td>
						<td class="table-cell-expand">
							<a class="table-link" href="#1">Liferay Site Owner</a>
						</td>
						<td>
							<a class="table-action-link" href="#1">
								<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
									<use href="/images/icons/icons.svg#times-circle" />
								</svg>
							</a>
						</td>
					</tr>
					<tr>
						<td class="table-cell-expand">
							<div class="table-title">
								<a href="#1">Liferay Remote Example Two</a>
							</div>
						</td>
						<td class="table-cell-expand">
							<a class="table-link" href="#1">Liferay Site Owner</a>
						</td>
						<td>
							<a class="table-action-link" href="#1">
								<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
									<use href="/images/icons/icons.svg#times-circle" />
								</svg>
							</a>
						</td>
					</tr>
					<tr>
						<td class="table-cell-expand">
							<div class="table-title">
								<a href="#1">Liferay Remote Example Three</a>
							</div>
						</td>
						<td class="table-cell-expand">
							<a class="table-link" href="#1">Liferay Site Owner</a>
						</td>
						<td>
							<a class="table-action-link" href="#1">
								<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
									<use href="/images/icons/icons.svg#times-circle" />
								</svg>
							</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="sheet-footer">
		<div class="btn-group">
			<div class="btn-group-item">
				<button class="btn btn-primary" type="submit">Save changes</button>
			</div>
			<div class="btn-group-item">
				<button class="btn btn-secondary" type="button">Cancel</button>
			</div>
		</div>
	</div>
</div>

API

Property Description Type Required Default
actionsMenuVariant
Variant name to render the actions menu string|undefined false undefined
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
id
Id to be applied to the element. string|undefined false undefined
items
List of items to display in the table. array|undefined false undefined
schema
Schema of the table containing an element per column with label and the name of the field with the value. object true undefined
selectable
Flag to indicate if the table items are selectable or not. bool false false
showActionsMenu
Flag to indicate if the rows will show an actions menu or not. bool false false
showCheckbox
Flag to indicate if the checkbox is show or not when selectable is true. bool false false
size
Table responsive sizes. Available string|undefined false undefined
spritemap
The path to the SVG spritemap file containing the icons. string|undefined false undefined
tableClasses
CSS classes to be applied to the table. string|undefined false undefined
useDefaultClasses
Flag to indicate if the wrapper and the table should use default css classes or not. string false true
wrapTable
Flag to indicate if the table is wrapped inside a div or not. string false true

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.