React-Virtualized Table only showing one column

react-virtualized table column width
react-virtualized table sort
react-virtualized table height
rowgetter
react-virtualized typescript
react-virtualized nested list
react-virtualized antd table
react-virtualized table horizontal scroll

I'm using react-virtualized's table and defined 4 columns for that table. For some reason it only displays the 1st column. I can not get the other columns to display. Not sure what I'm doing wrong. Below is a snippet of the code:

const BTable = ({bdata}) => { 
return(
    <AutoSizer disableHeight>
        {({ width }) => (
            <Table
                headerHeight={20}
                height={300}
                width={width}
                overscanRowCount={5}
                rowHeight={20}
                rowGetter={({index}) => (bdata[index])}
                rowCount={bdata.length}
                noRowsRenderer={() => (<div></div>)}>
                <Column
                    label='Id'
                    cellDataGetter={
                      ({ columnData, dataKey, rowData }) => (rowData[dataKey])
                    }
                    dataKey='id'
                    width={200}
                    />      
                <Column
                    label='Account'
                    cellDataGetter={
                      ({ columnData, dataKey, rowData }) => (rowData[dataKey])
                    }
                    dataKey='account'
                    width={200}
                    />      
                 ....
                 ....
         </Table>
     <AutoSizer>
)

I just ran into this problem, turns out I forgot to import the CSS file from react-virtualized. import 'react-virtualized/styles.css' in index.js (or wherever you'd like to import it).

react-virtualized/Table.md at master · bvaughn/react-virtualized , Outer height of Table is set to "auto". This property should only be used in conjunction with the WindowScroller HOC. children, Column, ✓, One or more Columns  React-virtualized table not rendering as a table You aren't importing CSS. The Table component is the only component that requires CSS to style the flexbox layout.

For anyone else struggling with it.

I've resolved the problem by not using css modules in my webpack config. So make sure the css file got included properly and you've excluded the css modules from whatever the bundler you're using.

react-virtualized/Column.md at master · bvaughn/react-virtualized , React components for efficiently rendering large lists and tabular data - bvaughn/​react-virtualized. Describes the header and cell contents of a table column. maxWidth, Number, Maximum width of column; this property will only be used if A default cellRenderer is provided that displays an attribute as a simple string  Column One or more Columns describing the data displayed in this table: className: String: Optional custom CSS class name to attach to root Table element. disableHeader: Boolean: Do not render the table header (only the rows) estimatedRowSize: Number: Used to estimate the total height of a Table before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered.

Those cellDataGetter props are unnecessary. The default getter works for that use-case.

What you've pasted above should work though. Here's a Plnkr showing a trimmed down version that works fine.

 <Table
    headerHeight={20}
    height={300}
    width={400}
    overscanRowCount={5}
    rowHeight={20}
    rowGetter={({index}) => (list[index])}
    rowCount={list.length}
    noRowsRenderer={() => (<div></div>)}>
    <Column
      label='Id'
      dataKey='id'
      width={200}
    />
    <Column
      label='Account'
      dataKey='account'
      width={200}
    />
  </Table>

I'm afraid you'll need to share a Plnkr (or similar) showing the problem you're reporting if you want more feedback.

react-virtualized, Collection; Grid; List; Masonry; Table. ArrowKeyStepper; AutoSizer; CellMeasurer​; ColumnSizer; InfiniteLoader The list below is windowed (or "virtualized") meaning that only the visible rows Show scrolling placeholder? This is row 1. K. Why I wrote React-Table, and the problems it has solved for Nozzle should be for functionality like showing/hiding columns, and showing sort-indicators. lot of work to be done on React

Simply add line which was given below and your code will run.

import 'react-virtualized/styles.css'

Rendering Lists Using React Virtualized, We're going to use the React Virtualized component to get what we need. First, we start by setting up rowRenderer , which is responsible for displaying a single row and sets up an index that In this case, we will make use of Table and Column components that We've only scratched the surface here. material-table is a simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more).

Rendering large lists with React Virtualized, In this article, I'll show you how to use react-virtualized to display a large amount There are one thousand comments in the app, but it only shows around Table. It renders a table with a fixed header and vertically scrollable body content​. It decorates a Grid component to add fixed columns and/or rows. Dependencies. React Virtualized has very few dependencies and most are managed by NPM automatically. However the following peer dependencies must be specified by your project in order to avoid version conflicts: react , react-dom . NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.

The complete guide to building a smart data table in React , Custom sorting and filtering options for columns based on data types (numbers, UI-wise, data tables are one of the best options to show complex data in an organized way. It has only this one use case, and its features are very limited Use react-virtualized for custom timelines, charts involving infinitely  fixed data table: Data table from Facebook for showing huge amounts of data. Supports fixed header, footer, fixed columns, column resizing, lots more. Does not handle fetch or sort.

Using React-Virtualized InfiniteLoader, Autosizer, and Table with , Using React-Virtualized InfiniteLoader, Autosizer, and Table with Material UI styles & React I setup a flask endpoint for testing that takes in a StartIndex and EndIndex via query string Just defining how we each column should be. The actual columns are passed in via props that I'll show next. It has only this one use case, and its features are very limited compared to those of react-data-grid. react-virtualized. As the name itself implies, react-virtualized is heavily optimized for performance when the dataset is large. This library is not exactly a table library; it does much more.

Comments
  • it's definitely a bug they need to fix. If you play around with it in Google Chrome dev tools and change the div for the header row overflow from not hidden you'll see your next column appear below your first column rather than next to it.
  • still doesn't work for me and it's hard to replicate in plunkr. I can show screenshots of the issue (the columns look like they're rows when debugging) but can't seem to attach screenshots on here. I'll post an issue on github since I can do more than on SO.
  • " it's hard to replicate in plunkr" - I don't understand this. Fork the working example I gave you and show how it breaks.
  • Well this is essentially what I have (it doesn't work and not sure why): plnkr.co/edit/PpKGTZixIF9SS3Q4f8bL
  • It doesn't work b'c Plnkr doesn't support import or require syntax.
  • It was depending on an older version of React. Updated to pin. Should work now.