`;
+exports[`renders components/table/demo/component-token.tsx correctly 1`] = `
+Array [
+
,
+]
+`;
+
exports[`renders components/table/demo/custom-filter-panel.tsx correctly 1`] = `
= [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ },
+ {
+ title: 'Age',
+ dataIndex: 'age',
+ sorter: (a, b) => a.age - b.age,
+ },
+ {
+ title: 'Address',
+ dataIndex: 'address',
+ filters: [
+ {
+ text: 'London',
+ value: 'London',
+ },
+ {
+ text: 'New York',
+ value: 'New York',
+ },
+ ],
+ onFilter: (value, record) => record.address.indexOf(value as string) === 0,
+ },
+ {
+ title: 'Action',
+ key: 'action',
+ sorter: true,
+ render: () => (
+
+ Delete
+
+
+ More actions
+
+
+
+
+ ),
+ },
+];
+
+const data: DataType[] = [];
+for (let i = 1; i <= 10; i++) {
+ data.push({
+ key: i,
+ name: 'John Brown',
+ age: Number(`${i}2`),
+ address: `New York No. ${i} Lake Park`,
+ description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
+ });
+}
+
+const defaultExpandable = { expandedRowRender: (record: DataType) =>
{record.description}
};
+const defaultTitle = () => 'Here is title';
+const defaultFooter = () => 'Here is footer';
+
+const App: React.FC = () => {
+ const [bordered, setBordered] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [size, setSize] = useState
('large');
+ const [expandable, setExpandable] = useState | undefined>(
+ defaultExpandable,
+ );
+ const [showTitle, setShowTitle] = useState(false);
+ const [showHeader, setShowHeader] = useState(true);
+ const [showfooter, setShowFooter] = useState(true);
+ const [rowSelection, setRowSelection] = useState | undefined>({});
+ const [hasData, setHasData] = useState(true);
+ const [tableLayout, setTableLayout] = useState();
+ const [top, setTop] = useState('none');
+ const [bottom, setBottom] = useState('bottomRight');
+ const [ellipsis, setEllipsis] = useState(false);
+ const [yScroll, setYScroll] = useState(false);
+ const [xScroll, setXScroll] = useState();
+
+ const handleBorderChange = (enable: boolean) => {
+ setBordered(enable);
+ };
+
+ const handleLoadingChange = (enable: boolean) => {
+ setLoading(enable);
+ };
+
+ const handleSizeChange = (e: RadioChangeEvent) => {
+ setSize(e.target.value);
+ };
+
+ const handleTableLayoutChange = (e: RadioChangeEvent) => {
+ setTableLayout(e.target.value);
+ };
+
+ const handleExpandChange = (enable: boolean) => {
+ setExpandable(enable ? defaultExpandable : undefined);
+ };
+
+ const handleEllipsisChange = (enable: boolean) => {
+ setEllipsis(enable);
+ };
+
+ const handleTitleChange = (enable: boolean) => {
+ setShowTitle(enable);
+ };
+
+ const handleHeaderChange = (enable: boolean) => {
+ setShowHeader(enable);
+ };
+
+ const handleFooterChange = (enable: boolean) => {
+ setShowFooter(enable);
+ };
+
+ const handleRowSelectionChange = (enable: boolean) => {
+ setRowSelection(enable ? {} : undefined);
+ };
+
+ const handleYScrollChange = (enable: boolean) => {
+ setYScroll(enable);
+ };
+
+ const handleXScrollChange = (e: RadioChangeEvent) => {
+ setXScroll(e.target.value);
+ };
+
+ const handleDataChange = (newHasData: boolean) => {
+ setHasData(newHasData);
+ };
+
+ const scroll: { x?: number | string; y?: number | string } = {};
+ if (yScroll) {
+ scroll.y = 240;
+ }
+ if (xScroll) {
+ scroll.x = '100vw';
+ }
+
+ const tableColumns = columns.map((item) => ({ ...item, ellipsis }));
+ if (xScroll === 'fixed') {
+ tableColumns[0].fixed = true;
+ tableColumns[tableColumns.length - 1].fixed = 'right';
+ }
+
+ const tableProps: TableProps = {
+ bordered,
+ loading,
+ size,
+ expandable,
+ title: showTitle ? defaultTitle : undefined,
+ showHeader,
+ footer: showfooter ? defaultFooter : undefined,
+ rowSelection,
+ scroll,
+ tableLayout,
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Large
+ Middle
+ Small
+
+
+
+
+ Unset
+ Scroll
+ Fixed Columns
+
+
+
+
+ Unset
+ Fixed
+
+
+
+ {
+ setTop(e.target.value);
+ }}
+ >
+ TopLeft
+ TopCenter
+ TopRight
+ None
+
+
+
+ {
+ setBottom(e.target.value);
+ }}
+ >
+ BottomLeft
+ BottomCenter
+ BottomRight
+ None
+
+
+
+
+
+
+ >
+ );
+};
+
+export default App;
diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
index d0b24b0a5a80..7e13638a2ea1 100644
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@@ -105,6 +105,7 @@ const columns = [
Fixed header and scroll bar with the page
Dynamic Settings
selections with icon
+Component Token
## API
diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
index b35ce8051cc6..818c831fc5f6 100644
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@@ -106,6 +106,7 @@ const columns = [
随页面滚动的固定表头和滚动条
动态控制表格属性
带下拉箭头的表头
+组件 Token
## API
diff --git a/components/table/style/filter.ts b/components/table/style/filter.ts
index bd04f1d92a28..d86a223d7bf6 100644
--- a/components/table/style/filter.ts
+++ b/components/table/style/filter.ts
@@ -29,6 +29,7 @@ const genFilterStyle: GenerateStyle = (token) => {
controlItemBgHover,
controlItemBgActive,
boxShadowSecondary,
+ filterDropdownMenuBg,
} = token;
const dropdownPrefixCls = `${antCls}-dropdown`;
const tableFilterDropdownPrefixCls = `${componentCls}-filter-dropdown`;
@@ -88,6 +89,7 @@ const genFilterStyle: GenerateStyle = (token) => {
border: 0,
boxShadow: 'none',
borderRadius: 'unset',
+ backgroundColor: filterDropdownMenuBg,
'&:empty::after': {
display: 'block',
diff --git a/components/table/style/index.ts b/components/table/style/index.ts
index f1ffe8b34c18..6a11ccef9166 100644
--- a/components/table/style/index.ts
+++ b/components/table/style/index.ts
@@ -18,7 +18,163 @@ import genSorterStyle from './sorter';
import genStickyStyle from './sticky';
import genSummaryStyle from './summary';
-export interface ComponentToken {}
+export interface ComponentToken {
+ /**
+ * @desc 表头背景
+ * @descEN Background of table header
+ */
+ headerBg: string;
+ /**
+ * @desc 表头文字颜色
+ * @descEN Color of table header text
+ */
+ headerColor: string;
+ /**
+ * @desc 表头排序激活态背景色
+ * @descEN Background color of table header when sorted
+ */
+ headerSortActiveBg: string;
+ /**
+ * @desc 表头排序激活态悬浮背景色
+ * @descEN Background color of table header when sorted and hovered
+ */
+ headerSortHoverBg: string;
+ /**
+ * @desc 表格排序列背景色
+ * @descEN Background color of table sorted column
+ */
+ bodySortBg: string;
+ /**
+ * @desc 表格行悬浮背景色
+ * @descEN Background color of table hovered row
+ */
+ rowHoverBg: string;
+ /**
+ * @desc 表格行选中背景色
+ * @descEN Background color of table selected row
+ */
+ rowSelectedBg: string;
+ /**
+ * @desc 表格行选中悬浮背景色
+ * @descEN Background color of table selected row when hovered
+ */
+ rowSelectedHoverBg: string;
+ /**
+ * @desc 表格行展开背景色
+ * @descEN Background color of table expanded row
+ */
+ rowExpandedBg: string;
+ /**
+ * @desc 单元格纵向内间距
+ * @descEN Vertical padding of table cell
+ */
+ cellPaddingBlock: number;
+ /**
+ * @desc 单元格横向内间距(默认大尺寸)
+ * @descEN Horizontal padding of table cell (large size by default)
+ */
+ cellPaddingInline: number;
+ /**
+ * @desc 单元格纵向内间距(中等尺寸)
+ * @descEN Vertical padding of table cell (middle size)
+ */
+ cellPaddingBlockMD: number;
+ /**
+ * @desc 单元格横向内间距(中等尺寸)
+ * @descEN Horizontal padding of table cell (middle size)
+ */
+ cellPaddingInlineMD: number;
+ /**
+ * @desc 单元格纵向内间距(小尺寸)
+ * @descEN Vertical padding of table cell (small size)
+ */
+ cellPaddingBlockSM: number;
+ /**
+ * @desc 单元格横向内间距(小尺寸)
+ * @descEN Horizontal padding of table cell (small size)
+ */
+ cellPaddingInlineSM: number;
+ /**
+ * @desc 表格边框/分割线颜色
+ * @descEN Border color of table
+ */
+ borderColor: string;
+ /**
+ * @desc 表头圆角
+ * @descEN Border radius of table header
+ */
+ headerBorderRadius: number;
+ /**
+ * @desc 表格底部背景色
+ * @descEN Background of footer
+ */
+ footerBg: string;
+ /**
+ * @desc 表格底部文字颜色
+ * @descEN Color of footer text
+ */
+ footerColor: string;
+ /**
+ * @desc 单元格文字大小(默认大尺寸)
+ * @descEN Font size of table cell (large size by default)
+ */
+ cellFontSize: number;
+ /**
+ * @desc 单元格文字大小(中等尺寸)
+ * @descEN Font size of table cell (middle size)
+ */
+ cellFontSizeMD: number;
+ /**
+ * @desc 单元格文字大小(小尺寸)
+ * @descEN Font size of table cell (small size)
+ */
+ cellFontSizeSM: number;
+ /**
+ * @desc 表头分割线颜色
+ * @descEN Split border color of table header
+ */
+ headerSplitColor: string;
+ /**
+ * @desc 固定表头排序激活态背景色
+ * @descEN Background color of fixed table header when sorted
+ */
+ fixedHeaderSortActiveBg: string;
+ /**
+ * @desc 表头过滤按钮悬浮背景色
+ * @descEN Background color of table header filter button when hovered
+ */
+ headerFilterHoverBg: string;
+ /**
+ * @desc 过滤下拉菜单选项背景
+ * @descEN Background of filter dropdown menu item
+ */
+ filterDropdownMenuBg: string;
+ /**
+ * @desc 过滤下拉菜单颜色
+ * @descEN Color of filter dropdown
+ */
+ filterDropdownBg: string;
+ /**
+ * @desc 展开按钮背景色
+ * @descEN Background of expand button
+ */
+ expandIconBg: string;
+ /**
+ * @desc 选择列宽度
+ * @descEN Width of selection column
+ */
+ selectionColumnWidth: number;
+ /**
+ * @desc Sticky 模式下滚动条背景色
+ * @descEN Background of sticky scrollbar
+ */
+ stickyScrollBarBg: string;
+ /**
+ * @desc Sticky 模式下滚动条圆角
+ * @descEN Border radius of sticky scrollbar
+ */
+ stickyScrollBarBorderRadius: number;
+}
export interface TableToken extends FullToken<'Table'> {
tableFontSize: number;
@@ -238,118 +394,188 @@ const genTableStyle: GenerateStyle = (token) => {
};
// ============================== Export ==============================
-export default genComponentStyleHook('Table', (token) => {
- const {
- controlItemBgActive,
- controlItemBgActiveHover,
- colorTextPlaceholder,
- colorTextHeading,
- colorSplit,
- colorBorderSecondary,
- fontSize,
- padding,
- paddingXS,
- paddingSM,
- controlHeight,
- colorFillAlter,
- colorIcon,
- colorIconHover,
- opacityLoading,
- colorBgContainer,
- borderRadiusLG,
- colorFillContent,
- colorFillSecondary,
- controlInteractiveSize: checkboxSize,
- } = token;
+export default genComponentStyleHook(
+ 'Table',
+ (token) => {
+ const {
+ colorTextHeading,
+ colorSplit,
+ colorIcon,
+ colorIconHover,
+ opacityLoading,
+ colorBgContainer,
+ controlInteractiveSize: checkboxSize,
+ headerBg,
+ headerColor,
+ headerSortActiveBg,
+ headerSortHoverBg,
+ bodySortBg,
+ rowHoverBg,
+ rowSelectedBg,
+ rowSelectedHoverBg,
+ rowExpandedBg,
+ cellPaddingBlock,
+ cellPaddingInline,
+ cellPaddingBlockMD,
+ cellPaddingInlineMD,
+ cellPaddingBlockSM,
+ cellPaddingInlineSM,
+ borderColor,
+ footerBg,
+ footerColor,
+ headerBorderRadius,
+ cellFontSize,
+ cellFontSizeMD,
+ cellFontSizeSM,
+ headerSplitColor,
+ fixedHeaderSortActiveBg,
+ headerFilterHoverBg,
+ filterDropdownBg,
+ expandIconBg,
+ selectionColumnWidth,
+ stickyScrollBarBg,
+ } = token;
- const baseColorAction = new TinyColor(colorIcon);
- const baseColorActionHover = new TinyColor(colorIconHover);
+ const baseColorAction = new TinyColor(colorIcon);
+ const baseColorActionHover = new TinyColor(colorIconHover);
- const tableSelectedRowBg = controlItemBgActive;
- const zIndexTableFixed: number = 2;
+ const zIndexTableFixed: number = 2;
- const colorFillSecondarySolid = new TinyColor(colorFillSecondary)
- .onBackground(colorBgContainer)
- .toHexShortString();
- const colorFillContentSolid = new TinyColor(colorFillContent)
- .onBackground(colorBgContainer)
- .toHexShortString();
+ const tableToken = mergeToken(token, {
+ tableFontSize: cellFontSize,
+ tableBg: colorBgContainer,
+ tableRadius: headerBorderRadius,
- const colorFillAlterSolid = new TinyColor(colorFillAlter)
- .onBackground(colorBgContainer)
- .toHexShortString();
+ tablePaddingVertical: cellPaddingBlock,
+ tablePaddingHorizontal: cellPaddingInline,
+ tablePaddingVerticalMiddle: cellPaddingBlockMD,
+ tablePaddingHorizontalMiddle: cellPaddingInlineMD,
+ tablePaddingVerticalSmall: cellPaddingBlockSM,
+ tablePaddingHorizontalSmall: cellPaddingInlineSM,
+ tableBorderColor: borderColor,
+ tableHeaderTextColor: headerColor,
+ tableHeaderBg: headerBg,
+ tableFooterTextColor: footerColor,
+ tableFooterBg: footerBg,
+ tableHeaderCellSplitColor: headerSplitColor,
+ tableHeaderSortBg: headerSortActiveBg,
+ tableHeaderSortHoverBg: headerSortHoverBg,
+ tableHeaderIconColor: baseColorAction
+ .clone()
+ .setAlpha(baseColorAction.getAlpha() * opacityLoading)
+ .toRgbString(),
+ tableHeaderIconColorHover: baseColorActionHover
+ .clone()
+ .setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
+ .toRgbString(),
+ tableBodySortBg: bodySortBg,
+ tableFixedHeaderSortActiveBg: fixedHeaderSortActiveBg,
+ tableHeaderFilterActiveBg: headerFilterHoverBg,
+ tableFilterDropdownBg: filterDropdownBg,
+ tableRowHoverBg: rowHoverBg,
+ tableSelectedRowBg: rowSelectedBg,
+ tableSelectedRowHoverBg: rowSelectedHoverBg,
+ zIndexTableFixed,
+ zIndexTableSticky: zIndexTableFixed + 1,
+ tableFontSizeMiddle: cellFontSizeMD,
+ tableFontSizeSmall: cellFontSizeSM,
+ tableSelectionColumnWidth: selectionColumnWidth,
+ tableExpandIconBg: expandIconBg,
+ tableExpandColumnWidth: checkboxSize + 2 * token.padding,
+ tableExpandedRowBg: rowExpandedBg,
- const tableToken = mergeToken(token, {
- tableFontSize: fontSize,
- tableBg: colorBgContainer,
- tableRadius: borderRadiusLG,
+ // Dropdown
+ tableFilterDropdownWidth: 120,
+ tableFilterDropdownHeight: 264,
+ tableFilterDropdownSearchWidth: 140,
- tablePaddingVertical: padding,
- tablePaddingHorizontal: padding,
- tablePaddingVerticalMiddle: paddingSM,
- tablePaddingHorizontalMiddle: paddingXS,
- tablePaddingVerticalSmall: paddingXS,
- tablePaddingHorizontalSmall: paddingXS,
- tableBorderColor: colorBorderSecondary,
- tableHeaderTextColor: colorTextHeading,
- tableHeaderBg: colorFillAlterSolid,
- tableFooterTextColor: colorTextHeading,
- tableFooterBg: colorFillAlterSolid,
- tableHeaderCellSplitColor: colorBorderSecondary,
- tableHeaderSortBg: colorFillSecondarySolid,
- tableHeaderSortHoverBg: colorFillContentSolid,
- tableHeaderIconColor: baseColorAction
- .clone()
- .setAlpha(baseColorAction.getAlpha() * opacityLoading)
- .toRgbString(),
- tableHeaderIconColorHover: baseColorActionHover
- .clone()
- .setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
- .toRgbString(),
- tableBodySortBg: colorFillAlterSolid,
- tableFixedHeaderSortActiveBg: colorFillSecondarySolid,
- tableHeaderFilterActiveBg: colorFillContent,
- tableFilterDropdownBg: colorBgContainer,
- tableRowHoverBg: colorFillAlterSolid,
- tableSelectedRowBg,
- tableSelectedRowHoverBg: controlItemBgActiveHover,
- zIndexTableFixed,
- zIndexTableSticky: zIndexTableFixed + 1,
- tableFontSizeMiddle: fontSize,
- tableFontSizeSmall: fontSize,
- tableSelectionColumnWidth: controlHeight,
- tableExpandIconBg: colorBgContainer,
- tableExpandColumnWidth: checkboxSize + 2 * token.padding,
- tableExpandedRowBg: colorFillAlter,
+ // Virtual Scroll Bar
+ tableScrollThumbSize: 8, // Mac scroll bar size
+ tableScrollThumbBg: stickyScrollBarBg,
+ tableScrollThumbBgHover: colorTextHeading,
+ tableScrollBg: colorSplit,
+ });
- // Dropdown
- tableFilterDropdownWidth: 120,
- tableFilterDropdownHeight: 264,
- tableFilterDropdownSearchWidth: 140,
+ return [
+ genTableStyle(tableToken),
+ genPaginationStyle(tableToken),
+ genSummaryStyle(tableToken),
+ genSorterStyle(tableToken),
+ genFilterStyle(tableToken),
+ genBorderedStyle(tableToken),
+ genRadiusStyle(tableToken),
+ genExpandStyle(tableToken),
+ genSummaryStyle(tableToken),
+ genEmptyStyle(tableToken),
+ genSelectionStyle(tableToken),
+ genFixedStyle(tableToken),
+ genStickyStyle(tableToken),
+ genEllipsisStyle(tableToken),
+ genSizeStyle(tableToken),
+ genRtlStyle(tableToken),
+ ];
+ },
+ (token) => {
+ const {
+ colorFillAlter,
+ colorBgContainer,
+ colorTextHeading,
+ colorFillSecondary,
+ colorFillContent,
+ controlItemBgActive,
+ controlItemBgActiveHover,
+ padding,
+ paddingSM,
+ paddingXS,
+ colorBorderSecondary,
+ borderRadiusLG,
+ fontSize,
+ controlHeight,
+ colorTextPlaceholder,
+ } = token;
- // Virtual Scroll Bar
- tableScrollThumbSize: 8, // Mac scroll bar size
- tableScrollThumbBg: colorTextPlaceholder,
- tableScrollThumbBgHover: colorTextHeading,
- tableScrollBg: colorSplit,
- });
+ const colorFillSecondarySolid = new TinyColor(colorFillSecondary)
+ .onBackground(colorBgContainer)
+ .toHexShortString();
+ const colorFillContentSolid = new TinyColor(colorFillContent)
+ .onBackground(colorBgContainer)
+ .toHexShortString();
+ const colorFillAlterSolid = new TinyColor(colorFillAlter)
+ .onBackground(colorBgContainer)
+ .toHexShortString();
- return [
- genTableStyle(tableToken),
- genPaginationStyle(tableToken),
- genSummaryStyle(tableToken),
- genSorterStyle(tableToken),
- genFilterStyle(tableToken),
- genBorderedStyle(tableToken),
- genRadiusStyle(tableToken),
- genExpandStyle(tableToken),
- genSummaryStyle(tableToken),
- genEmptyStyle(tableToken),
- genSelectionStyle(tableToken),
- genFixedStyle(tableToken),
- genStickyStyle(tableToken),
- genEllipsisStyle(tableToken),
- genSizeStyle(tableToken),
- genRtlStyle(tableToken),
- ];
-});
+ return {
+ headerBg: colorFillAlterSolid,
+ headerColor: colorTextHeading,
+ headerSortActiveBg: colorFillSecondarySolid,
+ headerSortHoverBg: colorFillContentSolid,
+ bodySortBg: colorFillAlterSolid,
+ rowHoverBg: colorFillAlterSolid,
+ rowSelectedBg: controlItemBgActive,
+ rowSelectedHoverBg: controlItemBgActiveHover,
+ rowExpandedBg: colorFillAlter,
+ cellPaddingBlock: padding,
+ cellPaddingInline: padding,
+ cellPaddingBlockMD: paddingSM,
+ cellPaddingInlineMD: paddingXS,
+ cellPaddingBlockSM: paddingXS,
+ cellPaddingInlineSM: paddingXS,
+ borderColor: colorBorderSecondary,
+ headerBorderRadius: borderRadiusLG,
+ footerBg: colorFillAlterSolid,
+ footerColor: colorTextHeading,
+ cellFontSize: fontSize,
+ cellFontSizeMD: fontSize,
+ cellFontSizeSM: fontSize,
+ headerSplitColor: colorBorderSecondary,
+ fixedHeaderSortActiveBg: colorFillSecondarySolid,
+ headerFilterHoverBg: colorFillContent,
+ filterDropdownMenuBg: colorBgContainer,
+ filterDropdownBg: colorBgContainer,
+ expandIconBg: colorBgContainer,
+ selectionColumnWidth: controlHeight,
+ stickyScrollBarBg: colorTextPlaceholder,
+ stickyScrollBarBorderRadius: 100,
+ };
+ },
+);
diff --git a/components/table/style/sticky.ts b/components/table/style/sticky.ts
index f0ea859a7d7a..a0c2d347037d 100644
--- a/components/table/style/sticky.ts
+++ b/components/table/style/sticky.ts
@@ -11,6 +11,7 @@ const genStickyStyle: GenerateStyle = (token) => {
tableScrollThumbSize,
tableScrollBg,
zIndexTableSticky,
+ stickyScrollBarBorderRadius,
} = token;
const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
return {
@@ -41,7 +42,7 @@ const genStickyStyle: GenerateStyle = (token) => {
'&-bar': {
height: tableScrollThumbSize,
backgroundColor: tableScrollThumbBg,
- borderRadius: 100,
+ borderRadius: stickyScrollBarBorderRadius,
transition: `all ${token.motionDurationSlow}, transform none`,
position: 'absolute',
bottom: 0,
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
index 5260e528ab9e..a361053e455b 100644
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@@ -542,7 +542,46 @@ export default App;
-
+### Table
+
+
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@table-bg` | `colorBgContainer` | Global Token |
+| `@table-header-bg` | `headerBg` | - |
+| `@table-header-color` | `headerColor` | - |
+| `@table-header-sort-bg` | `headerSortActiveBg` | - |
+| `@table-body-sort-bg` | `bodySortActiveBg` | - |
+| `@table-row-hover-bg` | `rowHoverBg` | - |
+| `@table-selected-row-color` | `colorText` | Global Token |
+| `@table-selected-row-bg` | `rowSelectedBg` | - |
+| `@table-body-selected-sort-bg` | - | Deprecated, same as `rowSelectedBg` |
+| `@table-selected-row-hover-bg` | `rowSelectedHoverBg` | - |
+| `@table-expanded-row-bg` | `rowExpandedBg` | - |
+| `@table-padding-vertical` | `cellPaddingBlock` | - |
+| `@table-padding-horizontal` | `cellPaddingInline` | - |
+| `@table-padding-vertical-md` | `cellPaddingBlockMD` | - |
+| `@table-padding-horizontal-md` | `cellPaddingInlineMD` | - |
+| `@table-padding-vertical-sm` | `cellPaddingBlockSM` | - |
+| `@table-padding-horizontal-sm` | `cellPaddingInlineSM` | - |
+| `@table-border-color` | `borderColor` | - |
+| `@table-border-radius-base` | `headerBorderRadius` | - |
+| `@table-footer-bg` | `footerBg` | - |
+| `@table-footer-color` | `footerColor` | - |
+| `@table-header-bg-sm` | - | Deprecated, same as `headerBg` |
+| `@table-font-size` | `cellFontSize` | - |
+| `@table-font-size-md` | `cellFontSizeMD` | - |
+| `@table-font-size-sm` | `cellFontSizeSM` | - |
+| `@table-header-cell-split-color` | `headerSplitColor` | - |
+| `@table-header-sort-active-bg` | `headerSortHoverBg` | Misused in v4, and used as hover bg actually |
+| `@table-fixed-header-sort-active-bg` | `fixedHeaderSortActiveBg` | - |
+| `@table-header-filter-active-bg` | `headerFilterHoverBg` | - |
+| `@table-filter-btns-bg` | - | Deprecated, same as `filterDropdownBg` |
+| `@table-filter-dropdown-bg` | `filterDropdownBg` | - |
+| `@table-expand-icon-bg` | `expandIconBg` | - |
+| `@table-selection-column-width` | `selectionColumnWidth` | - |
+| `@table-sticky-scroll-bar-bg` | `stickyScrollBarBg` | - |
+| `@table-sticky-scroll-bar-radius` | `stickyScrollBarBorderRadius` | - |
### Tabs
diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
index 92d37eeefc1d..b813da1d0cb9 100644
--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@@ -539,7 +539,46 @@ Mentions 提及
-
+### Table 表格
+
+
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@table-bg` | `colorBgContainer` | 全局 Token |
+| `@table-header-bg` | `headerBg` | - |
+| `@table-header-color` | `headerColor` | - |
+| `@table-header-sort-bg` | `headerSortActiveBg` | - |
+| `@table-body-sort-bg` | `bodySortActiveBg` | - |
+| `@table-row-hover-bg` | `rowHoverBg` | - |
+| `@table-selected-row-color` | `colorText` | 全局 Token |
+| `@table-selected-row-bg` | `rowSelectedBg` | - |
+| `@table-body-selected-sort-bg` | - | 已废弃,同 `rowSelectedBg` |
+| `@table-selected-row-hover-bg` | `rowSelectedHoverBg` | - |
+| `@table-expanded-row-bg` | `rowExpandedBg` | - |
+| `@table-padding-vertical` | `cellPaddingBlock` | - |
+| `@table-padding-horizontal` | `cellPaddingInline` | - |
+| `@table-padding-vertical-md` | `cellPaddingBlockMD` | - |
+| `@table-padding-horizontal-md` | `cellPaddingInlineMD` | - |
+| `@table-padding-vertical-sm` | `cellPaddingBlockSM` | - |
+| `@table-padding-horizontal-sm` | `cellPaddingInlineSM` | - |
+| `@table-border-color` | `borderColor` | - |
+| `@table-border-radius-base` | `headerBorderRadius` | - |
+| `@table-footer-bg` | `footerBg` | - |
+| `@table-footer-color` | `footerColor` | - |
+| `@table-header-bg-sm` | - | 已废弃,同 `headerBg` |
+| `@table-font-size` | `cellFontSize` | - |
+| `@table-font-size-md` | `cellFontSizeMD` | - |
+| `@table-font-size-sm` | `cellFontSizeSM` | - |
+| `@table-header-cell-split-color` | `headerSplitColor` | - |
+| `@table-header-sort-active-bg` | `headerSortHoverBg` | v4 中有误,实际上用于悬浮背景色 |
+| `@table-fixed-header-sort-active-bg` | `fixedHeaderSortActiveBg` | - |
+| `@table-header-filter-active-bg` | `headerFilterHoverBg` | - |
+| `@table-filter-btns-bg` | - | 已废弃,同 `filterDropdownBg` |
+| `@table-filter-dropdown-bg` | `filterDropdownBg` | - |
+| `@table-expand-icon-bg` | `expandIconBg` | - |
+| `@table-selection-column-width` | `selectionColumnWidth` | - |
+| `@table-sticky-scroll-bar-bg` | `stickyScrollBarBg` | - |
+| `@table-sticky-scroll-bar-radius` | `stickyScrollBarBorderRadius` | - |
### Tabs 标签页