How to implement expand all, expand selected and collapse all

[RossVertizan]

We are having great success in using this component for developing a tabular display of data (obviously), it has almost everything we were looking for out of the box, and it worked the first time.

Our data rows have two levels of data beneath that can be expanded, and that also works nicely. However, we would like to implement some buttons that will allow us to fully expand the selected rows and another to collapse all expanded rows, we will also implement an expand all button, though this is clearly a simpler case of the expand selected.

I have downloaded and looked through the code. It is the first code I have looked at using the React memo method and the useState and useCallback. I see that onRowClicked, appears to toggle the appearance, but I don't see how.

How can we change the props to allow rows to be expanded or collapsed without clicking on them.

Thanks in advance for any time you take to look at this.

[jbetancur]

Thanks for the feedback! I'm glad it's working well for you. This is a great suggestion for improvement

I'm actually puzzled why I had not implemented an expand/collapse all feature when I built the expander functionality.

So, I would start by looking at: https://github.com/jbetancur/react-data-table-component/blob/d63520b623bda0c94a93b670cdf655e903ee3ea2/src/DataTable/DataTable.js#L283

Probably, you can just create a new componenr namedTableColExpander using similar to TableCellExpander that calls back and updates a new state allExpanded in DataTable:

Off the top of my head, you would just need to change line 283 in DataTable to:

const defaultExpanded = row[defaultExpandedField] || allExpanded;

Just be careful that the defaultExpandedField feature doesn't break.

I'd be happy to get this into a 3.5.0 later this week, but if you want to take a stab at a PR I'm grateful for the contribution.

[thereactgirl]

Has this feature been added yet?

[jbetancur]

Not yet as I have not had the time, but I have this feature at the top pf my priority list. I wish it was easy, but this is going to require refactoring some things internally with how expandable row state is handled.

[glaucoheitor]

With the new update, is there any update on this feature?

[luciano1997]

is there currently a solution?

[mostafashabanelbanna]

i still want to expand the current row and collapse the other expanded one, is there's a way to do so?

[Matec12]

i still want to expand the current row and collapse the other expanded one, is there's a way to do so?

yes.

You can do this by leveraging on these props; the expandableRowExpanded which tracks the current row that is expanded. It takes a callback that you can use to compare to a state that you set in the onRowExpandToggled and onRowClicked prop.

` const [currentRow, setCurrentRow] = useState(null);

      <DataTable
        expandableRows
        expandableRowExpanded={(row) => (row === currentRow)}
        expandOnRowClicked
        onRowClicked={(row) => setCurrentRow(row)}
        expandableRowsComponent={<ExpandableTable />}
        onRowExpandToggled={(bool, row) => setCurrentRow(row)}
        data={filteredData}
     />`