The column management modal component can be used to implement customizable table columns. Columns can be configured to be enabled or disabled by default or be unhidable.
Examples
Showing and hiding of table columns
Clicking the "Manage columns" button will open the column management modal. The "ID" column should not be toggleable, therefore its checkbox is disabled with isUntoggleable: true. The "Score" column is set to be hidden by default. Always make sure to set isShownByDefault and isShown to the same boolean value in the initial state. For further customization, you can utilize all properties of the modal component, except ref and children.
| ID | Publish date | Impact |
|---|---|---|
| CVE-2024-1546 | 20 Feb 2024 | Important |
| CVE-2024-1547 | 20 Feb 2024 | Important |
| CVE-2024-1548 | 20 Feb 2024 | Moderate |
| CVE-2024-1549 | 20 Feb 2024 | Moderate |
Props
ColumnManagementModal
| Name | Type | Default | Description |
|---|---|---|---|
| appliedColumnsrequired | ColumnManagementModalColumn[] | Current column state | |
| applyColumnsrequired | (newColumns: ColumnManagementModalColumn[]) => void | Invoked with new column state after save button is clicked | |
| description | string | 'Selected categories will be displayed in the table.' | |
| isOpen | boolean | false | Flag to show the modal |
| onClose | (event: KeyboardEvent | React.MouseEvent) => void | () => undefined | Invoked when modal visibility is changed |
| ouiaId | string | number | 'ColumnManagementModal' | Custom OUIA ID |
| title | string | 'Manage columns' |
