Remove detailPanel based in condition causes padding

Question

Everyone, I'm trying to add detailPanel based in a condition, it leaves a space when I hide it like this Link

And This Code works fine when I provide detail panel

get rowDetailsPanel() {
const { detailPanel, classes } = this.props;
// @Workarround To Hide Details Panel In Case There is No Details Panels Provided
return [
  {
    tooltip: 'Show Name',
    disabled: !detailPanel,
    icon: () => <ChevronRightIcon className={!detailPanel && classes.displayNone}/>,
    render: rowData => detailPanel(rowData)
  },
];

}

Link for working detailPanel,

So what I'm trying to do is when I hide the detailPanel, I want to delete the whole column

Any clue will be appreciated

Answer 1

This should work:

get rowDetailsPanel() {
const { detailPanel, classes } = this.props;
// @Workarround To Hide Details Panel In Case There is No Details Panels Provided
return detailPanel ? [
  {
    tooltip: 'Show Name',
    disabled: !detailPanel,
    icon: () => <ChevronRightIcon className={!detailPanel && classes.displayNone}/>,
    render: rowData => detailPanel(rowData)
  },
] : undefined;