CODEWITHSUNDEEP
reactjsreact-table
Mulli
Mulli

Reputation: 1708

How to get row number of "parent" table in React-table from another react table in sub component?

I am using react-table with "parent" table that has sub component with another react table.

I need to use the row number of the parent in cell editing of the inner table.

I am trying to generate a new prop that will deliver the row.index value of the parent, as in parentRow = {row.index} below. But I fail to pass the row.index value.

In short: How to pass row.index of parent to react table in sub component?

Any help is appreciated.

      <ReactTable
          data={this.props.data}
          columns = {this.WP2columns}
          pageSize={this.props.data.length+1}
          showPagination={false}
          className="-striped -highlight"
          SubComponent={row => {
            return (
              <div style={{ padding: "0 20px" }}>
                {console.log("WP2 SUBTABLE row=", row) }
                <ReactTable
                  data = {row.original.familywp_goal_tasklist}
                  columns={this.subcolumns}
                  parentRow = {row.index}
                  defaultPageSize={3}
                  showPagination={false}
                />
              </div>
            )
          }}
        />

Upvotes: 1

Views: 3887

Answers (1)

arsydb
arsydb

Reputation: 36

In SubComponent use resolveData prop to pass parent row index.

      <ReactTable
          data={this.props.data}
          columns = {this.WP2columns}
          pageSize={this.props.data.length+1}
          showPagination={false}
          className="-striped -highlight"
          SubComponent={row => {
            return (
              <div style={{ padding: "0 20px" }}>
                <ReactTable
                  data = {row.original.familywp_goal_tasklist}
                  resolveData={data => data.map(d => {
                    return {
                      ...d,
                      parentRow: row.index
                    }
                  })}
                  columns={this.subcolumns}
                  defaultPageSize={3}
                  showPagination={false}
                />
              </div>
            )
          }}
        />

Now in the cell editing parameter you will have original.parentRow prop.

Upvotes: 2

Related Questions