Data table
Examples
Base
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
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
Use
noResultsMessage config to customize the empty data message<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
noResultsMessage: 'No matches found. Please revise search criteria and try again.',
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
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 matches found. Please revise search criteria and try again.</div>
</div>
</div>
</div>
No Border
Use
noBorder config to remove the borders<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: true,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: true,
size: 'md',
striped: false,
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: true,
hover: false,
size: 'md',
striped: false,
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
compact: false,
firstLast: false,
pageJumper: true,
},
selectable: 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>
<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>
Accordion
Use
nestedContent property to provide data of row accordion content<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
compact: false,
firstLast: false,
pageJumper: 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"></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-chevron-right" 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-chevron-right" 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-chevron-right" 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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
defaultSort: {
key: 'name',
direction: 'ascending',
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
defaultSort: {
key: 'name',
direction: 'descending',
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'xs',
striped: false,
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'sm',
striped: false,
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: false,
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'lg',
striped: false,
},
pagination: {
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" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: false,
noBorder: false,
bordered: false,
hover: false,
size: 'xl',
striped: false,
},
pagination: {
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>
Base
Title
Use
portal config to achieve portal styling<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
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-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 -xl">
<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 -xl">
<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 -xl">
<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 -primary -sm" 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 -primary -sm" 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 -primary -sm" 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 -primary -sm" 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
Title
Use
noResultsMessage config to customize the empty data message<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
noResultsMessage: 'No matches found. Please revise search criteria and try again.',
activePage: 1,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
compact: false,
firstLast: false,
pageJumper: true,
},
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 matches found. Please revise search criteria and try again.</div>
</div>
</div>
</div>
</div>
</div>
Accordion
Title
Use
nestedContent property to provide data of row accordion content<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
compact: false,
firstLast: false,
pageJumper: 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 class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -expandable"></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 -collapsed -xl">
<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 -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 -expanded -striped -xl">
<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-minus" aria-hidden="true"></i>
</div>
</button>
</div>
<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-child -xl">
<div class="chi-data-table__cell -expandable"></div>
<div class="chi-data-table__cell -key -bold">
<div>Child Name 1</div>
</div>
<div class="chi-data-table__cell -key">
<div>Child name-1</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 -collapsed -xl">
<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 -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 -primary -sm" 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 -primary -sm" 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 -primary -sm" 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 -primary -sm" 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 Child
Title
Use
nestedContent property to provide data of row accordion content<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
compact: false,
firstLast: false,
pageJumper: 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"></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 -collapsed -xl">
<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 -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 -expanded -striped -xl">
<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-minus" aria-hidden="true"></i>
</div>
</button>
</div>
<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-child -collapsed -xl">
<div class="chi-data-table__cell -expandable"></div>
<div class="chi-data-table__cell -key -bold">
<div>Child Name 1</div>
</div>
<div class="chi-data-table__cell -key">
<div>Child name-1</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-child -collapsed -xl">
<div class="chi-data-table__cell -expandable"></div>
<div class="chi-data-table__cell -key -bold">
<div>Child Name 2</div>
</div>
<div class="chi-data-table__cell -key">
<div>Child 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 -collapsed -xl">
<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 -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 -primary -sm" 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 -primary -sm" 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 -primary -sm" 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 -primary -sm" 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 Grand Child
Title
Use
nestedContent property to provide data of row accordion content<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>
<!-- Config and Data -->
data: {
config: {
columnResize: true,
activePage: 1,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
compact: false,
firstLast: true,
pageJumper: 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 class="chi-data-table__head">
<div class="chi-data-table__row">
<div class="chi-data-table__cell -expandable"></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 -collapsed -xl">
<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 -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 -expanded -striped -xl">
<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-minus" aria-hidden="true"></i>
</div>
</button>
</div>
<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-child -collapsed -xl">
<div class="chi-data-table__cell -expandable"></div>
<div class="chi-data-table__cell -key -bold">
<div>Child Name 1</div>
</div>
<div class="chi-data-table__cell -key">
<div>Child name-1</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-child -collapsed -xl">
<div class="chi-data-table__cell -expandable"></div>
<div class="chi-data-table__cell -key -bold">
<div>Child Name 2</div>
</div>
<div class="chi-data-table__cell -key">
<div>Child 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 -collapsed -xl">
<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 -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 -primary -sm" 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 -primary -sm" 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 -primary -sm" 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 -primary -sm" 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>
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" :data="table">
<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 #name="payload">
<ExamplePopover :name="payload.name" :id="payload.id" />
</template>
<template #actions="payload">
<ExampleDropdown :id="payload.id" />
</template>
</ChiDataTable>
<!-- imports -->
import ExamplePopover from './ExamplePopover.vue';
import ExampleDropdown from './ExampleDropdown.vue';
<!-- Config and Data -->
data: {
config: {
columnResize: false,
activePage: 1,
selectable: true,
style: {
portal: true,
noBorder: false,
bordered: false,
hover: false,
size: 'md',
striped: true,
},
pagination: {
compact: false,
firstLast: true,
pageJumper: true,
},
resultsPerPage: 3,
defaultSort: {
key: 'name',
sortBy: 'string',
direction: 'ascending',
},
},
table: {
head: {
name: { label: 'Name', sortable: true, sortBy: 'name', sortDataType: 'string', key: true, bold: true },
status: { label: 'Status', sortable: true, sortBy: 'status', sortDataType: 'string' },
lastLogin: { label: 'Last Login', key: true },
actions: { label: 'Actions', align: 'right' },
},
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" },
},
"18 Dec 2020 3:26 p.m.",
{
template: "actions",
payload: { id: "name-1" },
},
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-1",
data: [
"Child 1 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-1-name-1" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-1",
data: [
"Grand Child 1 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-1-name-1" },
},
],
},
{
id: "grandchild-2-name-1",
data: [
"Grand Child 2 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-2-name-1" },
},
],
},
],
},
},
},
{
id: "child-2-name-1",
data: [
"Child 2 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-2-name-1" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-1",
data: [
"Grand Child 3 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-3-name-1" },
},
],
},
{
id: "grandchild-4-name-1",
data: [
"Grand Child 4 Name 1",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-4-name-1" },
},
],
},
],
},
},
},
],
},
},
},
{
id: "name-2",
data: [
{ template: "name", payload: { name: "Name 2", id: "name-2" } },
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 3:26 p.m.",
{
template: "actions",
payload: { id: "name-2" },
},
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-2",
data: [
"Child 1 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-1-name-2" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-2",
data: [
"Grand Child 1 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-1-name-2" },
},
],
},
{
id: "grandchild-2-name-2",
data: [
"Grand Child 2 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-2-name-2" },
},
],
},
],
},
},
},
{
id: "child-2-name-2",
data: [
"Child 2 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-2-name-2" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-2",
data: [
"Grand Child 3 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-3-name-2" },
},
],
},
{
id: "grandchild-4-name-2",
data: [
"Grand Child 4 Name 2",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-4-name-2" },
},
],
},
],
},
},
},
],
},
},
},
{
id: "name-3",
data: [
{
template: "name",
payload: {
name: "Name 3",
id: "name-3",
},
},
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 3:26 p.m.",
{
template: "actions",
payload: {
id: "name-3",
},
},
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-3",
data: [
"Child 1 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-1-name-3" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-3",
data: [
"Grand Child 1 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-1-name-3" },
},
],
},
{
id: "grandchild-2-name-3",
data: [
"Grand Child 2 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-2-name-3" },
},
],
},
],
},
},
},
{
id: "child-2-name-3",
data: [
"Child 2 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-2-name-3" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-3",
data: [
"Grand Child 3 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-3-name-3" },
},
],
},
{
id: "grandchild-4-name-3",
data: [
"Grand Child 4 Name 3",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-4-name-3" },
},
],
},
],
},
},
},
],
},
},
},
{
id: "name-4",
data: [
{
template: "name",
payload: {
name: "Name 4",
id: "name-4",
},
},
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 3:26 p.m.",
{
template: "actions",
payload: {
id: "name-4",
},
},
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-4",
data: [
"Child 1 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-1-name-4" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-4",
data: [
"Grand Child 1 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-1-name-4" },
},
],
},
{
id: "grandchild-2-name-4",
data: [
"Grand Child 2 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-2-name-4" },
},
],
},
],
},
},
},
{
id: "child-2-name-4",
data: [
"Child 2 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-2-name-4" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-4",
data: [
"Grand Child 3 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-3-name-4" },
},
],
},
{
id: "grandchild-4-name-4",
data: [
"Grand Child 4 Name 4",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-4-name-4" },
},
],
},
],
},
},
},
],
},
},
},
{
id: "name-5",
data: [
{
template: "name",
payload: {
name: "Name 5",
id: "name-5",
},
},
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 3:26 p.m.",
{
template: "actions",
payload: {
id: "name-5",
},
},
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-5",
data: [
"Child 1 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-1-name-5" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-5",
data: [
"Grand Child 1 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-1-name-5" },
},
],
},
{
id: "grandchild-2-name-5",
data: [
"Grand Child 2 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-2-name-5" },
},
],
},
],
},
},
},
{
id: "child-2-name-5",
data: [
"Child 2 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-2-name-5" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-5",
data: [
"Grand Child 3 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-3-name-5" },
},
],
},
{
id: "grandchild-4-name-5",
data: [
"Grand Child 4 Name 5",
{
template: "status",
payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-4-name-5" },
},
],
},
],
},
},
},
],
},
},
},
{
id: "name-6",
data: [
{
template: "name",
payload: {
name: "Name 6",
id: "name-6",
},
},
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 3:26 p.m.",
{
template: "actions",
payload: {
id: "name-6",
},
},
],
nestedContent: {
table: {
data: [
{
id: "child-1-name-6",
data: [
"Child 1 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-1-name-6" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-1-name-6",
data: [
"Grand Child 1 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-1-name-6" },
},
],
},
{
id: "grandchild-2-name-6",
data: [
"Grand Child 2 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-2-name-6" },
},
],
},
],
},
},
},
{
id: "child-2-name-6",
data: [
"Child 2 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "child-2-name-6" },
},
],
nestedContent: {
table: {
data: [
{
id: "grandchild-3-name-6",
data: [
"Grand Child 3 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-3-name-6" },
},
],
},
{
id: "grandchild-4-name-6",
data: [
"Grand Child 4 Name 6",
{
template: "status",
payload: { status: "Due", icon: 'warning', color: 'warning' },
},
"18 Dec 2020 2:38 a.m.",
{
template: "actions",
payload: { id: "grandchild-4-name-6" },
},
],
},
],
},
},
},
],
},
},
},
],
},
}<!-- 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();
});
}
}<!-- Template -->
<template>
<div class="chi-dropdown">
<button ref="dropdownTrigger" class="chi-button -icon -flat" aria-label="More options">
<div class="chi-button__content">
<i class="chi-icon icon-more-vert" aria-hidden="true"></i>
</div>
</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">
<span><i class="chi-icon icon-edit -sm -icon--primary" /></span>
<span>Edit</span>
</a>
<a class="chi-dropdown__menu-item" href="#">
<span><i class="chi-icon icon-delete -sm -icon--primary" /></span>
<span>Delete</span>
</a>
</div>
</div>
</template>
<!-- mounted -->
mounted() {
chi.dropdown(this.$refs.dropdownTrigger);
}Two tier header
Title
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">
<button class="chi-data-table__cell -sorting -active">
<div>Location</div>
<i class="chi-icon icon-arrow-up" aria-hidden="true"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>High Utilization</div>
<i class="chi-icon icon-arrow-sort" aria-hidden="true"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>Elevated Utilization</div>
<i class="chi-icon icon-arrow-sort" aria-hidden="true"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>Highest %</div>
<i class="chi-icon icon-arrow-sort" aria-hidden="true"></i>
</button>
</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 -xl">
<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 -xl">
<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 -xl">
<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 -primary -sm" 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 -primary -sm" 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 -primary -sm" 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 -primary -sm" 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