How to expand/collapse row details?

Question

How can I implement row details and expanding/collapsing of custom details component using react-data-grid?

I have table of users and I want to be able to see user details after click/double click on the user row. Something like this: http://demos.telerik.com/kendo-ui/grid/detailtemplate . It is possible using this component?

Are you using Bootstrap? Look into [`accordion toggling`](http://getbootstrap.com/javascript/#collapse-example-accordion) if so. — glhrmv, Jun 09 '17 at 14:25
Well, not, I am not using bootstrap. But I can do sth like that accordion by myself, but how it will help me? How can I plug in it into the grid? As row custom renderer? Using `rowRenderer` and some events to expand/collapse details component? Like that: https://jsfiddle.net/f6mbnb8z/281/ ? — kzg, Jun 09 '17 at 14:38

score 1 · Answer 1 · answered Jan 25 '18 at 07:19

There is an example for React similar to the jquery version of the Kendo grid. The idea is that you can now use React Components for the Details. For example you may place a another grid into the template Grid to get hierarchy.

class DetailComponent extends GridDetailRow {
render() {
    return (
        <Grid data={this.props.dataItem.details}>
        </Grid>
    );
}
}
// ...
// ...
 <Grid
       detail={DetailComponent}
       expandField="expanded"
       expandChange={this.expandChange}
 >

score 0 · Answer 2 · answered Jun 12 '17 at 08:39

this is one of the maintainers of react-data-grid.

We consider the Kendo example to represent 2 different features:-

the ability to nest data in an expandable tree view
the ability to render any component (e.g. a sub-grid) as that child view

At the moment, we only have support for the former (see http://adazzle.github.io/react-data-grid/examples.html#/tree-view)

Nested Grids is something that is requested often, but unfortunately for now we do not currently support it. However, this may change in future.

HTH @jpdriver

has support for rendering a sub grid been added yet? – Seephor Mar 02 '20 at 04:40 — Seephor, Mar 02 '20 at 04:40

score -1 · Answer 3 · answered Jun 09 '17 at 16:16

There are many ways to do, but the simplest maybe you can set the state of the component with the key of the cell clicked, and creating the component in a function, pass the value if should be collapsed or not, and return the collapsed or not component of that cell and render it.

How to expand/collapse row details?

3 Answers3