@material-ui/core#TableBody TypeScript Examples

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>
  );
})

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>
    </>
  );
}

ModRowSection: React.FunctionComponent<Props> = ({
  mods,
  title,
  highlighted,
}) => {
  const styles = useStyles();

  return mods.length > 0 ? (
    <div className={styles.wrapper}>
      <TableContainer
        component={Paper}
        className={highlighted ? styles.required : ''}
      >
        <Table className={styles.modsTable} size="small">
          <ModTableHead title={title} />
          <TableBody>
            {mods.map((mod: Mod) => (
              <ModTableRow mod={mod} key={mod.uniqueName} />
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  ) : (
    <></>
  );
}

VotesTable: React.FC<{ data: RowData[] }> = ({data}) => {
  const theme = useTheme();
  const isSmall = useMediaQuery(theme.breakpoints.down("sm"))

  return (
    <>
      <Table>
        <TableHead>
          <TableRow>
            {titles.map((title, i) => (
              <TableCell key={`votestitle-${i}`}>{title}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row, i) => (
            <TableRow key={`votesrow-${i}`}>
              <TableCell>{isSmall ? toShortAddress(row.address) : row.address}</TableCell>
              <TableCell>{row.votes}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </>
  );
}

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>
  </>
)

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>
      </>
    );
  }

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>
  );
}

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>
    </>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

CartSummary: React.VFC<Props> = ({ cart }) => {
  const styles = useStyles();

  return (
    <Paper>
      <Box sx={{ p: 3 }}>
        <Typography gutterBottom variant="h4">
          Cart summary
        </Typography>
        <Table className={styles.table}>
          <TableBody>
            {cart.contents?.nodes?.map(
              (item) =>
                item != null && (
                  <TableRow key={item.key} className={styles.tableRow}>
                    <TableCell>
                      <Image
                        className={styles.image}
                        height={80}
                        loading="lazy"
                        mediaItem={item.product?.node?.image}
                        width={64}
                      />
                    </TableCell>
                    <TableCell>{item.product?.node?.name}</TableCell>
                    <TableCell>
                      <Price>{item.subtotal}</Price>
                    </TableCell>
                  </TableRow>
                ),
            )}
            <TableRow className={styles.tableRow}>
              <TableCell className={styles.total} colSpan={2}>
                Subtotal
              </TableCell>
              <TableCell className={styles.total}>
                <Price>{cart.subtotal}</Price>
              </TableCell>
            </TableRow>
            <TableRow className={styles.tableRow}>
              <TableCell className={styles.total} colSpan={2}>
                Shipping
              </TableCell>
              <TableCell className={styles.total}>
                <Price>
                  {
                    cart.availableShippingMethods?.[0]?.rates?.find(
                      (rate) => rate != null && cart.chosenShippingMethods?.includes(rate.id),
                    )?.cost
                  }
                </Price>
              </TableCell>
            </TableRow>
            {(cart.appliedCoupons?.length ?? 0) > 0 && (
              <TableRow className={styles.tableRow}>
                <TableCell className={styles.total} colSpan={2}>
                  Discount
                </TableCell>
                <TableCell className={styles.total}>
                  <Price color="error">{`-${cart.discountTotal}`}</Price>
                </TableCell>
              </TableRow>
            )}
            <TableRow className={styles.tableRow}>
              <TableCell className={styles.total} colSpan={2}>
                Total
              </TableCell>
              <TableCell className={styles.total}>
                <Price>{cart.total}</Price>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Box>
    </Paper>
  );
}

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>
  );
}

DesktopRegistryTable: React.FC<Props> = ({ data }) => {
  return (
    <Table>
      <TableHead>
        <TableRow>
          {titles.map((title, i) => (
            <TableCell key={`registrytitle-${i}`}>{title}</TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {data.map((rowData, i) => (
          <TableRow
            key={`registryrow-${i}`}
            onClick={() => rowData.onClickItem(rowData.row)}
          >
            <TableCell>{rowData.row.key.toUpperCase()}</TableCell>
            <OverflowCell>{rowData.row.value}</OverflowCell>
            <TableCell>
              {rowData.row.lastUpdated
                ? dayjs(rowData.row.lastUpdated).format("L")
                : "-"}
            </TableCell>
            <TableCell align="right">
              <Button
                variant="contained"
                color="secondary"
                onClick={(e) => {
                  e.stopPropagation();
                  rowData.row.onClick();
                }}
              >
                Edit
              </Button>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

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>
  );
}

export function ObjectParameters({
    obj,
    diff,
    history,
}: {
    obj: ExtendedTlObject
    diff?: boolean
    history?: boolean
}): JSX.Element {
    const classes = useStyles()

    return (
        <Table className={classes.table}>
            <TableHead>
                <TableRow>
                    {diff && <TableCell>Change</TableCell>}
                    <TableCell>Name</TableCell>
                    <TableCell>Type</TableCell>
                    <TableCell>Description</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {obj.arguments.map((arg) => (
                    <TableRow key={arg.name} className={arg.className}>
                        {diff && (
                            <TableCell
                                className={clsx(
                                    classes.changed,
                                    classes[arg.changed!]
                                )}
                            >
                                {arg.changed}
                            </TableCell>
                        )}
                        <TableCell>
                            <code
                                className={
                                    !arg.optional &&
                                    arg.type !== '$FlagsBitField'
                                        ? classes.bold
                                        : undefined
                                }
                            >
                                {arg.name}
                            </code>
                        </TableCell>
                        <TableCell className={classes.mono}>
                            {arg.optional ? (
                                <span title={arg.predicate}>
                                    {LinkToTl(arg.type, history)}?
                                </span>
                            ) : (
                                LinkToTl(arg.type, history)
                            )}
                        </TableCell>
                        <Description
                            description={arg.description}
                            component={TableCell}
                        />
                    </TableRow>
                ))}
            </TableBody>
        </Table>
    )
}

CallStatusTable: React.FC<CallStatusTableProps> = ({
  recipients,
  meta,
  loading,
  pageCount,
  rowsPerPage,
  setRowsPerPage,
  currentPage,
  setCurrentPage,
}) => {
  const rowsPerPageOptions = useRowsPerPageOptions(meta?.total);

  const onChangeRowsPerPage = useCallback(
    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
      const rows = parseInt(event.target.value, 10);
      setRowsPerPage(rows);
      setCurrentPage(0);
    },
    [setRowsPerPage, setCurrentPage]
  );

  const onChangePagination = useCallback(
    (event: unknown, value: number) => {
      setCurrentPage(value);
    },
    [setCurrentPage]
  );

  return (
    <>
      {recipients && recipients.length > 0 && (
        <>
          <TableContainer
            component={Paper}
            style={{
              marginBottom: loading ? '0' : '4px',
            }}
          >
            <Table
              aria-label="Notification recipients calls details and statuses"
              size="small"
              data-testid={RECIPIENTS_TABLE_TEST_ID}
            >
              <TableHead>
                <TableRow>
                  <TableCell>Number</TableCell>
                  <TableCell>Status</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {recipients?.map((recipient) => (
                  <TableRow key={recipient.callSid}>
                    <TableCell>{recipient.to}</TableCell>
                    <TableCell>{recipient.status}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
          {loading && <LinearProgress />}
        </>
      )}
      {pageCount > 0 && meta.total && (
        <TablePagination
          data-testid={PAGINATOR_TEST_ID}
          rowsPerPageOptions={rowsPerPageOptions}
          component="div"
          page={currentPage}
          count={meta.total}
          rowsPerPage={rowsPerPage}
          onChangePage={onChangePagination}
          onChangeRowsPerPage={onChangeRowsPerPage}
        />
      )}
    </>
  );
}

MetricDetail = ({ metric: metricInitial }: { metric: Metric }) => {
  const classes = useMetricDetailStyles()

  const {
    isLoading,
    data: metric,
    error,
  } = useDataSource(() => MetricsApi.findById(metricInitial.metricId), [metricInitial.metricId])
  useDataLoadingError(error)

  const isReady = !isLoading && !error

  return (
    <>
      {!isReady && <LinearProgress />}
      {isReady && metric && (
        <TableContainer className={classes.root}>
          <Table>
            <TableBody>
              <TableRow>
                <TableCell className={classes.headerCell}>Higher is Better:</TableCell>
                <TableCell className={classes.dataCell}>{formatBoolean(metric.higherIsBetter)}</TableCell>
              </TableRow>
              <TableRow>
                <TableCell className={classes.headerCell}>Parameters:</TableCell>
                <TableCell className={classes.dataCell}>
                  <div className={classes.pre}>
                    {JSON.stringify(
                      metric.parameterType === 'conversion' ? metric.eventParams : metric.revenueParams,
                      null,
                      4,
                    )}
                  </div>
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </>
  )
}

QueryResults = ({ results }: QueryResultsProps) => {
  if (!results || !results.length) return null;

  const [page, setPage] = React.useState(0);
  const rowsPerPage = 10;

  // reset page to 1 if page is further than it could reasonable be. e.g. if
  // user edits a query that had many pages of results while being in the last
  // page and new query has a single page
  if (page * rowsPerPage > results.length) setPage(0);

  const columns = buildColumns(results[0]);

  const handleChangePage = (event: unknown, newPage: number) => {
    setPage(newPage);
  };

  // if there are performance issues, look into https://material-ui.com/components/tables/#virtualized-table
  return (
    <DarkPaperFull>
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              {columns.map((column) => (
                <TableCell key={column.name} align={column.align}>
                  <strong>{column.name}</strong>
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {results
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row) => (
                <TableRow
                  hover
                  role="checkbox"
                  tabIndex={-1}
                  key={Object.values(row).join()}
                >
                  {columns.map((column) => (
                    <StyledCell
                      align={column.align}
                      key={`${column.name}_${row[column.name]}`}
                    >
                      {(row[column.name] as any)?.toString()}
                    </StyledCell>
                  ))}
                </TableRow>
              ))}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        // if there is only one option the dropdown is not displayed
        rowsPerPageOptions={[10]}
        component="div"
        count={results.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onChangePage={handleChangePage}
      />
    </DarkPaperFull>
  );
}

TodosTable: FC<ITodoTable> = ({
  data,
  header,
  headerStyle,
  rowStyle,
  placeHolder,
  isLoading,
  onDeleteTodo,
  onCompleteTodo,
  stickyHeader = true
}) => {
  const classes = useStyles();

  return (
    <TableContainer className={classes.root} component={Paper} elevation={6}>
      <Table
        stickyHeader={stickyHeader}
        style={{ maxHeight: '100%' }}
        aria-label="sticky table"
      >
        <TableHeader data={header} headerStyle={headerStyle} />
        <TableBody>
          {data.length ? (
            data.map((todo) => {
              return (
                <Row
                  data={todo}
                  rowStyle={rowStyle}
                  onDeleteTodo={(e, id) => onDeleteTodo(e, id)}
                  onCompleteTodo={(e, checked, id) =>
                    onCompleteTodo(e, checked, id)
                  }
                />
              );
            })
          ) : (
            <RowPlaceHolder
              placeHolder={
                isLoading
                  ? 'Loading...'
                  : placeHolder || 'Put your place holder here'
              }
              colSpan={header.length}
              rowStyle={rowStyle}
            />
          )}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

export default function HealthIndicatorTable({
  className,
  indicators,
}: {
  className?: string
  indicators: HealthIndicator[]
}): JSX.Element {
  const classes = useStyles()
  const decorationClasses = useDecorationStyles()
  return (
    <TableContainer className={className}>
      <Table className={classes.table} aria-label='simple table'>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Unit</TableCell>
            <TableCell>Value</TableCell>
            <TableCell>{/* Indication Emoji */}</TableCell>
            <TableCell>Indication</TableCell>
            <TableCell>Reason</TableCell>
            <TableCell>Recommendation</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {indicators.map((indicator) => (
            <TableRow key={indicator.name}>
              <TableCell scope='row'>
                <Link href={indicator.link} target='_blank'>
                  {indicator.name}
                </Link>
              </TableCell>
              <TableCell scope='row' className={clsx(classes.monospace, classes.deemphasized, classes.nowrap)}>
                {indicator.unit === HealthIndicatorUnit.Pvalue ? (
                  <Tooltip title='The smaller the p-value the more likely there is an issue.'>
                    <span className={decorationClasses.tooltipped}>p-value</span>
                  </Tooltip>
                ) : (
                  <span>{indicator.unit}</span>
                )}
              </TableCell>
              <TableCell scope='row' className={clsx(classes.monospace, classes.deemphasized, classes.nowrap)}>
                {indicator.value.toFixed(4)}
              </TableCell>
              <TableCell scope='row'>
                <span>{severityEmoji[indicator.indication.severity]}</span>
              </TableCell>
              <TableCell
                scope='row'
                className={clsx(
                  classes.indication,
                  classes[indicationSeverityClassSymbol(indicator.indication.severity)],
                  classes.monospace,
                  classes.nowrap,
                )}
              >
                <span>{indicator.indication.code}</span>
              </TableCell>
              <TableCell scope='row' className={clsx(classes.monospace, classes.deemphasized, classes.nowrap)}>
                {indicator.indication.reason}
              </TableCell>
              <TableCell scope='row' className={clsx(classes.deemphasized, classes.recommendation)}>
                <Typography variant='body1'>{indicator.indication.recommendation}</Typography>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  )
}

NumbersTable: React.FC<NumbersTableProps> = ({
  headers,
  rows,
  data,
}) => {
  const classes = useNumbersTableStyles();
  const {
    page,
    rowsPerPage,
    handleChangePage,
    handleChangeRowsPerPage,
    paginatedData,
    rowsPerPageOptions,
  } = usePagination(data);

  const rowCells = useMemo(() => {
    return paginatedData.map(
      (rowData: { [key: string]: string }, idx: number) => (
        <TableRow key={idx}>
          {rows.map((cell: string, index: number) => (
            <TableCell key={`${idx}-${index}`}>{rowData[cell]}</TableCell>
          ))}
        </TableRow>
      )
    );
  }, [paginatedData, rows]);

  return (
    <>
      <TableContainer component={Box} className={classes.tableContainer}>
        <Table stickyHeader size="small">
          <TableHead>
            <TableRow>
              {headers.map((title: string, idx: number) => (
                <StyledTableCell key={idx}>{title}</StyledTableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>{rowCells}</TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        rowsPerPageOptions={rowsPerPageOptions}
        component="div"
        count={data.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onChangePage={handleChangePage}
        onChangeRowsPerPage={handleChangeRowsPerPage}
      />
    </>
  );
}

RoutesTable = ({ routes }: RoutesTableProps) => {
  return (
    <Card>
      <CardHeader
        title="Routes (List of Pods)"
        titleTypographyProps={{ variant: "subtitle1" }}
      />
      {routes && routes?.length && (
        <CardContent>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Pod</TableCell>
                <TableCell>Pod Id</TableCell>
                <TableCell>Start time</TableCell>
                <TableCell>End time</TableCell>
                <TableCell>Elapsed Time</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {routes.map((route) => {
                const { pod_id, pod, start_time, end_time } = route
                return (
                  <TableRow key={pod_id}>
                    <TableCell> {pod} </TableCell>
                    <TableCell>{pod_id}</TableCell>
                    <TableCell>{start_time}</TableCell>
                    <TableCell>{end_time}</TableCell>
                    <TableCell>
                      {getElapsedTime(start_time, end_time)}
                    </TableCell>
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>
        </CardContent>
      )}
    </Card>
  )
}

RecentGames = () => {
  const history = useHistory();
  const [recentGames, setRecentGames] = useState<Game[] | undefined>(undefined);

  useEffect(() => {
    async function fetchData() {
      const games = await getPlayerRecentGames();
      if (games) {
        setRecentGames(games);
      }
    }
    fetchData();
  }, []);

  const isEmptyRecentGames = (): boolean => {
    if (!recentGames) {
      return true;
    }
    if (recentGames && recentGames.length === 0) {
      return true;
    }
    return false;
  };

  return (
    <Card variant='outlined' className='RecentGamesCard'>
      <CardHeader
        className='RecentGamesCardTitle'
        title='Recent Session'
        titleTypographyProps={{ variant: 'h6', noWrap: true }}
      />
      <CardContent className='RecentGamesCardContent'>
        {isEmptyRecentGames() && (
          <Typography variant='body2'>No recent sessions found</Typography>
        )}
        {recentGames && recentGames.length > 0 && (
          <TableContainer className='RecentGamesTableContainer'>
            <Table stickyHeader>
              <TableHead>
                <TableRow>
                  <TableCell>Name</TableCell>
                  <TableCell>Created By</TableCell>
                  <TableCell></TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {recentGames.map((recentGame) => (
                  <TableRow
                    hover
                    key={recentGame.id}
                    className='RecentGamesTableRow'
                    onClick={() => history.push(`/game/${recentGame.id}`)}
                  >
                    <TableCell>{recentGame.name}</TableCell>
                    <TableCell align='left'>{recentGame.createdBy}</TableCell>
                    <TableCell align='left'></TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )}
      </CardContent>
    </Card>
  );
}

Pager: React.SFC<PagerProps> = (props) => {
  const {
    data,
    columnStyles,
    showCheckbox,
    columnNames,
    tableVals,
    listItemName,
    handleTableChange,
    totalRows,
    collapseOpen,
    collapseRow,
    removeSortBy = [],
  } = props;

  const rows = createRows(data, columnStyles, showCheckbox, collapseRow, collapseOpen);
  const tableHead = tableHeadColumns(
    columnNames,
    columnStyles,
    tableVals,
    handleTableChange,
    showCheckbox,
    listItemName,
    removeSortBy
  );

  const tablePagination = pagination(columnNames, totalRows, handleTableChange, tableVals);

  return (
    <div className={styles.TableContainer}>
      <Table className={styles.Table} data-testid="table">
        <TableHead className={styles.TagListHeader} data-testid="tableHead">
          {tableHead}
        </TableHead>
        <TableBody data-testid="tableBody">{rows}</TableBody>
        <TableFooter className={styles.TableFooter} data-testid="tableFooter">
          <TableRow>{tablePagination}</TableRow>
        </TableFooter>
      </Table>
    </div>
  );
}

CartTable: React.VFC<Props> = ({ cart, loading, onUpdate }) => {
  const styles = useStyles();

  return (
    <Table className={styles.root}>
      <TableHead sx={{ display: { xs: 'none', sm: 'table-header-group' } }}>
        <TableRow>
          <TableCell colSpan={2}>Product</TableCell>
          <TableCell>Price</TableCell>
          <TableCell>Quantity</TableCell>
          <TableCell colSpan={2}>Total Price</TableCell>
        </TableRow>
      </TableHead>
      <TableBody sx={{ display: { xs: 'block', sm: 'table-row-group' } }}>
        {cart.contents?.nodes?.map(
          (item) =>
            item != null && (
              <CartTableRow key={item.key} item={item} loading={loading} onUpdate={onUpdate} />
            ),
        )}
      </TableBody>
      <TableFooter className={styles.footer}>
        <TableRow>
          <TableCell colSpan={3} />
          <TableCell>
            <Typography>Subtotal</Typography>
          </TableCell>
          <TableCell colSpan={2}>
            <Price>{cart.subtotal}</Price>
          </TableCell>
        </TableRow>
        {(cart.appliedCoupons?.length ?? 0) > 0 && (
          <TableRow>
            <TableCell colSpan={3} />
            <TableCell>
              <Typography>Discount</Typography>
            </TableCell>
            <TableCell colSpan={2}>
              <Price color="error">{`-${cart.discountTotal}`}</Price>
            </TableCell>
          </TableRow>
        )}
      </TableFooter>
    </Table>
  );
}

Checkout = ({ groupID, onClose, onComplete }: { groupID: string, onClose: () => void, onComplete: () => void }) => {

	const [auth] = useAuthUser()
	const [user, isUserLoading] = useUser()
	const [cart, isCartLoading] = useCart()

	const cartGroup = cart?.cartGroup(groupID)
	const defaultShipping = user?.defaultShipping
	const defaultCard = user?.defaultCard

	const [setProcessing] = useProcessing()
	const [setMessage] = useSnackbar()
	const [push] = usePush()

	const shouldBeEnable = () => {
		if (isUserLoading) return false
		if (!cartGroup) return false
		if (cartGroup.salesMethod === "online") {
			return !!(defaultShipping) && !!(defaultCard)
		}
		return !!(defaultCard)
	}

	const isAvailable: boolean = shouldBeEnable()

	// const withCustomer = async (auth: firebase.User, user: User): Promise<{ error?: any, customerID?: any }> => {
	// 	if (user.stripe?.customerID) {
	// 		return { customerID: user.stripe.customerID }
	// 	} else {
	// 		const create = firebase.functions().httpsCallable("stripe-v1-customer-create")
	// 		const response = await create({
	// 			phone: auth.phoneNumber,
	// 			metadata: {
	// 				uid: auth.uid
	// 			}
	// 		})
	// 		const { error, result } = response.data
	// 		if (error) {
	// 			return { error }
	// 		} else {
	// 			const customer = result
	// 			await user.documentReference.set({
	// 				stripe: {
	// 					customerID: customer.id,
	// 					link: `https://dashboard.stripe.com${
	// 						customer.livemode ? "" : "/test"
	// 						}/customers/${customer.id}`
	// 				}
	// 			}, { merge: true })
	// 			return { customerID: customer.id }
	// 		}
	// 	}
	// }

	const checkout = async () => {
		if (!auth) return
		if (!user) return
		if (!cartGroup) return

		// const { error, customerID } = await withCustomer(auth, user)

		// if (error) {
		// 	console.error(error)
		// 	return
		// }

		// if (!customerID) {
		// 	console.log("[CHECKOUT] customerID is not exist")
		// 	return
		// }
		// paymentMethodID
		const paymentMethodID = user.defaultCard?.id
		if (!paymentMethodID) {
			console.log("[CHECKOUT] paymentMethodID is not exist")
			return
		}

		if (cartGroup.salesMethod === "online") {
			// defaultShipping
			const defaultShipping = user.defaultShipping
			if (!defaultShipping) {
				console.log("[CHECKOUT] defaultShipping is not exist")
				return
			}

			cartGroup.shipping = defaultShipping
		}

		// create order
		const data = cartGroup.order(user.id)

		try {
			setProcessing(true)
			const checkoutCreate = firebase.functions().httpsCallable("commerce-v1-order-create")
			const response = await checkoutCreate({
				order: data,
				groupID: groupID,
				paymentMethodID: paymentMethodID,
				// customerID: customerID
			})
			const { error, result } = response.data
			if (error) {
				console.error(error)
				setMessage("error", error.message)
				setProcessing(false)
				return
			}
			console.log(result)
			setMessage("success", "Success")
			onComplete()
		} catch (error) {
			console.log(error)
			setMessage("error", "Error")
		}
		setProcessing(false)
	}

	if (isUserLoading || isCartLoading) {
		return <DataLoading />
	}

	if (!cartGroup) {
		return <Empty onClose={onClose} />
	}

	const subtotal = new Intl.NumberFormat("ja-JP", { style: "currency", currency: cartGroup.currency }).format(cartGroup.subtotal())
	const tax = new Intl.NumberFormat("ja-JP", { style: "currency", currency: cartGroup.currency }).format(cartGroup.tax())
	const total = new Intl.NumberFormat("ja-JP", { style: "currency", currency: cartGroup.currency }).format(cartGroup.total())

	return (
		<Paper style={{ width: "100%" }}>
			<TableContainer>
				<Table>
					<TableBody>
						<TableRow onClick={(e) => {
							e.preventDefault()
							e.stopPropagation()
							push(
								<CardList user={user!} />
							)
						}}>
							<TableCell style={{ width: "90px" }}>
								<Box color="text.secondary" fontWeight={700} flexGrow={1}>CARD</Box>
							</TableCell>
							<TableCell>
								{defaultCard &&
									<Box display="flex" alignItems="center" flexGrow={1} style={{ width: "180px" }}>
										<Box display="flex" alignItems="center" flexGrow={1} fontSize={22}>
											<i className={`pf ${CardBrand[defaultCard!.brand]}`}></i>
										</Box>
										<Box justifySelf="flex-end" fontSize={16} fontWeight={500}>
											{`• • • •  ${defaultCard?.last4}`}
										</Box>
									</Box>
								}
							</TableCell>
							<TableCell>
								<Box display="flex" flexGrow={1} justifyContent="flex-end" alignItems="center">{defaultCard ? <NavigateNextIcon /> : <ErrorIcon color="secondary" />}</Box>
							</TableCell>
						</TableRow>
						{cartGroup.salesMethod === "online" &&
							<TableRow onClick={(e) => {
								e.preventDefault()
								e.stopPropagation()
								push(
									<ShippingAddressList user={user!} />
								)
							}}>
								<TableCell style={{ width: "90px" }}>
									<Box color="text.secondary" fontWeight={700} flexGrow={1}>SHIPPING</Box>
								</TableCell>
								<TableCell>
									{defaultShipping?.name && <Box>{defaultShipping?.name}</Box>}
									{defaultShipping?.address?.state && <Box>{defaultShipping?.address?.state}</Box>}
									{defaultShipping?.address?.city && <Box>{defaultShipping?.address?.city}</Box>}
									{defaultShipping?.address?.line1 && <Box>{`${defaultShipping?.address?.line1}${defaultShipping?.address?.line2}`}</Box>}
								</TableCell>
								<TableCell align="left">
									<Box display="flex" flexGrow={1} justifyContent="flex-end" alignItems="center">{defaultShipping ? <NavigateNextIcon /> : <ErrorIcon color="secondary" />}</Box>
								</TableCell>
							</TableRow>
						}
					</TableBody>
				</Table>
			</TableContainer>
			<Box padding={2}>
				<Box>
					{cartGroup.items.map(cartItem => {
						return <CartItemCell key={cartItem.skuReference!.path} groupID={cartGroup.groupID} cartItem={cartItem} />
					})}
				</Box>
				<Summary
					disabled={!isAvailable}
					onClick={(e) => {
						e.preventDefault()
						checkout()
					}}
					items={[
						{
							type: "subtotal",
							title: "Subtotal",
							detail: `${subtotal}`
						},
						{
							type: "tax",
							title: "Tax",
							detail: `${tax}`
						},
						{
							type: "total",
							title: "Total",
							detail: `${total}`
						}
					]} />
			</Box>
		</Paper>
	)
}