3

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>
)
Los Morales
  • 2,061
  • 7
  • 26
  • 42
  • 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. – Gooby Jun 22 '18 at 07:48

4 Answers4

10

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

Adam
  • 345
  • 2
  • 15
1

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.

poplaw
  • 29
  • 2
  • 5
0

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.

bvaughn
  • 13,300
  • 45
  • 46
  • 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. – Los Morales Jul 18 '17 at 17:45
  • " it's hard to replicate in plunkr" - I don't understand this. Fork the working example I gave you and show how it breaks. – bvaughn Jul 18 '17 at 17:56
  • Well this is essentially what I have (it doesn't work and not sure why): https://plnkr.co/edit/PpKGTZixIF9SS3Q4f8bL – Los Morales Jul 18 '17 at 18:19
  • It doesn't work b'c Plnkr doesn't support `import` or `require` syntax. – bvaughn Jul 18 '17 at 21:29
  • It was depending on an older version of React. Updated to pin. Should work now. – bvaughn May 16 '18 at 15:55
0

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

import 'react-virtualized/styles.css'

Manish Kumar Srivastava
  • 21
  • 2