diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index bd2a5f2e9..57b48322c 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -24,7 +24,7 @@ jobs:
key: lock-${{ github.sha }}
- name: create package-lock.json
- run: npm i --package-lock-only --ignore-scripts
+ run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps
- name: hack for singe file
run: |
@@ -41,7 +41,7 @@ jobs:
- name: install
if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
- run: npm ci
+ run: npm ci --legacy-peer-deps
lint:
runs-on: ubuntu-latest
diff --git a/assets/index.less b/assets/index.less
index f00920ba6..bfa245b03 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -56,6 +56,13 @@
}
// ================== Cell ==================
+ &-fixed-column-gapped {
+ .@{tablePrefixCls}-cell-fix-left-last::after,
+ .@{tablePrefixCls}-cell-fix-right-first::after {
+ display: none !important;
+ }
+ }
+
&-cell {
background: #f4f4f4;
diff --git a/docs/demo/components.md b/docs/demo/components.md
new file mode 100644
index 000000000..a3bc3ee9b
--- /dev/null
+++ b/docs/demo/components.md
@@ -0,0 +1,8 @@
+---
+title: components
+nav:
+ title: Demo
+ path: /demo
+---
+
+header table
+
+
+ );
+};
+
+const Demo = () => {
+ return (
+
+ );
+};
+
+export default Demo;
diff --git a/docs/examples/fixedColumns.tsx b/docs/examples/fixedColumns.tsx
index fb1df6711..d175f1bdd 100644
--- a/docs/examples/fixedColumns.tsx
+++ b/docs/examples/fixedColumns.tsx
@@ -34,7 +34,7 @@ const columns: ColumnType[] = [
{ title: 'title8', dataIndex: 'b', key: 'h' },
{ title: 'title9', dataIndex: 'b', key: 'i' },
{ title: 'title10', dataIndex: 'b', key: 'j' },
- { title: 'title11', dataIndex: 'b', key: 'k', width: 50, fixed: 'right' },
+ { title: 'title11', dataIndex: 'b', key: 'k', width: 50 },
{ title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
];
@@ -65,6 +65,7 @@ const Demo = () => {
Scroll Y
b || c}
scroll={{ x: 1200, y: scrollY ? 200 : null }}
diff --git a/package.json b/package.json
index 0c24abe10..6d54ff544 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "rc-table",
- "version": "7.38.1",
+ "version": "7.40.0",
"description": "table ui component for react",
"engines": {
"node": ">=8.x"
@@ -62,17 +62,16 @@
},
"devDependencies": {
"@rc-component/father-plugin": "^1.0.2",
- "@testing-library/jest-dom": "^5.16.5",
+ "@testing-library/jest-dom": "^6.4.0",
"@testing-library/react": "^12.1.5",
"@types/enzyme": "^3.10.5",
- "@types/react": "^18.0.28",
"@types/jest": "^29.5.0",
+ "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.5",
"@types/responselike": "^1.0.0",
"@types/styled-components": "^5.1.32",
- "@types/testing-library__jest-dom": "^6.0.0",
"@umijs/fabric": "^4.0.1",
- "@vitest/coverage-c8": "^0.31.0",
+ "@vitest/coverage-v8": "^1.2.2",
"cross-env": "^7.0.0",
"dumi": "^2.1.3",
"enzyme": "^3.1.0",
@@ -105,7 +104,7 @@
"regenerator-runtime": "^0.14.0",
"styled-components": "^6.1.1",
"typescript": "~5.3.0",
- "vitest": "^0.31.0"
+ "vitest": "^1.2.2"
},
"lint-staged": {
"**/*.{js,jsx,tsx,ts,md,json}": [
diff --git a/src/FixedHolder/index.tsx b/src/FixedHolder/index.tsx
index 25fc5d1dd..55ed9e80c 100644
--- a/src/FixedHolder/index.tsx
+++ b/src/FixedHolder/index.tsx
@@ -63,11 +63,13 @@ const FixedHolder = React.forwardRef>(
...restProps
} = props;
- const { prefixCls, scrollbarSize, isSticky } = useContext(TableContext, [
+ const { prefixCls, scrollbarSize, isSticky, getComponent } = useContext(TableContext, [
'prefixCls',
'scrollbarSize',
'isSticky',
+ 'getComponent',
]);
+ const TableComponent = getComponent(['header', 'table'], 'table');
const combinationScrollBarSize = isSticky && !fixHeader ? 0 : scrollbarSize;
@@ -146,7 +148,7 @@ const FixedHolder = React.forwardRef>(
[stickyClassName]: !!stickyClassName,
})}
>
- >(
columns: columnsWithScrollbar,
flattenColumns: flattenColumnsWithScrollbar,
})}
-
+
);
});
diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
index d7466d503..f21b817b2 100644
--- a/src/Header/Header.tsx
+++ b/src/Header/Header.tsx
@@ -90,7 +90,7 @@ export interface HeaderProps {
onHeaderRow: GetComponentProps[]>;
}
-function Header(props: HeaderProps): React.ReactElement {
+const Header = (props: HeaderProps) => {
if (process.env.NODE_ENV !== 'production') {
devRenderTimes(props);
}
@@ -98,12 +98,11 @@ function Header(props: HeaderProps): React.ReactElement
const { stickyOffsets, columns, flattenColumns, onHeaderRow } = props;
const { prefixCls, getComponent } = useContext(TableContext, ['prefixCls', 'getComponent']);
- const rows: CellType[][] = React.useMemo(() => parseHeaderRows(columns), [columns]);
+ const rows = React.useMemo[][]>(() => parseHeaderRows(columns), [columns]);
const WrapperComponent = getComponent(['header', 'wrapper'], 'thead');
const trComponent = getComponent(['header', 'row'], 'tr');
const thComponent = getComponent(['header', 'cell'], 'th');
- const tdComponent = getComponent(['header', 'cell'], 'td');
return (
@@ -116,16 +115,14 @@ function Header(props: HeaderProps): React.ReactElement
stickyOffsets={stickyOffsets}
rowComponent={trComponent}
cellComponent={thComponent}
- tdCellComponent={tdComponent}
onHeaderRow={onHeaderRow}
index={rowIndex}
/>
);
-
return rowNode;
})}
);
-}
+};
export default responseImmutable(Header);
diff --git a/src/Header/HeaderRow.tsx b/src/Header/HeaderRow.tsx
index eafc64e21..fe7629c64 100644
--- a/src/Header/HeaderRow.tsx
+++ b/src/Header/HeaderRow.tsx
@@ -18,21 +18,20 @@ export interface RowProps {
flattenColumns: readonly ColumnType[];
rowComponent: CustomizeComponent;
cellComponent: CustomizeComponent;
- tdCellComponent: CustomizeComponent;
onHeaderRow: GetComponentProps[]>;
index: number;
}
-function HeaderRow({
- cells,
- stickyOffsets,
- flattenColumns,
- rowComponent: RowComponent,
- cellComponent: CellComponent,
- tdCellComponent,
- onHeaderRow,
- index,
-}: RowProps) {
+const HeaderRow = (props: RowProps) => {
+ const {
+ cells,
+ stickyOffsets,
+ flattenColumns,
+ rowComponent: RowComponent,
+ cellComponent: CellComponent,
+ onHeaderRow,
+ index,
+ } = props;
const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
let rowProps: React.HTMLAttributes;
if (onHeaderRow) {
@@ -67,7 +66,7 @@ function HeaderRow({
scope={column.title ? (cell.colSpan > 1 ? 'colgroup' : 'col') : null}
ellipsis={column.ellipsis}
align={column.align}
- component={column.title ? CellComponent : tdCellComponent}
+ component={CellComponent}
prefixCls={prefixCls}
key={columnsKey[cellIndex]}
{...fixedInfo}
@@ -78,7 +77,7 @@ function HeaderRow({
})}
);
-}
+};
if (process.env.NODE_ENV !== 'production') {
HeaderRow.displayName = 'HeaderRow';
diff --git a/src/Table.tsx b/src/Table.tsx
index 1bd9d323d..fa231af0b 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -280,7 +280,7 @@ function Table(
const scrollX = scroll?.x;
const [componentWidth, setComponentWidth] = React.useState(0);
- const [columns, flattenColumns, flattenScrollX] = useColumns(
+ const [columns, flattenColumns, flattenScrollX, hasGapFixed] = useColumns(
{
...props,
...expandableConfig,
@@ -348,7 +348,7 @@ function Table(
const colsKeys = getColumnsKey(flattenColumns);
const pureColWidths = colsKeys.map(columnKey => colsWidths.get(columnKey));
const colWidths = React.useMemo(() => pureColWidths, [pureColWidths.join('_')]);
- const stickyOffsets = useStickyOffsets(colWidths, flattenColumns.length, direction);
+ const stickyOffsets = useStickyOffsets(colWidths, flattenColumns, direction);
const fixHeader = scroll && validateValue(scroll.y);
const horizonScroll = (scroll && validateValue(mergedScrollX)) || Boolean(expandableConfig.fixed);
const fixColumn = horizonScroll && flattenColumns.some(({ fixed }) => fixed);
@@ -706,6 +706,7 @@ function Table(
scrollBodyRef={scrollBodyRef}
onScroll={onScroll}
container={container}
+ data={data}
/>
)}
@@ -750,6 +751,7 @@ function Table(
[`${prefixCls}-fixed-header`]: fixHeader,
/** No used but for compatible */
[`${prefixCls}-fixed-column`]: fixColumn,
+ [`${prefixCls}-fixed-column-gapped`]: fixColumn && hasGapFixed,
[`${prefixCls}-scroll-horizontal`]: horizonScroll,
[`${prefixCls}-has-fix-left`]: flattenColumns[0] && flattenColumns[0].fixed,
[`${prefixCls}-has-fix-right`]:
diff --git a/src/hooks/useColumns/index.tsx b/src/hooks/useColumns/index.tsx
index 345f98a4b..99490db32 100644
--- a/src/hooks/useColumns/index.tsx
+++ b/src/hooks/useColumns/index.tsx
@@ -88,30 +88,6 @@ function flatColumns(
}, []);
}
-function warningFixed(flattenColumns: readonly { fixed?: FixedType }[]) {
- let allFixLeft = true;
- for (let i = 0; i < flattenColumns.length; i += 1) {
- const col = flattenColumns[i];
- if (allFixLeft && col.fixed !== 'left') {
- allFixLeft = false;
- } else if (!allFixLeft && col.fixed === 'left') {
- warning(false, `Index ${i - 1} of \`columns\` missing \`fixed='left'\` prop.`);
- break;
- }
- }
-
- let allFixRight = true;
- for (let i = flattenColumns.length - 1; i >= 0; i -= 1) {
- const col = flattenColumns[i];
- if (allFixRight && col.fixed !== 'right') {
- allFixRight = false;
- } else if (!allFixRight && col.fixed === 'right') {
- warning(false, `Index ${i + 1} of \`columns\` missing \`fixed='right'\` prop.`);
- break;
- }
- }
-}
-
function revertForRtl(columns: ColumnsType): ColumnsType {
return columns.map(column => {
const { fixed, ...restProps } = column;
@@ -176,6 +152,7 @@ function useColumns(
columns: ColumnsType,
flattenColumns: readonly ColumnType[],
realScrollWidth: undefined | number,
+ hasGapFixed: boolean,
] {
const baseColumns = React.useMemo>(() => {
const newColumns = columns || convertChildrenToColumns(children) || [];
@@ -294,10 +271,40 @@ function useColumns(
return flatColumns(mergedColumns);
}, [mergedColumns, direction, scrollWidth]);
- // Only check out of production since it's waste for each render
- if (process.env.NODE_ENV !== 'production') {
- warningFixed(direction === 'rtl' ? flattenColumns.slice().reverse() : flattenColumns);
- }
+ // ========================= Gap Fixed ========================
+ const hasGapFixed = React.useMemo(() => {
+ // Fixed: left, since old browser not support `findLastIndex`, we should use reverse loop
+ let lastLeftIndex = -1;
+ for (let i = flattenColumns.length - 1; i >= 0; i -= 1) {
+ const colFixed = flattenColumns[i].fixed;
+ if (colFixed === 'left' || colFixed === true) {
+ lastLeftIndex = i;
+ break;
+ }
+ }
+
+ if (lastLeftIndex >= 0) {
+ for (let i = 0; i <= lastLeftIndex; i += 1) {
+ const colFixed = flattenColumns[i].fixed;
+ if (colFixed !== 'left' && colFixed !== true) {
+ return true;
+ }
+ }
+ }
+
+ // Fixed: right
+ const firstRightIndex = flattenColumns.findIndex(({ fixed: colFixed }) => colFixed === 'right');
+ if (firstRightIndex >= 0) {
+ for (let i = firstRightIndex; i < flattenColumns.length; i += 1) {
+ const colFixed = flattenColumns[i].fixed;
+ if (colFixed !== 'right') {
+ return true;
+ }
+ }
+ }
+
+ return false;
+ }, [flattenColumns]);
// ========================= FillWidth ========================
const [filledColumns, realScrollWidth] = useWidthColumns(
@@ -306,7 +313,7 @@ function useColumns(
clientWidth,
);
- return [mergedColumns, filledColumns, realScrollWidth];
+ return [mergedColumns, filledColumns, realScrollWidth, hasGapFixed];
}
export default useColumns;
diff --git a/src/hooks/useStickyOffsets.ts b/src/hooks/useStickyOffsets.ts
index 847cc4132..220f66667 100644
--- a/src/hooks/useStickyOffsets.ts
+++ b/src/hooks/useStickyOffsets.ts
@@ -1,43 +1,45 @@
import { useMemo } from 'react';
-import type { Direction, StickyOffsets } from '../interface';
+import type { ColumnType, Direction, StickyOffsets } from '../interface';
/**
* Get sticky column offset width
*/
-function useStickyOffsets(colWidths: number[], columnCount: number, direction: Direction) {
+function useStickyOffsets(
+ colWidths: number[],
+ flattenColumns: readonly ColumnType[],
+ direction: Direction,
+) {
const stickyOffsets: StickyOffsets = useMemo(() => {
- const leftOffsets: number[] = [];
- const rightOffsets: number[] = [];
- let left = 0;
- let right = 0;
-
- for (let start = 0; start < columnCount; start += 1) {
- if (direction === 'rtl') {
- // Left offset
- rightOffsets[start] = right;
- right += colWidths[start] || 0;
-
- // Right offset
- const end = columnCount - start - 1;
- leftOffsets[end] = left;
- left += colWidths[end] || 0;
- } else {
- // Left offset
- leftOffsets[start] = left;
- left += colWidths[start] || 0;
-
- // Right offset
- const end = columnCount - start - 1;
- rightOffsets[end] = right;
- right += colWidths[end] || 0;
+ const columnCount = flattenColumns.length;
+
+ const getOffsets = (startIndex: number, endIndex: number, offset: number) => {
+ const offsets: number[] = [];
+ let total = 0;
+
+ for (let i = startIndex; i !== endIndex; i += offset) {
+ offsets.push(total);
+
+ if (flattenColumns[i].fixed) {
+ total += colWidths[i] || 0;
+ }
}
- }
- return {
- left: leftOffsets,
- right: rightOffsets,
+ return offsets;
};
- }, [colWidths, columnCount, direction]);
+
+ const startOffsets = getOffsets(0, columnCount, 1);
+ const endOffsets = getOffsets(columnCount - 1, -1, -1).reverse();
+
+ return direction === 'rtl'
+ ? {
+ left: endOffsets,
+ right: startOffsets,
+ }
+ : {
+ left: startOffsets,
+ right: endOffsets,
+ };
+ }, [colWidths, flattenColumns, direction]);
return stickyOffsets;
}
diff --git a/src/index.ts b/src/index.ts
index a1c42ecbe..c16dd1b19 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@
import { EXPAND_COLUMN, INTERNAL_HOOKS } from './constant';
import { FooterComponents as Summary } from './Footer';
-import type { ColumnType, Reference } from './interface';
+import type { ColumnType, ColumnsType, Reference } from './interface';
import Column from './sugar/Column';
import ColumnGroup from './sugar/ColumnGroup';
import type { TableProps } from './Table';
@@ -23,6 +23,7 @@ export {
type VirtualTableProps,
type Reference,
type ColumnType,
+ type ColumnsType,
};
export default Table;
diff --git a/src/interface.ts b/src/interface.ts
index 9513d3ce4..ee2199b7d 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -155,6 +155,7 @@ export type CustomizeScrollBody = (
export interface TableComponents {
table?: CustomizeComponent;
header?: {
+ table?: CustomizeComponent;
wrapper?: CustomizeComponent;
row?: CustomizeComponent;
cell?: CustomizeComponent;
diff --git a/src/stickyScrollBar.tsx b/src/stickyScrollBar.tsx
index 6aa84777b..e73bea58f 100644
--- a/src/stickyScrollBar.tsx
+++ b/src/stickyScrollBar.tsx
@@ -12,10 +12,11 @@ interface StickyScrollBarProps {
onScroll: (params: { scrollLeft?: number }) => void;
offsetScroll: number;
container: HTMLElement | Window;
+ data?: readonly any[];
}
const StickyScrollBar: React.ForwardRefRenderFunction = (
- { scrollBodyRef, onScroll, offsetScroll, container },
+ { scrollBodyRef, onScroll, offsetScroll, container, data },
ref,
) => {
const prefixCls = useContext(TableContext, 'prefixCls');
@@ -80,7 +81,7 @@ const StickyScrollBar: React.ForwardRefRenderFunction {
+ const checkScrollBarVisible = () => {
if (!scrollBodyRef.current) {
return;
}
@@ -123,7 +124,7 @@ const StickyScrollBar: React.ForwardRefRenderFunction {
const onMouseUpListener = addEventListener(document.body, 'mouseup', onMouseUp, false);
const onMouseMoveListener = addEventListener(document.body, 'mousemove', onMouseMove, false);
- onContainerScroll();
+ checkScrollBarVisible();
return () => {
onMouseUpListener.remove();
onMouseMoveListener.remove();
@@ -131,8 +132,8 @@ const StickyScrollBar: React.ForwardRefRenderFunction {
- const onScrollListener = addEventListener(container, 'scroll', onContainerScroll, false);
- const onResizeListener = addEventListener(window, 'resize', onContainerScroll, false);
+ const onScrollListener = addEventListener(container, 'scroll', checkScrollBarVisible, false);
+ const onResizeListener = addEventListener(window, 'resize', checkScrollBarVisible, false);
return () => {
onScrollListener.remove();
@@ -155,6 +156,11 @@ const StickyScrollBar: React.ForwardRefRenderFunction {
+ checkScrollBarVisible();
+ }, [data]);
+
if (bodyScrollWidth <= bodyWidth || !scrollBarWidth || scrollState.isHiddenScrollBar) {
return null;
}
diff --git a/tests/FixedColumn.spec.jsx b/tests/FixedColumn.spec.tsx
similarity index 81%
rename from tests/FixedColumn.spec.jsx
rename to tests/FixedColumn.spec.tsx
index a0f7eb47a..d4168af12 100644
--- a/tests/FixedColumn.spec.jsx
+++ b/tests/FixedColumn.spec.tsx
@@ -1,11 +1,16 @@
+import React from 'react';
import { mount } from 'enzyme';
-import RcResizeObserver from 'rc-resize-observer';
+import { render } from '@testing-library/react';
+import RcResizeObserver, { _rs } from 'rc-resize-observer';
import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import { resetWarned } from 'rc-util/lib/warning';
import { act } from 'react-dom/test-utils';
-import Table from '../src';
+import Table, { type ColumnsType } from '../src';
import { safeAct } from './utils';
+function triggerResize(ele: HTMLElement) {
+ _rs([{ target: ele }] as any);
+}
+
describe('Table.FixedColumn', () => {
let domSpy;
beforeEach(() => {
@@ -26,7 +31,7 @@ describe('Table.FixedColumn', () => {
domSpy.mockRestore();
});
- const columns = [
+ const columns: ColumnsType = [
{ title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
{
title: 'title2',
@@ -86,7 +91,7 @@ describe('Table.FixedColumn', () => {
{
data: wrapper.find('table ResizeObserver').first().props().data,
size: { width: 93, offsetWidth: 93 },
- },
+ } as any,
]);
});
await safeAct(wrapper);
@@ -131,7 +136,7 @@ describe('Table.FixedColumn', () => {
scrollWidth: 200,
clientWidth: 100,
},
- });
+ } as any);
});
wrapper.update();
expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy();
@@ -148,7 +153,7 @@ describe('Table.FixedColumn', () => {
scrollWidth: 200,
clientWidth: 100,
},
- });
+ } as any);
});
wrapper.update();
expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeFalsy();
@@ -165,7 +170,7 @@ describe('Table.FixedColumn', () => {
scrollWidth: 200,
clientWidth: 100,
},
- });
+ } as any);
});
wrapper.update();
expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy();
@@ -182,49 +187,13 @@ describe('Table.FixedColumn', () => {
scrollWidth: 100,
clientWidth: 100,
},
- });
+ } as any);
});
wrapper.update();
expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeFalsy();
expect(wrapper.find('.rc-table').hasClass('rc-table-ping-right')).toBeFalsy();
});
- describe('warning if fixed not continue', () => {
- let errorSpy;
-
- beforeAll(() => {
- errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
- });
-
- beforeEach(() => {
- resetWarned();
- errorSpy.mockReset();
- });
-
- afterAll(() => {
- errorSpy.mockRestore();
- });
-
- it('left', async () => {
- mount();
- expect(errorSpy).toHaveBeenCalledWith(
- "Warning: Index 0 of `columns` missing `fixed='left'` prop.",
- );
- });
-
- it('right', () => {
- mount();
- expect(errorSpy).toHaveBeenCalledWith(
- "Warning: Index 2 of `columns` missing `fixed='right'` prop.",
- );
- });
-
- it('RTL', () => {
- mount();
- expect(errorSpy).not.toHaveBeenCalled();
- });
- });
-
it('ellipsis will wrap additional dom', () => {
const myColumns = [{ ...columns[0], ellipsis: true }];
const wrapper = mount();
@@ -282,4 +251,51 @@ describe('Table.FixedColumn', () => {
await safeAct(wrapper);
expect(wrapper.find('.rc-table-cell-fix-left-all')).toHaveLength(10);
});
+
+ describe('cross fixed support', () => {
+ it('left', async () => {
+ const { container } = render(
+ ,
+ );
+
+ act(() => {
+ Array.from(container.querySelectorAll('.rc-table-measure-row td')).forEach(
+ td => {
+ triggerResize(td);
+ },
+ );
+ });
+
+ await act(async () => {
+ vi.runAllTimers();
+ await Promise.resolve();
+ });
+
+ expect(container.querySelectorAll('tbody .rc-table-cell-fix-left')).toHaveLength(2);
+ expect(container.querySelectorAll('thead th')[1]).toHaveStyle({
+ left: '0px',
+ });
+ expect(container.querySelectorAll('thead th')[2]).toHaveStyle({
+ left: '1000px',
+ });
+ });
+ });
+ describe('components.table by sticky', () => {
+ it('render', async () => {
+ const table = props => {
+ return (
+ <>
+ header table
+
+
+ );
+ };
+ const { container } = render();
+ expect(container.querySelector('.healer-table')).toBeTruthy();
+ });
+ });
});
diff --git a/tests/Table.spec.jsx b/tests/Table.spec.jsx
index 05b9d53aa..3201053eb 100644
--- a/tests/Table.spec.jsx
+++ b/tests/Table.spec.jsx
@@ -300,29 +300,6 @@ describe('Table.Basic', () => {
});
});
- it('renders td instead of th if header title is empty', () => {
- const wrapper = mount(
- createTable({
- columns: [
- {
- title: '',
- dataIndex: 'firstName',
- key: 'firstName',
- },
- {
- title: 'Last Name',
- dataIndex: 'lastName',
- key: 'lastName',
- },
- ],
- data: [{ firstName: 'John', lastName: 'Doe', key: '1' }],
- }),
- );
-
- expect(wrapper.find('thead td')).toHaveLength(1);
- expect(wrapper.find('thead th')).toHaveLength(1);
- });
-
it('renders column correctly', () => {
const columns = [
{
diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap
index 96f841d8f..08b694eff 100644
--- a/tests/__snapshots__/ExpandRow.spec.jsx.snap
+++ b/tests/__snapshots__/ExpandRow.spec.jsx.snap
@@ -159,7 +159,7 @@ LoadedCheerio {
class="rc-table-thead"
>
- |
@@ -344,7 +344,7 @@ LoadedCheerio {
class="rc-table-thead"
>
- |
@@ -646,7 +646,7 @@ LoadedCheerio {
class="rc-table-thead"
>
- |
@@ -1204,7 +1204,7 @@ LoadedCheerio {
class="rc-table-thead"
>
- |
@@ -1410,7 +1410,7 @@ LoadedCheerio {
>
Gender
- |
diff --git a/tests/__snapshots__/FixedColumn.spec.tsx.snap b/tests/__snapshots__/FixedColumn.spec.tsx.snap
new file mode 100644
index 000000000..273f7f0c2
--- /dev/null
+++ b/tests/__snapshots__/FixedColumn.spec.tsx.snap
@@ -0,0 +1,3145 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
+LoadedCheerio {
+ "0": ,
+ "_root": LoadedCheerio {
+ "0": Document {
+ "children": [
+
+
+
+ ,
+ ],
+ "endIndex": null,
+ "next": null,
+ "parent": null,
+ "prev": null,
+ "startIndex": null,
+ "type": "root",
+ "x-mode": "quirks",
+ },
+ "_root": [Circular],
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+ },
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+}
+`;
+
+exports[`Table.FixedColumn > renders correctly > all column has width should use it 1`] = `
+LoadedCheerio {
+ "0":
+
+
+ ,
+ "_root": LoadedCheerio {
+ "0": Document {
+ "children": [
+
+
+
+ ,
+ ],
+ "endIndex": null,
+ "next": null,
+ "parent": null,
+ "prev": null,
+ "startIndex": null,
+ "type": "root",
+ "x-mode": "quirks",
+ },
+ "_root": [Circular],
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+ },
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+}
+`;
+
+exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = `
+LoadedCheerio {
+ "0": ,
+ "_root": LoadedCheerio {
+ "0": Document {
+ "children": [
+
+
+
+ ,
+ ],
+ "endIndex": null,
+ "next": null,
+ "parent": null,
+ "prev": null,
+ "startIndex": null,
+ "type": "root",
+ "x-mode": "quirks",
+ },
+ "_root": [Circular],
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+ },
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+}
+`;
+
+exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = `
+LoadedCheerio {
+ "0": ,
+ "_root": LoadedCheerio {
+ "0": Document {
+ "children": [
+
+
+
+ ,
+ ],
+ "endIndex": null,
+ "next": null,
+ "parent": null,
+ "prev": null,
+ "startIndex": null,
+ "type": "root",
+ "x-mode": "quirks",
+ },
+ "_root": [Circular],
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+ },
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+}
+`;
+
+exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = `
+LoadedCheerio {
+ "0": ,
+ "_root": LoadedCheerio {
+ "0": Document {
+ "children": [
+
+
+
+ ,
+ ],
+ "endIndex": null,
+ "next": null,
+ "parent": null,
+ "prev": null,
+ "startIndex": null,
+ "type": "root",
+ "x-mode": "quirks",
+ },
+ "_root": [Circular],
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+ },
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+}
+`;
+
+exports[`Table.FixedColumn > renders correctly > scrollXY - without data 1`] = `
+LoadedCheerio {
+ "0": ,
+ "_root": LoadedCheerio {
+ "0": Document {
+ "children": [
+
+
+
+ ,
+ ],
+ "endIndex": null,
+ "next": null,
+ "parent": null,
+ "prev": null,
+ "startIndex": null,
+ "type": "root",
+ "x-mode": "quirks",
+ },
+ "_root": [Circular],
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+ },
+ "length": 1,
+ "options": {
+ "decodeEntities": true,
+ "xml": false,
+ },
+}
+`;
diff --git a/tests/__snapshots__/Table.spec.jsx.snap b/tests/__snapshots__/Table.spec.jsx.snap
index 3dc5283f0..c3261a2ff 100644
--- a/tests/__snapshots__/Table.spec.jsx.snap
+++ b/tests/__snapshots__/Table.spec.jsx.snap
@@ -394,13 +394,13 @@ LoadedCheerio {
class="rc-table-thead"
>
- |
- |
- |
@@ -1021,7 +1021,7 @@ LoadedCheerio {
class="rc-table-thead"
>
- |
@@ -1212,7 +1212,7 @@ LoadedCheerio {
>
Name
- |
diff --git a/tests/setup.ts b/tests/setup.ts
index 8597c2d9b..648329c8d 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -1,12 +1,4 @@
-import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
-import matchers from '@testing-library/jest-dom/matchers';
-import { expect } from 'vitest';
-
-declare module 'vitest' {
- interface Assertion extends jest.Matchers, TestingLibraryMatchers {}
-}
-
-expect.extend(matchers);
+import '@testing-library/jest-dom';
// https://github.com/nickcolley/jest-axe/issues/147#issuecomment-758804533
const { getComputedStyle } = window;
diff --git a/tsconfig.json b/tsconfig.json
index 613a69611..b7bdcf0fb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
"@@/*": [".dumi/tmp/*"],
"rc-table": ["src/index.ts"]
},
- "types": ["vitest/globals"]
+ "types": ["vitest/globals", "@testing-library/jest-dom"]
},
"include": [".dumirc.ts", "**/*.ts", "**/*.tsx"]
}