React-Virtualisierte Tabelle, die nur eine Spalte zeigt

Question

Ich benutze react-virtualisierte Tabelle und definierte 4 Spalten für diese Tabelle. Aus irgendeinem Grund wird nur die erste Spalte angezeigt. Ich kann die anderen Spalten nicht anzeigen. Ich bin mir nicht sicher, was ich falsch mache. Unten ist ein Ausschnitt des Codes:

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

Diese cellDataGetter Requisiten sind nicht notwendig. Die default getter funktioniert für diesen Anwendungsfall.

Was Sie oben eingefügt haben, sollte jedoch funktionieren. Here's a Plnkr zeigt eine abgespeckte Version, die gut funktioniert.

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

Ich fürchte, Sie werden einen Plnkr teilen müssen (oder ähnlich) zeigt das Problem Sie berichten, wenn Sie mehr Feedback möchten.