reactjs - React-Virtualized Table 仅显示一列

Question

我正在使用react-virtualized的表并为该表定义了4列。由于某种原因它只显示第一列。我无法显示其他列。不确定我做错了什么。下面是代码片段:

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

Answer 1

我刚刚遇到了这个问题，原来我忘记从react-virtualized导入CSS文件。 导入'react-virtualized/styles.css' 在index.js 中(或任何您想要导入它的地方)。