CODEWITHSUNDEEP
reactjsreact-virtualized
Los Morales
Los Morales

Reputation: 2155

React-Virtualized Table only showing one column

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

Upvotes: 4

Views: 3533

Answers (4)

Manish Kumar Srivastava
Manish Kumar Srivastava

Reputation: 21

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

import 'react-virtualized/styles.css'

Upvotes: 0

poplaw
poplaw

Reputation: 29

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.

Upvotes: 1

Adam
Adam

Reputation: 365

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

Upvotes: 12

bvaughn
bvaughn

Reputation: 13487

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.

Upvotes: 0

Related Questions