React-Virtualized Table僅顯示一列

我正在使用react-virtualized的表併爲該表定義4列。由於某種原因，它只顯示第一列。我無法顯示其他列。不知道我做錯了什麼。以下是代碼片段：React-Virtualized Table僅顯示一列

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

來源

2017-07-17 Los Morales

那些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（或類似）顯示您報告，如果你想要更多的反饋問題。

來源

2017-07-17 22:26:07 brianvaughn

仍然不適合我，並且很難在plunkr中複製。我可以顯示問題的截圖（列在調試時看起來像是行），但似乎無法在此處附加屏幕截圖。我會在github上發佈一個問題，因爲我可以做比SO更多的事情。 –

「很難複製plunkr」 - 我不明白這一點。分叉我給你的工作例子，並展示它如何打破。 – brianvaughn

嗯，這基本上是我有（它不工作，不知道爲什麼）：https://plnkr.co/edit/PpKGTZixIF9SS3Q4f8bL –

React-Virtualized Table僅顯示一列

回答

相關問題