From a7152ad42deb4fa276c38cd50b6e0e26c65b5bd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Tue, 12 Sep 2023 17:29:18 +0800 Subject: [PATCH] fix: VirtualTable should auto collapse if items is less than scrollY (#1020) * fix: auto collapse if needed * docs: update demo --- docs/examples/virtual.tsx | 282 +++++++++++++++++----------------- package.json | 2 +- src/VirtualTable/BodyGrid.tsx | 1 + 3 files changed, 142 insertions(+), 143 deletions(-) diff --git a/docs/examples/virtual.tsx b/docs/examples/virtual.tsx index 8e3380ca1..0780a55a7 100644 --- a/docs/examples/virtual.tsx +++ b/docs/examples/virtual.tsx @@ -12,154 +12,152 @@ interface RecordType { } const columns: ColumnsType = [ - { title: 'title1', dataIndex: 'a', key: 'a', width: 100 }, - { title: 'title1', dataIndex: 'a', key: 'a', width: 800 }, - { title: 'title1', dataIndex: 'a', key: 'a', width: 100 }, - // { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left', ellipsis: true }, - // { - // title: 'title3', - // dataIndex: 'c', - // key: 'c', - // onCell: (_, index) => { - // if (index % 4 === 0) { - // return { - // rowSpan: 3, - // }; - // } + { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' }, + { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left', ellipsis: true }, + { + title: 'title3', + dataIndex: 'c', + key: 'c', + onCell: (_, index) => { + if (index % 4 === 0) { + return { + rowSpan: 3, + }; + } - // if (index % 4 === 3) { - // return { - // rowSpan: 1, - // colSpan: 3, - // }; - // } + if (index % 4 === 3) { + return { + rowSpan: 1, + colSpan: 3, + }; + } - // return { - // rowSpan: 0, - // }; - // }, - // }, - // { - // title: 'title4', - // key: 'd', - // children: [ - // // Children columns - // { - // title: 'title4-1', - // dataIndex: 'b', - // onCell: (_, index) => { - // if (index % 4 === 0) { - // return { - // colSpan: 3, - // }; - // } + return { + rowSpan: 0, + }; + }, + }, + { + title: 'title4', + key: 'd', + children: [ + // Children columns + { + title: 'title4-1', + dataIndex: 'b', + onCell: (_, index) => { + if (index % 4 === 0) { + return { + colSpan: 3, + }; + } - // if (index % 4 === 3) { - // return { - // colSpan: 0, - // }; - // } - // }, - // }, - // { - // title: 'title4-2', - // dataIndex: 'b', - // onCell: (_, index) => { - // if (index % 4 === 0 || index % 4 === 3) { - // return { - // colSpan: 0, - // }; - // } - // }, - // }, - // ], - // }, - // { - // title: 'title6', - // dataIndex: 'b', - // key: 'f', - // onCell: (_, index) => { - // if (index % 4 === 0) { - // return { - // rowSpan: 0, - // colSpan: 0, - // }; - // } + if (index % 4 === 3) { + return { + colSpan: 0, + }; + } + }, + }, + { + title: 'title4-2', + dataIndex: 'b', + onCell: (_, index) => { + if (index % 4 === 0 || index % 4 === 3) { + return { + colSpan: 0, + }; + } + }, + }, + ], + }, + { + title: 'title6', + dataIndex: 'b', + key: 'f', + onCell: (_, index) => { + if (index % 4 === 0) { + return { + rowSpan: 0, + colSpan: 0, + }; + } - // if (index % 4 === 1) { - // return { - // rowSpan: 3, - // }; - // } + if (index % 4 === 1) { + return { + rowSpan: 3, + }; + } - // return { - // rowSpan: 0, - // }; - // }, - // }, - // { - // title: ( - //
- // title7 - //
- //
- //
- // Hello world! - //
- // ), - // dataIndex: 'bk', - // key: 'g', - // }, - // { - // title: 'title8', - // dataIndex: 'b', - // onCell: (_, index) => { - // if (index % 2 === 0) { - // return { - // rowSpan: 2, - // colSpan: 2, - // }; - // } + return { + rowSpan: 0, + }; + }, + }, + { + title: ( +
+ title7 +
+
+
+ Hello world! +
+ ), + dataIndex: 'bk', + key: 'g', + }, + { + title: 'title8', + dataIndex: 'b', + onCell: (_, index) => { + if (index % 2 === 0) { + return { + rowSpan: 2, + colSpan: 2, + }; + } - // return { - // rowSpan: 0, - // }; - // }, - // }, - // { - // title: 'title9 i', - // dataIndex: 'b', - // key: 'i', - // onCell: () => ({ - // colSpan: 0, - // }), - // }, - // { title: 'title10', dataIndex: 'b', key: 'j' }, - // { - // title: 'title11', - // dataIndex: 'b', - // key: 'k', - // width: 50, - // fixed: 'right', - // onCell: (_, index) => { - // return { - // rowSpan: index % 2 === 0 ? 2 : 0, - // // colSpan: 2, - // }; - // }, - // }, - // { - // title: 'title12', - // dataIndex: 'b', - // key: 'l', - // width: 100, - // fixed: 'right', - // onCell: () => { - // return { - // // colSpan: 0, - // }; - // }, - // }, + return { + rowSpan: 0, + }; + }, + }, + { + title: 'title9 i', + dataIndex: 'b', + key: 'i', + onCell: () => ({ + colSpan: 0, + }), + }, + { title: 'title10', dataIndex: 'b', key: 'j' }, + { + title: 'title11', + dataIndex: 'b', + key: 'k', + width: 50, + fixed: 'right', + onCell: (_, index) => { + return { + rowSpan: index % 2 === 0 ? 2 : 0, + // colSpan: 2, + }; + }, + }, + { + title: 'title12', + dataIndex: 'b', + key: 'l', + width: 100, + fixed: 'right', + onCell: () => { + return { + // colSpan: 0, + }; + }, + }, ]; export function cleanOnCell(cols: any = []) { diff --git a/package.json b/package.json index e2440a0ee..e5afd9602 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "classnames": "^2.2.5", "rc-resize-observer": "^1.1.0", "rc-util": "^5.36.0", - "rc-virtual-list": "^3.10.4" + "rc-virtual-list": "^3.10.7" }, "devDependencies": { "@rc-component/father-plugin": "^1.0.2", diff --git a/src/VirtualTable/BodyGrid.tsx b/src/VirtualTable/BodyGrid.tsx index 85983f4c5..e19e4662a 100644 --- a/src/VirtualTable/BodyGrid.tsx +++ b/src/VirtualTable/BodyGrid.tsx @@ -197,6 +197,7 @@ const Grid = React.forwardRef((props, ref) => { if (flattenData.length) { bodyContent = ( > + fullHeight={false} ref={listRef} className={classNames(tblPrefixCls, `${tblPrefixCls}-virtual`)} height={scrollY}