question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

setState in selectRow.onSelect will break the row expand

See original GitHub issue

Not sure if I missed something in the docs, but my rows are only expanding when the ExpansionHeaderCell is clicked. When inspecting with my React dev tools, I set my props expanded: true and it only changes the + to -, without expanding the data. It renders fine when the header is clicked. Not sure if I’m just missing a prop somewhere?

const columns = [
      {
        dataField: "jobOrderNumber",
        text: "Job #"
      },
      {
        dataField: "profitCenter",
        text: "Profit Center"
      },
      {
        dataField: "customer",
        text: "Customer"
      },
      {
        dataField: "year",
        text: "Year"
      },
      {
        dataField: "make",
        text: "Make"
      },
      {
        dataField: "model",
        text: "Model"
      }
    ];

    const selectRow = {
      mode: "radio",
      clickToSelect: true,
      selected: [this.state.jobOrderValue],
      clickToExpand: true,
      onSelect: (row, isSelect, selected, e) => {
        this.handleOnSelect(row, isSelect, selected, e);
      }
    };
    
    const expandRow = {
      renderer: row => (
        <div>
          <p>{`This Expand row is belong to rowKey ${row.jobOrderNumber}`}</p>
          <p>You can render anything here, also you can add additional data on every row object</p>
          <p>expandRow.renderer callback will pass the origin row object to you</p>         
        </div>
      ),
      showExpandColumn: true
      // expandByColumnOnly: true
    }

<BootstrapTable
	keyField={"jobOrderNumber"}
	data={this.state.matchedJobs}
	columns={columns}
	loading={true}
	bootstrap4={true}
	id={"MultipleJobsTable"}
	hover={true}
        selectRow={selectRow}
       expandRow={ expandRow }
/>

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:17 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
AllenFangcommented, Nov 4, 2018

RELEASE NOTE

now you can call setState in selectRow.onSelect and we support a feature that you can reject the selection, please check this and here is example

1reaction
LuisGSandovalcommented, Apr 23, 2019

Tried to work my way around it using the events.onClick option in the columns object, but it also breaks the expand.

Please look it it 😢 we would really apreciated

Read more comments on GitHub >

github_iconTop Results From Across the Web

useState Hook trigger selected rows to disappear (using react ...
When I remove the setState code from the select event handlers, I'm able to see the row selection... Below my code: Show code...
Read more >
View Raw - UNPKG
... table so that `react-bootstrap-table` will not update table state according to previous and next props. * Header Group broken when Row Expand...
Read more >
AllenFang/react-bootstrap-table - Gitter
Hello. I have run into a problem regarding the sorting. Initially I see two arrows, desc/asc. However when I click one of them, ......
Read more >
react-bootstrap-table-tests.tsx - GerritHub.io
SelectRow, ... return '<i class="glyphicon glyphicon-usd"></i> ' + cell; ... function enumFormatter(cell: any, row: any, enumObject: any, rowIndex: number) ...
Read more >
General Props | Docs and API Reference - React Data Grid
If true , will make the first row of the <ReactDataGrid /> active when the ... to expand a certain column on the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found