Data table
Examples
To render data table, use the class chi-data-table.
Base
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
No matches found. Please revise search criteria and try again.
<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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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"></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>Dec 18, 2020 3:26 PM</div>
</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"></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>Dec 18, 2020 2:38 AM</div>
</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"></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>Nov 5, 2020 10:15 AM</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-8">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-8">Go to page:</label>
<input class="chi-input" type="text" id="jumper-input-8" />
</div>
</div>
</div>
</nav>
</div>
</div>
Accordion Expanded
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Accordion content
Name 3
name-3
Nov 5, 2020 10:15 AM
<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"></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>Dec 18, 2020 3:26 PM </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"></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>Dec 18, 2020 2:38 AM </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"></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>Nov 5, 2020 10:15 AM</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 -- Base
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>ID</div>
<i class="chi-icon -xs icon-arrow-sort"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>Last Login</div>
<i class="chi-icon -xs icon-arrow-sort"></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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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>
Sorting -- Active -- Ascend
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>ID</div>
<i class="chi-icon -xs icon-arrow-sort"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>Last Login</div>
<i class="chi-icon -xs icon-arrow-sort"></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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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>
Sorting -- Active -- Descend
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>ID</div>
<i class="chi-icon -xs icon-arrow-sort"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>Last Login</div>
<i class="chi-icon -xs icon-arrow-sort"></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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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>Dec 18, 2020 3:26 PM</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>Dec 18, 2020 2:38 AM</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>Nov 5, 2020 10:15 AM</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>
Portal
Title
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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">
<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>Dec 18, 2020 3:26 PM</div>
</div>
</div>
<div class="chi-data-table__row -striped">
<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>Dec 18, 2020 2:38 AM</div>
</div>
</div>
<div class="chi-data-table__row">
<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>Nov 5, 2020 10:15 AM</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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</a>
</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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
</div>
Portal -- 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"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>High Utilization</div>
<i class="chi-icon icon-arrow-sort"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>Elevated Utilization</div>
<i class="chi-icon icon-arrow-sort"></i>
</button>
<button class="chi-data-table__cell -sorting">
<div>Highest %</div>
<i class="chi-icon icon-arrow-sort"></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">
<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">
<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">
<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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</a>
</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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
</div>
Portal -- Compact -- Empty
Title
Name
ID
Last Login
No matches found. Please revise search criteria and try again.
<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>
Portal -- Accordion
Title
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Name 2
name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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">
<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"></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>Dec 18, 2020 3:26 PM</div>
</div>
</div>
<div class="chi-data-table__row -collapsed -striped">
<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"></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>Dec 18, 2020 2:38 AM</div>
</div>
</div>
<div class="chi-data-table__row -collapsed">
<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"></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>Nov 5, 2020 10:15 AM</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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</a>
</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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
</div>
Portal -- Accordion Expanded
Title
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Child Name 1
Child name-1
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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">
<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"></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>Dec 18, 2020 3:26 PM</div>
</div>
</div>
<div class="chi-data-table__row -expanded -striped">
<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"></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>Dec 18, 2020 2:38 AM</div>
</div>
</div>
<div class="chi-data-table__row-child">
<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>Dec 18, 2020 2:38 AM</div>
</div>
</div>
<div class="chi-data-table__row -collapsed">
<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"></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>Nov 5, 2020 10:15 AM</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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</a>
</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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
</div>
Portal -- Accordion Expanded -- Child
Title
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Child Name 1
Child name-1
Dec 18, 2020 2:38 AM
Child Name 2
Child name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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">
<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"></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>Dec 18, 2020 3:26 PM</div>
</div>
</div>
<div class="chi-data-table__row -expanded -striped">
<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"></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>Dec 18, 2020 2:38 AM</div>
</div>
</div>
<div class="chi-data-table__row-child -collapsed">
<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>Dec 18, 2020 2:38 AM</div>
</div>
</div>
<div class="chi-data-table__row-child -collapsed">
<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>Dec 18, 2020 2:38 AM</div>
</div>
</div>
<div class="chi-data-table__row -collapsed">
<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"></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>Nov 5, 2020 10:15 AM</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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</a>
</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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
</div>
Portal -- Accordion Expanded -- Child Expanded
Title
Name
ID
Last Login
Name 1
name-1
Dec 18, 2020 3:26 PM
Grand-child Name 1
Grand-child name-1
Dec 18, 2020 2:38 AM
Child Name 2
Child name-2
Dec 18, 2020 2:38 AM
Name 3
name-3
Nov 5, 2020 10:15 AM
<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">
<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"></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>Dec 18, 2020 3:26 PM</div>
</div>
</div>
<div class="chi-data-table__row -expanded -striped">
<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"></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>Dec 18, 2020 2:38 AM</div>
</div>
</div>
<div class="chi-data-table__row-child -expanded">
<div class="chi-data-table__cell -expandable"></div>
<div class="chi-data-table__cell -key -bold">
<button class="chi-button -icon -flat -sm -expand" aria-label="Expand row">
<div class="chi-button__content">
<i class="chi-icon icon-minus"></i>
</div>
</button>
<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>Dec 18, 2020 2:38 AM</div>
</div>
</div>
<div class="chi-data-table__row-grand-child">
<div class="chi-data-table__cell -expandable"></div>
<div class="chi-data-table__cell -key -bold">
<div>Grand-child Name 1</div>
</div>
<div class="chi-data-table__cell -key">
<div>Grand-child name-1</div>
</div>
<div class="chi-data-table__cell">
<div>Dec 18, 2020 2:38 AM</div>
</div>
</div>
<div class="chi-data-table__row-child -collapsed">
<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>Dec 18, 2020 2:38 AM</div>
</div>
</div>
<div class="chi-data-table__row -collapsed">
<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"></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>Nov 5, 2020 10:15 AM</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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</a>
</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">
<a class="chi-button -icon -flat -sm" href="#" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
</div>
</div>
</div>
</div>
Web Component
Properties
Web component coming soon
Accessibility
Accessibility guidelines coming soon