@material-ui/core#TableRow TypeScript Examples

export function MetadataViewRow({ label, text, data }: MetadataViewRowProps) {
  if (text === undefined && data === undefined) {
    return null;
  }
  return (
    <TableRow>
      <TableCell style={{ width: 160 }}>
        <Typography variant="body1" noWrap style={{ fontWeight: 900 }}>
          {label}
        </Typography>
      </TableCell>
      <TableCell>
        <Typography variant="body1">
          {data ? JSON.stringify(data) : text}
        </Typography>
      </TableCell>
    </TableRow>
  );
}

TableExpandable: FC<TableExpandableProps<any>> = <T extends object>(props: TableExpandableProps<T>) => {
  const { isExpanded, renderExpandedComponent, row } = props;

  return (
    <TableRow>
      <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={row.cells.length}>
        <Collapse in={isExpanded} timeout='auto' unmountOnExit>
          <Box margin='0 auto'>{renderExpandedComponent?.(row.original, row.index)}</Box>
        </Collapse>
      </TableCell>
    </TableRow>
  );
}

DataTableRow = ({ className, columns, rowData }: TableRowProps) => {
  const { t } = useSafeTranslation();
  return (
    <TableRow>
      {columns.map(column => {
        const colValue = rowData ? rowData[column] : column;
        const formattedColValue = isNumber(colValue)
          ? getRoundedData(colValue, t)
          : t(colValue).toLocaleString();
        return (
          <TableCell className={className} key={column}>
            {' '}
            {formattedColValue}{' '}
          </TableCell>
        );
      })}
    </TableRow>
  );
}

TableHeader: FC<{
  data: TodosTableHeader[];
  headerStyle?: HeaderStyle;
}> = ({ data, headerStyle = {} }) => {
  return (
    <TableHead>
      <TableRow>
        {data.map((column, i) => (
          <TableCell
            key={i}
            align="left"
            style={{
              minWidth: column.minWidth,
              fontSize: '1.5rem',
              fontWeight: 600,
              height: '48px',
              background: 'black',
              color: 'white',
              ...headerStyle
            }}
          >
            {column.label}
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}

collapsedRowData = (dataObj: any, columnStyles: any, recordId: any) => {
  // if empty dataObj
  if (Object.keys(dataObj).length === 0) {
    return (
      <TableRow className={styles.CollapseTableRow}>
        <TableCell className={`${styles.TableCell} ${columnStyles ? columnStyles[1] : null}`}>
          <div>
            <p className={styles.TableText}>No data available</p>
          </div>
        </TableCell>
      </TableRow>
    );
  }

  const additionalRowInformation = Object.keys(dataObj).map((key, index) => {
    const rowIdentifier = `collapsedRowData-${recordId}-${index}`;

    return (
      <TableRow className={styles.CollapseTableRow} key={rowIdentifier}>
        <TableCell className={`${styles.TableCell} ${columnStyles ? columnStyles[0] : null}`}>
          <div>
            <div className={styles.LabelText}>{dataObj[key].label}</div>
          </div>
        </TableCell>
        <TableCell className={`${styles.TableCell} ${columnStyles ? columnStyles[1] : null}`}>
          <div>
            <p className={styles.TableText}>{dataObj[key].body}</p>
          </div>
        </TableCell>
        <TableCell className={`${styles.TableCell} ${columnStyles ? columnStyles[2] : null}`} />
        <TableCell className={`${styles.TableCell} ${columnStyles ? columnStyles[3] : null}`} />
      </TableRow>
    );
  });

  return additionalRowInformation;
}

PlaceHolder: FC<{
  placeHolder: string;
  colSpan: number;
  rowStyle?: RowStyle;
}> = ({ placeHolder, colSpan = 3, rowStyle = {} }) => {
  return (
    <TableRow hover>
      <TableCell colSpan={colSpan}>
        <div
          style={{
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
            fontSize: '1.5rem',
            fontWeight: 'bold',
            ...rowStyle
          }}
        >
          {placeHolder}
        </div>
      </TableCell>
    </TableRow>
  );
}

StepView = ({ step }: { step: Step }) => {
  return (
    <TableRow>
      <TableCell>
        <ListItemText
          primary={step.name}
          secondary={getElapsedTime(step.started_at, step.completed_at)}
        />
      </TableCell>
      <TableCell>
        <WorkflowRunStatus
          status={step.status.toLocaleUpperCase('en-US')}
          conclusion={step.conclusion?.toLocaleUpperCase('en-US')}
        />
      </TableCell>
    </TableRow>
  );
}

TableDetails = ({ table }: TableDetailsProps) => (
  <>
    <Typography variant="h3">{`${table?.table_name}`}</Typography>
    <br />
    <TableContainer component={StyledPaper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>
              <strong>Column</strong>
            </TableCell>
            <TableCell align="right">
              <strong>Type</strong>
            </TableCell>
            <TableCell align="right">
              <strong>Is Nullable?</strong>
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {table?.columns.map((row) => (
            <TableRow key={row.column_name}>
              <StyledCell key={row?.column_name}>{row?.column_name}</StyledCell>
              <StyledCell align="right">
                {`${row?.data_type}${
                  row?.character_maximum_length
                    ? `(${row.character_maximum_length})`
                    : ''
                }`}
              </StyledCell>
              <StyledCell align="right">{row?.is_nullable}</StyledCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  </>
)

PricingTable = (props: {
  totalUsers: number;
}) => {
  const classes = useStyles();
  const { hiddenPlatforms } = useContext(HiddenPlatformsContext);

  const data: Array<{
    platform: Platform,
    price: number,
  }> = Object.values(Platforms).map(platform => getPrice(platform, props.totalUsers)).sort((l, r) =>
    (hiddenPlatforms.has(r.platform.id) ? -1 : 1) - (hiddenPlatforms.has(l.platform.id) ? -1 : 1)
    || (r.price - l.price));

  return (
    <div className={classes.table}>
      <Table size='small'>
        <TableBody>
          {data.map(row => (
            <HoverArea disableHoverBelow={dontHoverBelow}>
              {(hoverAreaProps, isHovering, isHoverDisabled) => (
                <TableRow {...hoverAreaProps} key={row.platform.id} className={classNames(hiddenPlatforms.has(row.platform.id) && classes.hiddenPlatform)}>
                  <TableCell key='platformName' className={classes.pricingCell}>
                    <Brand platformId={row.platform.id} showLogo showCheckbox transparentControls={!(isHovering || isHoverDisabled)} />
                  </TableCell>
                  <TableCell key='price' className={classNames(classes.pricingCell, classes.pricingPriceCell)}>
                    <Price val={row.price} suffix={row.platform.id === PlatformUserVoice ? '+' : undefined} />
                    <ExternalLinkPlatform type='pricing' platform={row.platform} transparent={!(isHovering || isHoverDisabled)} />
                  </TableCell>
                </TableRow>
              )}
            </HoverArea>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

DesktopTransfersTable: React.FC<{ isInbound: boolean; data: RowData[]; network: Network }> =
  ({isInbound, data: rows, network}) => {
    return (
      <>
        <Table>
          <TableHead>
            <TableRow>
              {(isInbound ? inboundTitles : outboundTitles).map((title, i) => (
                <TableCell key={`tokentitle-${i}`}>{title}</TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row, i) => (
              <TableRow
                component={Link}
                key={`tokenrow-${i}`}
                href={`https://${
                  network === "mainnet" ? "" : networkNameMap[network] + "."
                }tzkt.io/${row.hash}`}
                target="_blank"
              >
                <TableCell>
                  <TokenSymbol>{row.token}</TokenSymbol>
                </TableCell>
                <TableCell>{row.date}</TableCell>
                <TableCell>{row.address}</TableCell>
                <TableCell>{row.amount}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </>
    );
  }

FeatureList = withStyles(styles, { withTheme: true })((props: WithStyles<typeof styles, true> & {
  planNames: string[],
  name: string,
  children?: any,
}) => {
  const theme = useTheme();
  const mdUp = useMediaQuery(theme.breakpoints.up('sm'));
  return (
    <div className={props.classes.box}>
      <Table
        size={mdUp ? 'medium' : 'small'}
      >
        <TableHead>
          <TableRow>
            <TableCell key='feature'><Typography variant='h6'>{props.name}</Typography></TableCell>
            {props.planNames.map(planName => (
              <TableCell key={planName}>{planName}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {props.children}
        </TableBody>
      </Table>
    </div>
  );
})

StyledTableRow = withStyles((theme: Theme) =>
  createStyles({
    root: {
      // '&:nth-of-type(odd)': {
      //   backgroundColor: theme.palette.action.hover,
      // },
      cursor: 'pointer',
      '&:hover': {
        backgroundColor: amber[200]
      }
    },
  }),
)(TableRow)

FeatureListItem = (props: {
  planContents: (boolean | React.ReactNode | string)[],
  name: string,
  helpText?: string
}) => {
  return (
    <TableRow key='name'>
      <TableCell key='feature'>
        {props.name}
        {props.helpText && (
          <>
            &nbsp;
            <HelpPopper description={props.helpText} />
          </>
        )}
      </TableCell>
      {props.planContents.map((content, index) => (
        <TableCell key={index}>
          {content === true
            ? (<CheckIcon fontSize='inherit' />)
            : content}
        </TableCell>
      ))}
    </TableRow>
  );
}

QuerySummary = ({ executionPlan }: QuerySummaryProps) => {
  const summaryData = {
    'Planning Time': executionPlan?.['Planning Time'],
    'Execution Time': executionPlan?.['Execution Time'],
  };

  if (!executionPlan) return null;
  return (
    <FlexChild>
      <Table size="small">
        <TableBody>
          <TableRow>
            {Object.entries(summaryData).map(([property, value]) => (
              <StyledTableCell align="center" key={property}>
                <strong>{`${property}: `}</strong>
                {value}
              </StyledTableCell>
            ))}
          </TableRow>
        </TableBody>
      </Table>
    </FlexChild>
  );
}

function OpenOrdersAccounts() {
  const styles = useStyles();
  const openOrders = useOpenOrders();
  const openOrdersEntries: Array<[PublicKey, OpenOrders[]]> = useMemo(() => {
    return Array.from(openOrders.entries()).map(([market, oo]) => [
      new PublicKey(market),
      oo,
    ]);
  }, [openOrders]);
  return (
    <TableContainer component={Paper} elevation={0}>
      <Table className={styles.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Market</TableCell>
            <TableCell align="center">Open Orders Account</TableCell>
            <TableCell align="center">Base Used</TableCell>
            <TableCell align="center">Base Free</TableCell>
            <TableCell align="center">Quote Used</TableCell>
            <TableCell align="center">Quote Free</TableCell>
            <TableCell align="center">Settle</TableCell>
            <TableCell align="center">Close</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {openOrdersEntries.map(([market, oos]) => {
            return (
              <OpenOrdersRow
                key={market.toString()}
                market={market}
                openOrders={oos}
              />
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

DesktopUpdatesTable: React.FC<{ data: RowData[] }> = ({ data }) => {
  return (
    <>
      <Table>
        <TableHead>
          <TableRow>
            {titles.map((title, i) => (
              <TableCell key={`updatestitle-${i}`}>{title}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row, i) => (
            <TableRow key={`updatesrow-${i}`}>
              <OverflowCell>{row.key.toUpperCase()}</OverflowCell>
              <OverflowCell>
                <ProposalTitle
                  proposalId={row.proposalId}
                  agoraPostId={row.agoraPostId}
                />
              </OverflowCell>
              <TableCell>{dayjs(row.lastUpdated).format("L")}</TableCell>
              <OverflowCell>{row.proposalId}</OverflowCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </>
  );
}

render(): JSX.Element {
        const state = this.props.state;

        return state.details && (
            <OverflowDiv>
                <Table>
                    <TableBody>
                        {Object.keys(state.details).map(fieldName => {
                            return (
                                <TableRow key={fieldName}>
                                    <FieldNameCell>{fieldName}</FieldNameCell>
                                    <FieldValueCell>{JSON.stringify(state.details[fieldName])}</FieldValueCell>
                                </TableRow>
                            );
                        })}
                    </TableBody>
                </Table>
            </OverflowDiv>
        );
    }

DesktopUsersTable: React.FC<{ data: RowData[] }> = ({ data }) => {
  return (
    <>
      <Table>
        <StyledTableHead>
          <StyledTableRow>
            <TableCell><TableText>Top Addresses</TableText></TableCell>
          </StyledTableRow>
          <TableRow>
            {titles.map((title, i) => (
              <TableCell key={`userstitle-${i}`}><TableText>{title}</TableText></TableCell>
            ))}
          </TableRow>
        </StyledTableHead>
        <TableBody>
          {data.map((row, i) => (
            <TableRow key={`usersrow-${i}`}>
              <OverflowCell>
                <UserBadge smallText={true} address={row.address} size={44} gap={16} />
              </OverflowCell>
              <TableCell>{row.votes}</TableCell>
              <TableCell>{row.availableStaked}</TableCell>
              <TableCell>{row.totalStaked}</TableCell>
              <TableCell>{row.proposalsVoted}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </>
  );
}

export function DialogBody() {
  const classes = useStyles();
  const { stats } = useGetStats();
  const { project } = useProjectContext();

  if (stats.error) {
    return (
      <Alert severity="error">Unexpected error: {stats.error.message}</Alert>
    );
  }

  if (stats.loading) {
    return <Progress />;
  }

  if (!stats.value) {
    return <Alert severity="error">Couldn't find any stats :(</Alert>;
  }

  const { allReleases, allTags } = stats.value;
  const { mappedReleases } = getMappedReleases({ allReleases, project });
  const { releaseStats } = getReleaseStats({
    mappedReleases,
    allTags,
    project,
  });

  return (
    <ReleaseStatsContext.Provider value={{ releaseStats }}>
      <Info />

      <TableContainer>
        <Table className={classes.table} size="small">
          <TableHead>
            <TableRow>
              <TableCell />
              <TableCell>Release</TableCell>
              <TableCell>Created at</TableCell>
              <TableCell># candidate patches</TableCell>
              <TableCell># release patches</TableCell>
            </TableRow>
          </TableHead>

          <TableBody>
            {Object.entries(releaseStats.releases).map(
              ([baseVersion, releaseStat], index) => {
                return (
                  <Row
                    key={`row-${index}`}
                    baseVersion={baseVersion}
                    releaseStat={releaseStat}
                  />
                );
              },
            )}
          </TableBody>
        </Table>

        {(releaseStats.unmappableTags.length > 0 ||
          releaseStats.unmatchedTags.length > 0 ||
          releaseStats.unmatchedReleases.length > 0) && <Warn />}
      </TableContainer>
    </ReleaseStatsContext.Provider>
  );
}

createRows = (
  data: any,
  columnStyles: any,
  showCheckbox?: boolean,
  collapseRow?: string,
  collapseOpen: boolean = false
) => {
  const createRow = (entry: any) => {
    let stylesIndex = -1;
    return Object.keys(entry).map((item: any) => {
      // let's not display recordId in the UI
      if (item === 'recordId' || item === 'translations' || item === 'id') {
        return null;
      }
      // maintain columnStyles index
      stylesIndex += 1;

      return (
        <TableCell
          key={item + entry.recordId}
          className={`${styles.TableCell} ${columnStyles ? columnStyles[stylesIndex] : null}`}
        >
          <div>{entry[item]}</div>
        </TableCell>
      );
    });
  };

  return data.map((entry: any) => {
    let batchAction = null;
    if (showCheckbox) {
      batchAction = <Checkbox />;
    }

    let dataObj: any;
    if (entry.translations) dataObj = JSON.parse(entry.translations);
    return (
      <React.Fragment key={entry.recordId}>
        <TableRow key={entry.recordId} className={styles.TableRow}>
          {batchAction}
          {createRow(entry)}
        </TableRow>
        {collapseOpen && dataObj && entry.id === collapseRow
          ? collapsedRowData(dataObj, columnStyles, entry.recordId)
          : null}
      </React.Fragment>
    );
  });
}

BuildWithStepsView = () => {
  // TODO: Add a test that react-router decodes this (even though `generatePath` doesn't encode it for you!)
  const { jobFullName, buildNumber } = useRouteRefParams(buildRouteRef);
  const classes = useStyles();

  const [{ value }] = useBuildWithSteps({ jobFullName, buildNumber });

  return (
    <div className={classes.root}>
      <Breadcrumbs aria-label="breadcrumb">
        {/* TODO: don't hardcode this link */}
        <Link to="../../..">Projects</Link>
        <Typography>Run</Typography>
      </Breadcrumbs>
      <Box m={2} />
      <TableContainer component={Paper} className={classes.table}>
        <Table>
          <TableBody>
            <TableRow>
              <TableCell>
                <Typography noWrap>Branch</Typography>
              </TableCell>
              <TableCell>{value?.source?.branchName}</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                <Typography noWrap>Message</Typography>
              </TableCell>
              <TableCell>{value?.source?.displayName}</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                <Typography noWrap>Commit ID</Typography>
              </TableCell>
              <TableCell>{value?.source?.commit?.hash}</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                <Typography noWrap>Status</Typography>
              </TableCell>
              <TableCell>
                <JenkinsRunStatus status={value?.status} />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                <Typography noWrap>Author</Typography>
              </TableCell>
              <TableCell>{value?.source?.author}</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                <Typography noWrap>Jenkins</Typography>
              </TableCell>
              <TableCell>
                <MaterialLink target="_blank" href={value?.url}>
                  View on Jenkins{' '}
                  <ExternalLinkIcon className={classes.externalLinkIcon} />
                </MaterialLink>
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                {/* TODO: be SCM agnostic */}
                <Typography noWrap>GitHub</Typography>
              </TableCell>
              <TableCell>
                <MaterialLink target="_blank" href={value?.source?.url}>
                  View on GitHub{' '}
                  <ExternalLinkIcon className={classes.externalLinkIcon} />
                </MaterialLink>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

TableHead: FC<FeTableTHeadProps<any>> = <T extends object>(props: FeTableTHeadProps<T>) => {
  const {
    headerGroups,
    onSortChange,
    onFilterChange,
    toggleAllRowsSelected,
    selectedFlatRows,
    isAllRowsSelected,
  } = props;
  const classes = useStyles();

  return (
    <MaterialTableHead className={classes.head}>
      {headerGroups.map((headerGroup) => (
        <TableRow {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map((c, index) => {
            const column = c as FeTableColumnProps<T>;
            if (column.id === 'fe-selection') {
              return (
                <TableCell {...column.getHeaderProps()}>
                  <Checkbox
                    className={classes.checkBox}
                    indeterminate={!isAllRowsSelected && (selectedFlatRows ?? []).length > 0}
                    checked={isAllRowsSelected}
                    onChange={() => toggleAllRowsSelected?.(!isAllRowsSelected)}
                  />
                </TableCell>
              );
            }
            const withExpander = headerGroup.headers[0].id === 'fe-expander';
            const tableCellProps = column.getHeaderProps(
              column.getSortByToggleProps((p: Partial<TableSortByToggleProps>) => ({
                ...p,
                onClick: column.canSort ? () => onSortChange?.(column) : undefined,
              }))
            );
            const minWidth = headerGroup.headers[0].minWidth || 0;
            const ownWidth = column.width || 0;
            const width = index === 1 && withExpander ? { width: Number(ownWidth) + minWidth, paddingLeft: 32 } : {};
            const cellStyle = { ...tableCellProps?.style, ...width };
            tableCellProps.className = classNames(tableCellProps.className, {
              [classes.firstHeadCell]: index === 0,
              [classes.expander]: index === 0 && withExpander,
            });
            return (
              <TableCell padding='default' {...tableCellProps} style={cellStyle}>
                <Box display='flex' alignItems='center' justifyContent='space-between' flexWrap='nowrap'>
                  <Box display='flex' flexGrow='1'>
                    {column.canSort ? (
                      <TableSortLabel
                        className='fe-sortLabel'
                        active={column.isSorted}
                        direction={column.isSortedDesc ? 'desc' : 'asc'}
                      >
                        {column.render('Header')}
                      </TableSortLabel>
                    ) : (
                      <>{column.render('Header')}</>
                    )}
                  </Box>
                  {column.canFilter && <TableFilterColumn column={column} onFilterChange={onFilterChange} />}
                </Box>
              </TableCell>
            );
          })}
        </TableRow>
      ))}
    </MaterialTableHead>
  );
}

render() {
    if (!this.props.isLoggedIn) {
      return (<ErrorMsg msg='You need to log in to see your balance' variant='info' />);
    }

    if (!this.props.transactions?.length) return null;

    var cumulativeBalance = this.props.balance || 0;
    return (
      <div className={this.props.className}>
        <PanelTitle text='Transaction history' />
        <div className={this.props.classes.transactionsTable}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell key='date'>Date</TableCell>
                <TableCell key='type'>Type</TableCell>
                <TableCell key='description'>Description</TableCell>
                <TableCell key='amount' align='right'>Amount</TableCell>
                <TableCell key='balance' align='right'>Account balance</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {this.props.credits !== undefined && this.props.balance !== undefined && this.props.transactions !== undefined && this.props.transactions.map(transaction => {
                const transactionBalance = cumulativeBalance;
                cumulativeBalance += transaction.amount;
                return (
                  <TableRow key={transaction.transactionId}>
                    <TableCell key='date'>
                      <Typography><TimeAgo date={transaction.created} /></Typography>
                    </TableCell>
                    <TableCell key='type'>
                      <Typography>{transaction.transactionType}</Typography>
                    </TableCell>
                    <TableCell key='description'>
                      {transaction.summary}
                      {transaction.transactionType === Client.TransactionType.Vote && transaction.targetId && (
                        <Button
                          component={Link}
                          to={preserveEmbed(`/post/${transaction.targetId}`)}
                        >
                          View
                        </Button>
                      )}
                    </TableCell>
                    <TableCell key='amount'>
                      <CreditView val={transaction.amount} credits={this.props.credits!} />
                    </TableCell>
                    <TableCell key='balance'>
                      <CreditView val={transactionBalance} credits={this.props.credits!} />
                    </TableCell>
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>
        </div>
        {this.props.getNextTransactions && (
          <Button style={{ margin: 'auto', display: 'block' }} onClick={() => this.props.getNextTransactions && this.props.getNextTransactions()}>
            Show more
          </Button>
        )}
      </div>
    );
  }

TooltippedTableRow = (props: TooltippedTableRowProps) => {
  // If the row displays Motes use the CSPR specific tooltip styling
  const isMotesValue = isCSPRValueByKey(props.data.key);

  return (
    <Tooltip
      title={props.data.tooltipContent}
      placement="top"
      classes={{
        tooltip: isMotesValue
          ? props.classes.csprToolTip
          : props.classes.tooltip
      }}
    >
      <TableRow>
        <TableCell style={{ fontWeight: 'bold' }}>{props.data.key}</TableCell>
        <TableCell align="right">
          {
            /**
             * Checks if the string represents a list so it can be displayed properly
             */
            Array.isArray(props.data.value) ? (
              <ul style={{ listStyleType: 'none' }}>
                {props.data.value.map((item: string) => {
                  const listItemData: SigningDataRow = {
                    key: props.data.key,
                    value: item,
                    tooltipContent: BlankTooltipContent
                  };
                  // Utilises the parseRow method to properly parse the inner value and then display it
                  return <TooltippedListItem data={parseRow(listItemData)} />;
                })}
              </ul>
            ) : (
              props.data.value
            )
          }
        </TableCell>
      </TableRow>
    </Tooltip>
  );
}

MTable = <T extends object>(props: Props<T>) => {
  const { instance, footerRows, ...rest } = props;
  const classes = useStyles();

  return (
    <Table {...instance.getTableProps} {...rest}>
      <TableHead classes={{ root: classes.head }}>
        {instance.headerGroups.map((group) => (
          <TableRow {...group.getHeaderGroupProps()} key={group.id}>
            {group.headers.map((column) => (
              <TableCell
                {...column.getHeaderProps()}
                key={column.id}
                classes={{ root: classes.cell }}
              >
                {column.render('Header')}
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableHead>
      <TableBody {...instance.getTableBodyProps()}>
        {instance.rows.map((row) => {
          instance.prepareRow(row);
          const { key, ...rest } = row.getRowProps();
          return (
            <React.Fragment key={key}>
              <TableRow {...rest}>
                {row.cells.map((cell) => (
                  <TableCell
                    {...cell.getCellProps()}
                    key={`${cell.row},${cell.column}`}
                    classes={{ root: classes.cell }}
                  >
                    {cell.render('Cell')}
                  </TableCell>
                ))}
              </TableRow>
            </React.Fragment>
          );
        })}
      </TableBody>
      {footerRows && <TableFooter>{footerRows}</TableFooter>}
    </Table>
  );
}

LanguageKeySelect = (props: {
  ns: Namespace;
  value: string;
  setValue: (value: string) => void;
}) => {
  const { i18n } = useTranslation(props.ns);
  const classes = useStyles();

  const [anchor, setAnchor] = useState<HTMLButtonElement>();

  const [fuse, setFuse] = useState<Fuse<SearchEntry>>();
  useEffect(() => {
    if (!anchor) return;
    const bundle = i18n.getResourceBundle(i18n.language, props.ns as string) as { [k: string]: string };
    const bundleArr: SearchEntry[] = Object.entries(bundle)
      .filter(([k, v]) => !k.includes('{{'))
      .map(([k, v]) => ({ k, v }));
    setFuse(new Fuse(bundleArr, {
      keys: ['k', 'v'],
    }));
  }, [anchor, props.ns, i18n.language]); // eslint-disable-line react-hooks/exhaustive-deps

  const results = fuse?.search(props.value || '', {
    limit: 5,
  });

  return (
    <IconButton
      aria-label='Select translated text'
      onClick={e => setAnchor(e.currentTarget)}
      color={i18n.exists(props.value) ? 'primary' : undefined}
    >
      <TranslateIcon fontSize='inherit' />
      <ClosablePopper
        anchorType='element'
        anchor={anchor}
        open={!!anchor}
        onClose={() => setAnchor(undefined)}
        placement='bottom-end'
        arrow
        clickAway
        closeButtonPosition='disable'
      >
        {!results?.length && (
          <div className={classes.labelMessage}>
            No translation found
          </div>
        )}
        <div className={classes.table}>
          <Table size='medium'>
            <TableBody>
              {results?.map(result => (
                <TableRow
                  key={result.item.k}
                  hover
                  selected={result.item.k === props.value}
                  onClick={() => {
                    props.setValue(result.item.k);
                    setAnchor(undefined);
                  }}
                >
                  <div className={classes.labelOptionContainer}>
                    {result.item.v}
                  </div>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </ClosablePopper>
    </IconButton>
  );
}

ProductAttributes: React.VFC<Props> = ({ product }) => (
  <Box sx={{ mt: 6 }}>
    <Typography gutterBottom variant="h3">
      Additional Information
    </Typography>
    <Table>
      <TableBody>
        {(product.__typename === 'SimpleProduct' || product.__typename === 'VariableProduct') && (
          <>
            {!isBlank(product.weight) && (
              <TableRow>
                <TableCell>Weight</TableCell>
                <TableCell>{product.weight} g</TableCell>
              </TableRow>
            )}
            {(!isBlank(product.length) || !isBlank(product.width) || isBlank(product.height)) && (
              <TableRow>
                <TableCell>Dimensions</TableCell>
                <TableCell>
                  {`${[product.length, product.width, product.height]
                    .filter((length) => !isBlank(length))
                    .join(' x ')} cm`}
                </TableCell>
              </TableRow>
            )}
          </>
        )}
        {(product.paMaterials?.nodes?.length ?? 0) > 0 && (
          <TableRow>
            <TableCell>Material</TableCell>
            <TableCell>
              {product.paMaterials?.nodes?.map((paMaterial) => paMaterial?.name)}
            </TableCell>
          </TableRow>
        )}
        {(product.paPaperWeights?.nodes?.length ?? 0) > 0 && (
          <TableRow>
            <TableCell>Paper Weight</TableCell>
            <TableCell>
              {product.paPaperWeights?.nodes?.map((paPaperWeight) => paPaperWeight?.name)}
            </TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  </Box>
)

renderRow(rowCells, key: string, index: number, total: number, onPageClick?: (path: ConfigEditor.Path) => void) {
    const allowReorder = !this.props.data.disableReordering && !this.props.hideReorder;
    return (
      <TableRow key={key}>
        {onPageClick && (
          <TableCell key={'more' + key} align='center' padding='checkbox'>
            <IconButton aria-label="More" onClick={() => {
              onPageClick([...this.props.data.path, index]);
            }}>
              <MoreIcon />
            </IconButton>
          </TableCell>
        )}
        {rowCells}
        <TableCell key={'action' + key} align='left' padding='checkbox'>
          <div style={{
            display: 'flex',
          }}>
            {allowReorder && (
              <div style={{
                display: 'flex',
                flexDirection: 'row',
              }}>
                <IconButton aria-label="Move up" className={(index === 0) ? this.props.classes.hidden : undefined} onClick={() => {
                  this.props.data.moveUp(index);
                }}>
                  <MoveUpIcon />
                </IconButton>
                <IconButton aria-label="Move down" className={(index === (total - 1)) ? this.props.classes.hidden : undefined} onClick={() => {
                  this.props.data.moveDown(index);
                }}>
                  <MoveDownIcon />
                </IconButton>
              </div>
            )}
            {!this.props.hideDelete && (
              <div style={{
                display: 'flex',
                flexDirection: allowReorder ? 'column' : 'row',
              }}>
                {/* TODO Duplication needs to regenerate ids, for now remove this functionality <IconButton aria-label="Duplicate" onClick={() => {
                  this.props.data.duplicate(index);
                }}>
                  import DuplicateIcon from '@material-ui/icons/FileCopyOutlined';
                  <DuplicateIcon />
                </IconButton> */}
                <IconButton aria-label="Delete" onClick={() => {
                  this.props.data.delete(index);
                }}>
                  <DeleteIcon />
                </IconButton>
              </div>
            )}
          </div>
        </TableCell>
      </TableRow>
    )
  }

DesktopBalancesTable: React.FC<TableProps> = ({
                                                      rows,
                                                      tezosBalance,
                                                      openTokenTransferModal,
                                                      openXTZTransferModal,
                                                      shouldDisable
                                                    }) => {
  return (
    <Table>
      <TableHead>
        <TableRow>
          {titles.map((title, i) => (
            <TableCell key={`tokentitle-${i}`}>{title}</TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>
            <TokenSymbol>XTZ</TokenSymbol>
          </TableCell>
          <TableCell>-</TableCell>
          <TableCell>{tezosBalance.toString()}</TableCell>
          <TableCell align="right">
            <SmallButton
              variant="contained"
              color="secondary"
              onClick={() => openXTZTransferModal()}
              disabled={shouldDisable}
            >
              Transfer
            </SmallButton>
          </TableCell>
        </TableRow>

        {rows.map((row, i) => (
          <TableRow key={`tokenrow-${i}`}>
            <TableCell>
              <TokenSymbol>{row.symbol}</TokenSymbol>
            </TableCell>
            <TableCell>{row.address}</TableCell>
            <TableCell>{row.amount}</TableCell>
            <TableCell align="right">
              {" "}
              <SmallButton
                variant="contained"
                color="secondary"
                onClick={() => openTokenTransferModal(row.address)}
                disabled={shouldDisable}
              >
                Transfer
              </SmallButton>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}