---
title: 虚拟列表
order: 5
---

本 Demo 演示虚拟列表的用法。

```jsx
import React, { Component,useRef,useState } from 'react';
import ReactDOM from 'react-dom';
import { YwTable } from '@ywfe/yw-design';
import { Button } from 'antd';
import 'antd/dist/antd.css';

const columns = [
  { title: 'A', dataIndex: 'key', width: 150 },
  { title: 'B', dataIndex: 'key' },
  { title: 'C', dataIndex: 'key' ,width: 100},
  { title: 'D', dataIndex: 'key' },
  { title: 'E', dataIndex: 'key', width: 200 },
  { title: 'F', dataIndex: 'key', width: 100 },
];
// 表格过滤条件
const data = Array.from({ length: 100000 }, (_, key) => ({ key }));
const App =() => {
const [scroll,setScroll] = useState(null);
const target = {scrollTop:1200,scrollLeft:100}
 const tableRef = useRef(); // tableRef.current
    return (
      <>
     
          <Button onClick={()=>{
            tableRef.current.scrollTo(target)
          }}>
            scroll to 
          </Button>
           <div>position:{JSON.stringify(scroll)}</div>
        <YwTable
          columns={columns}
          useVirtual
          rowHeight={50}
          onScroll={(scroll)=>{
            setScroll(scroll)
          }}
          ref={tableRef}
          style={{width:'800px'}}
          scroll={{ y: 300, x:0}}
          dataSource={data}
          pagination={false}
        />
        </>
    );
}

ReactDOM.render(<App />, mountNode);
```