rowGroupAdd

Since: ColumnControl 1.1.0

Add an n-level grouping data point.
Please note - this property requires the ColumnControl extension for DataTables.

Description

The button added by this content type will modify the row grouping that has been applied to the table:

If there is no grouping applied, it will add the data point for the target column as the top level grouping value
If there is already grouping applied, it will add the data point for this target column as a nested grouping value. This will continue to n levels.

The table will automatically redraw to reflect the updated row grouping when this button is triggered.

Please note that to operate this content type the RowGroup extension for DataTables is required.

Display

The button added by this control will display as a simple icon button at the top level, or as a button with icon and text in a dropdown. It is generally expected that it will be used in a dropdown to avoid cluttering the UI.

Options

This button can have the following options set in its configuration object to customise its actions and display, in addition to those options which are available for all buttons (e.g. buttons.buttons.text):

`icon`

Type: string
Default: groupAdd

Button icon. Can take the name of any icon available in DataTable.ColumnControl.icons (which is a writeable object containing SVG icons).

`text`

Type: string
Default: Add to grouping

Trigger button text (shown when in a dropdown). Can also be set by the rowGroupAdd key of language.columnControl, which will take priority if set.

Example

Show a dropdown with all row grouping control buttons.:

new DataTable('#example', {
	columnControl: ['order', ['rowGroup', 'rowGroupAdd', 'rowGroupRemove', 'rowGroupClear']],
    ordering: {
        indicators: false,
        handler: false
    }
});