在React中将虚拟化添加到包含分组行的表中

npm install react-window

import React from 'react';
import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>
    {/* 这里渲染你的分组行内容 */}
    Grouped Row {index}
  </div>
);

const VirtualizedTable = ({ data }) => {
  return (
    <List
      height={400} // 列表高度
      itemCount={data.length} // 数据项数量
      itemSize={50} // 每行的高度
      width="100%" // 列表宽度
    >
      {Row}
    </List>
  );
};

export default VirtualizedTable;

import React from 'react';
import ReactDOM from 'react-dom';
import VirtualizedTable from './VirtualizedTable';

const data = Array.from({ length: 1000 }, (_, i) => `Row ${i}`); // 示例数据

ReactDOM.render(
  <React.StrictMode>
    <VirtualizedTable data={data} />
  </React.StrictMode>,
  document.getElementById('root')
);