Как использовать реактивно-виртуализированную таблицу с реактивно-сортируемым
Я использую реагирующую виртуализированную таблицу и реагирующую сортируемую информацию.
Вот мой код:
const SortableTable = SortableContainer(Table)
const SortableTableRowRenderer =
SortableElement(defaultTableRowRenderer)
function rowRenderer(props) {
console.log(props)
return <SortableTableRowRenderer {...props} />
}
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
const list = [
{ name: 'ABC', description: 'A to C' },
{ name: 'DEF', description: 'D to F' },
{ name: 'GHI', description: 'G to I' },
{ name: 'JKL', description: 'J to L' }
// And so on...
];
return (
<SortableTable
width={300}
height={300}
headerHeight={20}
rowHeight={30}
rowCount={list.length}
rowGetter={({ index }) => list[index]}
rowRenderer={rowRenderer}
>
<Column
label='Name'
dataKey='name'
width={100}
/>
<Column
width={200}
label='Description'
dataKey='description'
/>
</SortableTable>
)
}
}
export default App;
Когда я запускаю это в браузере, я получаю следующее предупреждение:
Warning: Failed prop type: The prop `index` is marked as required in `defaultRowRenderer`, but its value is `undefined`.
in defaultRowRenderer (created by sortableElement(defaultRowRenderer))
in sortableElement(defaultRowRenderer)
in div (created by Grid)
in div (created by Grid)
in Grid (created by Table)
in div (created by Table)
in Table (created by sortableList(Table))
in sortableList(Table) (created by App)
in App (created by Connect(App))
in Connect(App) (created by Route)
in Route
in Switch
in Router (created by BrowserRouter)
in BrowserRouter
in MuiThemeProvider
in Provider
Я не могу найти, как решить эту проблему. Любая помощь будет здорово для меня.