CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal

Toolbar

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

Examples

Base

Download All DataDownload All Current Results
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>
    <ChiTooltip message="Download">
      <div class="chi-dropdown">
        <button ref="dropdownTrigger" class="chi-button -icon -flat" aria-label="Download" data-position="bottom-end">
          <div class="chi-button__content">
            <i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
          </div>
        </button>
        <div class="chi-dropdown__menu">
          <a class="chi-dropdown__menu-item" href="#">Download All Data</a>
          <a class="chi-dropdown__menu-item" href="#">Download All Current Results</a>
        </div>
      </div>
    </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 -->
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: [],
        },
      ],
    };
  };
},
methods: {
  mounted() {
    chi.dropdown(this.$refs.dropdownTrigger);
  }
};
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-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>
          <div class="chi-dropdown" data-tooltip="Download">
            <button class="chi-button -icon -flat" id="example__portal_brightspeed_base_button_download" aria-label="Download" data-position="bottom-end">
              <div class="chi-button__content">
                <i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
              </div>
            </button>
            <div class="chi-dropdown__menu">
              <a class="chi-dropdown__menu-item" href="#">Download All Data</a>
              <a class="chi-dropdown__menu-item" href="#">Download All Current Results</a>
            </div>
          </div>
          <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]'));
  chi.dropdown(document.getElementById('example__portal_brightspeed_base_button_download'));
</script>

Base with Save View

Download All DataDownload All Current Results
Search Results (1-40 of 78)
Save View
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-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>
          <div class="chi-dropdown" data-tooltip="Download">
            <button class="chi-button -icon -flat" id="example__portal_brightspeed_save_views_button_download" aria-label="Download" data-position="bottom-end">
              <div class="chi-button__content">
                <i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
              </div>
            </button>
            <div class="chi-dropdown__menu">
              <a class="chi-dropdown__menu-item" href="#">Download All Data</a>
              <a class="chi-dropdown__menu-item" href="#">Download All Current Results</a>
            </div>
          </div>
          <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]'));
  chi.dropdown(document.getElementById('example__portal_brightspeed_save_views_button_download'));
</script>

Save View interaction

Popover content
<div class="-w--100" id="save-view">
  <button class="chi-button" @click="toggleSaveView">Toggle Save View</button>
  <ChiSaveView class="-mt--2" :active="active" results="(1-40 of 78)" @chiSave="saveView" @chiDelete="deleteView">
    <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>
    <chi-popover :active="isInfoPopoverActive" position="right-start" title="Popover title" variant="text" arrow="" reference="#chi-save-view__info-trigger" slot="info-popover" @chiPopoverHidden="() => (isInfoPopoverActive = false)">Popover content</chi-popover>
  </ChiSaveView>
</div>

<!-- Example Data -->
new Vue({
    data: () => {
      return {
        active: false,
        isInfoPopoverActive: false,
      }
    },
    components: {
      ChiSaveView: window["chi-vue"].library.components.ChiSaveView,
    },
    methods: {
      deleteView(e) {
        console.log(e);
      },
      saveView(e) {
        console.log(e);
      },
      toggleInfoPopover() {
        this.isInfoPopoverActive = !this.isInfoPopoverActive;
      },
      toggleSaveView() {
        this.active = !this.active;
      },
    },
  }).$mount("#save-view");

Base with Save View and Bulk Actions

Download All DataDownload All Current Results
Search Results (1-40 of 78)
Save View
Actions (10 Selected)
DownloadComposeDeletePrint
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-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>
          <div class="chi-dropdown" data-tooltip="Download">
            <button class="chi-button -icon -flat" id="example__portal_brightspeed_save_views_bulk_actions_button_download" aria-label="Download" data-position="bottom-end">
              <div class="chi-button__content">
                <i class="chi-icon icon-arrow-to-bottom" aria-hidden="true"></i>
              </div>
            </button>
            <div class="chi-dropdown__menu">
              <a class="chi-dropdown__menu-item" href="#">Download All Data</a>
              <a class="chi-dropdown__menu-item" href="#">Download All Current Results</a>
            </div>
          </div>
          <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]'));
  chi.dropdown(document.getElementById('example__portal_brightspeed_save_views_bulk_actions_button_download'));
</script>
Filters
Actions
  • Download data
  • Refresh results

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
customItemsTo define custom items in the toolbar.DataTableCustomItem[]undefined

Column customization

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

Save View

Property
Description
Type
Default
active
To specify if SaveView is active.
boolean
false
results
To be displayed after "Search Results".
string
undefined
default
To specify if default checkbox should be checked.
boolean
false
id
SaveView id.
string
undefined
mode
Mode for displaying SaveView.
SaveViewModes
SaveViewModes.BASE
title
View 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;
    }
  ];
  value?: string;
  checked?: boolean;
  defaultValue?: string;
  placeholder: string;
  advanced?:true;
}
DataTableColumn
{
   name: string;
   label: string;
   selected: boolean;
   locked: true;
 }
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
chiViewSave
Fired on save or delete button click
chiSaveViewShown
Fired when the enter transition has finished
undefined
chiSaveViewHide
Fired on close button click
undefined
chiSaveViewHidden
Fired when the leave transition has finished and the element(SaveView) has been removed from the DOM
undefined

Accessibility

Accessibility guidelines coming soon