How to keep a expandable row expanded on page load in Reactjs DataTable using react-data-table-component

Question

<DataTable
width={this.width}
columns={this.getSectionColumns()}
data={this.state.listPolicy}
striped={true}
highlightOnHover={true}
pointerOnHover={false}//SJ -13/07/2020- To remove pointer (hand icon from row items)
noHeader={true}
className={'tableEmployee'}
expandableRows
noDataComponent={this.state.loading ? '' : 'There are no records to display.'}
       
progressComponent={<BallTriangleProgressComponent />}
progressPending={this.state.loading}
expandableRowsComponent={
<SubCategoryTable
isAdminMode={this.props.isAdminMode}
isManagerMode={this.props.isManagerMode}
sectionID={this.props.sectionID}
onSavePolicySubCategory={this.onSavePolicySubCategory}
onUpdatePolicySubCategory={this.onUpdatePolicySubCategory}
onUpdateAlert={this.onUpdatePolicyAlert}
/>
}

/>

After editing or adding content into the SubCategoryTable, the page refreshes or reloads to bind the new data to the table. so all the rows collapse. is there anyway to prevent the expanded row from collapsing?

Answer 1

Just add "expandableRowExpanded" prop and set it as expandableRowExpanded={() => true}

In your case

<DataTable
...
expandableRowExpanded={() => true}
...
/>

It sets all rows expanded by default. For further reference, visit here