function NodeTabularDisplay$()

in src/components/Database/DataViewer/NodeTabularDisplay.tsx [59:103]
42 lines of code
3 McCabe index (conditional complexity)

  function NodeTabularDisplay$({ query, hasMoreRows, onLoadMore }) {
    const [table, setTable] = useState<Table>({
      type: TableType.Array,
      headers: [],
      rows: [],
    });

    const raiseOnLoadMore = () => onLoadMore && onLoadMore();

    useEffect(() => {
      (async () => {
        setTable(await buildTable(query));
      })();
    }, [query]);

    return (
      <DataTable className="NodeTabularDisplay">
        <DataTableContent>
          <DataTableHead>
            <DataTableRow>
              {table.headers.map((header, i) => (
                <DataTableHeadCell key={i}>
                  <Typography use="body1">{header}</Typography>
                </DataTableHeadCell>
              ))}
            </DataTableRow>
          </DataTableHead>
          <DataTableBody>
            {table.rows.map((row, idx) => (
              <DataTableRow key={idx}>
                {table.headers.map((header, i) =>
                  getColumnValue(table, row, header, i, query.ref)
                )}
              </DataTableRow>
            ))}
          </DataTableBody>
          {hasMoreRows && (
            <DataTableHead>
              <DataTableRow>
                <DataTableCell colSpan={table.headers.length}>
                  <Button onClick={() => raiseOnLoadMore()}>Load More</Button>
                </DataTableCell>
              </DataTableRow>
            </DataTableHead>
          )}