Columns are some of the most important parts of the
<ReactDataGrid />. As such, they support reordering by default. Specify
reorderColumns=false if you don't want the
<ReactDataGrid /> to have reorderable/draggable columns. Or if you want to disable dragging just a specific column, specify
column.draggable=false.
In addition to reordering, you can also stack column headers on top of each other to better group columns together. Below you can find an example with stacked columns.
To stack columns, you need to specify a
column.group if you want a specific column to belong to a group.
Additionally, you also need to specify a
groups prop on the
<ReactDataGrid />.
Nesting a group inside another group can be done by specifying a
groups.group property - eg: say you want to nest a
'street' group inside a
'location' group - you have to specify
{ name: 'street', group: 'location'} which means the
'street' group is nested inside the
'location' group.
For any specified group, you can use the
group.header property to customize the content inside the group header. Think of group headers just like column headers.
When columns that are in the same group are siblings, their group header is extended to cover all related siblings. When the user changes the column order, the <ReactDataGrid /> is smart enough to know how to split group headers and where new groups begin.
So all you need to pass to the <ReactDataGrid /> is the array of columns you want to display and it will figure out the correct nesting/stacking of column group headers.
When stacked/grouped columns are used, you can drag & drop a column to change the column order, or you can even drag & drop a group of columns and move them altogether. By default, columns can only be dragged in the same group where they belong.
You can resize a single column by dragging from its right border, or you can resize a group of columns by dragging the group right border (but above the column header itself). You can try this in the above example. In this case, columns in the group are resized proportionally.