The LyteNyte Grid tree data source enables you to represent hierarchical data while preserving all grid functionality, including sorting and filtering. Tree Data is particularly valuable for visualizing data with natural parent-child relationships, such as file directory structures.
Begin by importing the tree data source hook from the LyteNyte Grid package:
import { useTreeDataSource } from "@1771technologies/lytenyte-pro";
You can then use the data source returned by useTreeDataSource
when initializing your
grid state. Below is a minimal example:
The useTreeDataSource
hook requires several essential parameters:
pathFromData
: A callback that returns the tree path for a
given data item. Return an empty array for a root row.getDataForGroup
: A callback that provides data for a group row node. The data
source creates rows and uses this callback to determine the data associated with each group row.data
: The leaf tree data. LyteNyte uses this data and the pathFromData
callback to construct the tree.The most critical parameter is the pathFromData
callback, which determines how the tree
structure is generated from your raw data. This essentially functions as the grouping mechanism for the data source.
LyteNyte takes the path arrays returned by pathFromData
and joins them using a separator. The default
separator is /
, but you can specify a different value through the pathSeparator
property on the useTreeDataSourceHook
.
The path computed by the tree data source is used for row IDs and for grouping related rows.
By default, all rows with the same path are grouped together. However, it's sometimes beneficial
to treat non-adjacent identical paths as distinct entities. This means a grouping for a given path
is only created when the rows are contiguous. If the same path occurs but is separated by one or
more rows with different paths, a distinct path is created. To enable this feature, set the distinctNonAdjacentPaths
property to true
.
Like the client row data source, the tree data source
accepts topData
and bottomData
parameters to create rows pinned to the top
and bottom respectively. Pinned rows must be leaf rows and exist outside
the normal tree grouping structure.
The tree data source can sort and filter columns containing date values.
However, dates can be represented in many different formats. By default, LyteNyte
Grid assumes ISO format date strings for date values in columns. It converts
these values to JavaScript Date
objects when performing sorts or filters on
columns with date values.
The filterToDate
and sortToDate
properties on the useTreeDataSource
hook allow you to
provide custom callbacks to convert a column's date value to a JavaScript Date
object.