A ux-column-picker can be used to allow a user to select, deselect and reorder the
columns in a table.
The following properties can be used to configure the component:
Define a list of all selected columns.
Define a list of columns that are always selected. The columns cannot be moved or reordered.
Define a list of columns that are not selected or locked. All columns must have unique names,
including columns in different groups.
Define a custom selected title template.
Define a custom deselected title template.
Define a custom template for deselected items.
Define a custom template for selected items.
Define a custom template for locked items.
Define a custom template for the action buttons columns.
Define a function to get the aria label of reorderable items in the selected column.
Define a function to get the aria label of a group in the deselected list.
Define the aria label for the add column button
Define the aria label for the remove column button
Define the aria label for the add all columns button
Define the aria label for the remove all columns button
Define a function that returns a column move announcement.
An optional array of objects to configure column groups. See below for a listing of the
available settings for groups.
Define a comparator function used for sorting the deselected columns. For example, to sort the
columns alphabetically, the function below could be used:
Emits when the selected items change or the order of the selected items change.
Emits when the deselected items change.
An array of items that are currently selected in the left column.
An array of items that are currently selected in the right column.
A function that can be called to add columns. If no columns are passed to the function, the
items that are selected in the left column will be added.
A function that can be called to remove columns. If no columns are passed to the function, the
items that are selected in the right column will be removed.
A function that can be called to add all columns.
A function that can be called to remove all columns.
The name of the group that this column belongs to.
The name of the column.
The name of the group this setting object is related to.
Defines if this group will be expanded on load. This is an optional property.
The example above can be created using the following code: