Hierarchical data

[popapaul]

First of all I want to congratulate you for this data table you've made, it's looking great!

I want to ask if you have any plans of adding hierarchical data as a feature?

[tzezar]

Thank you! I appreciate your feedback. 😊

Regarding hierarchical data, could you clarify what you mean? It could refer to different features, such as:

1. Grouping (organizing rows under categories)
2. Row expanding (revealing additional details on demand)
3. Tree structure (nested rows, like a file explorer)
4. Parent-child relationships (e.g., orders and line items)
5. Drill-down data (loading deeper levels dynamically)
6. Multi-level grouping (e.g., category → subcategory → item)
7. Aggregated rows (summaries with expandable details)

Let me know which one you’re thinking of or if you had something else in mind!

[popapaul]

I'm interested in a tree structure.
In my use case, when the user expands a row, I'm dynamically fetching child rows.
This is easy implemented using the Row expanding feature and with a nested table.
Filtering and sorting options could also be passed down to the nested table, but it`s cumbersome, though it's not needed for my use case.

I want to implement drag and drop for sorting the rows and for nesting but I have a hard time doing this with multiple table instances.

The other option I can think of is when a row is expanded, the fetched child rows will be added to the initial data array right after their parent and then removed when parent row is no longer expanded.

I`m asking so I can decide to go ahead with one of those approaches or wait till is implemented.

[tzezar]

Sounds like an interesting use case! Official release is coming live soon. In the new version of the datagrid, a lot has changed—it has been completely rewritten from scratch, and the official release is coming soon. Besides many new features like column grouping and column header groups, there will also be a headless mode, similar to svelte-headless-table, but more flexible.

Currently, the row interface looks like this:

export type GridGroupRow<TOriginalRow> = {
   index: string;
   identifier: GridGroupRowIdentifier;
   groupKey: string;
   groupValue: any[];
   depth: number;
   children: GridRow<TOriginalRow>[];
   aggregations: Aggregation[];
   isExpanded: () => boolean;
   isGroupRow: () => this is GridGroupRow<TOriginalRow>;
};

export type GridBasicRow<TOriginalRow> = {
   identifier: GridRowIdentifier;
   index: string;
   parentIndex: string | null;
   original: TOriginalRow;
   isExpanded: () => boolean;
   isGroupRow: () => false
};

Will you work with server side data with server side logic for searching, filtering, grouping etc? It might be easier this way.

If you want to fetch only expanded row content then for your use case, I see two possible approaches:

• Working directly with OriginalRow – meaning operating on the base dataset without adding extra properties.

• Adding a children property to GridBasicRow – this way, rows could be fetched when expanding the parent and simply added to children. When collapsing, they wouldn’t need to be removed—just hidden. This is essentially similar to your second idea. There is createBasicRowIdentifier: (row: TOriginalRow) => (row as any).id function that is used for obtaining row ids, so you would be able to not to touch original rows when dragging rows. (However I am not sure if that solution would not break core features like client side sorting, grouping, filtering. Maybe GridGroupRow could be used in your use case? --see last screenshot-- Force group by originalRow.identifier, change some cell rendering logic with attached OriginalRow to GridGroupRow to render cells of parent row with fetchable children, internal logic might worked here.... idk). Sorting rows would be much easier in this case, but if you want to sync with the backend (moving rows between levels with an update in the database), it could get more complex and require additional API requests or further solutions. How large is your dataset? The new version, with virtualization, can handle 100k rows without issues with client side data.

Either way, this feature won’t be included in the beta version, but if you need something specific, let me know!

Row expanding preview:

Row expanding with row grouping preview:

Or something like this

[tzezar]

Hey @popapaul,

The official release is out! Would you like me to build an example for you?