Toolbar

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

Examples

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