<StyledExtendedNodeTable
  components={{
    Action: renderAction,
  }}
  data={detailedData.data}
  columns={detailedData.columns}
  options={{
    toolbar: true,
    search: false,
    showTitle: false,
    filtering: true,
    actionsColumnIndex: -1,
  }}
  actions={
    detailedData.data.length !== 0
      ? [
          {
            icon: () => <SaveAltIcon />,
            tooltip: 'Export',
            isFreeAction: true,
            onClick: onOpenExportMenu,
          },
          {
            icon: () => <ShowChartIcon />,
            tooltip: 'Show Chart',
            onClick: (event, rowData) => {
              console.log('Show Chart');
              return props.onRowExtendedNodeClick;
            },
          },
          {
            icon: 'download',
            onClick: (event, rowData) => {
              event.preventDefault();
              props.getProcessedFile({
                id: rowData.id,
                path: rowData.source,
              });
            },
          },
        ]
      : []
  }
/>

const renderAction = (p: any) => {
  switch (p.action.icon) {
    case 'download':
      console.log('FILE', p.data.file);
      return (
        <DownloadButton
          onClick={event => p.action.onClick(event, p.data)}
          downloadData={{
            fileName: `file`,
            type:
              'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
            contentBase64: p.data.file,
          }}
          isLoading={p.data.isFileLoading}
        />
      );
    default:
      return <MTableAction {...p} />;
  }
};