| section | extensions | |
|---|---|---|
| subsection | component-groups | |
| id | Column management modal | |
| source | react | |
| propComponents |
|
|
| sourceLink | https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModal.md |
import ColumnManagementModal from '@patternfly/react-component-groups/dist/dynamic/ColumnManagementModal'; import { ColumnsIcon } from '@patternfly/react-icons'; import { FunctionComponent, useState } from 'react';
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.
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.
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.