Anatomy
Data Grid Header
|
Item |
Name |
Description |
Component |
Optional |
|---|---|---|---|---|
|
1 |
Title |
Used if the Data Grid is also a new Section on the page. |
|
Yes |
|
2 |
Subtitle |
Used to provide more context to the Title. Should not be used on its own. |
|
Yes |
|
3 |
View Control Slot |
Temporary solution to enable custom controls to change view (e.g. between table and calendar layouts). In the future, it should be replaced with the functionality to save views. |
|
|
|
4 |
Group By Dropdown |
Control allowing to group the Data Grid by any column(s) and adjust the groups’ order. |
Renders when grouping is enabled on at least 1 column |
|
|
5 |
Quick Filters Slot |
If a custom filter is needed (one that cannot be covered with the Column’s default filters), they should be placed here. E.g. Period |
Component to use inside: Filter Input Dropdown (B2B workspace) |
|
|
6 |
Column Options Menu |
A trigger to open the Options Floating Panel, where user can adjust the visibility, order etc. |
Renders when visibility, pinning or reordering is enabled |
|
|
7 |
Global Filter |
Allows the user to quickly filter the table by any keyword. |
Renders when search is enabled on at least 1 column |
|
|
8 |
Actions Slot |
Intended for actions that are related to the Data Grid content only e.g. exporting the data, printing the Data Grid. Max 3 Buttons allowed. |
Component to use inside: Icon Button(s) |
|
Data Grid
|
Item |
Name |
Description |
Component |
Visibility |
|---|---|---|---|---|
|
1 |
Column Hader |
A cell containing Column’s title label and other controls if enabled |
|
|
|
2 |
Sorting Icon Indicator |
If there is sorting applied on the column, it is represented by an arrow up/down icon |
When enabled |
|
|
3 |
Pinned Column Indicator |
Pinned columns are indicated with an additional vertical line |
|
When enabled |
|
4 |
Column Filter |
Opens the dropdown menu with filter fields. A badge appears when a filter is applied. |
When enabled |
|
|
5 |
Column Menu |
Opens the dropdown menu with additional options like sorting, pinning, etc. |
When enabled |
|
|
6 |
Resize Control |
Allows the user to manually adjust the column width. |
|
When enabled |
Controls Panel and Bulk Actions
|
Item |
Name |
Description |
Component |
Visibility |
|---|---|---|---|---|
|
1 |
Controls Panel |
A panel that allows power users adjust the Data Grid view in bulk. |
When enabled |
|
|
2 |
Show all Control |
Allows to quickly set all columns to be visible/hidden. |
When enabled |
|
|
3 |
Visibility Control |
Allows to hide/show the column. |
When enabled |
|
|
4 |
Reordering Control |
Allows to change the order of the columns by dragging & dropping the list items vertically. |
When enabled |
|
|
5 |
Pin/Unpin Button |
Allows the user to pin a column so that it is always shown, even when the Data Grid content overflows vertically. |
When enabled |
|
|
6 |
Autosize Button |
Allows the user to change the Column’s width to “fit the content” after it has been manually resized. |
When enabled |
|
|
7 |
Reset Button |
Allows the user to reset all the manual adjustments and revert the view to the default one. |
When changes are applied |
|
|
8 |
Bulk Actions Control |
Allows the user quickly apply actions to all selected row items. |
When at least 1 row is selected |