Material-table: DetailPanel icons

[denmel02]

Hello,
I try to set custom icon and openIcon for detailPanel. Can you show me expample icon type React.ReactElement?

[AugustoCalaca]

Here are same examples.
https://material-table.com/#/docs/features/detail-panel.

[denmel02]

There are only cases when icon is string. I want to do something such as:
detailPanel={ [ {
icon; \ ....
} ] }
But first variant show error in CustomIcon: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of CustomIcon."
And second variant show typescript error : "ts(2322) The expected type comes from property 'detailPanel' which is declared here on type 'IntrinsicAttributes & MaterialTableProps & { className?: string | undefined; } & { children?: ReactNode; }''

[simromm]

In m-table-body-row.js

if (typeof panel === "function") {
                panel = panel(this.props.data);
              }

              const isOpen = (this.props.data.tableData.showDetailPanel || '').toString() === panel.render.toString();

              let iconButton = <this.props.icons.DetailPanel />;
              let animation = true;
              if (isOpen) {
                if (panel.openIcon) {
                  iconButton = <CustomIcon icon={panel.openIcon} />;
                  animation = false;
                }
                else if (panel.icon) {
                  iconButton = <CustomIcon icon={panel.icon} />;
                }
              }
              else if (panel.icon) {
                iconButton = <CustomIcon icon={panel.icon} />;
                animation = false;
              }

              iconButton = (
                <IconButton
                  size={this.getElementSize()}
                  key={"key-detail-panel-" + index}
                  style={{ transition: 'all ease 200ms', ...this.rotateIconStyle(animation && isOpen) }}
                  disabled={panel.disabled}
                  onClick={(event) => {
                    this.props.onToggleDetailPanel(this.props.path, panel.render);
                    event.stopPropagation();
                  }}
                >
                  {iconButton}
                </IconButton>);

              if (panel.tooltip) {
                iconButton = <Tooltip key={"key-detail-panel-" + index} title={panel.tooltip}>{iconButton}</Tooltip>;
              }

First the field iconProps of detailPanel described in the document seems not handled.

Second, it could be nice to accept a type component also for the openIcon and icon.

What do you think?
I'm also looking to custom the content of iconbutton, to display a counter with the icon.

[sebastiendan]

I made it work with icon: () => <Icon color="primary">list</Icon> panel property and by parsing the detailPanel array to any (as a temporary solution)

[ingvaldlorentzen]

You can achieve this by using a function like @sebastiendan mentioned.
Here's an example I use for hiding the detail column an parent objects when using tree data.

const detailColumn = [
    rowData => ({
      disabled: !rowData.parentID,
      icon: () => rowData.parentID ? <SomeIcon/> : <></>,
      openIcon: () => <SomeOpenIcon/>,
      render: rowData => <div>Nice details</div>,
      tooltip: rowData.parentID ? 'Cool Tooltip' : null,
    }),
  ]

[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.