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 |
With drag and drop reordering
When enableDragDrop is set to true, users can drag and drop columns to reorder them. The order changes are reflected both in the modal and in the table when applied. This is useful when column order matters for the user experience.
| ID | Publish date | Impact | Severity |
|---|---|---|---|
| CVE-2024-1546 | 20 Feb 2024 | Important | High |
| CVE-2024-1547 | 20 Feb 2024 | Important | High |
| CVE-2024-1548 | 20 Feb 2024 | Moderate | Medium |
| CVE-2024-1549 | 20 Feb 2024 | Moderate | Medium |
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.' | |
| enableDragDrop | boolean | false | Enable drag and drop functionality for reordering columns |
| 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' |
