adui/components/table/demo/virtualScroll.md

<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>

---
order: 7
title:
  zh-CN: virtualScroll
  en-US: virtualScroll
---

开启 `virtualScroll` 实现大数据渲染：

```jsx
const [value, setValue] = useState([])
return (
  <Table
    dataSource={Array.from(new Array(200), (_, i) => ({ key: i }))}
    selectOnRowClick
    virtualScroll
    virtualListProps={{
      width: "760px",
      onScroll: (options) => {
        // console.log(options, "o")
      },
    }}
    height={500}
    columns={[
      {
        dataIndex: "0",
        filters: [
          { text: "分类 A", value: 1 },
          { text: "分类 D", value: 2 },
        ],
        filterMultiple: false,
        title: "项目",
        width: 120,
        render: (row, col, rowIndex) => `项目${rowIndex}`,
      },
      {
        dataIndex: "1",
        width: 900,
        title: "数据项",
        render: () => "6,755,654",
      },
      {
        dataIndex: "2",
        width: 300,
        title: "数据项",
        render: () => "92,435,344",
        onSort: () => {},
      },
      {
        dataIndex: "3",
        width: 110,
        title: "数据项",
        render: () => "3,635",
      },
      {
        dataIndex: "4",
        width: 100,
        title: "数据项",
        render: () => "3,635",
      },
    ]}
  />
)
```