diff --git a/CHANGELOG.md b/CHANGELOG.md index 59d3f902213..60083beaa89 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - Added RGB format support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850)) - Added alpha channel (opacity) support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850)) - Added `useResizeObserver` hook ([#2991](https://github.com/elastic/eui/pull/2991)) +- Added `showColumnSelector.allowHide` and `showColumnSelector.allowReorder` props to `EuiDataGrid` UI configuration ([#2993](https://github.com/elastic/eui/pull/2993)) **Bug Fixes** diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js index 14c67b714d3..15ed7a627a9 100644 --- a/src-docs/src/views/datagrid/datagrid_example.js +++ b/src-docs/src/views/datagrid/datagrid_example.js @@ -30,6 +30,7 @@ import { DataGridColumnVisibility, DataGridPopoverContent, DataGridControlColumn, + DataGridToolBarVisibilityColumnSelectorOptions, } from './props'; const gridSnippet = ` @@ -351,6 +352,7 @@ export const DataGridExample = { EuiDataGridSchemaDetector: DataGridSchemaDetector, EuiDataGridStyle: DataGridStyle, EuiDataGridToolbarVisibilityOptions: DataGridToolbarVisibilityOptions, + EuiDataGridToolBarVisibilityColumnSelectorOptions: DataGridToolBarVisibilityColumnSelectorOptions, EuiDataGridPopoverContent: DataGridPopoverContent, }, demo: ( diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js index 29160929363..a7089cc6452 100644 --- a/src-docs/src/views/datagrid/datagrid_styling_example.js +++ b/src-docs/src/views/datagrid/datagrid_styling_example.js @@ -37,10 +37,11 @@ const gridSnippet = ` = () =>
; + +export const DataGridToolBarVisibilityColumnSelectorOptions: FunctionComponent< + EuiDataGridToolBarVisibilityColumnSelectorOptions +> = () =>
; diff --git a/src-docs/src/views/datagrid/styling.js b/src-docs/src/views/datagrid/styling.js index 90e43fc5e55..8f6e1959cb8 100644 --- a/src-docs/src/views/datagrid/styling.js +++ b/src-docs/src/views/datagrid/styling.js @@ -167,6 +167,28 @@ export default class DataGrid extends Component { }, ]; + this.allowHideColumnsOptions = [ + { + id: 'true', + label: 'True', + }, + { + id: 'false', + label: 'False', + }, + ]; + + this.allowOrderingColumnsOptions = [ + { + id: 'true', + label: 'True', + }, + { + id: 'false', + label: 'False', + }, + ]; + this.showFullScreenSelectorOptions = [ { id: 'true', @@ -212,6 +234,8 @@ export default class DataGrid extends Component { showSortSelector: true, showStyleSelector: true, showColumnSelector: true, + allowHideColumns: true, + allowOrderingColumns: true, showFullScreenSelector: true, showToolbar: true, toolbarPropTypeIsBoolean: true, @@ -279,6 +303,18 @@ export default class DataGrid extends Component { }); }; + onAllowHideColumnsChange = optionId => { + this.setState({ + allowHideColumns: optionId === 'true', + }); + }; + + onAllowOrderingColumnsChange = optionId => { + this.setState({ + allowOrderingColumns: optionId === 'true', + }); + }; + onShowFullScreenSelectorChange = optionId => { this.setState({ showFullScreenSelector: optionId === 'true', @@ -356,8 +392,20 @@ export default class DataGrid extends Component { ); + let showColumnSelector = this.state.showColumnSelector; + if ( + this.state.showColumnSelector === true && + (this.state.allowHideColumns === false || + this.state.allowOrderingColumns === false) + ) { + showColumnSelector = { + allowHide: this.state.allowHideColumns, + allowReorder: this.state.allowOrderingColumns, + }; + } + const toolbarVisibilityOptions = { - showColumnSelector: this.state.showColumnSelector, + showColumnSelector: showColumnSelector, showStyleSelector: this.state.showStyleSelector, showSortSelector: this.state.showSortSelector, showFullScreenSelector: this.state.showFullScreenSelector, @@ -459,7 +507,7 @@ export default class DataGrid extends Component { anchorPosition="rightUp" zIndex={2} closePopover={this.closeToolbarPopover.bind(this)}> -
+
@@ -474,19 +522,6 @@ export default class DataGrid extends Component { {this.state.toolbarPropTypeIsBoolean === false ? ( - - - - @@ -525,6 +560,49 @@ export default class DataGrid extends Component { onChange={this.onShowFullScreenSelectorChange} /> + + + + + {this.state.showColumnSelector && ( + <> + + + + + + + + )} ) : ( diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 103dd9f4f5d..b4de6816b40 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -191,12 +191,12 @@ Array [