React-Virtualized Table only showing one column

user_2347246 0
Viewed 2812

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>
)
react-virtualized reactjs
4 Answers

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.

user_94944700

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

import 'react-virtualized/styles.css'

user_103547680
Related