Data table
Examples
Complex
Create reusable Vue components based on your needs and use them as custom templates for Data Table cells and row accordions
<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table" ref="dataTableComplex">
<template v-slot:status="payload">
<i class="`chi-icon icon-${payload.icon} -icon--${payload.color}`" aria-hidden="true"></i>
<span class="-text--truncate" style="padding-left: 0.5rem;">
{{ payload.status }}
</span>
</template>
<template v-slot:name="payload">
<ExamplePopover :name="payload.name" :id="payload.id" />
</template>
<template v-slot:toolbar>
<ChiDataTableToolbar>
<template v-slot:start></template>
<template v-slot:end>
<chi-button @chiClick="printTable" variant="flat" type="icon" aria-label="Print data table complex example">
<chi-icon icon="print"></chi-icon>
</chi-button>
</template>
</ChiDataTableToolbar>
</template>
<template v-slot:bulk-actions>
<div class="chi-bulk-actions__buttons">
<div class="chi-bulk-actions__buttons-mobile -z--40">
<chi-button variant="flat" type="icon" aria-label="Edit">
<chi-icon icon="edit"></chi-icon>
</chi-button>
<chi-button variant="flat" type="icon" aria-label="Compose">
<chi-icon icon="compose"></chi-icon>
</chi-button>
<chi-button variant="flat" type="icon" aria-label="Delete">
<chi-icon icon="delete"></chi-icon>
</chi-button>
<chi-button variant="flat" type="icon" aria-label="Print">
<chi-icon icon="print"></chi-icon>
</chi-button>
</div>
<div class="chi-bulk-actions__buttons-desktop">
<chi-button size="xs" aria-label="Download">
<chi-icon icon="arrow-to-bottom"></chi-icon>
<span> Download </span>
</chi-button>
<chi-button size="xs" aria-label="Compose">
<chi-icon icon="arrow-to-bottom"></chi-icon>
<span> Compose </span>
</chi-button>
<chi-button size="xs" aria-label="Delete">
<chi-icon icon="arrow-to-bottom"></chi-icon>
<span> Delete </span>
</chi-button>
<chi-button size="xs" aria-label="Print">
<chi-icon icon="arrow-to-bottom"></chi-icon>
<span> Print </span>
</chi-button>
</div>
</div>
</template>
</ChiDataTable>
<!-- imports -->
import ExamplePopover from './ExamplePopover.vue';
<!-- Config and Data -->
data() {
return {
config: {
columnResize: false,
selectable: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: false,
firstLast: true,
pageJumper: true,
},
resultsPerPage: 3,
defaultSort: {
key: 'name',
sortBy: 'string',
direction: 'ascending',
},
showExpandAll: true,
showSelectAllDropdown: true,
actions: [
{
label: 'View',
icon: 'icon-check-alt',
onClick: (props) => {
console.log(JSON.stringify(props));
},
},
{
label: 'Edit',
icon: 'icon-edit',
onClick: () => console.log(`Edited`),
},
{
label: 'Download',
icon: 'icon-circle-arrow-down',
hide: ['desktop'],
onClick: () => console.log(`downloaded`),
},
{
label: 'Delete',
icon: 'icon-delete',
onClick: () => console.log('deleted'),
},
],
},
table: {
head: {
name: { label: 'Name', sortable: true, sortBy: 'name', sortDataType: 'string', key: true, bold: true },
status: { label: 'Status', sortable: true, sortBy: 'status', sortDataType: 'string', description: 'Helpful information goes here.' },
userID: { label: 'User ID', key: true, icon: 'user' },
lastLogin: { label: 'Last Login', key: true },
},
body: [
{
expanded: true,
id: "name-1",
data: [
{ template: "name", payload: { name: "Name 1", id: "name-1" } },
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-1",
data: [
"Child 1 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-1",
data: [
"Grand Child 1 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-1",
data: [
"Grand Child 2 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-1",
data: [
"Child 2 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-1",
data: [
"Grand Child 3 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-1",
data: [
"Grand Child 4 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
{
id: "name-2",
data: [
{ template: "name", payload: { name: "Name 2", id: "name-2" } },
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-2",
data: [
"Child 1 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-2",
data: [
"Grand Child 1 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-2",
data: [
"Grand Child 2 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-2",
data: [
"Child 2 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-2",
data: [
"Grand Child 3 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-2",
data: [
"Grand Child 4 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
{
id: "name-3",
data: [
{
template: "name",
payload: {
name: "Name 3",
id: "name-3",
},
},
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-3",
data: [
"Child 1 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-3",
data: [
"Grand Child 1 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-3",
data: [
"Grand Child 2 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-3",
data: [
"Child 2 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-3",
data: [
"Grand Child 3 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-3",
data: [
"Grand Child 4 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
{
id: "name-4",
data: [
{
template: "name",
payload: {
name: "Name 4",
id: "name-4",
},
},
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-4",
data: [
"Child 1 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-4",
data: [
"Grand Child 1 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-4",
data: [
"Grand Child 2 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-4",
data: [
"Child 2 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-4",
data: [
"Grand Child 3 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-4",
data: [
"Grand Child 4 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
{
id: "name-5",
data: [
{
template: "name",
payload: {
name: "Name 5",
id: "name-5",
},
},
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-5",
data: [
"Child 1 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-5",
data: [
"Grand Child 1 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-5",
data: [
"Grand Child 2 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-5",
data: [
"Child 2 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-5",
data: [
"Grand Child 3 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-5",
data: [
"Grand Child 4 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
{
id: "name-6",
data: [
{
template: "name",
payload: {
name: "Name 6",
id: "name-6",
},
},
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-6",
data: [
"Child 1 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-6",
data: [
"Grand Child 1 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-6",
data: [
"Grand Child 2 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-6",
data: [
"Child 2 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-6",
data: [
"Grand Child 3 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-6",
data: [
"Grand Child 4 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
],
},
}
},
methods: {
printTable() {
this.$refs.dataTableComplex.print('Data table - Complex')
}
}<!-- Template -->
<template>
<div class="-text--truncate">
<a
:id="`ticket-popover-button-${id}`"
href="#"
:data-target="`#ticket-popover-${id}`"
position="top-start">
{{id}}
</a>
<section
class="chi-popover"
:id="`ticket-popover-${id}`"
aria-modal="true"
role="dialog"
aria-label="Popover title"
>
<header class="chi-popover__header">
<h2 class="chi-popover__title">{{ id }}</h2>
</header>
<div class="chi-popover__content">
<p class="chi-popover__text">Content for {{ id }}</p>
</div>
</section>
</div>
</template>
<!-- Mounted -->
mounted() {
const buttonOpenOnHover = document.getElementById(`ticket-popover-button-${this.$props.id}`);
const popover = chi.popover(buttonOpenOnHover);
let hoverAnimationTimeout: number;
if (buttonOpenOnHover) {
buttonOpenOnHover.addEventListener('mouseenter', function() {
hoverAnimationTimeout = setTimeout(() => {
popover.show();
}, 300);
});
buttonOpenOnHover.addEventListener('mouseleave', function() {
if (hoverAnimationTimeout) {
clearTimeout(hoverAnimationTimeout);
}
popover.hide();
});
}
}
beforeDestroy() {
this.popover.dispose();
}Base
<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-1">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-1">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-1" />
</div>
</div>
</div>
</nav>
</div>
</div>
Empty
No Results
Use
noResultsMessage config to customize the no results data message<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
noResultsMessage: 'No matching results',
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: []
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row-empty">
<div>No matching results</div>
</div>
</div>
</div>
No Filters
Use
noFiltersMessage config to customize the no filters data message<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
noFiltersMessage: "Search for or select at least one filter to get results",
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: []
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row-empty">
<i class="-mr--1 chi-icon icon-search"></i>
Search for or select at least one filter to get results
</div>
</div>
</div>
Empty Actionable
<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
emptyActionable: {
isActionable: true,
},
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: []
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row-empty -actionable">
<div>
<i class="chi-icon icon-circle-plus-outline -icon--grey" aria-hidden="true"></i>
<span>
<a>Add a new or existing service</a>, then manage here.
</span>
</div>
</div>
</div>
</div>
No Border
Use
noBorder config to remove the borders<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: true,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table -no-border">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-2">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-2">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-2" />
</div>
</div>
</div>
</nav>
</div>
</div>
Striped
Use
striped config to achieve striped styles<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row -striped">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-3">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-3">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-3" />
</div>
</div>
</div>
</nav>
</div>
</div>
Hover
Use
hover config to achieve hover behavior<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: true,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table -hover">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-4">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-4">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-4" />
</div>
</div>
</div>
</nav>
</div>
</div>
Bordered
Use
bordered config to achieve bordered behavior<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: true,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table -bordered">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-5">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-5">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-5" />
</div>
</div>
</div>
</nav>
</div>
</div>
Active
Use
active property to achieve active state of rows<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
active: true,
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row -active">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-6">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-6">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-6" />
</div>
</div>
</div>
</nav>
</div>
</div>
Selectable
Use
selectable config to render rows with selectable checkboxes<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
selectable: true,
showSelectAllDropdown: true,
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -selectable">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-ba1">
<label class="chi-checkbox__label" for="checkbox-ba1">
<div class="-sr--only">Label</div>
</label>
</div>
<div class="chi-dropdown">
<button aria-label="Select All Dropdown" data-position="bottom-start" class="chi-button -icon -flat -has-active">
<div class="chi-button__content">
<i aria-hidden="true" class="chi-icon icon-chevron-down -xs"></i>
</div>
</button>
<div class="chi-dropdown__menu" x-placement="bottom-start">
<a class="chi-dropdown__menu-item">Select all items, this page</a>
<a class="chi-dropdown__menu-item">Select all items, all pages</a>
<a class="chi-dropdown__menu-item">Deselect all</a>
</div>
</div>
</div>
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -selectable">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-ba2">
<label class="chi-checkbox__label" for="checkbox-ba2">
<div class="-sr--only">Label</div>
</label>
</div>
</div>
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row -selected">
<div class="chi-data-table__cell -lh--1 -selectable">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-ba3">
<label class="chi-checkbox__label" for="checkbox-ba3">
<div class="-sr--only">Label</div>
</label>
</div>
</div>
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell -lh--1 -selectable">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-ba4">
<label class="chi-checkbox__label" for="checkbox-ba4">
<div class="-sr--only">Label</div>
</label>
</div>
</div>
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-7">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-7">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-7" />
</div>
</div>
</div>
</nav>
</div>
</div>
Radio selection
Use
selectable config to render rows with radio buttons<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
selectable: 'radio',
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -selectable"></div>
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<fieldset>
<legend class="--sr-only">Select a Row</legend>
<div class="chi-data-table__row">
<div class="chi-data-table__cell -selectable">
<div class="chi-radio">
<input type="radio" class="chi-radio__input" id="radio-ba2" name="radios">
<label class="chi-radio__label" for="radio-ba2"></label>
</div>
</div>
<div class=" chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row -selected">
<div class="chi-data-table__cell -lh--1 -selectable">
<div class="chi-radio">
<input type="radio" class="chi-radio__input" id="radio-ba3" name="radios">
<label class="chi-radio__label" for="radio-ba3"></label>
</div>
</div>
<div class=" chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell -lh--1 -selectable">
<div class="chi-radio">
<input type="radio" class="chi-radio__input" id="radio-ba4" name="radios">
<label class="chi-radio__label" for="radio-ba4"></label>
</div>
</div>
<div class=" chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</fieldset>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-7">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-7">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-7" />
</div>
</div>
</div>
</nav>
</div>
</div>
Accordion
Use
nestedContent property to provide data of row accordion content<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
showExpandAll: true,
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
expanded: true,
id: 'name-1',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -expandable -position--relative">
<button class="chi-button -icon -flat -expand -sm">
<div class="chi-button__content">
<i class="chi-icon icon-squares-plus-outline"></i>
</div>
</button>
</div>
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -expandable">
<button class="chi-button -icon -flat -sm" aria-label="Expand row">
<div class="chi-button__content">
<i class="chi-icon icon-plus" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m. </div>
</div>
</div>
<div class="chi-data-table__row -expanded">
<div class="chi-data-table__cell -expandable">
<button class="chi-button -icon -flat -sm" aria-label="Expand row">
<div class="chi-button__content">
<i class="chi-icon icon-plus" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m. </div>
</div>
</div>
<div class="chi-data-table__row-child -container">
<div>Accordion content</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell -expandable">
<button class="chi-button -icon -flat -sm" aria-label="Expand row">
<div class="chi-button__content">
<i class="chi-icon icon-plus" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-9">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-9">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-9" />
</div>
</div>
</div>
</nav>
</div>
</div>
Sorting
Use
sortBy and sortDataType properties to make the column sortable<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name', sortable: true, sortDataType: 'string' },
id: { label: 'ID', sortable: true, sortDataType: 'string' },
lastLogin: { label: 'Last Login', sortable: true, sortDatatype: 'date' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<button class="chi-data-table__cell -sorting">
<div>Name</div>
<i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>ID</div>
<i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>Last Login</div>
<i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-10">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-10">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-10" />
</div>
</div>
</div>
</nav>
</div>
</div>
Default Sorting -- Ascending
Use
sortBy and sortDataType properties to make the column sortable<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
defaultSort: {
key: 'name',
direction: 'ascending',
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name', sortable: true, sortDataType: 'string' },
id: { label: 'ID', sortable: true, sortDataType: 'string' },
lastLogin: { label: 'Last Login', sortable: true, sortDatatype: 'date' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<button class="chi-data-table__cell -sorting -active">
<div>Name</div>
<i class="chi-icon -xs icon-arrow-up" aria-hidden="true"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>ID</div>
<i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>Last Login</div>
<i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-11">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-11">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-11" />
</div>
</div>
</div>
</nav>
</div>
</div>
Default Sorting -- Descending
Use
sortBy and sortDataType properties to make the column sortable<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
defaultSort: {
key: 'name',
direction: 'descending',
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name', sortable: true, sortDataType: 'string' },
id: { label: 'ID', sortable: true, sortDataType: 'string' },
lastLogin: { label: 'Last Login', sortable: true, sortDatatype: 'date' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<button class="chi-data-table__cell -sorting -active -descending">
<div>Name</div>
<i class="chi-icon -xs icon-arrow-up" aria-hidden="true"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>ID</div>
<i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>Last Login</div>
<i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-12">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-12">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-12" />
</div>
</div>
</div>
</nav>
</div>
</div>
Size -xs
<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'xs',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table -xs">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-13">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-13">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-13" />
</div>
</div>
</div>
</nav>
</div>
</div>
Size -sm
<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'sm',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table -sm">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-14">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-14">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-14" />
</div>
</div>
</div>
</nav>
</div>
</div>
Size -md
<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table -md">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-15">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-15">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-15"/>
</div>
</div>
</div>
</nav>
</div>
</div>
Size -lg
<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'lg',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table -lg">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-16">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-16">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-16" />
</div>
</div>
</div>
</nav>
</div>
</div>
Size -xl
<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'xl',
striped: false,
},
pagination: {
activePage: 1,
compact: false,
firstLast: false,
pageJumper: true,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-data-table -xl">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 results</span>
</div>
<div class="chi-pagination__page-size">
<div class="chi-dropdown">
<button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-17">20</button>
<div class="chi-dropdown__menu -w--xs">
<a class="chi-dropdown__menu-item -active" href="#">20</a>
<a class="chi-dropdown__menu-item" href="#">40</a>
<a class="chi-dropdown__menu-item" href="#">60</a>
<a class="chi-dropdown__menu-item" href="#">80</a>
<a class="chi-dropdown__menu-item" href="#">All</a>
</div>
</div>
<span class="chi-pagination__label">per page</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -flat" aria-label="Page 1">1</button>
<button class="chi-button -flat" aria-label="Page 2">2</button>
<button class="chi-button -flat -active" aria-label="Page 3">3</button>
<button class="chi-button -flat" aria-label="Page 4">4</button>
<button class="chi-button -flat" aria-label="Page 5">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12">12</button>
<button class="chi-button -icon -flat" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end">
<div class="chi-pagination__jumper">
<label class="chi-pagination__label" for="jumper-input-17">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-17" />
</div>
</div>
</div>
</nav>
</div>
</div>
Complex
Title
Create reusable Vue components based on your needs and use them as custom templates for Data Table cells and row accordions
<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table" ref="dataTableComplex">
<template #status="payload">
<i class="`chi-icon icon-${payload.icon} -icon--${payload.color}`" aria-hidden="true"></i>
<span class="-text--truncate" style="padding-left: 0.5rem;">
{{ payload.status }}
</span>
</template>
<template v-slot:name="payload">
<ExamplePopover :name="payload.name" :id="payload.id" />
</template>
<template v-slot:toolbar>
<ChiDataTableToolbar>
<template v-slot:start></template>
<template v-slot:end>
<chi-button @chiClick="printTable" variant="flat" type="icon" aria-label="Print data table complex example">
<chi-icon icon="print"></chi-icon>
</chi-button>
</template>
</ChiDataTableToolbar>
</template>
<template v-slot:bulk-actions>
<div class="chi-bulk-actions__buttons">
<div class="chi-bulk-actions__buttons-mobile -z--40">
<chi-button variant="flat" type="icon" aria-label="Edit">
<chi-icon icon="edit"></chi-icon>
</chi-button>
<chi-button variant="flat" type="icon" aria-label="Compose">
<chi-icon icon="compose"></chi-icon>
</chi-button>
<chi-button variant="flat" type="icon" aria-label="Delete">
<chi-icon icon="delete"></chi-icon>
</chi-button>
<chi-button variant="flat" type="icon" aria-label="Print">
<chi-icon icon="print"></chi-icon>
</chi-button>
</div>
<div class="chi-bulk-actions__buttons-desktop">
<chi-button size="xs" aria-label="Download">
<chi-icon icon="arrow-to-bottom"></chi-icon>
<span> Download </span>
</chi-button>
<chi-button size="xs" aria-label="Compose">
<chi-icon icon="arrow-to-bottom"></chi-icon>
<span> Compose </span>
</chi-button>
<chi-button size="xs" aria-label="Delete">
<chi-icon icon="arrow-to-bottom"></chi-icon>
<span> Delete </span>
</chi-button>
<chi-button size="xs" aria-label="Print">
<chi-icon icon="arrow-to-bottom"></chi-icon>
<span> Print </span>
</chi-button>
</div>
</div>
</template>
</ChiDataTable>
<!-- imports -->
import ExamplePopover from './ExamplePopover.vue';
<!-- Config and Data -->
data() {
return {
config: {
columnResize: false,
selectable: true,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: true,
firstLast: true,
pageJumper: false,
},
resultsPerPage: 3,
defaultSort: {
key: 'name',
sortBy: 'string',
direction: 'ascending',
},
showExpandAll: true,
showSelectAllDropdown: true,
actions: [
{
label: 'View',
icon: 'icon-check-alt',
onClick: (props) => {
console.log(JSON.stringify(props));
},
},
{
label: 'Edit',
icon: 'icon-edit',
onClick: () => console.log(`Edited`),
},
{
label: 'Download',
icon: 'icon-circle-arrow-down',
hide: ['desktop'],
onClick: () => console.log(`downloaded`),
},
{
label: 'Delete',
icon: 'icon-delete',
onClick: () => console.log('deleted'),
},
],
},
table: {
head: {
name: { label: 'Name', sortable: true, sortBy: 'name', sortDataType: 'string', key: true, bold: true },
status: { label: 'Status', sortable: true, sortBy: 'status', sortDataType: 'string', description: 'Helpful information goes here.' },
userID: { label: 'User ID', key: true, icon: 'user' },
lastLogin: { label: 'Last Login', key: true },
},
body: [
{
expanded: true,
id: "name-1",
data: [
{ template: "name", payload: { name: "Name 1", id: "name-1" } },
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-1",
data: [
"Child 1 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-1",
data: [
"Grand Child 1 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-1",
data: [
"Grand Child 2 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-1",
data: [
"Child 2 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-1",
data: [
"Grand Child 3 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-1",
data: [
"Grand Child 4 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-1",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
{
id: "name-2",
data: [
{ template: "name", payload: { name: "Name 2", id: "name-2" } },
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-2",
data: [
"Child 1 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-2",
data: [
"Grand Child 1 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-2",
data: [
"Grand Child 2 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-2",
data: [
"Child 2 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-2",
data: [
"Grand Child 3 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-2",
data: [
"Grand Child 4 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-2",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
{
id: "name-3",
data: [
{
template: "name",
payload: {
name: "Name 3",
id: "name-3",
},
},
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-3",
data: [
"Child 1 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-3",
data: [
"Grand Child 1 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-3",
data: [
"Grand Child 2 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-3",
data: [
"Child 2 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-3",
data: [
"Grand Child 3 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-3",
data: [
"Grand Child 4 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-3",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
{
id: "name-4",
data: [
{
template: "name",
payload: {
name: "Name 4",
id: "name-4",
},
},
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-4",
data: [
"Child 1 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-4",
data: [
"Grand Child 1 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-4",
data: [
"Grand Child 2 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-4",
data: [
"Child 2 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-4",
data: [
"Grand Child 3 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-4",
data: [
"Grand Child 4 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-4",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
{
id: "name-5",
data: [
{
template: "name",
payload: {
name: "Name 5",
id: "name-5",
},
},
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-5",
data: [
"Child 1 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-5",
data: [
"Grand Child 1 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-5",
data: [
"Grand Child 2 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-5",
data: [
"Child 2 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-5",
data: [
"Grand Child 3 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-5",
data: [
"Grand Child 4 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"user-name-5",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
{
id: "name-6",
data: [
{
template: "name",
payload: {
name: "Name 6",
id: "name-6",
},
},
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 3:26 p.m.",
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-6",
data: [
"Child 1 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-6",
data: [
"Grand Child 1 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-2-name-6",
data: [
"Grand Child 2 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
{
id: "child-2-name-6",
data: [
"Child 2 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-6",
data: [
"Grand Child 3 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
},
{
id: "grandchild-4-name-6",
data: [
"Grand Child 4 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"user-name-6",
"18 Dec 2020 2:38 a.m.",
],
},
],
},
},
},
],
},
},
},
],
},
}
},
methods: {
printTable() {
this.$refs.dataTableComplex.print('Data table - Complex')
}
}<!-- Template -->
<template>
<div class="-text--truncate">
<a
:id="`ticket-popover-button-${id}`"
href="#"
:data-target="`#ticket-popover-${id}`"
position="top-start">
{{ id }}
</a>
<section
class="chi-popover"
:id="`ticket-popover-${id}`"
aria-modal="true"
role="dialog"
aria-label="Popover title"
>
<header class="chi-popover__header">
<h2 class="chi-popover__title">{{ id }}</h2>
</header>
<div class="chi-popover__content">
<p class="chi-popover__text">Content for {{ id }}</p>
</div>
</section>
</div>
</template>
<!-- Mounted -->
mounted() {
const buttonOpenOnHover = document.getElementById(`ticket-popover-button-${this.$props.id}`);
const popover = chi.popover(buttonOpenOnHover);
let hoverAnimationTimeout: number;
if (buttonOpenOnHover) {
buttonOpenOnHover.addEventListener('mouseenter', function() {
hoverAnimationTimeout = setTimeout(() => {
popover.show();
}, 300);
});
buttonOpenOnHover.addEventListener('mouseleave', function() {
if (hoverAnimationTimeout) {
clearTimeout(hoverAnimationTimeout);
}
popover.hide();
});
}
}
beforeDestroy() {
this.popover.dispose();
}Base
Title
Use
portal config to achieve portal styling<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: true,
firstLast: true,
pageJumper: false,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name', key: true, bold: true },
id: { label: 'ID', key: true },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-card -portal -bg--white -bg-md--grey-15">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<div class="chi-data-table -portal -compact">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row -md">
<div class="chi-data-table__cell -key -bold">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell -key">
<div>name-1</div>
</div>
<div class="chi-data-table__cell">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row -striped -md">
<div class="chi-data-table__cell -key -bold">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell -key">
<div>name-2</div>
</div>
<div class="chi-data-table__cell">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row -md">
<div class="chi-data-table__cell -key -bold">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell -key">
<div>name-3</div>
</div>
<div class="chi-data-table__cell">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 Results</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="First page">
<div class="chi-button__content">
<i class="chi-icon icon-page-first" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-pagination__label">
<strong>2</strong>
<span>of</span>
<strong>3</strong>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Last page">
<div class="chi-button__content">
<i class="chi-icon icon-page-last" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
</div>
Second line wrapping
Title
Use
cellWrap config to achieve the two line wrapping<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: true,
firstLast: true,
pageJumper: false,
},
resultsPerPage: 3,
cellWrap: true,
},
table: {
head: {
name: { label: 'This is a long header content with a second line wrapping without tooltip: This is a long content for the tooltip in the wrapped cell', key: true, bold: true },
id: { label: 'ID', key: true },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'This is a long content with a second line wrapping without tooltip: Cell wrapped on two lines',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'This is a long content with a second line wrapping with tooltip: This is a long content for the tooltip in the wrapped cell',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-card -portal -bg--white -bg-md--grey-15">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<div class="chi-data-table -portal -compact">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell" data-label="This is a long header content with a second line wrapping without tooltip: This is a long content for the tooltip in the wrapped cell">
<div class="-cell-wrap">This is a long header content with a second line wrapping without tooltip: This is a long content for the tooltip in the wrapped cell</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div class="-cell-wrap">ID</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div class="-cell-wrap">Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row -md">
<div class="chi-data-table__cell -key -bold">
<div class="-cell-wrap">This is a long content with a second line wrapping without tooltip: Cell wrapped on two lines</div>
</div>
<div class="chi-data-table__cell -key">
<div class="-cell-wrap">name-1</div>
</div>
<div class="chi-data-table__cell">
<div class="-cell-wrap">18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row -striped -md">
<div class="chi-data-table__cell -key -bold">
<div class="-cell-wrap">This is a long content with a second line wrapping with tooltip: This is a long content for the tooltip in the wrapped cell</div>
</div>
<div class="chi-data-table__cell -key">
<div class="-cell-wrap">name-2</div>
</div>
<div class="chi-data-table__cell">
<div class="-cell-wrap">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row -md">
<div class="chi-data-table__cell -key -bold">
<div class="-cell-wrap">Name 3</div>
</div>
<div class="chi-data-table__cell -key">
<div class="-cell-wrap">name-3</div>
</div>
<div class="chi-data-table__cell">
<div class="-cell-wrap">5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 Results</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="First page">
<div class="chi-button__content">
<i class="chi-icon icon-page-first" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-pagination__label">
<strong>2</strong>
<span>of</span>
<strong>3</strong>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Last page">
<div class="chi-button__content">
<i class="chi-icon icon-page-last" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
State
Title
Use
state config to achieve states styling<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data(): {
return: {
config: {
columnResize: true,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: true,
firstLast: true,
pageJumper: false,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name', key: true, bold: true },
id: { label: 'ID', key: true },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
state: 'danger'
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-card -portal -bg--white -bg-md--grey-15">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<div class="chi-data-table -portal -compact">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row -md">
<div class="chi-data-table__cell -key -bold">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell -key">
<div>name-1</div>
</div>
<div class="chi-data-table__cell">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row -row--danger -striped -md">
<div class="chi-data-table__cell -key -bold">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell -key">
<div>name-2</div>
</div>
<div class="chi-data-table__cell">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row -md">
<div class="chi-data-table__cell -key -bold">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell -key">
<div>name-3</div>
</div>
<div class="chi-data-table__cell">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 Results</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="First page">
<div class="chi-button__content">
<i class="chi-icon icon-page-first" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-pagination__label">
<strong>2</strong>
<span>of</span>
<strong>3</strong>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Last page">
<div class="chi-button__content">
<i class="chi-icon icon-page-last" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
</div>
Empty
No Results
Title
Use
noResultsMessage config to customize the no results data message<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
noResultsMessage: 'No matching results',
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: true,
firstLast: true,
pageJumper: false,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [],
}
}
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<div class="chi-data-table -portal -compact">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row-empty">
<div>No matching results</div>
</div>
</div>
</div>
</div>
</div>
No Filters
Title
Use
noFiltersMessage config to customize the no filters data message<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
noFiltersMessage: 'Search for or select at least one filter to get results',
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: true,
firstLast: true,
pageJumper: false,
},
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [],
}
}
}<div class="chi-card -portal -bg--white -bg-md--grey-15">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<div class="chi-data-table -portal -compact">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row-empty">
<div>Search for or select at least one filter to get results</div>
</div>
</div>
</div>
</div>
</div>
Empty Actionable
Title
<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: true,
firstLast: true,
pageJumper: false,
},
resultsPerPage: 3,
emptyActionable: {
isActionable: true,
},
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [],
}
}
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<div class="chi-data-table -portal -compact">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row-empty -actionable">
<div>
<i class="chi-icon icon-circle-plus-outline -icon--grey" aria-hidden="true"></i>
<span>
<a>Add a new or existing service</a>, then manage here.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
Radio selection
Title
Use
selectable config to render rows with radio buttons<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: true,
firstLast: true,
pageJumper: false,
},
selectable: 'radio',
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
id: 'name-1',
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-card -portal -bg--white -bg-md--grey-15">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<div class="chi-data-table -portal -compact">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -selectable"></div>
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<fieldset>
<legend class="--sr-only">Select a Row</legend>
<div class="chi-data-table__row -md">
<div class="chi-data-table__cell -selectable">
<div class="chi-radio">
<input type="radio" class="chi-radio__input" id="radio-ba2" name="radios">
<label class="chi-radio__label" for="radio-ba2"></label>
</div>
</div>
<div class=" chi-data-table__cell" data-label="Name">
<div>Name 1</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-1</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 3:26 p.m.</div>
</div>
</div>
<div class="chi-data-table__row -md">
<div class="chi-data-table__cell -lh--1 -selectable">
<div class="chi-radio">
<input type="radio" class="chi-radio__input" id="radio-ba3" name="radios">
<label class="chi-radio__label" for="radio-ba3"></label>
</div>
</div>
<div class=" chi-data-table__cell" data-label="Name">
<div>Name 2</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-2</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>18 Dec 2020 2:38 a.m.</div>
</div>
</div>
<div class="chi-data-table__row -md">
<div class="chi-data-table__cell -lh--1 -selectable">
<div class="chi-radio">
<input type="radio" class="chi-radio__input" id="radio-ba4" name="radios">
<label class="chi-radio__label" for="radio-ba4"></label>
</div>
</div>
<div class=" chi-data-table__cell" data-label="Name">
<div>Name 3</div>
</div>
<div class="chi-data-table__cell" data-label="ID">
<div>name-3</div>
</div>
<div class="chi-data-table__cell" data-label="Last Login">
<div>5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</fieldset>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 Results</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="First page">
<div class="chi-button__content">
<i class="chi-icon icon-page-first" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-pagination__label">
<strong>2</strong>
<span>of</span>
<strong>3</strong>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Last page">
<div class="chi-button__content">
<i class="chi-icon icon-page-last" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
</div>
Accordion
Title
Use
nestedContent property to provide data of row accordion content<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: true,
firstLast: true,
pageJumper: false,
},
showExpandAll: true,
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name' },
id: { label: 'ID' },
lastLogin: { label: 'Last Login' },
},
body: [
{
expanded: true,
id: 'name-1',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
nestedContent: {
value: "Accordion content",
},
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<div class="chi-data-table -portal -compact">
<div role="row" class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -expandable -position--relative">
<div>
<button aria-label="Expand All Rows" class="chi-button -icon -flat -expand -sm">
<div class="chi-button__content">
<i class="chi-icon icon-squares-minus-outline"></i>
</div>
<span class="-sr--only">Expand All Rows</span>
</button>
<div class="chi-tooltip " data-popper-placement="top">
<span>Collapse All</span>
</div>
</div>
<div class="-position--absolute resize-handle"> </div>
</div>
<div data-label="Name" class="chi-data-table__cell -justify-content-md--start -position--relative">
Name <div class="-position--absolute resize-handle"> </div>
</div>
<div data-label="ID" class="chi-data-table__cell -justify-content-md--start -position--relative">
ID <div class="-position--absolute resize-handle"> </div>
</div>
<div data-label="Last Login" class="chi-data-table__cell -justify-content-md--start -position--relative">
Last Login <div class="-position--absolute resize-handle"> </div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div id="row-dt-1-name-1" data-rownumber="0" data-rowlevel="0" role="row" class="chi-data-table__row -md -expanded">
<div role="cell" class="chi-data-table__cell -expandable">
<button aria-label="Expand row" data-target="#row-dt-1-name-1-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-minus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
</div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 3:26 p.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-content">
<div role="row" class="chi-data-table__row-child -p--2">Accordion content</div>
</div>
<div id="row-dt-1-name-2" data-rownumber="1" data-rowlevel="0" role="row" class="chi-data-table__row -striped -md -collapsed">
<div role="cell" class="chi-data-table__cell -expandable">
<button aria-label="Expand row" data-target="#row-dt-1-name-2-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
</div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-2-content" style="display: none;">
<div role="row" class="chi-data-table__row-child -p--2">Accordion content</div>
</div>
<div id="row-dt-1-name-3" data-rownumber="2" data-rowlevel="0" role="row" class="chi-data-table__row -md -collapsed">
<div role="cell" class="chi-data-table__cell -expandable">
<button aria-label="Expand row" data-target="#row-dt-1-name-3-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
</div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Name 3</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">name-3</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-3-content" style="display: none;">
<div role="row" class="chi-data-table__row-child -p--2">Accordion content</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 Results</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="First page">
<div class="chi-button__content">
<i class="chi-icon icon-page-first" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-pagination__label">
<strong>2</strong>
<span>of</span>
<strong>3</strong>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Last page">
<div class="chi-button__content">
<i class="chi-icon icon-page-last" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
Accordion Child
Title
Use
nestedContent property to provide data of row accordion content<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
activePage: 1,
compact: true,
firstLast: true,
pageJumper: false,
},
showExpandAll: true,
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name', key: true, bold: true },
id: { label: 'ID', key: true },
lastLogin: { label: 'Last Login' },
},
body: [
{
expanded: true,
id: 'name-1',
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
nestedContent: {
table: {
data: [
{
id: 'name-2-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-2-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
nestedContent: {
table: {
data: [
{
id: 'name-3-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
nestedContent: {
table: {
data: [
{
id: 'name-4-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-4-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
nestedContent: {
table: {
data: [
{
id: 'name-5-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-5-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
nestedContent: {
table: {
data: [
{
id: 'name-6-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<div class="chi-data-table -portal -compact">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -expandable -position--relative">
<button class="chi-button -icon -flat -expand -sm">
<div class="chi-button__content">
<i class="chi-icon icon-squares-minus-outline"></i>
</div>
</button>
</div>
<div class="chi-data-table__cell">
<div>Name</div>
</div>
<div class="chi-data-table__cell">
<div>ID</div>
</div>
<div class="chi-data-table__cell">
<div>Last Login</div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div id="row-dt-1-name-1" data-rownumber="0" data-rowlevel="0" role="row" class="chi-data-table__row -md -expanded">
<div role="cell" class="chi-data-table__cell -expandable">
<button aria-label="Expand row" data-target="#row-dt-1-name-1-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-minus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
</div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 3:26 p.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-content">
<div id="row-dt-1-name-1-0" data-rownumber="2-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
<div class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<button aria-label="Expand row" data-target="#row-dt-1-name-1-0-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-1" data-rownumber="2-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
</div>
<div id="row-dt-1-name-2" data-rownumber="1" data-rowlevel="0" role="row" class="chi-data-table__row -striped -md -collapsed">
<div role="cell" class="chi-data-table__cell -expandable">
<button aria-label="Expand row" data-target="#row-dt-1-name-2-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
</div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-2-content" style="display: none;">
<div id="row-dt-1-name-2-0" data-rownumber="2-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
<div class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<button aria-label="Expand row" data-target="#row-dt-1-name-2-0-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-2-1" data-rownumber="2-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
</div>
<div id="row-dt-1-name-3" data-rownumber="2-0" data-rowlevel="1" role="row" class="chi-data-table__row -md -collapsed">
<div role="cell" class="chi-data-table__cell -expandable">
<button aria-label="Expand row" data-target="#row-dt-1-name-3-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
</div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Name 3</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">name-3</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-3-content" style="display: none;">
<div id="row-dt-1-name-3-0" data-rownumber="2-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
<div class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<button aria-label="Expand row" data-target="#row-dt-1-name-3-0-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-3-1" data-rownumber="2-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 Results</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="First page">
<div class="chi-button__content">
<i class="chi-icon icon-page-first" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-pagination__label">
<strong>2</strong>
<span>of</span>
<strong>3</strong>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Last page">
<div class="chi-button__content">
<i class="chi-icon icon-page-last" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
Accordion Grand Child
Title
Use
nestedContent property to provide data of row accordion content<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>
<!-- Config and Data -->
data() {
return {
config: {
columnResize: true,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: "md",
striped: true,
},
pagination: {
activePage: 1,
compact: true,
firstLast: true,
pageJumper: false,
},
showExpandAll: true,
resultsPerPage: 3,
},
table: {
head: {
name: { label: 'Name', key: true, bold: true },
id: { label: 'ID', key: true },
lastLogin: { label: 'Last Login' },
},
body: [
{
expanded: true,
id: 'name-1',
nestedContent: {
table: {
data: [
{
expanded: true,
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
],
},
},
data: [
'Name 1',
'name-1',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-2',
nestedContent: {
table: {
data: [
{
id: 'name-2-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
{
id: 'name-2-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
],
},
},
data: [
'Name 2',
'name-2',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-3',
nestedContent: {
table: {
data: [
{
id: 'name-3-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
{
id: 'name-3-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
],
},
},
data: [
'Name 3',
'name-3',
'5 Nov 2020 10:15 a.m.',
],
},
{
id: 'name-4',
nestedContent: {
table: {
data: [
{
id: 'name-4-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
{
id: 'name-4-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
],
},
},
data: [
'Name 4',
'name-4',
'18 Dec 2020 3:26 p.m.',
],
},
{
id: 'name-5',
nestedContent: {
table: {
data: [
{
id: 'name-5-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
{
id: 'name-5-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
],
},
},
data: [
'Name 5',
'name-5',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-6',
nestedContent: {
table: {
data: [
{
id: 'name-6-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
{
id: 'name-6-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
nestedContent: {
table: {
data: [
{
id: 'name-1-0',
data: [
'Child Name 1',
'child-name-1',
'18 Dec 2020 2:38 a.m.',
],
},
{
id: 'name-1-1',
data: [
'Child Name 2',
'child-name-2',
'18 Dec 2020 2:38 a.m.',
],
},
],
},
},
},
],
},
},
data: [
'Name 6',
'name-6',
'5 Nov 2020 10:15 a.m.',
],
},
]
}
}
}<div class="chi-card -portal -bg--white -bg-md--grey-15">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<div class="chi-data-table -portal -compact">
<div role="row" class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -expandable -position--relative">
<div>
<button aria-label="Expand All Rows" class="chi-button -icon -flat -expand -sm">
<div class="chi-button__content">
<i class="chi-icon icon-squares-minus-outline"></i>
</div>
<span class="-sr--only">Expand All Rows</span>
</button>
<div class="chi-tooltip " data-popper-placement="top">
<span>Collapse All</span>
</div>
</div>
<div class="-position--absolute resize-handle"> </div>
</div>
<div data-label="Name" class="chi-data-table__cell -justify-content-md--start -position--relative">
Name <div class="-position--absolute resize-handle"> </div>
</div>
<div data-label="ID" class="chi-data-table__cell -justify-content-md--start -position--relative">
ID <div class="-position--absolute resize-handle"> </div>
</div>
<div data-label="Last Login" class="chi-data-table__cell -justify-content-md--start -position--relative">
Last Login <div class="-position--absolute resize-handle"> </div>
</div>
</div>
</div>
<div class="chi-data-table__body">
<div id="row-dt-1-name-1" data-rownumber="0" data-rowlevel="0" role="row" class="chi-data-table__row -md -expanded">
<div role="cell" class="chi-data-table__cell -expandable">
<button aria-label="Expand row" data-target="#row-dt-1-name-1-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-minus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
</div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 3:26 p.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-content">
<div id="row-dt-1-name-1-0" data-rownumber="0-0" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -expanded">
<div class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<button aria-label="Expand row" data-target="#row-dt-1-name-1-0-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-minus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-0-content">
<div id="row-dt-1-name-1-0" data-rownumber="0-0-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-1" data-rownumber="0-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-1" data-rownumber="0-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
<div class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<button aria-label="Expand row" data-target="#row-dt-1-name-1-1-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-1-content" style="display: none;">
<div id="row-dt-1-name-1-0" data-rownumber="0-1-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-1" data-rownumber="0-1-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
</div>
</div>
<div id="row-dt-1-name-2" data-rownumber="1" data-rowlevel="0" role="row" class="chi-data-table__row -striped -md -collapsed">
<div role="cell" class="chi-data-table__cell -expandable">
<button aria-label="Expand row" data-target="#row-dt-1-name-2-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
</div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-2-content" style="display: none;">
<div id="row-dt-1-name-2-0" data-rownumber="1-0" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
<div class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<button aria-label="Expand row" data-target="#row-dt-1-name-2-0-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-2-0-content" style="display: none;">
<div id="row-dt-1-name-1-0" data-rownumber="1-0-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-1" data-rownumber="1-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
</div>
<div id="row-dt-1-name-2-1" data-rownumber="1-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
<div class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<button aria-label="Expand row" data-target="#row-dt-1-name-2-1-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-2-1-content" style="display: none;">
<div id="row-dt-1-name-1-0" data-rownumber="1-1-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-1" data-rownumber="1-1-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
</div>
</div>
<div id="row-dt-1-name-3" data-rownumber="2" data-rowlevel="0" role="row" class="chi-data-table__row -md -collapsed">
<div role="cell" class="chi-data-table__cell -expandable">
<button aria-label="Expand row" data-target="#row-dt-1-name-3-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
</div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Name 3</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">name-3</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">5 Nov 2020 10:15 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-3-content" style="display: none;">
<div id="row-dt-1-name-3-0" data-rownumber="2-0" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
<div class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<button aria-label="Expand row" data-target="#row-dt-1-name-3-0-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-3-0-content" style="display: none;">
<div id="row-dt-1-name-1-0" data-rownumber="2-0-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-1" data-rownumber="2-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
</div>
<div id="row-dt-1-name-3-1" data-rownumber="2-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
<div class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<button aria-label="Expand row" data-target="#row-dt-1-name-3-1-content" class="chi-button -icon -flat -expand -xs">
<div class="chi-button__content">
<i class="chi-icon icon-plus"></i>
</div>
<span class="-sr--only">Expand Row</span>
</button>
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-3-1-content" style="display: none;">
<div id="row-dt-1-name-1-0" data-rownumber="2-1-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 1</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-1</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
<div id="row-dt-1-name-1-1" data-rownumber="2-1-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
<div role="cell" class="chi-data-table__cell -expandable"></div>
<div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
<div class="-w--100">
<div class="-text--truncate">Child Name 2</div>
</div>
</div>
<div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
<div class="-w--100">
<div class="-text--truncate">child-name-2</div>
</div>
</div>
<div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
<div class="-w--100">
<div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 Results</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="First page">
<div class="chi-button__content">
<i class="chi-icon icon-page-first" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-pagination__label">
<strong>2</strong>
<span>of</span>
<strong>3</strong>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Last page">
<div class="chi-button__content">
<i class="chi-icon icon-page-last" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
Two tier header
Title
Location
High Utilization
Elevated Utilization
Highest %
Total
%
Total
%
Location 1
3
98%
-
-
98%
Location 2
1
98%
3
67%
98%
Location 3
-
-
2
66
66%
<div class="chi-card -portal -bg--white -bg-md--grey-15">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<div class="chi-data-table -portal -compact">
<div class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -justify-content-md--start -sorting" aria-label="Sort Column Location"
data-column="location" data-sort="ascending" data-label="Location">
Location
<chi-button variant="flat" type="icon>
<chi-icon icon="arrow-up" size="xs"></chi-icon>
</chi-button>
</div>
<div class="chi-data-table__cell -justify-content-md--start -sorting" aria-label="Sort Column High Utilization"
data-column="highUtilization" data-sort="ascending" data-label="High Utilization">
High Utilization
<chi-button variant="flat" type="icon>
<chi-icon icon="arrow-sort" size="xs"></chi-icon>
</chi-button>
</div>
<div class="chi-data-table__cell -justify-content-md--start -sorting" aria-label="Sort Column Elevated Utilization"
data-column="elevatedUtilization" data-sort="ascending" data-label="Elevated Utilization">
Elevated Utilization
<chi-button variant="flat" type="icon>
<chi-icon icon="arrow-sort" size="xs"></chi-icon>
</chi-button>
</div>
<div class="chi-data-table__cell -justify-content-md--start -sorting" aria-label="Sort Column Highest %"
data-column="highest" data-sort="ascending" data-label="Highest %">
Highest %
<chi-button variant="flat" type="icon>
<chi-icon icon="arrow-sort" size="xs"></chi-icon>
</chi-button>
</div>
</div>
<div class="chi-data-table__row">
<div class="chi-data-table__cell"></div>
<div class="chi-data-table__cell">
<div class="-associated">Total</div>
<div class="-associated">%</div>
</div>
<div class="chi-data-table__cell">
<div class="-associated">Total</div>
<div class="-associated">%</div>
</div>
<div class="chi-data-table__cell"></div>
</div>
</div>
<div class="chi-data-table__body">
<div class="chi-data-table__row -md">
<div class="chi-data-table__cell -key -bold">
<div>Location 1</div>
</div>
<div class="chi-data-table__cell">
<div class="-associated">3</div>
<div class="-associated">98%</div>
</div>
<div class="chi-data-table__cell">
<div class="-associated">-</div>
<div class="-associated">-</div>
</div>
<div class="chi-data-table__cell">
<div>98%</div>
</div>
</div>
<div class="chi-data-table__row -striped -md">
<div class="chi-data-table__cell -key -bold">
<div>Location 2</div>
</div>
<div class="chi-data-table__cell">
<div class="-associated">1</div>
<div class="-associated">98%</div>
</div>
<div class="chi-data-table__cell">
<div class="-associated">3</div>
<div class="-associated">67%</div>
</div>
<div class="chi-data-table__cell">
<div>98%</div>
</div>
</div>
<div class="chi-data-table__row -md">
<div class="chi-data-table__cell -key -bold">
<div>Location 3</div>
</div>
<div class="chi-data-table__cell">
<div class="-associated">-</div>
<div class="-associated">-</div>
</div>
<div class="chi-data-table__cell">
<div class="-associated">2</div>
<div class="-associated">66</div>
</div>
<div class="chi-data-table__cell">
<div>66%</div>
</div>
</div>
</div>
<div class="chi-data-table__footer">
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start">
<div class="chi-pagination__results">
<span class="chi-pagination__label">240 Results</span>
</div>
</div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="First page">
<div class="chi-button__content">
<i class="chi-icon icon-page-first" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-pagination__label">
<strong>2</strong>
<span>of</span>
<strong>3</strong>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -xs" aria-label="Last page">
<div class="chi-button__content">
<i class="chi-icon icon-page-last" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
</div>Chi Vue
Props
Interfaces and types
Methods
Events
Accessibility
Accessibility guidelines coming soon