Skip to content

Commit

Permalink
fix: VirtualTable should force align column width (#1018)
Browse files Browse the repository at this point in the history 
* fix: scroll width fit

* test: add test case

* fix: ts

* adjust header ts
  • Loading branch information
@zombieJ
zombieJ authored Sep 12, 2023
1 parent 86f5cab commit 6178246
Show file tree
Hide file tree
Showing 11 changed files with 228 additions and 185 deletions.
284 changes: 143 additions & 141 deletions docs/examples/virtual.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import '../../assets/index.less';
import type { ColumnsType } from '../../src/interface';
import { VirtualTable } from '../../src';
import type { ColumnsType } from '../../src/interface';

interface RecordType {
a: string;
Expand All @@ -12,152 +12,154 @@ interface RecordType {
}

const columns: ColumnsType = [
{ 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,
};
}
{ 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,
// };
// }

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 src/FixedHolder/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(

// Check if all flattenColumns has width
const allFlattenColumnsWithWidth = React.useMemo(
() => flattenColumns.every(column => column.width >= 0),
() => flattenColumns.every(column => column.width),
[flattenColumns],
);

Expand Down
20 changes: 14 additions & 6 deletions src/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,9 +264,10 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
] = useExpand(props, mergedData, getRowKey);

// ====================== Column ======================
const scrollX = scroll?.x;
const [componentWidth, setComponentWidth] = React.useState(0);

const [columns, flattenColumns] = useColumns(
const [columns, flattenColumns, flattenScrollX] = useColumns(
{
...props,
...expandableConfig,
Expand All @@ -279,10 +280,11 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
expandIcon: mergedExpandIcon,
expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
direction,
scrollWidth: useInternalHooks && tailor && typeof scroll?.x === 'number' ? scroll.x : null,
scrollWidth: useInternalHooks && tailor && typeof scrollX === 'number' ? scrollX : null,
},
useInternalHooks ? transformColumns : null,
);
const mergedScrollX = flattenScrollX ?? scrollX;

const columnContext = React.useMemo(
() => ({
Expand All @@ -308,7 +310,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
const colWidths = React.useMemo(() => pureColWidths, [pureColWidths.join('_')]);
const stickyOffsets = useStickyOffsets(colWidths, flattenColumns.length, direction);
const fixHeader = scroll && validateValue(scroll.y);
const horizonScroll = (scroll && validateValue(scroll.x)) || Boolean(expandableConfig.fixed);
const horizonScroll = (scroll && validateValue(mergedScrollX)) || Boolean(expandableConfig.fixed);
const fixColumn = horizonScroll && flattenColumns.some(({ fixed }) => fixed);

// Sticky
Expand Down Expand Up @@ -345,7 +347,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
scrollYStyle = { overflowY: 'hidden' };
}
scrollTableStyle = {
width: scroll?.x === true ? 'auto' : scroll?.x,
width: mergedScrollX === true ? 'auto' : mergedScrollX,
minWidth: '100%',
};
}
Expand Down Expand Up @@ -502,7 +504,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
// When scroll.x is max-content, no need to fix table layout
// it's width should stretch out to fit content
if (fixColumn) {
return scroll?.x === 'max-content' ? 'auto' : 'fixed';
return mergedScrollX === 'max-content' ? 'auto' : 'fixed';
}
if (fixHeader || isSticky || flattenColumns.some(({ ellipsis }) => ellipsis)) {
return 'fixed';
Expand Down Expand Up @@ -615,7 +617,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
// Fixed holder share the props
const fixedHolderProps = {
noData: !mergedData.length,
maxContentScroll: horizonScroll && scroll.x === 'max-content',
maxContentScroll: horizonScroll && mergedScrollX === 'max-content',
...headerProps,
...columnContext,
direction,
Expand Down Expand Up @@ -730,6 +732,9 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco

const TableContextValue = React.useMemo(
() => ({
// Scroll
scrollX: mergedScrollX,

// Table
prefixCls,
getComponent,
Expand Down Expand Up @@ -775,6 +780,9 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
childrenColumnName: mergedChildrenColumnName,
}),
[
// Scroll
mergedScrollX,

// Table
prefixCls,
getComponent,
Expand Down
Loading

1 comment on commit 6178246

@vercel
Copy link

@vercel vercel bot commented on 6178246 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-react-component.vercel.app
table-git-master-react-component.vercel.app

Please sign in to comment.