Nested DataGrids
As we discussed in the Intro tutorial, Nested DataGrids are Grids that have multiple sets of inner level columns. In the previous section, you saw how to create a hierarchy of levels using the nextLevel property. In this section, we will see how to use this property to create a nested DataGrid.
In the previous examples we used enableDynamicLevels to enable the dynamic levels feature. This feature is not supported in nested DataGrids. This is because the dynamic levels feature is designed to work with a single set of top level columns. Nested DataGrids have multiple sets of inner level columns. These inner level columns are defined using the nextLevel property and have to be passed in via props
Basic Example
Lets start with a simple example. Lets say you have a tree structure of employees, a list of projects they are working on, and timesheets for each project. The below example shows a grid with 3 columns, representing "employeeName","title", "hireDate", with a nested DataGrid that has 3 columns, representing "project", "roleOnProject", "comments", which in turn has a nested DataGrid that has 3 columns, representing "timeSheetTitle", "hours", "rate", "totalExpense".
As you can see, the nested DataGrids are defined using the nextLevel property. The nextLevel property is an object with the following properties: https://reactdatagrid.com/api-reference/interfaces/GridOptions.html#nextLevel
The nextLevel property allows you to control if you want to add inner level summary footers.
As of this release, we do not support inner level filters. This is a very rarely used feature of our older products, and may be considered for future releases. Most customers prefer to use external filters for this functionality anyway, because inner level filters are not very intuitive, and they scroll out of view so they are hard to maintain context.
Sorting
As mentioned earlier, sorting Nested DataGrids works a little differently than sorting a grouped datagrid. Since there are multiple levels of columns, the sort order is defined by the column that is clicked. If the column is a top level column, then the sort order is applied to the top level data. If the column is an inner level column, then the sort order is applied to the inner level data. Lets see an example of this.
Filtering
As mentioned earlier, filtering Nested DataGrids works only filters the top level data. For filtering inner level data, you can use external filters. Lets see an example of this.
In the example above, we are using the globalFilterMatchFunction property of the createFilterBehavior function to filter the inner level data. The globalFilterMatchFunction property is a function that takes in a row item and returns a boolean. If the function returns true, then the row is included in the filtered data. If the function returns false, then the row is excluded from the filtered data. The recursive aspect of the search still applies, so if a child row is included in the filtered data, then the parent row is also included in the filtered data (otherwise the child row would not be visible!)
Floating Rows
Floating headers are useful to maintain context when scrolling through a large grid. We also have the ability to float any number of rows or columns. This lets you control the part of the viewport that you want to cover via floating headers, and you can also control the opactiy of the floating headers. Lets look at an example:
Notice that unlike the grouping grid, the default for the floating row is the header of the inner row. This is because the columns of the inner level do not often line up with the columns of the top level, with the floating header, its easier to see which column the inner row is associated with. However, you can change this behavior by setting the floatingRowsOptions property of the grid options. The floatingRowsOptions property is an object with these properties: useHeaderRowAsFloatingRow , maxFloatingCols and maxFloatingRows. The maxFloatingCols property is the number of columns that you want to float. The maxFloatingRows property is the number of rows that you want to float. It also has a useHeaderRowAsFloatingRow property that is a boolean. If this property is set to true, then the floating row will be the header row of the inner level. If this property is set to false, then the floating row will be the first row of the inner level. The default value for this property is true. Lets set useHeaderRowAsFloatingRow to false and see what happens: