ant-design/ant-design#24995

On short lists, the additional 10 pixels make an unwanted white space below the table.

我的列表开始是空的，展示antd的默认空白页面，等我改变搜索条件再次去拉取列表的时候，返回了8条数据，但是表格只展示了4条，等我触发滚动或者页面的resize的时候，突然8条记录又渲染出来了。
antd版本是4.0.3。

I don't know why every time i scroll down to the last row in the table the scroll bounce upward

antd：4.9.0
react：17.0.1
react-dom：17.0.1
virtuallist-antd：0.5.8
场景：tab2页签使用table虚拟化，切换到tab2后，请求后端数据，loading5秒，在loading间切换至tab1页签，等待5秒后再切回至tab2页签。虚拟列表只渲染一条数据

https://codesandbox.io/embed/determined-wind-hh52q?fontsize=14&hidenavigation=1&theme=dark

滚动条处罚底部请求API函数 onReachEnd ，在Electron中没有执行而 onScroll 在Electron环境中可以执行，在浏览器中没有问题，请问 onReachEnd 是采用什么方式返回的呢？请问是什么问题导致的呢？使用 react-infinite-scroller 在Electron中执行没有问题。

Hello! Thanks for the awesome library!

Any idea on how to make it work with Summary rows?
On my case, if I use summary rows, they render at the last row of the table, not with the default behaviour of rendering after the table default data, as the bellow images shows.

Should be like this:

Actual behaviour:

1- Summary is last row of the table, pay attention to the scrollbar

2- Summary not visible

Reproduce based on one of the docs examples:
https://codesandbox.io/s/affectionate-nova-pshc3

Thanks!

展开的时候children无法滚动完全，首屏后自动跳到了下一个datasource了

自定义的宽度无效，始终会根据内容自动撑开，无法超出隐藏

在你的例子当中，把package.json中的antd 版本改为V3貌似就失效了

改变搜索条件重新拉取列表数据，接口返回了5条数据，但是表格只展示了4条，需要等待一段时间或者触发滚动，才会将没渲染的数据渲染上。
antd版本是4.17.1, virtuallist-antd版本是0.6.4-beta.0

如图1所示，本应渲染5条数据，但只渲染4条，等待一会之后才会显示图2这样渲染完成的样子
图1

图2

可以支持vue-ant-design版本么

复现demo
现象：当筛选后表格行数较少，导致展开子表格高度并未撑开，页面显示异常

1. selectedRows里面只有最后一条数据是完整的，其他的数据都会缺少字段
   这是选中的数据
   
   这是打印的selectedRows
   
2. 树形表格初始只有一个节点时，打开之后滚动会白屏

1. body 加上 row: EditableRow 使用虚拟列表就只展示一行， 注释掉则编辑单元格功能就不能用了
   const VComponents = VList({ height: 500 });

   const components = {
   ...VComponents,
   body: {
   ...VComponents.body,
   cell: EditableCell,
   row: EditableRow,
   },
   };

案例地址
https://codesandbox.io/s/vigilant-frost-8vhuq?file=/src/App.js

我在使用table 编辑修改界面时，如果横向列一多时，我大概有60列，会有卡顿情况。

打开弹窗（Modal）的时候，给Table传一个指定行的参数，Table滚动条自动跳转到该行，不需要Button点击
尝试过把scrollTo放在函数里，或者把Button 放在Table的columns.render里，没有成功，报错：TypeError: Cannot set properties of undefined (setting 'scrollTop')

<Table
    rowSelection={rowSelection}
    columns={columns}
    dataSource={dataSource}
    pagination={false}
    scroll={{y: '85vh'}}
    rowKey={"company_name"}
    components={VList({
        height: '85vh',
        onScroll: handleTableScroll
    })}
/>

由于 ant-d 的一些原因，需要在列表滚动时操作一些其他组件的 props，因此需要如题的onScroll这样一个属性。

因为现在项目需要用到滚动加载

项目特性:
1. fixed, 分页, 查询数据, sorter, string类的高度值. 支持树形结构的数据, 要求antd版本v4.17.0及以上. (antd.v4表格的基本功能大部分都能使用.)

项目缺陷:
1. 组件有自带的css样式文件, 会使每行的td不会换行. (如今只能做到固定每行高度的虚拟滚动)
2. 不支持横向虚拟滚动.
3. 滚动的性能不如react-window.

(keep updating.)

(如果你有好的想法, 欢迎PR. 有好的建议也可以提出来, 一起进步^.^)

业务需要，要大量数据（万行以上）用无限列表单页显示，因为数据量大所以需要分片加载，大佬有实现的思路吗？

Is it possible to implement resizable columns with VList or is it too costly for performance? An example of resizing columns is in the below link.

https://stackblitz.com/edit/sf55h2--run?file=index.js

What I'm trying to do is something like this.

components={ VList({ height: 500 }), header: { cell: ResizableTitle, }, }

页面第一次加载

收起侧边栏

代码

getColumn = () => {
        const {renamingId} = this.props;
        return [
            ... ...
            {
                title:'文件名',
                key:'name',
                width:'60%',
                ellipsis:true,
                render:(text,record,index) => {
                    console.log('title')
                    return <WtFileWriteTableNameCell
                        record={record}
                        isRename={renamingId === record.id}
                        onFileOperation={this.props.onFileOperation}
                        onFolderOperation={this.props.onFolderOperation}
                        onFileClick={this.props.onFileClick}
                    />;
                },
            },
            ... ...
        ];
};

页面加载的时候，render执行的应该是展示出来的row个数，但是在table宽度变化的时候，需要将所有row都重新render。
会不会就是因为这个引起的页面卡顿。

请问在ant table里设置了列宽，为什么会失效，不受控

跨行的情况下，使用antd v3 或者 v4都会出现高度计算错误的问题；

在readme中随便找一个column，将他的render替换为：
render: (value, row, index) => { const obj = { children: value, props: { rowSpan: (index + 1) % 10 } }; return obj; }

I don't know why every time i scroll down to the last row in the table the scroll bounce upward

这几天使用virtuallist-antd虽然加载速度问题解决了，但是发现下拉滚动时会特别不流畅且很卡。不知道作者有没有遇到类似的问题或者已经有了解决的方式，又或者是我使用virtuallist-antd方式错误？。期待作者的回复..

滚动加载onReachEnd,在滚动条在底部的时候，执行了两次，是滚动高度设置的问题吗？

当一个页面有多个table时，onReachEnd 各自有各自的调用方法。
现在取的都是最后一次的，导致我使用时，数据会串。

我试了一下,升级到antd4不能用,原因是VTable传入的props.children数组第三个元素是null,而我们这里用到了这个元素,这应该是4.0的一个改变。antd4的table并没有直接支持虚拟滚动，而是文档里写了一个例子，看起来支持的功能很少，和您写的这个不能相提并论，本组件还是有很大用途的。冒昧问一下，还准备更新这个项目吗？或者ant4后虚拟滚动有没有其他更好的解法？

    {
      width: 100,
      title: '车数',
      isMerge: true,
      key: 'sameCar',
      dataIndex: 'sameCar',
      search: false,
      fixedSearch: false,
      render: (value, row, index) => {
        const obj = {
          children: value,
          props: {},
        };
        obj.props.rowSpan = row.num
        obj.children = '1车'
        return obj;
      }
    },

合并单元格，会导致无法滚动的情况，请问怎么回事？

Hello everybody!

If you use a Table inside Tabs component, and use 'calc' to determinate the height of the 'y' scroll, when you change Tabs, the tables that have height with calc will not render the rows.

Any idea why? If you use normal numeric values it works as expected.

To reproduce go to the link bellow and change between Tab 2 and 3 after scrolling the table a bit.

Reproduction link

在配置使用VList之后，当我的数据量不多的时候，页面右侧也会显示滚动条，想问问大佬能否加入判断不超过一屏时不显示滚动条的功能（类似antd官方给的虚拟化列表的示例）？或者是有没有什么思路可以提供一下 感谢

我项目中自定义了components来实现表格的右键菜单：

const wrapperRender = (props: any) => <Dropdown overlay={contextMenu} trigger={['contextMenu']}><tbody {...props} /></Dropdown>;
const components = {
  body: {
    wrapper: wrapperRender,
  },
}

Table参数 components = {merge(VList({ height: tableHeight }), components)} // lodash/merge

这样的话虚拟列表会出bug，往下滚动的时候永远只显示开头的十几条数据，但是内容高度却在无限增长，滚不到底。

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import { Table, Input, Button } from "antd";
import { VList, scrollTo } from "virtuallist-antd";

import "./styles.css";
import "antd/dist/antd.css";

function App() {
const [dataSource, setDataSource] = useState([]);

useEffect(() => {
let tempDataSource = [];
for (let i = 0; i < 1000; i++) {
tempDataSource.push({
company_name: aaa${i} 富士山下的你好美 你知道吗,
company_name1: aaa${i} index index index index,
company_name2: aaa${i} company index index index,

    company_name3: `aaa${i} company company index index`,
    company_name4: `aaa${i} company company company index`,
    company_name5: `aaa${i} company company company company`,
    company_name6: `aaa${i} company index index company`
  });
}

setTimeout(() => {
  setDataSource(tempDataSource);
}, 2000);

}, []);

const columns = [
{
title: "序号",
key: "id",
fixed: "left",
render(text, record, index) {
return index + 1;
},
width: 100
},
{
title: "公司",
dataIndex: "company_name",
render(text, record, index) {
return
},
width: 200
},
{
title: "公司1",
dataIndex: "company_name1",
render(text, record, index) {
return
},
width: 200
},
{
title: "公司2",
dataIndex: "company_name2",
render(text, record, index) {
return
},
width: 200
}
];

return (
<>
<Button style={{ marginRight: 10 }} onClick={() => {
const tmpdataSource = [...dataSource];
tmpdataSource.push({company_name6: aaa${tmpdataSource.length + 1} company index index company});
setDataSource(tmpdataSource);
scrollTo({ row: tmpdataSource.length })
}
}>
scrollTo row: 30

<Button onClick={() => scrollTo({ y: 1000 })}>scrollTo y: 1000
<Table
columns={columns}
dataSource={dataSource}
pagination={false}
scroll={{ y: 500 }}
rowKey={"company_name"}
components={VList({
height: 500
})}
/>
</>
);
}

const rootElement = document.getElementById("root");
render(, rootElement);

使用antd Table sticky属性时，滚动时有时会有空白。
增加body 行拖拽代码后，渲染滚动条异常。

文字不好描述，可以看复现链接，一看就明白了。
具体操作步骤，点击一下send按钮，展开第一条数据的所有嵌套子表格，再点一下send按钮，就复现了
复现链接：
https://codesandbox.io/s/shu-xing-biao-ge-forked-b67hn

在项目中增加路由缓存插件 umi-plugin-keep-alive ，显示数据的时候，无法渲染全部数据，只是渲染第一条数据就不渲染其他的数据了。采用 KeepAlive 对组件进行包裹。
代码：

请求数据:

渲染效果图（不加 KeepAlive）：

增加 KeepAlive 后效果

参考 ant-design 上的解决方法

1. Dropdown 会跟随滚动条上下移动？
2. <Select> API
   
3. getPopupContainer 示例

参考仓库中的示例，修改进行的尝试

... ...
const menu = (
    <Menu>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                1st menu item
            </a>
        </Menu.Item>
        <Menu.Item disabled>
            <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                2nd menu item
            </a>
        </Menu.Item>
        <Menu.Item disabled>
            <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
                3rd menu item
            </a>
        </Menu.Item>
        <Menu.Item danger>a danger item</Menu.Item>
    </Menu>
);

const columns: ColumnsType<RecordType> = [
    {
        title: "序号",
        key: "id",
        fixed: "left",
        render(text, record, index) {
            return index + 1;
        },
        width: 100
    },
    {
        title: "公司",
        dataIndex: "company_name",
        width: 200
    },
    {
        title: "公司1",
        dataIndex: "company_name1",
        width: 200
    },
    {
        title: "公司2",
        dataIndex: "company_name2",
        width: 200,
        render(text, record) {
            return <Dropdown
                overlay={menu}
                trigger={['click']}
                // @ts-ignore
                getPopupContainer={() => document.getElementById('wrap_tableRef')}
            >
                <a>{text}</a>
            </Dropdown>
        }
    }
];
...

其中document.getElementById('wrap_tableRef')的id，是我自己在function VTable中的ref={wrap_tableRef}那边加上的。希望能提供相似的实现或者更好的解决方式，来支持getPopupContainer

文字描述不如看demo更清楚，复现步骤是：先点击一下send按钮加载数据，再将第一行数据的树形表格全部打开，之后再点击一下send按钮重新加载数据，新加载的第二个数据没展示出来。跟antd的table行为不一致

复现链接： https://codesandbox.io/s/shu-xing-biao-ge-forked-b67hn

https://codesandbox.io/s/blissful-noyce-0t37t?file=/src/index.tsx:848-857

在分页查询数据只有6-9条数据时，加载数据会出现问题

使用antd的Tabs，在多个TabPane中均存在同样的表格。切换标签页时会随机使当前标签页的表格数据变成只显示第一行。多切换几次有可能会变正常。
不使用VList无此问题。