Toolbar
Examples#
Base#
Use the slots
start to add elements to the left side area of the Toolbar Header and the end - to the right side.<!-- Vue component -->
<ChiDataTableToolbar>
<template v-slot:start>
<ChiSearchInput :dataTableSearch="true" />
<div class="chi-divider -vertical"></div>
<!-- To render views, use Views sub-module of Toolbar -->
<ChiDataTableViews :views="toolbar.viewsData" />
<div class="chi-divider -vertical"></div>
<!-- To render filters, use Filters sub-module of Toolbar by providing it with respective data -->
<ChiDataTableFilters :filtersData="toolbar.filtersData" :customItems="toolbar.customItemsData" class="-ml--2">
<template v-slot:customAdvanced>
<div class="chi-form__item">
<chi-label for="input-1">City</chi-label>
<chi-text-input id="input-1" @chiChange="e => inputOneChangeHandler(e)"></chi-text-input>
<chi-label for="input-2">Zip Code</chi-label>
<chi-text-input id="input-2" @chiChange="e => inputTwoChangeHandler(e)"></chi-text-input>
</div>
</template>
<template v-slot:customAdvanced2>
<chi-date-picker @chiDateChange="e => dateChangeHandler(e)" />
</template>
</ChiDataTableFilters>
</template>
<template v-slot:end>
<!-- To enable customization of columns, use Column Customization sub-module of Toolbar by providing it with respective data -->
<ChiColumnCustomization :columnsData="toolbar.columnsData" />
</template>
</ChiDataTableToolbar>
<!-- Example Data -->
data: () => {
const customItems = [
{
template: 'customAdvanced',
label: 'Custom 1',
},
{
template: 'customAdvanced2',
label: 'Custom 2',
},
];
const filters = [
{
name: 'status',
type: 'select',
id: 'myoption1',
label: 'Selector',
options: [
{
label: 'Active',
value: 'active',
},
{
label: 'Inactive',
value: 'inactive',
},
],
value: 'active',
},
{
name: 'input',
placeholder: 'Input filter',
type: 'input',
value: '',
id: 'myoption2',
label: 'Input Filter',
},
{
name: 'checkbox',
type: 'checkbox',
checked: false,
id: 'myoption3',
label: 'Checkbox',
},
{
name: 'statusAdvanced',
label: 'Status',
type: 'select',
id: 'myoption4',
options: [
{
label: 'Active',
value: 'active',
selected: false,
},
{
label: 'Inactive',
value: 'inactive',
selected: false,
},
],
advanced: true,
value: 'active',
},
{
name: 'inputAdvanced',
label: 'Label',
id: 'myoption5',
advanced: true,
},
{
name: 'textareaAdvanced',
label: 'textarea',
id: 'myoption6',
type: 'textarea',
advanced: true,
},
{
name: 'checkboxAdvanced',
id: 'myoption7',
label: 'Advanced Checkbox',
type: 'checkbox',
advanced: true,
},
];
const columns = [
{
name: 'columnA',
label: 'Column A',
},
{
name: 'columnB',
label: 'Column B',
},
{
name: 'columnC',
label: 'Column C',
locked: true,
selected: true,
},
{
name: 'columnD',
label: 'Column D',
locked: true,
selected: true,
},
{
name: 'columnE',
label: 'Column E',
selected: true,
},
{
name: 'columnF',
label: 'Column F',
selected: true,
},
{
name: 'columnG',
label: 'Column G',
},
{
name: 'columnH',
label: 'Column H',
},
{
name: 'columnI',
label: 'Column I',
},
{
name: 'columnJ',
label: 'Column J',
},
];
return {
toolbar: {
customItemsData: customItems,
filtersData: filters,
columnsData: {
columns: columns
},
viewsData: [
{
id: 'view-1',
label: 'View 1',
columns: columns,
searchString: 'abc',
filters: filters
},
{
id: 'view-2',
label: 'View 2',
columns: [],
searchString: 'abcde',
filters: [],
},
],
};
};
};To render toolbar, use the class
chi-toolbar.<div class="chi-toolbar">
<div class="chi-toolbar__header">
<div class="chi-toolbar__start">
<div class="chi-toolbar__search">
<div class="chi-form__item">
<chi-search-input id="example__base"></chi-search-input>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__views">
<div class="chi-toolbar__views-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-views-1">
<option>View 1</option>
<option>View 2</option>
</select>
</div>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__filters">
<div class="chi-toolbar__filters-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-ba1">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item">
<select class="chi-select" id="example-ba2">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<button class="chi-button -icon -flat" id="button-b-filters" aria-label="Filters" data-tooltip="Filters" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__filters-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-b1" data-target="#drawer-1" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<div class="chi-toolbar__end">
<div class="chi-toolbar__actions">
<div class="chi-toolbar__actions-desktop">
<button class="chi-button -icon -flat" id="button-b-download" aria-label="Download" data-tooltip="Download" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-b-refresh" aria-label="Refresh" data-tooltip="Refresh" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-refresh" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-b-column-customization" aria-label="Column Customization" data-tooltip="Column Customization" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-table-column-settings" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__actions-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-b2" data-target="#drawer-2" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-more-vert" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -left -menu -position--absolute" id="drawer-1">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Filters</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2 -py--3">
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba11">Label</label>
<select class="chi-select" id="example-ba11">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba12">Label</label>
<select class="chi-select" id="example-ba12">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba13">Label</label>
<select class="chi-select" id="example-ba13">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba14">Label</label>
<select class="chi-select" id="example-ba14">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="-d--flex -justify-content--center -pb--2">
<button class="chi-button -primary">Apply</button>
<button class="chi-button -ml--2">Cancel</button>
</div>
</div>
</div>
</div>
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -right -menu -position--absolute" id="drawer-2">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Actions</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2">
<ul class="-no-style">
<li class="-text--md">Download data</li>
<div class="chi-divider"></div>
<li class="-text--md">Refresh results</li>
<div class="chi-divider"></div>
</ul>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script>
chi.drawer(document.getElementById('drawer-trigger-b1'));
chi.drawer(document.getElementById('drawer-trigger-b2'));
chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>
Base with ribbon#
To render toolbar, use the class
chi-toolbar.<div class="chi-toolbar">
<div class="chi-toolbar__header">
<div class="chi-toolbar__start">
<div class="chi-toolbar__search">
<div class="chi-form__item">
<chi-search-input id="example__base-1"></chi-search-input>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__views">
<div class="chi-toolbar__views-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-views-2">
<option>View 1</option>
<option>View 2</option>
</select>
</div>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__filters">
<div class="chi-toolbar__filters-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-ba3">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item">
<select class="chi-select" id="example-ba4">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<button class="chi-button -icon -flat" id="button-br-filters" aria-label="Filters" data-tooltip="Filters" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__filters-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-br1" data-target="#drawer-1" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<div class="chi-toolbar__end">
<div class="chi-toolbar__actions">
<div class="chi-toolbar__actions-desktop">
<button class="chi-button -icon -flat" id="button-br-download" aria-label="Download" data-tooltip="Download" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-br-refresh" aria-label="Refresh" data-tooltip="Refresh" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-refresh" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-br-column-customization" aria-label="Column Customization" data-tooltip="Column Customization" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-table-column-settings" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__actions-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-br2" data-target="#drawer-2" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-more-vert" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="chi-toolbar__ribbon">
<div class="chi-toolbar__start">
<i class="chi-icon icon-arrow-down -xs" aria-hidden="true"></i>
<div class="chi-toolbar__results">
<span class="chi-toolbar__label">Search Results </span>
<span>(1-40 of 78)</span>
</div>
<div class="chi-divider -vertical"></div>
<chi-link href="#" size="md">Save View</chi-link>
</div>
<div class="chi-toolbar__end">
<button class="chi-button -icon -flat" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -left -menu -position--absolute" id="drawer-1">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Filters</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2 -py--3">
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba11">Label</label>
<select class="chi-select" id="example-ba11">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba12">Label</label>
<select class="chi-select" id="example-ba12">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba13">Label</label>
<select class="chi-select" id="example-ba13">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba14">Label</label>
<select class="chi-select" id="example-ba14">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="-d--flex -justify-content--center -pb--2">
<button class="chi-button -primary">Apply</button>
<button class="chi-button -ml--2">Cancel</button>
</div>
</div>
</div>
</div>
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -right -menu -position--absolute" id="drawer-2">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Actions</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2">
<ul class="-no-style">
<li class="-text--md">Download data</li>
<div class="chi-divider"></div>
<li class="-text--md">Refresh results</li>
<div class="chi-divider"></div>
</ul>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script>
chi.drawer(document.getElementById('drawer-trigger-br1'));
chi.drawer(document.getElementById('drawer-trigger-br2'));
chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>
Base#
Use the slots
start to add elements to the left side area of the Toolbar Header and the end - to the right side.<!-- Vue component -->
<ChiDataTableToolbar>
<template v-slot:start>
<ChiSearchInput :dataTableSearch="true" />
<div class="chi-divider -vertical"></div>
<!-- To render views, use Views sub-module of Toolbar -->
<ChiDataTableViews :views="toolbar.viewsData" />
<div class="chi-divider -vertical"></div>
<!-- To render filters, use Filters sub-module of Toolbar by providing it with respective data -->
<ChiDataTableFilters :filtersData="toolbar.filtersData" :customItems="toolbar.customItemsData" class="-ml--2">
<template v-slot:customAdvanced>
<div class="chi-form__item">
<chi-label for="input-1">City</chi-label>
<chi-text-input id="input-1" @chiChange="e => inputOneChangeHandler(e)"></chi-text-input>
<chi-label for="input-2">Zip Code</chi-label>
<chi-text-input id="input-2" @chiChange="e => inputTwoChangeHandler(e)"></chi-text-input>
</div>
</template>
<template v-slot:customAdvanced2>
<chi-date-picker @chiDateChange="e => dateChangeHandler(e)" />
</template>
</ChiDataTableFilters>
</template>
<template v-slot:end>
<!-- To enable customization of columns, use Column Customization sub-module of Toolbar by providing it with respective data -->
<ChiColumnCustomization :columnsData="toolbar.columnsData" />
</template>
</ChiDataTableToolbar>
<!-- Example Data -->
data: () => {
const customItems = [
{
template: 'customAdvanced',
label: 'Custom 1',
},
{
template: 'customAdvanced2',
label: 'Custom 2',
},
];
const filters = [
{
name: 'status',
type: 'select',
id: 'myoption1',
label: 'Selector',
options: [
{
label: 'Active',
value: 'active',
},
{
label: 'Inactive',
value: 'inactive',
},
],
value: 'active',
},
{
name: 'input',
placeholder: 'Input filter',
type: 'input',
value: '',
id: 'myoption2',
label: 'Input Filter',
},
{
name: 'checkbox',
type: 'checkbox',
checked: false,
id: 'myoption3',
label: 'Checkbox',
},
{
name: 'statusAdvanced',
label: 'Status',
type: 'select',
id: 'myoption4',
options: [
{
label: 'Active',
value: 'active',
selected: false,
},
{
label: 'Inactive',
value: 'inactive',
selected: false,
},
],
advanced: true,
value: 'active',
},
{
name: 'inputAdvanced',
label: 'Label',
id: 'myoption5',
advanced: true,
},
{
name: 'textareaAdvanced',
label: 'textarea',
id: 'myoption6',
type: 'textarea',
advanced: true,
},
{
name: 'checkboxAdvanced',
id: 'myoption7',
label: 'Advanced Checkbox',
type: 'checkbox',
advanced: true,
},
];
const columns = [
{
name: 'columnA',
label: 'Column A',
},
{
name: 'columnB',
label: 'Column B',
},
{
name: 'columnC',
label: 'Column C',
locked: true,
selected: true,
},
{
name: 'columnD',
label: 'Column D',
locked: true,
selected: true,
},
{
name: 'columnE',
label: 'Column E',
selected: true,
},
{
name: 'columnF',
label: 'Column F',
selected: true,
},
{
name: 'columnG',
label: 'Column G',
},
{
name: 'columnH',
label: 'Column H',
},
{
name: 'columnI',
label: 'Column I',
},
{
name: 'columnJ',
label: 'Column J',
},
];
return {
toolbar: {
customItemsData: customItems,
filtersData: filters,
columnsData: {
columns: columns
},
viewsData: [
{
id: 'view-1',
label: 'View 1',
columns: columns,
searchString: 'abc',
filters: filters
},
{
id: 'view-2',
label: 'View 2',
columns: [],
searchString: 'abcde',
filters: [],
},
],
};
};
};To render toolbar, use the class
chi-toolbar.<div class="chi-toolbar">
<div class="chi-toolbar__header">
<div class="chi-toolbar__start">
<div class="chi-toolbar__search">
<div class="chi-form__item">
<chi-search-input id="example__base-3"></chi-search-input>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__views">
<div class="chi-toolbar__views-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-views-3">
<option>View 1</option>
<option>View 2</option>
</select>
</div>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__filters">
<div class="chi-toolbar__filters-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-ba5">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item">
<select class="chi-select" id="example-ba6">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<button class="chi-button -icon -flat" id="button-p-filters" aria-label="Filters" data-tooltip="Filters" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__filters-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-bp1" data-target="#drawer-1" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<div class="chi-toolbar__end">
<div class="chi-toolbar__actions">
<div class="chi-toolbar__actions-desktop">
<button class="chi-button -icon -flat" id="button-p-download" aria-label="Download" data-tooltip="Download" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-p-refresh" aria-label="Refresh" data-tooltip="Refresh" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-refresh" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-p-column-customization" aria-label="Column Customization" data-tooltip="Column Customization" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-table-column-settings" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__actions-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-bp2" data-target="#drawer-2" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-more-vert" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -left -menu -position--absolute" id="drawer-1">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Filters</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2 -py--3">
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba11">Label</label>
<select class="chi-select" id="example-ba11">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba12">Label</label>
<select class="chi-select" id="example-ba12">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba13">Label</label>
<select class="chi-select" id="example-ba13">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba14">Label</label>
<select class="chi-select" id="example-ba14">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="-d--flex -justify-content--center -pb--2">
<button class="chi-button -primary">Apply</button>
<button class="chi-button -ml--2">Cancel</button>
</div>
</div>
</div>
</div>
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -right -menu -position--absolute" id="drawer-2">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Actions</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2">
<ul class="-no-style">
<li class="-text--md">Download data</li>
<div class="chi-divider"></div>
<li class="-text--md">Refresh results</li>
<div class="chi-divider"></div>
</ul>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script>
chi.drawer(document.getElementById('drawer-trigger-bp1'));
chi.drawer(document.getElementById('drawer-trigger-bp2'));
chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>
Base with ribbon#
To render toolbar, use the class
chi-toolbar.<div class="chi-toolbar">
<div class="chi-toolbar__header">
<div class="chi-toolbar__start">
<div class="chi-toolbar__search">
<div class="chi-form__item">
<chi-search-input id="example__base-4"></chi-search-input>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__views">
<div class="chi-toolbar__views-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-views-4">
<option>View 1</option>
<option>View 2</option>
</select>
</div>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__filters">
<div class="chi-toolbar__filters-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-ba9">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item">
<select class="chi-select" id="example-ba10">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<button class="chi-button -icon -flat" id="button-pr-filters" aria-label="Filters" data-tooltip="Filters" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__filters-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-brp1" data-target="#drawer-1" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<div class="chi-toolbar__end">
<div class="chi-toolbar__actions">
<div class="chi-toolbar__actions-desktop">
<button class="chi-button -icon -flat" id="button-pr-download" aria-label="Download" data-tooltip="Download" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-pr-refresh" aria-label="Refresh" data-tooltip="Refresh" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-refresh" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-pr-column-customization" aria-label="Column Customization" data-tooltip="Column Customization" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-table-column-settings" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__actions-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-brp2" data-target="#drawer-2" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-more-vert" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="chi-toolbar__ribbon">
<div class="chi-toolbar__start">
<i class="chi-icon icon-arrow-down -xs" aria-hidden="true"></i>
<div class="chi-toolbar__results">
<span class="chi-toolbar__label">Search Results </span>
<span>(1-40 of 78)</span>
</div>
<div class="chi-divider -vertical"></div>
<chi-link href="#" size="md">Save View</chi-link>
</div>
<div class="chi-toolbar__end">
<button class="chi-button -icon -flat" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -left -menu -position--absolute" id="drawer-1">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Filters</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2 -py--3">
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba11">Label</label>
<select class="chi-select" id="example-ba11">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba12">Label</label>
<select class="chi-select" id="example-ba12">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba13">Label</label>
<select class="chi-select" id="example-ba13">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba14">Label</label>
<select class="chi-select" id="example-ba14">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="-d--flex -justify-content--center -pb--2">
<button class="chi-button -primary">Apply</button>
<button class="chi-button -ml--2">Cancel</button>
</div>
</div>
</div>
</div>
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -right -menu -position--absolute" id="drawer-2">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Actions</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2">
<ul class="-no-style">
<li class="-text--md">Download data</li>
<div class="chi-divider"></div>
<li class="-text--md">Refresh results</li>
<div class="chi-divider"></div>
</ul>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script>
chi.drawer(document.getElementById('drawer-trigger-brp1'));
chi.drawer(document.getElementById('drawer-trigger-brp2'));
chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>
Base with ribbon and bulk actions#
Actions (10 Selected)
To render toolbar, use the class
chi-toolbar.<div class="chi-toolbar">
<div class="chi-toolbar__header">
<div class="chi-toolbar__start">
<div class="chi-toolbar__search">
<div class="chi-form__item">
<chi-search-input id="example__base-4"></chi-search-input>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__views">
<div class="chi-toolbar__views-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-views-4">
<option>View 1</option>
<option>View 2</option>
</select>
</div>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__filters">
<div class="chi-toolbar__filters-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-ba9">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item">
<select class="chi-select" id="example-ba10">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<button class="chi-button -icon -flat" id="button-pr-filters" aria-label="Filters" data-tooltip="Filters" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__filters-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-brbap1" data-target="#drawer-1" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<div class="chi-toolbar__end">
<div class="chi-toolbar__actions">
<div class="chi-toolbar__actions-desktop">
<button class="chi-button -icon -flat" id="button-pr-download" aria-label="Download" data-tooltip="Download" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-pr-refresh" aria-label="Refresh" data-tooltip="Refresh" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-refresh" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-pr-column-customization" aria-label="Column Customization" data-tooltip="Column Customization" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-table-column-settings" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__actions-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-brbap2" data-target="#drawer-2" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-more-vert" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="chi-toolbar__ribbon">
<div class="chi-toolbar__start">
<i class="chi-icon icon-arrow-down -xs" aria-hidden="true"></i>
<div class="chi-toolbar__results">
<span class="chi-toolbar__label">Search Results </span>
<span>(1-40 of 78)</span>
</div>
<div class="chi-divider -vertical"></div>
<chi-link href="#" size="md">Save View</chi-link>
</div>
<div class="chi-toolbar__end">
<button class="chi-button -icon -flat" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<div class="chi-bulk-actions">
<div class="chi-bulk-actions__top">
<button class="chi-button -flat -px--1">Select all</button>
<button class="chi-button -flat -px--1">Cancel</button>
</div>
<div class="chi-bulk-actions__start">
<div class="chi-bulk-actions__results">
<div class="chi-bulk-actions__label">Actions (10 Selected)</div>
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" id="checkbox-ba1" type="checkbox" />
<label class="chi-checkbox__label" for="checkbox-ba1">Show Selected Only</label>
</div>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-bulk-actions__buttons">
<div class="chi-bulk-actions__buttons-mobile">
<button class="chi-button -icon -flat" aria-label="Button action" data-tooltip="Edit">
<div class="chi-button__content">
<i class="chi-icon icon-edit" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" aria-label="Button action" data-tooltip="Compose">
<div class="chi-button__content">
<i class="chi-icon icon-compose" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" aria-label="Button action" data-tooltip="Delete">
<div class="chi-button__content">
<i class="chi-icon icon-delete" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" aria-label="Button action" data-tooltip="Print">
<div class="chi-button__content">
<i class="chi-icon icon-print" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-bulk-actions__buttons-desktop">
<button class="chi-button -xs">
<div class="chi-button__content">
<i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
<span>Download</span>
</div>
</button>
<button class="chi-button -xs">
<div class="chi-button__content">
<i class="chi-icon icon-compose" aria-hidden="true"></i>
<span>Compose</span>
</div>
</button>
<button class="chi-button -xs">
<div class="chi-button__content">
<i class="chi-icon icon-delete" aria-hidden="true"></i>
<span>Delete</span>
</div>
</button>
<button class="chi-button -xs">
<div class="chi-button__content">
<i class="chi-icon icon-print" aria-hidden="true"></i>
<span>Print</span>
</div>
</button>
</div>
</div>
</div>
<div class="chi-bulk-actions__end">
<button class="chi-button -icon -flat" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -left -menu -position--absolute" id="drawer-1">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Filters</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2 -py--3">
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba11">Label</label>
<select class="chi-select" id="example-ba11">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba12">Label</label>
<select class="chi-select" id="example-ba12">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba13">Label</label>
<select class="chi-select" id="example-ba13">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba14">Label</label>
<select class="chi-select" id="example-ba14">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="-d--flex -justify-content--center -pb--2">
<button class="chi-button -primary">Apply</button>
<button class="chi-button -ml--2">Cancel</button>
</div>
</div>
</div>
</div>
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -right -menu -position--absolute" id="drawer-2">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Actions</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2">
<ul class="-no-style">
<li class="-text--md">Download data</li>
<div class="chi-divider"></div>
<li class="-text--md">Refresh results</li>
<div class="chi-divider"></div>
</ul>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script>
chi.drawer(document.getElementById('drawer-trigger-brbap1'));
chi.drawer(document.getElementById('drawer-trigger-brbap2'));
chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>
Base#
Use the slots
start to add elements to the left side area of the Toolbar Header and the end - to the right side.<!-- Vue component -->
<ChiDataTableToolbar>
<template v-slot:start>
<ChiSearchInput :dataTableSearch="true" />
<div class="chi-divider -vertical"></div>
<!-- To render views, use Views sub-module of Toolbar -->
<ChiDataTableViews :views="toolbar.viewsData" />
<div class="chi-divider -vertical"></div>
<!-- To render filters, use Filters sub-module of Toolbar by providing it with respective data -->
<ChiDataTableFilters :filtersData="toolbar.filtersData" :customItems="toolbar.customItemsData" class="-ml--2">
<template v-slot:customAdvanced>
<div class="chi-form__item">
<chi-label for="input-1">City</chi-label>
<chi-text-input id="input-1" @chiChange="e => inputOneChangeHandler(e)"></chi-text-input>
<chi-label for="input-2">Zip Code</chi-label>
<chi-text-input id="input-2" @chiChange="e => inputTwoChangeHandler(e)"></chi-text-input>
</div>
</template>
<template v-slot:customAdvanced2>
<chi-date-picker @chiDateChange="e => dateChangeHandler(e)" />
</template>
</ChiDataTableFilters>
</template>
<template v-slot:end>
<!-- To enable customization of columns, use Column Customization sub-module of Toolbar by providing it with respective data -->
<ChiColumnCustomization :columnsData="toolbar.columnsData" />
</template>
</ChiDataTableToolbar>
<!-- Example Data -->
data: () => {
const customItems = [
{
template: 'customAdvanced',
label: 'Custom 1',
},
{
template: 'customAdvanced2',
label: 'Custom 2',
},
];
const filters = [
{
name: 'status',
type: 'select',
id: 'myoption1',
label: 'Selector',
options: [
{
label: 'Active',
value: 'active',
},
{
label: 'Inactive',
value: 'inactive',
},
],
value: 'active',
},
{
name: 'input',
placeholder: 'Input filter',
type: 'input',
value: '',
id: 'myoption2',
label: 'Input Filter',
},
{
name: 'checkbox',
type: 'checkbox',
checked: false,
id: 'myoption3',
label: 'Checkbox',
},
{
name: 'statusAdvanced',
label: 'Status',
type: 'select',
id: 'myoption4',
options: [
{
label: 'Active',
value: 'active',
selected: false,
},
{
label: 'Inactive',
value: 'inactive',
selected: false,
},
],
advanced: true,
value: 'active',
},
{
name: 'inputAdvanced',
label: 'Label',
id: 'myoption5',
advanced: true,
},
{
name: 'textareaAdvanced',
label: 'textarea',
id: 'myoption6',
type: 'textarea',
advanced: true,
},
{
name: 'checkboxAdvanced',
id: 'myoption7',
label: 'Advanced Checkbox',
type: 'checkbox',
advanced: true,
},
];
const columns = [
{
name: 'columnA',
label: 'Column A',
},
{
name: 'columnB',
label: 'Column B',
},
{
name: 'columnC',
label: 'Column C',
locked: true,
selected: true,
},
{
name: 'columnD',
label: 'Column D',
locked: true,
selected: true,
},
{
name: 'columnE',
label: 'Column E',
selected: true,
},
{
name: 'columnF',
label: 'Column F',
selected: true,
},
{
name: 'columnG',
label: 'Column G',
},
{
name: 'columnH',
label: 'Column H',
},
{
name: 'columnI',
label: 'Column I',
},
{
name: 'columnJ',
label: 'Column J',
},
];
return {
toolbar: {
customItemsData: customItems,
filtersData: filters,
columnsData: {
columns: columns
},
viewsData: [
{
id: 'view-1',
label: 'View 1',
columns: columns,
searchString: 'abc',
filters: filters
},
{
id: 'view-2',
label: 'View 2',
columns: [],
searchString: 'abcde',
filters: [],
},
],
};
};
};To render toolbar, use the class
chi-toolbar.<div class="chi-toolbar">
<div class="chi-toolbar__header">
<div class="chi-toolbar__start">
<div class="chi-toolbar__search">
<div class="chi-form__item">
<chi-search-input id="example__base-3"></chi-search-input>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__views">
<div class="chi-toolbar__views-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-views-3">
<option>View 1</option>
<option>View 2</option>
</select>
</div>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__filters">
<div class="chi-toolbar__filters-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-ba5">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item">
<select class="chi-select" id="example-ba6">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<button class="chi-button -icon -flat" id="button-p-filters" aria-label="Filters" data-tooltip="Filters" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__filters-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-bp1" data-target="#drawer-1" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<div class="chi-toolbar__end">
<div class="chi-toolbar__actions">
<div class="chi-toolbar__actions-desktop">
<button class="chi-button -icon -flat" id="button-p-download" aria-label="Download" data-tooltip="Download" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-p-refresh" aria-label="Refresh" data-tooltip="Refresh" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-refresh" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-p-column-customization" aria-label="Column Customization" data-tooltip="Column Customization" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-table-column-settings" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__actions-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-bp2" data-target="#drawer-2" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-more-vert" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -left -menu -position--absolute" id="drawer-1">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Filters</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2 -py--3">
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba11">Label</label>
<select class="chi-select" id="example-ba11">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba12">Label</label>
<select class="chi-select" id="example-ba12">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba13">Label</label>
<select class="chi-select" id="example-ba13">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba14">Label</label>
<select class="chi-select" id="example-ba14">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="-d--flex -justify-content--center -pb--2">
<button class="chi-button -primary">Apply</button>
<button class="chi-button -ml--2">Cancel</button>
</div>
</div>
</div>
</div>
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -right -menu -position--absolute" id="drawer-2">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Actions</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2">
<ul class="-no-style">
<li class="-text--md">Download data</li>
<div class="chi-divider"></div>
<li class="-text--md">Refresh results</li>
<div class="chi-divider"></div>
</ul>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script>
chi.drawer(document.getElementById('drawer-trigger-bp1'));
chi.drawer(document.getElementById('drawer-trigger-bp2'));
chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>
Base with ribbon#
Actions (10 Selected)
To render toolbar, use the class
chi-toolbar.<div class="chi-toolbar">
<div class="chi-toolbar__header">
<div class="chi-toolbar__start">
<div class="chi-toolbar__search">
<div class="chi-form__item">
<chi-search-input id="example__base-4"></chi-search-input>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__views">
<div class="chi-toolbar__views-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-views-4">
<option>View 1</option>
<option>View 2</option>
</select>
</div>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__filters">
<div class="chi-toolbar__filters-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-ba9">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item">
<select class="chi-select" id="example-ba10">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<button class="chi-button -icon -flat" id="button-pr-filters" aria-label="Filters" data-tooltip="Filters" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__filters-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-brp1" data-target="#drawer-1" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<div class="chi-toolbar__end">
<div class="chi-toolbar__actions">
<div class="chi-toolbar__actions-desktop">
<button class="chi-button -icon -flat" id="button-pr-download" aria-label="Download" data-tooltip="Download" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-pr-refresh" aria-label="Refresh" data-tooltip="Refresh" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-refresh" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-pr-column-customization" aria-label="Column Customization" data-tooltip="Column Customization" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-table-column-settings" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__actions-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-brp2" data-target="#drawer-2" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-more-vert" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="chi-toolbar__ribbon">
<div class="chi-toolbar__start">
<i class="chi-icon icon-arrow-down -xs" aria-hidden="true"></i>
<div class="chi-toolbar__results">
<span class="chi-toolbar__label">Search Results </span>
<span>(1-40 of 78)</span>
</div>
<div class="chi-divider -vertical"></div>
<chi-link href="#" size="md">Save View</chi-link>
</div>
<div class="chi-toolbar__end">
<button class="chi-button -icon -flat" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<div class="chi-bulk-actions">
<div class="chi-bulk-actions__top">
<chi-link href="#">Select all</chi-link>
<chi-link href="#">Clear</chi-link>
</div>
<div class="chi-bulk-actions__start">
<div class="chi-bulk-actions__results">
<div class="chi-bulk-actions__label">Actions (10 Selected)</div>
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" id="checkbox-ba1" type="checkbox" />
<label class="chi-checkbox__label" for="checkbox-ba1">Show Selected Only</label>
</div>
</div>
</div>
<div class="chi-bulk-actions__buttons">
<div class="chi-bulk-actions__buttons-mobile">
<chi-button variant="flat" type="icon" alternative-text="Button action" data-tooltip="Edit">
<chi-icon icon="edit"></chi-icon>
</chi-button>
<chi-button variant="flat" type="icon" alternative-text="Button action" data-tooltip="Compose">
<chi-icon icon="compose"></chi-icon>
</chi-button>
<chi-button variant="flat" type="icon" alternative-text="Button action" data-tooltip="Delete">
<chi-icon icon="delete"></chi-icon>
</chi-button>
<chi-button variant="flat" type="icon" alternative-text="Button action" data-tooltip="Print">
<chi-icon icon="print"></chi-icon>
</chi-button>
</div>
<div class="chi-bulk-actions__buttons-desktop">
<div class="chi-divider -vertical"></div>
<chi-button size="xs">
<chi-icon icon="arrow-to-bottom"></chi-icon><span>Download</span>
</chi-button>
<chi-button size="xs">
<chi-icon icon="compose"></chi-icon><span>Compose</span>
</chi-button>
<chi-button size="xs">
<chi-icon icon="delete"></chi-icon><span>Delete</span>
</chi-button>
<chi-button size="xs">
<chi-icon icon="print"></chi-icon><span>Print</span>
</chi-button>
</div>
</div>
</div>
<div class="chi-bulk-actions__end">
<chi-button type="close"></chi-button>
</div>
</div>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -left -menu -position--absolute" id="drawer-1">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Filters</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2 -py--3">
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba11">Label</label>
<select class="chi-select" id="example-ba11">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba12">Label</label>
<select class="chi-select" id="example-ba12">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba13">Label</label>
<select class="chi-select" id="example-ba13">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba14">Label</label>
<select class="chi-select" id="example-ba14">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="-d--flex -justify-content--center -pb--2">
<button class="chi-button -primary">Apply</button>
<button class="chi-button -ml--2">Cancel</button>
</div>
</div>
</div>
</div>
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -right -menu -position--absolute" id="drawer-2">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Actions</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2">
<ul class="-no-style">
<li class="-text--md">Download data</li>
<div class="chi-divider"></div>
<li class="-text--md">Refresh results</li>
<div class="chi-divider"></div>
</ul>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script>
chi.drawer(document.getElementById('drawer-trigger-brp1'));
chi.drawer(document.getElementById('drawer-trigger-brp2'));
chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>
Base with ribbon and bulk actions#
Actions (10 Selected)
To render toolbar, use the class
chi-toolbar.<div class="chi-toolbar">
<div class="chi-toolbar__header">
<div class="chi-toolbar__start">
<div class="chi-toolbar__search">
<div class="chi-form__item">
<chi-search-input id="example__base-4"></chi-search-input>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__views">
<div class="chi-toolbar__views-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-views-4">
<option>View 1</option>
<option>View 2</option>
</select>
</div>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-toolbar__filters">
<div class="chi-toolbar__filters-desktop">
<div class="chi-form__item">
<select class="chi-select" id="example-ba9">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item">
<select class="chi-select" id="example-ba10">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<button class="chi-button -icon -flat" id="button-pr-filters" aria-label="Filters" data-tooltip="Filters" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__filters-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-brbap1" data-target="#drawer-1" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-filter" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<div class="chi-toolbar__end">
<div class="chi-toolbar__actions">
<div class="chi-toolbar__actions-desktop">
<button class="chi-button -icon -flat" id="button-pr-download" aria-label="Download" data-tooltip="Download" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-pr-refresh" aria-label="Refresh" data-tooltip="Refresh" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-refresh" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" id="button-pr-column-customization" aria-label="Column Customization" data-tooltip="Column Customization" data-position="top">
<div class="chi-button__content">
<i class="chi-icon icon-table-column-settings" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-toolbar__actions-mobile">
<button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-brbap2" data-target="#drawer-2" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-more-vert" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="chi-toolbar__ribbon">
<div class="chi-toolbar__start">
<i class="chi-icon icon-arrow-down -xs" aria-hidden="true"></i>
<div class="chi-toolbar__results">
<span class="chi-toolbar__label">Search Results </span>
<span>(1-40 of 78)</span>
</div>
<div class="chi-divider -vertical"></div>
<chi-link href="#" size="md">Save View</chi-link>
</div>
<div class="chi-toolbar__end">
<button class="chi-button -icon -flat" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
</div>
<div class="chi-bulk-actions">
<div class="chi-bulk-actions__top">
<button class="chi-button -flat -px--1">Select all</button>
<button class="chi-button -flat -px--1">Cancel</button>
</div>
<div class="chi-bulk-actions__start">
<div class="chi-bulk-actions__results">
<div class="chi-bulk-actions__label">Actions (10 Selected)</div>
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" id="checkbox-ba1" type="checkbox" />
<label class="chi-checkbox__label" for="checkbox-ba1">Show Selected Only</label>
</div>
</div>
</div>
<div class="chi-divider -vertical"></div>
<div class="chi-bulk-actions__buttons">
<div class="chi-bulk-actions__buttons-mobile">
<button class="chi-button -icon -flat" aria-label="Button action" data-tooltip="Edit">
<div class="chi-button__content">
<i class="chi-icon icon-edit" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" aria-label="Button action" data-tooltip="Compose">
<div class="chi-button__content">
<i class="chi-icon icon-compose" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" aria-label="Button action" data-tooltip="Delete">
<div class="chi-button__content">
<i class="chi-icon icon-delete" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat" aria-label="Button action" data-tooltip="Print">
<div class="chi-button__content">
<i class="chi-icon icon-print" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-bulk-actions__buttons-desktop">
<button class="chi-button -xs">
<div class="chi-button__content">
<i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
<span>Download</span>
</div>
</button>
<button class="chi-button -xs">
<div class="chi-button__content">
<i class="chi-icon icon-compose" aria-hidden="true"></i>
<span>Compose</span>
</div>
</button>
<button class="chi-button -xs">
<div class="chi-button__content">
<i class="chi-icon icon-delete" aria-hidden="true"></i>
<span>Delete</span>
</div>
</button>
<button class="chi-button -xs">
<div class="chi-button__content">
<i class="chi-icon icon-print" aria-hidden="true"></i>
<span>Print</span>
</div>
</button>
</div>
</div>
</div>
<div class="chi-bulk-actions__end">
<button class="chi-button -icon -flat" aria-label="Button action">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -left -menu -position--absolute" id="drawer-1">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Filters</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2 -py--3">
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba11">Label</label>
<select class="chi-select" id="example-ba11">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba12">Label</label>
<select class="chi-select" id="example-ba12">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba13">Label</label>
<select class="chi-select" id="example-ba13">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="chi-form__item -mb--2">
<label class="chi-label" for="example-ba14">Label</label>
<select class="chi-select" id="example-ba14">
<option value="">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="-d--flex -justify-content--center -pb--2">
<button class="chi-button -primary">Apply</button>
<button class="chi-button -ml--2">Cancel</button>
</div>
</div>
</div>
</div>
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div class="chi-drawer -right -menu -position--absolute" id="drawer-2">
<div class="chi-drawer__header">
<span class="chi-drawer__title">Actions</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content -px--2">
<ul class="-no-style">
<li class="-text--md">Download data</li>
<div class="chi-divider"></div>
<li class="-text--md">Refresh results</li>
<div class="chi-divider"></div>
</ul>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script>
chi.drawer(document.getElementById('drawer-trigger-brbap1'));
chi.drawer(document.getElementById('drawer-trigger-brbap2'));
chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>
Chi Vue#
Props#
Search Input#
Please visit Search input dedicated documentation page here
Views #
Filters#
Column customization#
Interfaces and types#
Events#
Accessibility#
Accessibility guidelines coming soon