feat: table component token (ant-design#44118)

* feat: table component token

* chore: add typedoc

components/table/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+组件 Token
+
+## en-US
+
+Component Token

components/table/demo/component-token.tsx

@@ -0,0 +1,313 @@
+import React, { useState } from 'react';
+import { DownOutlined } from '@ant-design/icons';
+import type { RadioChangeEvent } from 'antd';
+import { Form, Radio, Space, Switch, Table, ConfigProvider } from 'antd';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { ColumnsType, TableProps } from 'antd/es/table';
+import type { ExpandableConfig, TableRowSelection } from 'antd/es/table/interface';
+
+interface DataType {
+  key: number;
+  name: string;
+  age: number;
+  address: string;
+  description: string;
+}
+
+type TablePaginationPosition =
+  | 'topLeft'
+  | 'topCenter'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomCenter'
+  | 'bottomRight';
+
+const columns: ColumnsType<DataType> = [
+  {
+    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: () => (
+      <Space size="middle">
+        <a>Delete</a>
+        <a>
+          <Space>
+            More actions
+            <DownOutlined />
+          </Space>
+        </a>
+      </Space>
+    ),
+  },
+];
+
+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) => <p>{record.description}</p> };
+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<SizeType>('large');
+  const [expandable, setExpandable] = useState<ExpandableConfig<DataType> | undefined>(
+    defaultExpandable,
+  );
+  const [showTitle, setShowTitle] = useState(false);
+  const [showHeader, setShowHeader] = useState(true);
+  const [showfooter, setShowFooter] = useState(true);
+  const [rowSelection, setRowSelection] = useState<TableRowSelection<DataType> | undefined>({});
+  const [hasData, setHasData] = useState(true);
+  const [tableLayout, setTableLayout] = useState();
+  const [top, setTop] = useState<TablePaginationPosition | 'none'>('none');
+  const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
+  const [ellipsis, setEllipsis] = useState(false);
+  const [yScroll, setYScroll] = useState(false);
+  const [xScroll, setXScroll] = useState<string>();
+
+  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<DataType> = {
+    bordered,
+    loading,
+    size,
+    expandable,
+    title: showTitle ? defaultTitle : undefined,
+    showHeader,
+    footer: showfooter ? defaultFooter : undefined,
+    rowSelection,
+    scroll,
+    tableLayout,
+  };
+
+  return (
+    <>
+      <Form
+        layout="inline"
+        className="components-table-demo-control-bar"
+        style={{ marginBottom: 16 }}
+      >
+        <Form.Item label="Bordered">
+          <Switch checked={bordered} onChange={handleBorderChange} />
+        </Form.Item>
+        <Form.Item label="loading">
+          <Switch checked={loading} onChange={handleLoadingChange} />
+        </Form.Item>
+        <Form.Item label="Title">
+          <Switch checked={showTitle} onChange={handleTitleChange} />
+        </Form.Item>
+        <Form.Item label="Column Header">
+          <Switch checked={showHeader} onChange={handleHeaderChange} />
+        </Form.Item>
+        <Form.Item label="Footer">
+          <Switch checked={showfooter} onChange={handleFooterChange} />
+        </Form.Item>
+        <Form.Item label="Expandable">
+          <Switch checked={!!expandable} onChange={handleExpandChange} />
+        </Form.Item>
+        <Form.Item label="Checkbox">
+          <Switch checked={!!rowSelection} onChange={handleRowSelectionChange} />
+        </Form.Item>
+        <Form.Item label="Fixed Header">
+          <Switch checked={!!yScroll} onChange={handleYScrollChange} />
+        </Form.Item>
+        <Form.Item label="Has Data">
+          <Switch checked={!!hasData} onChange={handleDataChange} />
+        </Form.Item>
+        <Form.Item label="Ellipsis">
+          <Switch checked={!!ellipsis} onChange={handleEllipsisChange} />
+        </Form.Item>
+        <Form.Item label="Size">
+          <Radio.Group value={size} onChange={handleSizeChange}>
+            <Radio.Button value="large">Large</Radio.Button>
+            <Radio.Button value="middle">Middle</Radio.Button>
+            <Radio.Button value="small">Small</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="Table Scroll">
+          <Radio.Group value={xScroll} onChange={handleXScrollChange}>
+            <Radio.Button value={undefined}>Unset</Radio.Button>
+            <Radio.Button value="scroll">Scroll</Radio.Button>
+            <Radio.Button value="fixed">Fixed Columns</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="Table Layout">
+          <Radio.Group value={tableLayout} onChange={handleTableLayoutChange}>
+            <Radio.Button value={undefined}>Unset</Radio.Button>
+            <Radio.Button value="fixed">Fixed</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="Pagination Top">
+          <Radio.Group
+            value={top}
+            onChange={(e) => {
+              setTop(e.target.value);
+            }}
+          >
+            <Radio.Button value="topLeft">TopLeft</Radio.Button>
+            <Radio.Button value="topCenter">TopCenter</Radio.Button>
+            <Radio.Button value="topRight">TopRight</Radio.Button>
+            <Radio.Button value="none">None</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="Pagination Bottom">
+          <Radio.Group
+            value={bottom}
+            onChange={(e) => {
+              setBottom(e.target.value);
+            }}
+          >
+            <Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
+            <Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
+            <Radio.Button value="bottomRight">BottomRight</Radio.Button>
+            <Radio.Button value="none">None</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+      <ConfigProvider
+        theme={{
+          components: {
+            Table: {
+              colorBgContainer: '#e6f4ff',
+              headerBg: '#1677ff',
+              headerColor: '#fff',
+              headerSortActiveBg: '#0958d9',
+              headerSortHoverBg: '#69b1ff',
+              bodySortBg: '#1677ff10',
+              rowHoverBg: '#1677ff10',
+              rowSelectedBg: '#bae0ff',
+              rowSelectedHoverBg: '#91caff',
+              rowExpandedBg: '#1677ff10',
+              cellPaddingBlock: 20,
+              cellPaddingInline: 20,
+              cellPaddingBlockMD: 16,
+              cellPaddingInlineMD: 16,
+              cellPaddingBlockSM: 12,
+              cellPaddingInlineSM: 12,
+              borderColor: '#e6f4ff',
+              headerBorderRadius: 0,
+              footerBg: '#1677ff',
+              footerColor: '#fff',
+              cellFontSize: 16,
+              cellFontSizeMD: 16,
+              cellFontSizeSM: 14,
+              headerSplitColor: '#fff',
+              headerFilterHoverBg: 'rgba(0, 0, 0, 0.12)',
+              filterDropdownMenuBg: '#fff',
+              filterDropdownBg: '#fff',
+              expandIconBg: '#e6f4ff',
+            },
+          },
+        }}
+      >
+        <Table
+          {...tableProps}
+          pagination={{ position: [top as TablePaginationPosition, bottom] }}
+          columns={tableColumns}
+          dataSource={hasData ? data : []}
+          scroll={scroll}
+        />
+      </ConfigProvider>
+    </>
+  );
+};
+
+export default App;

components/table/index.en-US.md

@@ -105,6 +105,7 @@ const columns = [
 <code src="./demo/sticky.tsx">Fixed header and scroll bar with the page</code>
 <code src="./demo/dynamic-settings.tsx">Dynamic Settings</code>
 <code src="./demo/selections-debug.tsx" debug>selections with icon</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

components/table/index.zh-CN.md

@@ -106,6 +106,7 @@ const columns = [
 <code src="./demo/sticky.tsx">随页面滚动的固定表头和滚动条</code>
 <code src="./demo/dynamic-settings.tsx">动态控制表格属性</code>
 <code src="./demo/selections-debug.tsx" debug>带下拉箭头的表头</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

components/table/style/filter.ts

@@ -29,6 +29,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
     controlItemBgHover,
     controlItemBgActive,
     boxShadowSecondary,
+    filterDropdownMenuBg,
   } = token;
   const dropdownPrefixCls = `${antCls}-dropdown`;
   const tableFilterDropdownPrefixCls = `${componentCls}-filter-dropdown`;
@@ -88,6 +89,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
             border: 0,
             boxShadow: 'none',
             borderRadius: 'unset',
+            backgroundColor: filterDropdownMenuBg,
 
             '&:empty::after': {
               display: 'block',