Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

修复当自定义表格体功能(components.body)和表头分组功能(column.children)同时使用时,会出现表头和表体不对齐的问题 #1003

Merged
merged 2 commits into from
Aug 15, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -564,7 +564,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
});

headerProps.colWidths = flattenColumns.map(({ width }, index) => {
const colWidth = index === columns.length - 1 ? (width as number) - scrollbarSize : width;
const colWidth = index === flattenColumns.length - 1 ? (width as number) - scrollbarSize : width;
if (typeof colWidth === 'number' && !Number.isNaN(colWidth)) {
return colWidth;
}
Expand Down
112 changes: 112 additions & 0 deletions tests/Table.spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Table, { INTERNAL_COL_DEFINE } from '../src';
import BodyRow from '../src/Body/BodyRow';
import Cell from '../src/Cell';
import { INTERNAL_HOOKS } from '../src/constant';
import { VariableSizeGrid as Grid } from "react-window";

describe('Table.Basic', () => {
const data = [
Expand Down Expand Up @@ -1216,4 +1217,115 @@ describe('Table.Basic', () => {

expect(wrapper.render()).toMatchSnapshot();
});
afc163 marked this conversation as resolved.
Show resolved Hide resolved
it('using both column children and component body simultaneously', () => {
const width = 150;
const noChildColLen = 4;
const ChildColLen = 4;
const buildChildDataIndex = (n) => `col${n}`;
const columns = Array.from({ length: noChildColLen }, (_, i) => ({
title: `第 ${i} 列`,
dataIndex: buildChildDataIndex(i),
width,
})).concat(Array.from({ length: ChildColLen }, (_, i) => ({
title: `第 ${i} 分组`,
dataIndex: `parentCol${i}`,
width: width * 2,
children: [
{
title: `第 ${noChildColLen + i} 列`,
dataIndex: buildChildDataIndex(noChildColLen + i),
width,
},
{
title: `第 ${noChildColLen + 1 + i} 列`,
dataIndex: buildChildDataIndex(noChildColLen + 1 + i),
width,
},
]
})));
const data = Array.from({ length: 10000 }, (_, r) => {
const colLen = noChildColLen + ChildColLen * 2;
const record = {};
for (let c = 0; c < colLen; c ++) {
record[buildChildDataIndex(c)] = `r${r}, c${c}`
}
return record;
})
const Demo = (props) => {
const gridRef = React.useRef();
const [connectObject] = React.useState(() => {
const obj = {};
Object.defineProperty(obj, "scrollLeft", {
get: () => {
if (gridRef.current) {
return gridRef.current?.state?.scrollLeft;
}
return null;
},
set: (scrollLeft) => {
if (gridRef.current) {
gridRef.current.scrollTo({ scrollLeft });
}
}
});

return obj;
});

React.useEffect(() => {
gridRef.current.resetAfterIndices({
columnIndex: 0,
shouldForceUpdate: false
});
}, []);

const renderVirtualList = (rawData, { scrollbarSize, ref, onScroll }) => {
ref.current = connectObject;
return (
<Grid
ref={gridRef}
className="virtual-grid"
columnCount={columns.length}
columnWidth={(index) => {
const { width } = columns[index];
return index === columns.length - 1
? width - scrollbarSize - 1
: width;
}}
height={300}
rowCount={rawData.length}
rowHeight={() => 50}
width={800}
onScroll={({ scrollLeft }) => {
onScroll({ scrollLeft });
}}
>
{({ columnIndex, rowIndex, style }) => (
<div
className={`virtual-cell ${columnIndex === columns.length - 1 ? 'virtual-cell-last' : ''}`}
style={style}
>
r{rowIndex}, c{columnIndex}
</div>
)}
</Grid>
);
};

return (
<Table
style={{ width: 800 }}
tableLayout="fixed"
columns={props.columns}
data={props.data}
scroll={{ y: 300, x: 300 }}
components={{
body: renderVirtualList
}}
/>
);
};
const wrapper = mount(<Demo columns={columns} data={data} />);
expect(wrapper.find('col').at(noChildColLen + ChildColLen * 2 - 1).props().style.width + wrapper.find('col').last().props().style.width).toEqual(width);
})

Check notice

Code scanning / CodeQL

Semicolon insertion

Avoid automated semicolon insertion (98% of all statements in [the enclosing function](1) have an explicit semicolon).
});