React-table: Pivoting expansion rows values

Created on 28 Mar 2018 · 4Comments · Source: tannerlinsley/react-table

Hey guys, and thanks for an awesome package!

I'm experiencing issues with pivoting. When I expand a pivoted row, value of that row corresponding to the pivoted column is not being shown, and an empty cell is being rendered for every row in the expansion (see the picture attached). Is there a way to make the pivot value visible in every row in the expansion?

Thanks in advance!
screenshot_20180330_172643

Source

tigran-sedrakyan

👍3

Most helpful comment

I've recently experienced the same problem. This is probably due to this code fragment: https://github.com/react-tools/react-table/blob/8bd3daafcb2c311fa959f5d9440ee275be2841fe/src/index.js#L653-L681
(especially L680)

If I understand this correctly, it means that the cells under pivot cell are automatically hidden and you can't configure that. A workaround for this is overriding Cell property of the column and identify a property that is different for parent and child rows, and then for that case set pivoted = false for the cell (so that L680 doesn't set it to null). This is a bit hacky, but will work for now.

Example:

Cell: cellData => {
  if (cellData.original) {
    // This is a child cell
    // Set pivoted = false to workaround hiding the cell, and return a custom value
    cellData.pivoted = false;
    return cellData.original.otherValue;
  } else {
    // This is a parent cell
    // Not sure if this return here even matters, but I've put it for clarity's sake
    return cellData.value;
  }
}

EDIT: I also see now that there's also this cellData.groupedByPivot property, which seems to fit the condition better than relying on cellData.original.

pnaw94 on 11 Apr 2018

👍4 🎉3

All 4 comments

Example:

Cell: cellData => {
  if (cellData.original) {
    // This is a child cell
    // Set pivoted = false to workaround hiding the cell, and return a custom value
    cellData.pivoted = false;
    return cellData.original.otherValue;
  } else {
    // This is a parent cell
    // Not sure if this return here even matters, but I've put it for clarity's sake
    return cellData.value;
  }
}

EDIT: I also see now that there's also this cellData.groupedByPivot property, which seems to fit the condition better than relying on cellData.original.

pnaw94 on 11 Apr 2018

👍4 🎉3

Thanks, works just fine!

tigran-sedrakyan on 11 Apr 2018

I strongly recommend you test this in as many possible scenarios as you can before using it in Production. The solution is changing internal values generated by ReactTable which may be required for other functionality.