The list manager component can be used to implement customizable table columns. Columns can be configured to be enabled or disabled by default or be unhidable.
Examples
Basic column list
The order of the columns can be changed by dragging and dropping the columns themselves. This list can be used within a page or within a modal. Always make sure to set isShownByDefault and isSelected (if needed) to the same boolean value in the initial state.
Props
ListManager
| Name | Type | Default | Description |
|---|---|---|---|
| columnsrequired | ListManagerItem[] | Current column state | |
| onCancel | () => void | Callback to close the modal | |
| onOrderChange | (columns: ListManagerItem[]) => void | Callback when the column order changes | |
| onSave | (columns: ListManagerItem[]) => void | Callback to save the column state | |
| onSelect | (column: ListManagerItem) => void | Callback when a column is selected or deselected | |
| onSelectAll | (columns: ListManagerItem[]) => void | Callback when all columns are selected or deselected | |
| ouiaId | string | number | 'Column' | Custom OUIA ID |
