Question

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

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文件。 import 'react-virtualized/styles.css' 在index.js中（或者您想要导入它的任何地方）。

Answer 2

对于任何为此苦苦挣扎的人。

我已通过不在Webpack配置中使用CSS模块解决了该问题。因此，请确保正确包含了css文件，并且已从所使用的捆绑程序中排除了css模块。

Answer 3

那些cellDataGetter道具是不必要的。 default getter适用于该用例。

您上面粘贴的内容应该可以使用。 Here's a Plnkr显示修剪后的版本，工作正常。

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

如果您想要更多反馈，我担心您需要分享一个Plnkr（或类似的），以显示您正在报告的问题。

Answer 4

只需添加下面给出的行，您的代码就会运行。

导入“ react-virtualized / styles.css”

React-Virtualized Table仅显示一列

4 个答案: