Back to the index of articles and examples

Grouping repeated column values

This DataTable is filled with random values with an 80% chance that the value on any cell will repeat the value on the cell above.

All columns have a cell formatter assigned which will compare the current value of that cell with the value of the cell above.

If the cell values are the same, it won't store the value in the cell and will assign it a particular className. If the value for the cell is different then it will show it and will assign a different className which, in this case, simply draws a border to separate it from the previous row.

Once a value changes in a cell, the remaining of the row will be marked as different even though some values may actually repeat.

Columns may be excluded from the grouping by setting group:false in its column definition. At least one column should not be grouped, otherwise whole rows might be empty. Here, we don't group the last one. Still, they need the formatter so that the style for the grouping propagates across all the row.

All columns are sortable and all cells -even empty ones- are editable. You can group/ungroup cells by changing the values of the cells making them equal/different than the value of the cells above/below.

The new row formatter option would be the best place to handle this, but several deficiencies in the function makes it impractical.