Skip to content

Commit

Permalink
fix: VirtualTable should auto collapse if items is less than scrollY (#…
Browse files Browse the repository at this point in the history 
…1020)

* fix: auto collapse if needed

* docs: update demo
  • Loading branch information
@zombieJ
zombieJ authored Sep 12, 2023
1 parent 5ab30cf commit a7152ad
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 143 deletions.
282 changes: 140 additions & 142 deletions docs/examples/virtual.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: (
// <div>
// title7
// <br />
// <br />
// <br />
// Hello world!
// </div>
// ),
// dataIndex: 'bk',
// key: 'g',
// },
// {
// title: 'title8',
// dataIndex: 'b',
// onCell: (_, index) => {
// if (index % 2 === 0) {
// return {
// rowSpan: 2,
// colSpan: 2,
// };
// }
return {
rowSpan: 0,
};
},
},
{
title: (
<div>
title7
<br />
<br />
<br />
Hello world!
</div>
),
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 = []) {
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/VirtualTable/BodyGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
if (flattenData.length) {
bodyContent = (
<VirtualList<FlattenData<any>>
fullHeight={false}
ref={listRef}
className={classNames(tblPrefixCls, `${tblPrefixCls}-virtual`)}
height={scrollY}
Expand Down

1 comment on commit a7152ad

@vercel
Copy link

@vercel vercel bot commented on a7152ad Sep 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

table – ./

table-git-master-react-component.vercel.app
table-react-component.vercel.app

Please sign in to comment.