Row Data Source

Tree Row Data Source

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.

Basic Usage

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:

Tree Data Source Basic
TODO

The Tree Path

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.

Tree Data Source Path
TODO

Distinct Non-Adjacent Paths

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.

Tree Data Source Distinct Paths
TODO

Pinned Rows

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.

Tree Data Source Pinned Rows
TODO

Filter And Sort Date Converters

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.

Tree Data Source Date Conversion
TODO