Toolbar

Toolbar provides the ability of performing actions such as searching for elements and filtering complex structures.

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">
      <template v-slot:customAdvanced>
        <div class="chi-form__item">
          <chi-label for="toolbar_base_filter_input-1">City</chi-label>
          <chi-text-input id="toolbar_base_filter_input-1"></chi-text-input>
          <chi-label for="toolbar_base_filter_input-2">Zip Code</chi-label>
          <chi-text-input id="toolbar_base_filter_input-2"></chi-text-input>
        </div>
      </template>
      <template v-slot:customAdvanced2>
        <chi-date-picker />
      </template>
    </ChiDataTableFilters>
  </template>
  <template v-slot:end>
    <ChiTooltip message="Refresh">
      <button class="chi-button -icon -flat" aria-label="Refresh">
        <div class="chi-button__content">
          <i class="chi-icon icon-refresh" aria-hidden="true"></i>
        </div>
      </button>
    </ChiTooltip>
    <ChiTooltip message="Download">
      <button class="chi-button -icon -flat" aria-label="Download">
        <div class="chi-button__content">
          <i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
        </div>
      </button>
    </ChiTooltip>
    <!-- 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 -->
const customItems = [
  {
    template: 'customAdvanced',
    label: 'Custom 1',
  },
  {
    template: 'customAdvanced2',
    label: 'Custom 2',
  },
];
const filters = [
  {
    name: 'status',
    type: 'select',
    id: 'myoption1',
    options: [
      {
        label: 'Select',
        value: '',
        selected: true,
      },
      {
        label: 'Active',
        value: 'active',
        selected: false,
      },
      {
        label: 'Inactive',
        value: 'inactive',
        selected: false,
      }
    ],
    advanced: false,
    value: ''
  },
  {
    name: 'statusAdvanced',
    label: 'Status',
    type: 'select',
    id: 'myoption1',
    options: [
      {
        label: 'Pending Active',
        value: 'pending',
        selected: false
      },
      {
        label: 'Active',
        value: 'active',
        selected: false
      },
      {
        label: 'Inactive',
        value: 'inactive',
        selected: false
      }
    ],
    advanced: true,
    value: 'pending',
  },
  {
    name: 'inputAdvanced',
    label: 'Label',
    id: 'myoption2',
    advanced: true,
  },
  {
    name: 'textareaAdvanced',
    label: 'textarea',
    id: 'myoption3',
    type: 'textarea',
    advanced: true,
  },
  {
    name: 'checkboxAdvanced',
    id: 'myoption4',
    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',
  },
];

const toolbar = {
  customItemsData: customItems,
  filtersData: {
    filters: 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="toolbar_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="toolbar_base_views-1">
              <option>View 1</option>
              <option>View 2</option>
            </select>
          </div>
        </div>
      </div>
      <div class="chi-divider -vertical"></div>
      <div class="chi-form__item -ml--1">
        <select class="chi-select">
          <option>Select</option>
          <option>Active</option>
          <option>Inactive</option>
        </select>
      </div>
      <div class="chi-toolbar__filters">
        <div class="chi-toolbar__filters-desktop">
          <button class="chi-button -icon -flat" id="toolbar_base_filter_button" 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="toolbar_base_drawer_trigger-1" data-target="#toolbar_base" 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="toolbar_base_refresh_button" 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="toolbar_base_download_button" 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="toolbar_base_column_customization_button" aria-label="Customize columns" data-tooltip="Customize columns" 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="toolbar_base_drawer_trigger-2" data-target="#toolbar_base_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="toolbar_base"
    >
      <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="toolbar_base_select-1">Label</label>
          <select class="chi-select" id="toolbar_base_select-1">
            <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="toolbar_base_select-2">Label</label>
          <select class="chi-select" id="toolbar_base_select-2">
            <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="toolbar_base_select-3">Label</label>
          <select class="chi-select" id="toolbar_base_select-3">
            <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="toolbar_base_select-4">Label</label>
          <select class="chi-select" id="toolbar_base_select-4">
            <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="toolbar_base_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('toolbar_base_drawer_trigger-1'));
  chi.drawer(document.getElementById('toolbar_base_drawer_trigger-2'));
  chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>

Base with save view#

Search Results (1-40 of 78)

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">
      <template v-slot:customAdvanced>
        <div class="chi-form__item">
          <chi-label for="base_with_save_view_filter_input-1">City</chi-label>
          <chi-text-input id="base_with_save_view_filter_input-1"></chi-text-input>
          <chi-label for="base_with_save_view_filter_input-2">Zip Code</chi-label>
          <chi-text-input id="base_with_save_view_filter_input-2"></chi-text-input>
        </div>
      </template>
      <template v-slot:customAdvanced2>
        <chi-date-picker />
      </template>
    </ChiDataTableFilters>
  </template>
  <template v-slot:end>
    <ChiTooltip message="Refresh">
      <button class="chi-button -icon -flat" aria-label="Refresh">
        <div class="chi-button__content">
          <i class="chi-icon icon-refresh" aria-hidden="true"></i>
        </div>
      </button>
    </ChiTooltip>
    <ChiTooltip message="Download">
      <button class="chi-button -icon -flat" aria-label="Download">
        <div class="chi-button__content">
          <i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
        </div>
      </button>
    </ChiTooltip>
    <!-- To enable customization of columns, use Column Customization sub-module of Toolbar by providing it with respective data -->
    <ChiColumnCustomization :columnsData="toolbar.columnsData" />
  </template>
</ChiDataTableToolbar>
<ChiSaveView
  :active="saveView.active"
  :default="saveView.default"
  :mode="saveView.mode"
  :results="saveView.results"
  :title="saveView.title"
></ChiSaveView>

<!-- Example Data -->
const customItems = [
  {
    template: 'customAdvanced',
    label: 'Custom 1',
  },
  {
    template: 'customAdvanced2',
    label: 'Custom 2',
  },
];
const filters = [
  {
    name: 'status',
    type: 'select',
    id: 'myoption1',
    options: [
      {
        label: 'Select',
        value: '',
        selected: true,
      },
      {
        label: 'Active',
        value: 'active',
        selected: false,
      },
      {
        label: 'Inactive',
        value: 'inactive',
        selected: false,
      }
    ],
    advanced: false,
    value: ''
  },
  {
    name: 'statusAdvanced',
    label: 'Status',
    type: 'select',
    id: 'myoption1',
    options: [
      {
        label: 'Pending Active',
        value: 'pending',
        selected: false
      },
      {
        label: 'Active',
        value: 'active',
        selected: false
      },
      {
        label: 'Inactive',
        value: 'inactive',
        selected: false
      }
    ],
    advanced: true,
    value: 'pending',
  },
  {
    name: 'inputAdvanced',
    label: 'Label',
    id: 'myoption2',
    advanced: true,
  },
  {
    name: 'textareaAdvanced',
    label: 'textarea',
    id: 'myoption3',
    type: 'textarea',
    advanced: true,
  },
  {
    name: 'checkboxAdvanced',
    id: 'myoption4',
    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',
  },
];

const toolbar = {
  customItemsData: customItems,
  filtersData: {
    filters: 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: [],
    },
  ],
};
const saveView = {
  title: 'Search Results',
  results: '(1-40 of 78)',
  mode: 'base',
  active: true,
  default: true
};

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="base_with_save_view"></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="base_with_save_view_views-1">
              <option>View 1</option>
              <option>View 2</option>
            </select>
          </div>
        </div>
      </div>
      <div class="chi-divider -vertical"></div>
      <div class="chi-form__item -ml--1">
        <select class="chi-select">
          <option>Select</option>
          <option>Active</option>
          <option>Inactive</option>
        </select>
      </div>
      <div class="chi-toolbar__filters">
        <div class="chi-toolbar__filters-desktop">
          <button class="chi-button -icon -flat" id="base_with_save_view_filter_button" 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="base_with_save_view_drawer_trigger-1" data-target="#base_with_save_view" 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="base_with_save_view_refresh_button" 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="base_with_save_view_download_button" 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="base_with_save_view_column_customization_button" aria-label="Customize columns" data-tooltip="Customize columns" 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="base_with_save_view_drawer_trigger-2" data-target="#base_with_save_view_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>

<!-- Save view -->
<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>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div
      class="chi-drawer -left -menu -position--absolute"
      id="base_with_save_view"
    >
      <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="base_with_save_view_select-1">Label</label>
          <select class="chi-select" id="base_with_save_view_select-1">
            <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="base_with_save_view_select-2">Label</label>
          <select class="chi-select" id="base_with_save_view_select-2">
            <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="base_with_save_view_select-3">Label</label>
          <select class="chi-select" id="base_with_save_view_select-3">
            <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="base_with_save_view_select-4">Label</label>
          <select class="chi-select" id="base_with_save_view_select-4">
            <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="base_with_save_view_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('base_with_save_view_drawer_trigger-1'));
  chi.drawer(document.getElementById('base_with_save_view_drawer_trigger-2'));
  chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>

Save view interaction#

Toggle Save View

<div class="-w--100" id="save-view">
  <button class="chi-button" @click="toggleSaveView">Toggle Save View</button>
  <ChiSaveView class="-mt--2" :config="config" @chiViewSave="saveView" @chiViewDelete="deleteView">
    <template v-slot:info-icon>
      <button class="chi-button -light -icon -flat -xs" id="chi-save-view__info-trigger" aria-label="Edit" @click="() => toggleInfoPopover()" slot="info-icon">
        <div class="chi-button__content">
          <i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
        </div>
      </button>
    </template>
    <template v-slot:info-popover>
      <chi-popover :active="isInfoPopoverActive" position="right-start" title="Popover title" variant="text" arrow="" reference="#chi-save-view__info-trigger" @chiPopoverHidden="() => (isInfoPopoverActive = false)">Popover content</chi-popover>
    </template>
  </ChiSaveView>
</div>

<!-- Example Data -->
const config = ref({
  active: false,
  results: '(1-40 of 78)',
});

const isInfoPopoverActive = ref(false);

const toggleInfoPopover = () => {
  isInfoPopoverActive.value = !isInfoPopoverActive.value;
};
const toggleSaveView = () => {
  config.value = {
    ...config.value,
    active: !config.value.active,
  };
};

Base with save view and bulk actions#

Search Results (1-40 of 78)

Actions (10 Items Selected)

Show Selected Only

Download

Compose

Delete

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">
      <template v-slot:customAdvanced>
        <div class="chi-form__item">
          <chi-label for="toolbar-example-bulk-actions_filter_input-1">City</chi-label>
          <chi-text-input id="toolbar-example-bulk-actions_filter_input-1"></chi-text-input>
          <chi-label for="toolbar-example-bulk-actions_filter_input-2">Zip Code</chi-label>
          <chi-text-input id="toolbar-example-bulk-actions_filter_input-2"></chi-text-input>
        </div>
      </template>
      <template v-slot:customAdvanced2>
        <chi-date-picker />
      </template>
    </ChiDataTableFilters>
  </template>
  <template v-slot:end>
    <ChiTooltip message="Refresh">
      <button class="chi-button -icon -flat" aria-label="Refresh">
        <div class="chi-button__content">
          <i class="chi-icon icon-refresh" aria-hidden="true"></i>
        </div>
      </button>
    </ChiTooltip>
    <ChiTooltip message="Download">
      <button class="chi-button -icon -flat" aria-label="Download">
        <div class="chi-button__content">
          <i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
        </div>
      </button>
    </ChiTooltip>
    <!-- To enable customization of columns, use Column Customization sub-module of Toolbar by providing it with respective data -->
    <ChiColumnCustomization :columnsData="toolbar.columnsData" />
  </template>
</ChiDataTableToolbar>
<ChiSaveView
  :active="saveView.active"
  :default="saveView.default"
  :mode="saveView.mode"
  :results="saveView.results"
  :title="saveView.title"
></ChiSaveView>
<ChiDataTableBulkActions uuid="toolbar-example-bulk-actions" selected-rows="10">
  <div class="chi-bulk-actions__buttons">
    <div class="chi-bulk-actions__buttons-mobile -z--40">
      <chi-button variant="flat" type="icon" aria-label="Edit">
        <chi-icon icon="edit"></chi-icon>
      </chi-button>
      <chi-button variant="flat" type="icon" aria-label="Compose">
        <chi-icon icon="compose"></chi-icon>
      </chi-button>
      <chi-button variant="flat" type="icon" aria-label="Delete">
        <chi-icon icon="delete"></chi-icon>
      </chi-button>
      <chi-button variant="flat" type="icon" aria-label="Print">
        <chi-icon icon="print"></chi-icon>
      </chi-button>
    </div>
    <div class="chi-bulk-actions__buttons-desktop">
      <chi-button size="xs" aria-label="Download">
        <chi-icon icon="arrow-to-bottom"></chi-icon>
        <span> Download </span>
      </chi-button>
      <chi-button size="xs" aria-label="Compose">
        <chi-icon icon="arrow-to-bottom"></chi-icon>
        <span> Compose </span>
      </chi-button>
      <chi-button size="xs" aria-label="Delete">
        <chi-icon icon="arrow-to-bottom"></chi-icon>
        <span> Delete </span>
      </chi-button>
      <chi-button size="xs" aria-label="Print">
        <chi-icon icon="arrow-to-bottom"></chi-icon>
        <span> Print </span>
      </chi-button>
    </div>
  </div>
</ChiDataTableBulkActions>

<!-- Example Data -->
const customItems = [
  {
    template: 'customAdvanced',
    label: 'Custom 1',
  },
  {
    template: 'customAdvanced2',
    label: 'Custom 2',
  },
];
const filters = [
  {
    name: 'status',
    type: 'select',
    id: 'myoption1',
    options: [
      {
        label: 'Select',
        value: '',
        selected: true,
      },
      {
        label: 'Active',
        value: 'active',
        selected: false,
      },
      {
        label: 'Inactive',
        value: 'inactive',
        selected: false,
      }
    ],
    advanced: false,
    value: ''
  },
  {
    name: 'statusAdvanced',
    label: 'Status',
    type: 'select',
    id: 'myoption1',
    options: [
      {
        label: 'Pending Active',
        value: 'pending',
        selected: false
      },
      {
        label: 'Active',
        value: 'active',
        selected: false
      },
      {
        label: 'Inactive',
        value: 'inactive',
        selected: false
      }
    ],
    advanced: true,
    value: 'pending',
  },
  {
    name: 'inputAdvanced',
    label: 'Label',
    id: 'myoption2',
    advanced: true,
  },
  {
    name: 'textareaAdvanced',
    label: 'textarea',
    id: 'myoption3',
    type: 'textarea',
    advanced: true,
  },
  {
    name: 'checkboxAdvanced',
    id: 'myoption4',
    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',
  },
];

const toolbar = {
  customItemsData: customItems,
  filtersData: {
    filters: 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: [],
    },
  ],
};
const saveView = {
  title: 'Search Results',
  results: '(1-40 of 78)',
  mode: 'base',
  active: true,
  default: true
};

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="toolbar-example-bulk-actions"></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="toolbar-example-bulk-actions_views-1">
              <option>View 1</option>
              <option>View 2</option>
            </select>
          </div>
        </div>
      </div>
      <div class="chi-divider -vertical"></div>
      <div class="chi-form__item -ml--1">
        <select class="chi-select">
          <option>Select</option>
          <option>Active</option>
          <option>Inactive</option>
        </select>
      </div>
      <div class="chi-toolbar__filters">
        <div class="chi-toolbar__filters-desktop">
          <button class="chi-button -icon -flat" id="toolbar-example-bulk-actions_filter_button" 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="toolbar-example-bulk-actions_drawer_trigger-1" data-target="#toolbar-example-bulk-actions" 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="toolbar-example-bulk-actions_refresh_button" 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="toolbar-example-bulk-actions_download_button" 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="toolbar-example-bulk-actions_column_customization_button" aria-label="Customize columns" data-tooltip="Customize columns" 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="toolbar-example-bulk-actions_drawer_trigger-2" data-target="#toolbar-example-bulk-actions_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>

<!-- Save view -->
<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>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div
      class="chi-drawer -left -menu -position--absolute"
      id="toolbar-example-bulk-actions"
    >
      <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="toolbar-example-bulk-actions_select-1">Label</label>
          <select class="chi-select" id="toolbar-example-bulk-actions_select-1">
            <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="toolbar-example-bulk-actions_select-2">Label</label>
          <select class="chi-select" id="toolbar-example-bulk-actions_select-2">
            <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="toolbar-example-bulk-actions_select-3">Label</label>
          <select class="chi-select" id="toolbar-example-bulk-actions_select-3">
            <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="toolbar-example-bulk-actions_select-4">Label</label>
          <select class="chi-select" id="toolbar-example-bulk-actions_select-4">
            <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="toolbar-example-bulk-actions_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>

<!-- bulk actions -->
<div class="chi-bulk-actions">
  <div class="chi-bulk-actions__top -position--absolute">
    <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 -position--absolute">
        <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">
        <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>

<!-- Javascript -->
<script>
  chi.drawer(document.getElementById('toolbar-example-bulk-actions_drawer_trigger-1'));
  chi.drawer(document.getElementById('toolbar-example-bulk-actions_drawer_trigger-2'));
  chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>

Chi Vue

Props

Search Input

Please visit Search input dedicated documentation page here

Views

Property	Description	Type	Default
`views`	To define views in the toolbar.	`DataTableView[]`	[]
`defaultView`	To define the default view in the toolbar.	`string`	undefined

Filters

Property	Description	Type	Default
`filtersData`	To define filters in the toolbar.	`DataTableFilters[]`	undefined
`customItems`	To define custom items in the toolbar.	`DataTableCustomItem[]`	undefined

Column customization

Property	Description	Type	Default
`columnsData`	To define columns for customization.	`DataTableColumns[]`	undefined

Save views

Property	Description	Type	Default
`active`	To show the save view.	`boolean`	`false`
`default`	To set the default.	`boolean`	`false`
`id`	To set the id.	`string`	`null`
`mode`	To set the mode.	`'base' \| 'create' \| 'edit' \| 'saved' \| 'delete'`	`'base'`
`results`	To show the results.	`string`	undefined
`title`	To set the title.	`string`	`''`

Interfaces and types

Name	Interface
`DataTableFilter`	{ name: `string`; label: `string`; type: `'select' \| 'input' \| 'checkbox' \| 'textarea'`; id: `string`; options?: [ { value: `string`; label: `string`; selected: `true`; checked?: `boolean`; id?: `string`; } ]; value?: `string`; checked?: `boolean`; defaultValue?: `string`; placeholder: `string`; advanced?:`true`; }
`DataTableColumn`	{ name: `string`; label: `string`; selected: `boolean`; locked: `true`; wildcard?: `boolean`; }
`DataTableView`	{ id: `string`; label: `string`; searchString?: `string`; columns?: `DataTableColumn[]`; filters?: `DataTableFilter[]`; }

Name

Interface

DataTableFilter

{
  name: string;
  label: string;
  type: 'select' | 'input' | 'checkbox' | 'textarea';
  id: string;
  options?: [
    {
      value: string;
      label: string;
      selected: true;
      checked?: boolean;
      id?: string;
    }
  ];
  value?: string;
  checked?: boolean;
  defaultValue?: string;
  placeholder: string;
  advanced?:true;
}

DataTableColumn

{
  name: string;
  label: string;
  selected: boolean;
  locked: true;
  wildcard?: boolean;
}

DataTableView

{
  id: string;
  label: string;
  searchString?: string;
  columns?: DataTableColumn[];
  filters?: DataTableFilter[];
}

Events

Event	Description	Type
`chiToolbarFiltersChange`	To user has changed the filter options of the data table	`DataTableFilters[]`
`chiToolbarSearch`	The user has made a search in the data table	`string`
`chiToolbarColumnsChange`	The user has changed the configuration of the columns	`DataTableColumns[]`
`chiToolbarViewsChange`	The user has selected a view	`DataTableView`

Accessibility

Accessibility guidelines coming soon