Tree Data Grids
Summary
- AdapTable supports AG Grid Tree View
- Styling, Filtering, Sorting and Searching are all available when using Tree Data
AG Grid Tree Data views are typically used for showing hierarchical data, e.g. a Company Organisation chart or a list of Folder / File contents.
Unlike Master Detail Grids which show a different grid when you expand to see children, Tree Data views show the same set of columns when a row is expanded.
Note
- Tree Data Grids also differ to Row Grouping because the top row in each 'Group' is a 'real' record
- i.e. it is not merely aggregated data (though it can show agg data as in the
SizeColumn in the demo below)
AdapTable fully supports using Tree Data - but at present it does not provide additional functionality.
Caution
- Tree Data contains some important restrictions - e.g. no Row Grouping or Pivoting is possible
- Only use Tree Data Views it if your data is strictly hierarchical and the functionality it provides is vital
Formatting
Column Formatting and Styling works normally with Tree Grids.
- In this example (and all the ones below) a list of files from the Github React repo are loaded and shown as Tree Data
- We have aplied 2 Format Column Conditions:
- for the whole row where
PathColumn contains the word "runtime" - for the
SizeColumn where its greater than 1000
- for the whole row where
Searching
Quick Search works normally in Tree Data Grids - including the generated "key" column.
- In this example we search on 'react-server' and we see results throughout grid, including the "key" column
Filtering
Column Filters also work normally in Tree Data Grids.
AdapTable will automatically make the "Tree" column use an In Filter, with a Tree-like structure.
- In this example we provide 2 Column Filters:
- the
Pathcolumn for any cell that contains the text "runtime" - the
Sizecolumn for values less than 400
- the
- Note: the
Namecolumn (the "Tree" column) defaults to anInFilter with the data presented in Tree-based format
Pinning
Column Pinning works normally with Tree Grids.
Hint
To pin the "key" column, use its autogenerated Id of "ag-Grid-AutoColumn" in the Layout
- In this example we have pinned the "key" column (with an Id of "ag-Grid-AutoColumn") to the left
Sizing
Column Sizing works normally with Tree Grids.
Hint
To set the size of the "key" column, use its autogenerated Id of "ag-Grid-AutoColumn" in the Layout
- In this example we have sized the "key" column (with an Id of "ag-Grid-AutoColumn") to be 300 pixels
- We have sized the other columns also (by using their ColumnIds)
Sorting
Column Sorting works normally with Tree Grids.
Hint
To sort the "key" column, use its autogenerated Id of "ag-Grid-AutoColumn" in the Layout
- In this example we have sorted the "key" column (with an Id of "ag-Grid-AutoColumn") in descending order