(
ref={fullTableRef}
{...dataProps}
>
- {title &&
{title(mergedData)}}
-
+ {title &&
{title(mergedData)}}
+
{groupTableNode}
- {footer &&
{footer(mergedData)}}
+ {footer &&
{footer(mergedData)}}
);
@@ -812,6 +820,9 @@ function Table
(
scrollX: mergedScrollX,
scrollInfo,
+ classNames,
+ styles,
+
// Table
prefixCls,
getComponent,
diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx
index cce41f90b..de9783ea1 100644
--- a/src/context/TableContext.tsx
+++ b/src/context/TableContext.tsx
@@ -14,6 +14,7 @@ import type {
TriggerEventHandler,
} from '../interface';
import type { FixedInfo } from '../utils/fixUtil';
+import { SemanticName } from '../Table';
const { makeImmutable, responseImmutable, useImmutableMark } = createImmutable();
export { makeImmutable, responseImmutable, useImmutableMark };
@@ -23,6 +24,9 @@ export type ScrollInfoType = [scrollLeft: number, scrollRange: number];
export interface TableContextProps {
// Scroll
scrollX: number | string | true;
+ style?: React.CSSProperties;
+ classNames?: Partial>;
+ styles?: Partial>;
// Table
prefixCls: string;
diff --git a/tests/semantic.spec.tsx b/tests/semantic.spec.tsx
new file mode 100644
index 000000000..2a47c5dfd
--- /dev/null
+++ b/tests/semantic.spec.tsx
@@ -0,0 +1,112 @@
+import { render, fireEvent } from '@testing-library/react';
+import React from 'react';
+import Table, { TableProps } from '../src';
+describe('support classNames and styles', () => {
+ const columns: TableProps['columns'] = [
+ {
+ title: 'title1',
+ dataIndex: 'a',
+ className: 'a',
+ key: 'a',
+ width: 100,
+ },
+ {
+ title: 'title2',
+ dataIndex: 'b',
+ className: 'b',
+ key: 'b',
+ width: 100,
+ },
+ {
+ title: 'title3',
+ dataIndex: 'c',
+ className: 'c',
+ key: 'c',
+ width: 200,
+ },
+ {
+ title: 'Operations',
+ dataIndex: '',
+ className: 'd',
+ key: 'd',
+ render() {
+ return Operations;
+ },
+ },
+ ];
+
+ const data = [
+ { a: '123', key: '1' },
+ { a: 'cdd', b: 'edd', key: '2' },
+ { a: '1333', c: 'eee', d: 2, key: '3' },
+ ];
+ const commonTableProps = {
+ columns: columns,
+ rowClassName: (record, i) => `row-${i}`,
+ expandedRowRender: (record) => extra: {record.a}
,
+ expandedRowClassName: (record, i) => `ex-row-${i}`,
+ className: "table",
+ title: () => title,
+ footer: () => footer,
+ };
+ it('should support className and style', () => {
+ const testClassNames = {
+ section: 'test-section',
+ header: 'test-header',
+ title: 'test-title',
+ body: 'test-body',
+ footer: 'test-footer',
+ content: 'test-content',
+ item: 'test-item',
+ }
+ const testStyles = {
+ section: { background: 'red' },
+ header: { background: 'blue' },
+ title: { background: 'green' },
+ body: { background: 'yellow' },
+ footer: { background: 'pink' },
+ content: { background: 'purple' },
+ item: { background: 'orange' },
+ }
+ const { container } = render(
+
+ )
+ const section = container.querySelector('.rc-table-container');
+ const title = container.querySelector('.rc-table-title');
+ const footer = container.querySelector('.rc-table-footer');
+ const content = container.querySelector('.rc-table-content');
+ const item = container.querySelector('.rc-table-cell');
+ expect(section).toHaveClass(testClassNames.section);
+ expect(section).toHaveStyle(testStyles.section);
+ expect(title).toHaveClass(testClassNames.title);
+ expect(title).toHaveStyle(testStyles.title);
+ expect(footer).toHaveClass(testClassNames.footer);
+ expect(footer).toHaveStyle(testStyles.footer);
+ expect(content).toHaveClass(testClassNames.content);
+ expect(content).toHaveStyle(testStyles.content);
+ expect(item).toHaveClass(testClassNames.item);
+ expect(item).toHaveStyle(testStyles.item);
+
+ const { container: scrollContainer } = render(
+
+ )
+ const header = scrollContainer.querySelector('.rc-table-header');
+ const body = scrollContainer.querySelector('.rc-table-body');
+ expect(header).toHaveClass(testClassNames.header);
+ expect(header).toHaveStyle(testStyles.header);
+ expect(body).toHaveClass(testClassNames.body);
+ expect(body).toHaveStyle(testStyles.body);
+ })
+})
+
From 8fd21eaf7d22a9a345b4ac441944fb1930338699 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Sat, 26 Apr 2025 00:42:31 +0800
Subject: [PATCH 2/2] fix test
---
src/Cell/index.tsx | 7 ++++++-
src/FixedHolder/index.tsx | 1 +
src/context/TableContext.tsx | 1 -
3 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
index a71e6525f..b21f664ce 100644
--- a/src/Cell/index.tsx
+++ b/src/Cell/index.tsx
@@ -123,7 +123,12 @@ function Cell(props: CellProps) {
const cellPrefixCls = `${prefixCls}-cell`;
- const { allColumnsFixedLeft, rowHoverable, classNames, styles } = useContext(TableContext);
+ const { allColumnsFixedLeft, rowHoverable, classNames, styles } = useContext(TableContext, [
+ 'allColumnsFixedLeft',
+ 'rowHoverable',
+ 'classNames',
+ 'styles',
+ ]);
// ====================== Value =======================
const [childNode, legacyCellProps] = useCellRender(
diff --git a/src/FixedHolder/index.tsx b/src/FixedHolder/index.tsx
index 29ccee089..4e07f162c 100644
--- a/src/FixedHolder/index.tsx
+++ b/src/FixedHolder/index.tsx
@@ -26,6 +26,7 @@ function useColumnWidth(colWidths: readonly number[], columCount: number) {
export interface FixedHeaderProps extends HeaderProps {
className: string;
+ style?: React.CSSProperties;
noData: boolean;
maxContentScroll: boolean;
colWidths: readonly number[];
diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx
index de9783ea1..a07425cc0 100644
--- a/src/context/TableContext.tsx
+++ b/src/context/TableContext.tsx
@@ -24,7 +24,6 @@ export type ScrollInfoType = [scrollLeft: number, scrollRange: number];
export interface TableContextProps {
// Scroll
scrollX: number | string | true;
- style?: React.CSSProperties;
classNames?: Partial>;
styles?: Partial>;