A dataset display is the combination of a management bar with one or multiple data visualization types and a possible mechanism of pagination. The most common visualization types used are table, list, and card.
Check the Lexicon Dataset Display Pattern for a more in-depth look at the motivations and proper usage of this component.
Example
{call ClayDatasetDisplay.render}
{param actionItems: actionItemsWithQuickItems /}
{param creationMenu: creationMenuConfiguration /}
{param filterItems: listOfFilterMenuItems /}
{param items: itemsOfDataset /}
{param selectedView: 2 /}
{param searchActionURL: 'mySearchURL' /}
{param searchFormName: 'mySearchName' /}
{param searchInputName: 'mySearchInputName' /}
{param selectable: true /}
{param spritemap: spritemap /}
{param title: 'Group Header 1' /}
{param views: viewsList /}
{/call}<clay-dataset-display
actionItems="actionItemsWithQuickItems"
creationMenu="creationMenuConfiguration"
filterItems="listOfFilterMenuItems"
items="itemsOfDataset"
selectedView="2"
searchActionURL="mySearchURL"
searchFormName="mySearchName"
searchInputName="mySearchInputName"
selectable="true"
spritemap="spritemap"
title="Group Header 1"
views="viewsList"
></clay-dataset-display><div class="clay-dataset-display">
<div>
<nav class="management-bar management-bar-light navbar navbar-expand-md">
<div class="container-fluid container-fluid-max-xl">
<ul class="navbar-nav">
<li class="nav-item">
<div class="custom-control custom-checkbox"><label><input class="custom-control-input" type="checkbox"/><span class="custom-control-label"><span class="custom-control-label-text sr-only">select-items</span></span></label></div>
</li>
<li class="dropdown nav-item">
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link btn-unstyled" type="button">
<span class="navbar-breakpoint-down-d-none">
filter-and-order
<svg class="lexicon-icon lexicon-icon-caret-bottom inline-item inline-item-after" focusable="false" role="presentation">
<title>caret-bottom</title>
<use href="/images/icons/icons.svg#caret-bottom"></use>
</svg>
</span>
<span class="navbar-breakpoint-d-none">
<svg class="lexicon-icon lexicon-icon-filter" focusable="false" role="presentation">
<title>filter</title>
<use href="/images/icons/icons.svg#filter"></use>
</svg>
</span>
</button>
</div>
</li>
<li class="nav-item">
<button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" title="order" type="button">
<svg class="lexicon-icon lexicon-icon-order-arrow" focusable="false" role="presentation">
<title>order-arrow</title>
<use href="/images/icons/icons.svg#order-arrow"></use>
</svg>
</button>
</li>
</ul>
<div class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down">
<div class="container-fluid container-fluid-max-xl">
<form action="mySearchURL" method="GET" name="mySearchName" role="search">
<div class="input-group">
<div class="input-group-item">
<input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="search-for" type="text"/>
<span class="input-group-inset-item input-group-inset-item-after">
<button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" type="button">
<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
<title>times</title>
<use href="/images/icons/icons.svg#times"></use>
</svg>
</button>
<button class="btn btn-unstyled" aria-label="search" type="submit">
<svg class="lexicon-icon lexicon-icon-search" focusable="false" role="presentation">
<title>search</title>
<use href="/images/icons/icons.svg#search"></use>
</svg>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
<ul class="navbar-nav">
<li class="nav-item navbar-breakpoint-d-none">
<button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
<svg class="lexicon-icon lexicon-icon-search" focusable="false" role="presentation">
<title>search</title>
<use href="/images/icons/icons.svg#search"></use>
</svg>
</button>
</li>
<li class="dropdown nav-item">
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" title="display-style" type="button">
<svg class="lexicon-icon lexicon-icon-table" focusable="false" role="presentation">
<title>table</title>
<use href="/images/icons/icons.svg#table"></use>
</svg>
</button>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-btn nav-btn-monospaced btn-primary" title="new" type="button">
<svg class="lexicon-icon lexicon-icon-plus" focusable="false" role="presentation">
<title>plus</title>
<use href="/images/icons/icons.svg#plus"></use>
</svg>
</button>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid container-fluid-max-xl container-no-gutters-sm-down container-view">
<form>
<div class="table-responsive">
<table class="table table-autofit table-hover table-list show-quick-actions-on-hover">
<thead>
<tr>
<th></th>
<th class="table-cell-expand">
<button class="btn btn-unstyled" type="button">
Name
<span class="inline-item inline-item-after">
<svg class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false" role="presentation">
<title>order-arrow-up</title>
<use href="/images/icons/icons.svg#order-arrow-up"></use>
</svg>
</span>
</button>
</th>
<th>Origin</th>
<th>Time</th>
<th>SpicyLevel</th>
<th>Download</th>
<th>Difficulty</th>
</tr>
</thead>
<tbody>
<tr class="table-divider" id="group-0">
<td colspan="7">Folders</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox"><label><input aria-labelledby="group-0" class="custom-control-input" name="folder" type="checkbox" value="1"/><span class="custom-control-label"><span class="custom-control-label-text sr-only">deselect</span></span></label></div>
</td>
<td class="table-cell-expand">
<h1 class="table-list-title"><span class="text-truncate-inline"><span class="text-truncate">Photos</span></span></h1>
</td>
<td><span class="text-truncate"></span></td>
<td class="text-right"></td>
<td></td>
<td><button class="btn btn-sm btn-secondary" type="button">Download</button></td>
<td>
<div class="progress-group progress-info">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>
<div class="progress-group-addon">0%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox"><label><input aria-labelledby="group-0" class="custom-control-input" name="folder" type="checkbox" value="2"/><span class="custom-control-label"><span class="custom-control-label-text sr-only">deselect</span></span></label></div>
</td>
<td class="table-cell-expand">
<h1 class="table-list-title"><span class="text-truncate-inline"><span class="text-truncate">Videos</span></span></h1>
</td>
<td><span class="text-truncate"></span></td>
<td class="text-right"></td>
<td></td>
<td><button class="btn btn-sm btn-secondary" type="button">Download</button></td>
<td>
<div class="progress-group progress-info">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>
<div class="progress-group-addon">0%</div>
</div>
</td>
</tr>
<tr class="table-divider" id="group-1">
<td colspan="7">Recipes</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox"><label><input aria-labelledby="group-1" class="custom-control-input" name="recipe" type="checkbox" value="3"/><span class="custom-control-label"><span class="custom-control-label-text sr-only">deselect</span></span></label></div>
</td>
<td class="table-cell-expand">
<h1 class="table-list-title"><span class="text-truncate-inline"><span class="text-truncate">Hamburger</span></span></h1>
</td>
<td><span class="text-truncate">U.S.A</span></td>
<td class="text-right">10 min.</td>
<td><span class="label label-success"><span class="label-item label-item-expand">Not Spicy</span></span></td>
<td><button class="btn btn-sm btn-secondary" type="button">Download</button></td>
<td>
<div class="progress-group progress-info">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="2" class="progress-bar" role="progressbar" style="width: 2%;"></div>
</div>
<div class="progress-group-addon">2%</div>
</div>
</td>
</tr>
<tr class="table-divider" id="group-2">
<td colspan="7">Chefs</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox"><label><input aria-labelledby="group-2" class="custom-control-input" name="chef" type="checkbox" value="9"/><span class="custom-control-label"><span class="custom-control-label-text sr-only">deselect</span></span></label></div>
</td>
<td class="table-cell-expand">
<h1 class="table-list-title"><span class="text-truncate-inline"><span class="text-truncate">Ferrán Adriá</span></span></h1>
</td>
<td><span class="text-truncate"></span></td>
<td class="text-right"></td>
<td></td>
<td><button class="btn btn-sm btn-secondary" type="button">Download</button></td>
<td>
<div class="progress-group progress-info">
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>
<div class="progress-group-addon">0%</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>API
| Property | Description | Type | Required | Default |
|---|---|---|---|---|
_selectedItems |
The selected items of the item list. For internal purposes. | array|undefined | false | undefined |
_totalItems |
The total number of items in the item list. For internal purposes. | number|undefined | false | undefined |
actionItems |
List of items to display in the management toolbar actions menu. | array|undefined | false | [] |
creationMenu |
Configuration of the management bar plus button. | object|string|bool|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 |
filterItems |
List of filter menu items. | array|undefined | false | undefined |
filterLabels |
List of filter label items. | array|undefined | false | undefined |
id |
Id to be applied to the element. | string|undefined | false | undefined |
items |
Items of the dataset. | array|undefined | false | undefined |
searchActionURL |
URL of the search form action | string|undefined | false | undefined |
searchFormName |
Name of the search form. | string|undefined | false | undefined |
searchInputName |
Name of the search input. | string|undefined | false | undefined |
selectable |
Flag to indicate if the dataset is selectable. | bool | false | false |
selectedView |
Position in the views list of the selected view. | number|undefined | false | undefined |
showCreationMenu |
Flag to indicate if management toolbar creation menu button should be shown or not. | bool | false | true |
showFiltersDoneButton |
Flag to indicate if the | bool | false | true |
sortingOrder |
Sorting order. | string|undefined | false | asc |
spritemap |
The path to the SVG spritemap file containing the icons. | string | true | undefined |
title |
Header of the list. | string|undefined | false | undefined |
views |
List of view items. | array|undefined | false | undefined |