Material-table: Is it possible to remove the column with the expand icon when using detail panels?

[nataliepatton13]

I'm trying to create expandable rows that show the detail panel once the user clicks on the row. I'd like to be able to hide the first column that contains the expand icon though. Is that already an available feature or do I need to override the Row component?

[conerye]

I would like to know the same! @nataliepatton13 how do you override the Row component?

[qweluke]

same here - @mbrn we need your help here ;-)

[edit]

For now I've used css to hide button, maybe there is a better way...

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    wrapper: {
      '& table': {
        width: '98%',
        margin: '0 auto',
        '& td:first-child': {
          '& button': {
            visibility: 'hidden',
          },
        },
      },
    },
  })
);

const Demo = () => {
  const intl = useIntl();
  const classes = useStyles();
  const { eventId, campaignId } = useParams<{ eventId: string; campaignId: string }>();
  const affiliateMembers = useMembers(campaignId);

  if (affiliateMembers === undefined || get(affiliateMembers, 'isFetching')) {
    return <SkeletonTableLoader rows={8} />;
  }

  return (
    <div className={classes.wrapper}>
      <MaterialTable
        columns={[ ... ]}
        data={get(affiliateMembers, 'data.data', {})}
        detailPanel={[{ render: rowData => <RowDetails data={rowData} /> }]}
      />
    </div>
  );
};

export default Demo;

[rocketkittens]

Using the render method to display detailPanel, return null to the icon prop: icon: () => null

[christianfuerst]

Removing the icon with icon prop icon: () => null work but only solves half of the problem in my case. The column for the removed expander is still there.

Another prop for enabling / disabling the whole expander column would be a nice addition.

[nataliepatton13]

@christianfuerst I ended up having to override the Row component in order to remove the expander column. I essentially just copied and pasted the existing MTableBodyRow component and passed in an additional prop which I called "hideDetailColumn" to hide the expander column. Definitely not the best solution unfortunately but it works.

Here's my code to do that in my row component that I created:

    // Lastly we add detail panel icon
    if (this.props.detailPanel && !this.props.hideDetailColumn) {
      if (this.props.options.detailPanelColumnAlignment === "right") {
        renderColumns.push(this.renderDetailPanelColumn());
      } else {
        renderColumns.splice(0, 0, this.renderDetailPanelColumn());
      }
    }

[Dagas16]

Any updates to this?

[brody-ly]

@Dagas16 I have a current workaround to this issue that builds upon what @nataliepatton13 suggested. Instead of copying and pasting the existing MTableBodyRow component, you can use inheritance and only override the function you need; In this instance it is the renderDetailPanelColumn(). When you do this you also have access to the props passed to the table and can update the renderDetailPanelColumn() accordingly, i.e. passing custom props....

Here is a snippet of what I mean,

CustomMTableBodyRow & CustomMTableHeader

import { MTableBodyRow } from "material-table";
import { MTableHeader } from "material-table/dist/components/m-table-header";
import withStyles from "@material-ui/core/styles/withStyles";

class CustomMTableBodyRow extends MTableBodyRow {
    constructor(props) {
        super(props);
    }

    renderDetailPanelColumn() {
        if (this.props.hideDetailPanelColumn)
            return null;
        return super.renderDetailPanelColumn();
    }
}

class _CustomMTableHeader extends MTableHeader {
    constructor(props) {
        super(props);
    }

    renderDetailPanelColumnCell() {
        if (this.props.hideDetailPanelColumn)
            return null;
        return super.renderDetailPanelColumnCell();
    }
}

export const styles = theme => ({
    header: {
        position: 'sticky',
        top: 0,
        zIndex: 10,
        backgroundColor: theme.palette.background.paper, // Change according to theme,
    }
});


const CustomMTableHeader = withStyles(styles)(_CustomMTableHeader);
export { CustomMTableBodyRow, CustomMTableHeader };

Table - note I had to wrap Material table around a component to pass custom props, it seemed like material table omitted additional props

const Table = (props) => {
  const customMaterialProps = {
    hideDetailPanelColumn: props.hideDetailPanelColumn
  };

  return (
    <MaterialTable components={
      {
        Row: props => <CustomMTableBodyRow {...customMaterialProps} {...props} />,
        Header: props => <CustomMTableHeader {...customMaterialProps} {...props} />
      }
    }
      icons={tableIcons} {...props} />
  );
};

Usage example
<Table columns={tableColumn} data={tableData} tableRef={tableRef} hideDetailPanelColumn={true} detailPanel={[ { tooltip: 'My custom component', icon: () => <></>, render: rowData => <span>hi</span> }] } />

[Leocete]

@nataliepatton13, after checking a Material-Table source code I've found a quite simple workaround:
You can add detailPanelColumnStyle: { display: 'none'} property to the table options

In combination with

detailPanel={[
  {
    icon: () => null,
    render: detailPanelComponent
  }
]}

it will do the job :)

[sanathkumarx]

One more thing to keep in mind is that if you have grouping enabled for some column that also tends to add some width. You can remove this by setting {width: "1%"} in the grouped columns properties.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.