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

Dataset Display

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

Origin Time SpicyLevel Download Difficulty
Folders

Photos

0%

Videos

0%
Recipes

Hamburger

U.S.A 10 min. Not Spicy
2%

Ramen

China 90 min. Spicy
8%

Paella

Spain 90 min. Not Spicy
9%

Pizza

Italy 30 min. Not Spicy
6%

Carcamusas

Toledo 50 min. Spicy
5%

Tacos

Mexico 30 min. Very Spicy
5%
Chefs

Ferrán Adriá

0%

Gordon Ramsay

0%

Alberto Chicote

0%
{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

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