React-Virtualized: CellRenderer isn't called

Question

I am using react-virtualized for a table. All works fine, but my custom CellRenderer isn't called. The data is available with all the necessary information, but only the headerRenderer is called and only the header is rendered. The table body is empty. I am using the Table with AutoSizer and MaterialUI.

My Code:

import * as React from 'react';
import { default as styled } from 'styled-components';

import { AutoSizer, Column, Table, TableCellRenderer, TableHeaderProps } from 'react-virtualized';

import TableCell from '@material-ui/core/TableCell';

const TableStyles = styled.div`
  .ReactVirtualized__Table__headerRow {
    display: flex;
    align-items: center;
  }

  .ReactVirtualized__Table__row {
    display: flex;
    align-items: center;
  }

  .ReactVirtualized__Table__rowColumn {
    flex: 1;
  }
`;

const VirtualizedTable = () => {

  const cellRenderer: TableCellRenderer = ({ cellData }) => {
    return (
      <TableCell
        variant="body"
        component="div"
        style={{ height: 40 }}
      >
        {cellData}
      </TableCell>
    );
  };

  const headerRenderer = ({ label }: TableHeaderProps & { columnIndex: number }) => {
    return (
      <TableCell
        component="div"
        variant="head"
        style={{ height: 40 }}
      >
        <span>{label}</span>
      </TableCell>
    );
  };

  const data = [
    {
      id: '200', 
      text: "Field 1",
    },
    {
      id: '200', 
      text: "Field 2",
    },
  ]
  
  const columns = [
    {
      width: 200,
      label: 'Id',
      dataKey: 'id',
    },
    {
      width: 120,
      label: 'Text',
      dataKey: 'text',
    },
  ]

  return (
    <TableStyles>
      <AutoSizer>
        {({ height, width }) => (
          <Table
            headerHeight={40}
            width={width}
            height={height}
            rowHeight={40}
            rowCount={data.length}
            rowGetter={({ index }) => data[index]} 
          >
            {columns.map(({ dataKey, ...other }, index) => {
              return (
                <Column
                  key={dataKey}
                  headerRenderer={(headerProps) =>
                    headerRenderer({
                      ...headerProps,
                      columnIndex: index,
                    })
                  }
                  cellRenderer={cellRenderer}
                  dataKey={dataKey}
                  {...other}
                />
              );
            })}
          </Table>
        )}
      </AutoSizer>
    </TableStyles>
  );
};

export default VirtualizedTable;

And here is the CodeSandBox: CodeSandBox

Answer 1

It seems like your Autosizer giving height zero. The reason for this is this:

One word of caution about using AutoSizer with flexbox containers. Flex containers don't prevent their children from growing and AutoSizer greedily grows to fill as much space as possible. Combining the two can cause a loop. The simple way to fix this is to nest AutoSizer inside of a block element (like a ) rather than putting it as a direct child of the flex container. Read more about common AutoSizer questions here.

So in your solution either add defaultHeight or add style to autosize i.e

<AutoSizer defaultHeight={200} style={{ height: "100%" }}>

Here is full code:

import * as React from "react";
import { default as styled } from "styled-components";

import {
  AutoSizer,
  Column,
  Table,
  TableCellRenderer,
  TableHeaderProps
} from "react-virtualized";

import TableCell from "@material-ui/core/TableCell";

const TableStyles = styled.div`
  .ReactVirtualized__Table__headerRow {
    display: flex;
    align-items: center;
  }

  .ReactVirtualized__Table__row {
    display: flex;
    align-items: center;
  }

  .ReactVirtualized__Table__rowColumn {
    flex: 1;
  }
`;

const VirtualizedTable = ({ list }) => {
  const cellRenderer: TableCellRenderer = ({ cellData }) => {
    console.log(cellData);
    return (
      <TableCell variant="body" component="div" style={{ height: 40 }}>
        {cellData}
      </TableCell>
    );
  };

  const headerRenderer = ({
    label
  }: TableHeaderProps & { columnIndex: number }) => {
    return (
      <TableCell component="div" variant="head" style={{ height: 40 }}>
        <span>{label}</span>
      </TableCell>
    );
  };

  const data = [
    {
      id: "200",
      text: "Field 1"
    },
    {
      id: "200",
      text: "Field 2"
    }
  ];

  const columns = [
    {
      width: 200,
      label: "Id",
      dataKey: "id"
    },
    {
      width: 120,
      label: "Text",
      dataKey: "text"
    }
  ];

  return (
    <TableStyles>
      <AutoSizer style={{height:"100%"}}>
        {({ height, width }) => console.log(height,width) || (
          <Table
            headerHeight={40}
            width={width}
            height={height}
            rowHeight={40}
            rowCount={data.length}
            rowGetter={({ index }) => data[index]}
          >
            {columns.map(({ dataKey, ...other }, index) => {
              console.log(dataKey, other);
              return (
                <Column
                  key={dataKey}
                  headerRenderer={(headerProps) =>
                    headerRenderer({
                      ...headerProps,
                      columnIndex: index
                    })
                  }
                  // cellRenderer={(data) => cellRenderer(data)}
                  cellRenderer={({ cellData }) => cellData}
                  dataKey={dataKey}
                  {...other}
                />
              );
            })}
          </Table>
        )}
      </AutoSizer>
    </TableStyles>
  );
};

export default VirtualizedTable;

Here is demo: https://codesandbox.io/s/react-virtualize-table-h1zq6?file=/src/App.tsx