refactor:table (#6267)

* refactor:table

* docs:update & refactor: table type

---------

Co-authored-by: tangjinzhou <[email protected]>

Author: shifeng1993

components/style.ts

@@ -37,7 +37,8 @@ import './time-picker/style';
 import './calendar/style';
 // import './date-picker/style';
 // import './slider/style';
-import './table/style';
+// import './table/style';
+
 // import './progress/style';
 // import './timeline/style';
 // import './input-number/style';

components/table/Table.tsx

@@ -34,7 +34,7 @@ import scrollTo from '../_util/scrollTo';
 import defaultLocale from '../locale/en_US';
 import type { SizeType } from '../config-provider';
 import devWarning from '../vc-util/devWarning';
-import type { CSSProperties, PropType } from 'vue';
+import type { CSSProperties } from 'vue';
 import { nextTick, reactive, ref, computed, defineComponent, toRef, watchEffect, watch } from 'vue';
 import type { DefaultRecordType } from '../vc-table/interface';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
@@ -47,6 +47,17 @@ import { useProvideSlots, useProvideTableContext } from './context';
 import type { ContextSlots } from './context';
 import useColumns from './hooks/useColumns';
 import { convertChildrenToColumns } from './util';
+import {
+  stringType,
+  booleanType,
+  arrayType,
+  someType,
+  functionType,
+  objectType,
+} from '../_util/type';
+
+// CSSINJS
+import useStyle from './style';
 
 export type { ColumnsType, TablePaginationConfig };
 
@@ -107,128 +118,68 @@ export interface TableProps<RecordType = DefaultRecordType>
 
 export const tableProps = () => {
   return {
-    prefixCls: { type: String as PropType<string>, default: undefined },
-    columns: { type: Array as PropType<ColumnsType>, default: undefined },
-    rowKey: { type: [String, Function] as PropType<TableProps['rowKey']>, default: undefined },
-    tableLayout: { type: String as PropType<TableProps['tableLayout']>, default: undefined },
-    rowClassName: {
-      type: [String, Function] as PropType<TableProps['rowClassName']>,
-      default: undefined,
-    },
-    title: { type: Function as PropType<TableProps['title']>, default: undefined },
-    footer: { type: Function as PropType<TableProps['footer']>, default: undefined },
-    id: { type: String as PropType<TableProps['id']>, default: undefined },
-    showHeader: { type: Boolean as PropType<TableProps['showHeader']>, default: undefined },
-    components: { type: Object as PropType<TableProps['components']>, default: undefined },
-    customRow: { type: Function as PropType<TableProps['customRow']>, default: undefined },
-    customHeaderRow: {
-      type: Function as PropType<TableProps['customHeaderRow']>,
-      default: undefined,
-    },
-    direction: { type: String as PropType<TableProps['direction']>, default: undefined },
-    expandFixed: {
-      type: [Boolean, String] as PropType<TableProps['expandFixed']>,
-      default: undefined,
-    },
-    expandColumnWidth: {
-      type: Number as PropType<TableProps['expandColumnWidth']>,
-      default: undefined,
-    },
-    expandedRowKeys: {
-      type: Array as PropType<TableProps['expandedRowKeys']>,
-      default: undefined as TableProps['expandedRowKeys'],
-    },
-    defaultExpandedRowKeys: {
-      type: Array as PropType<TableProps['defaultExpandedRowKeys']>,
-      default: undefined as TableProps['defaultExpandedRowKeys'],
-    },
-    expandedRowRender: {
-      type: Function as PropType<TableProps['expandedRowRender']>,
-      default: undefined,
-    },
-    expandRowByClick: {
-      type: Boolean as PropType<TableProps['expandRowByClick']>,
-      default: undefined,
-    },
-    expandIcon: { type: Function as PropType<TableProps['expandIcon']>, default: undefined },
-    onExpand: { type: Function as PropType<TableProps['onExpand']>, default: undefined },
-    onExpandedRowsChange: {
-      type: Function as PropType<TableProps['onExpandedRowsChange']>,
-      default: undefined,
-    },
-    'onUpdate:expandedRowKeys': {
-      type: Function as PropType<TableProps['onExpandedRowsChange']>,
-      default: undefined,
-    },
-    defaultExpandAllRows: {
-      type: Boolean as PropType<TableProps['defaultExpandAllRows']>,
-      default: undefined,
-    },
-    indentSize: { type: Number as PropType<TableProps['indentSize']>, default: undefined },
+    prefixCls: stringType<string>(),
+    columns: arrayType<ColumnsType>(),
+    rowKey: someType<TableProps['rowKey']>([String, Function]),
+    tableLayout: stringType<TableProps['tableLayout']>(),
+    rowClassName: someType<TableProps['rowClassName']>([String, Function]),
+    title: functionType<TableProps['title']>(),
+    footer: functionType<TableProps['footer']>(),
+    id: stringType<TableProps['id']>(),
+    showHeader: booleanType(),
+    components: objectType<TableProps['components']>(),
+    customRow: functionType<TableProps['customRow']>(),
+    customHeaderRow: functionType<TableProps['customHeaderRow']>(),
+    direction: stringType<TableProps['direction']>(),
+    expandFixed: someType<TableProps['expandFixed']>([Boolean, String]),
+    expandColumnWidth: Number,
+    expandedRowKeys: arrayType<TableProps['expandedRowKeys']>(),
+    defaultExpandedRowKeys: arrayType<TableProps['defaultExpandedRowKeys']>(),
+    expandedRowRender: functionType<TableProps['expandedRowRender']>(),
+    expandRowByClick: booleanType(),
+    expandIcon: functionType<TableProps['expandIcon']>(),
+    onExpand: functionType<TableProps['onExpand']>(),
+    onExpandedRowsChange: functionType<TableProps['onExpandedRowsChange']>(),
+    'onUpdate:expandedRowKeys': functionType<TableProps['onExpandedRowsChange']>(),
+    defaultExpandAllRows: booleanType(),
+    indentSize: Number,
     /** @deprecated Please use `EXPAND_COLUMN` in `columns` directly */
-    expandIconColumnIndex: {
-      type: Number as PropType<TableProps['expandIconColumnIndex']>,
-      default: undefined,
-    },
-    showExpandColumn: { type: Boolean, default: undefined },
-    expandedRowClassName: {
-      type: Function as PropType<TableProps['expandedRowClassName']>,
-      default: undefined,
-    },
-    childrenColumnName: {
-      type: String as PropType<TableProps['childrenColumnName']>,
-      default: undefined,
-    },
-    rowExpandable: { type: Function as PropType<TableProps['rowExpandable']>, default: undefined },
-    sticky: { type: [Boolean, Object] as PropType<TableProps['sticky']>, default: undefined },
+    expandIconColumnIndex: Number,
+    showExpandColumn: booleanType(),
+    expandedRowClassName: functionType<TableProps['expandedRowClassName']>(),
+    childrenColumnName: stringType<TableProps['childrenColumnName']>(),
+    rowExpandable: functionType<TableProps['rowExpandable']>(),
+    sticky: someType<TableProps['sticky']>([Boolean, Object]),
 
     dropdownPrefixCls: String,
-    dataSource: { type: Array as PropType<RcTableProps['data']>, default: undefined },
-    pagination: {
-      type: [Boolean, Object] as PropType<false | TablePaginationConfig>,
-      default: undefined,
-    },
-    loading: { type: [Boolean, Object] as PropType<boolean | SpinProps>, default: undefined },
-    size: { type: String as PropType<SizeType>, default: undefined },
-    bordered: Boolean,
-    locale: { type: Object as PropType<TableLocale>, default: undefined },
-
-    onChange: {
-      type: Function as PropType<
+    dataSource: arrayType<RcTableProps['data']>(),
+    pagination: someType<false | TablePaginationConfig>([Boolean, Object]),
+    loading: someType<boolean | SpinProps>([Boolean, Object]),
+    size: stringType<SizeType>(),
+    bordered: booleanType(),
+    locale: objectType<TableLocale>(),
+
+    onChange:
+      functionType<
         (
           pagination: TablePaginationConfig,
           filters: Record<string, FilterValue | null>,
           sorter: SorterResult | SorterResult[],
           extra: TableCurrentDataSource,
         ) => void
-      >,
-      default: undefined,
-    },
-    onResizeColumn: {
-      type: Function as PropType<(w: number, col: ColumnType) => void>,
-      default: undefined,
-    },
-    rowSelection: { type: Object as PropType<TableRowSelection>, default: undefined },
-    getPopupContainer: { type: Function as PropType<GetPopupContainer>, default: undefined },
-    scroll: {
-      type: Object as PropType<
-        RcTableProps['scroll'] & {
-          scrollToFirstRowOnChange?: boolean;
-        }
-      >,
-      default: undefined,
-    },
-    sortDirections: { type: Array as PropType<SortOrder[]>, default: undefined },
-    showSorterTooltip: {
-      type: [Boolean, Object] as PropType<boolean | TooltipProps>,
-      default: true,
-    },
-    contextSlots: {
-      type: Object as PropType<ContextSlots>,
-    },
-    transformCellText: {
-      type: Function as PropType<TableProps['transformCellText']>,
-    },
+      >(),
+    onResizeColumn: functionType<(w: number, col: ColumnType) => void>(),
+    rowSelection: objectType<TableRowSelection>(),
+    getPopupContainer: functionType<GetPopupContainer>(),
+    scroll: objectType<
+      RcTableProps['scroll'] & {
+        scrollToFirstRowOnChange?: boolean;
+      }
+    >(),
+    sortDirections: arrayType<SortOrder[]>(),
+    showSorterTooltip: someType<boolean | TooltipProps>([Boolean, Object], true),
+    contextSlots: objectType<ContextSlots>(),
+    transformCellText: functionType<TableProps['transformCellText']>(),
   };
 };
 
@@ -287,6 +238,10 @@ const InteralTable = defineComponent<
       prefixCls,
       configProvider,
     } = useConfigInject('table', props);
+
+    // Style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const transformCellText = computed(
       () => props.transformCellText || configProvider.transformCellText?.value,
     );
@@ -637,9 +592,10 @@ const InteralTable = defineComponent<
           [`${prefixCls.value}-wrapper-rtl`]: direction.value === 'rtl',
         },
         attrs.class,
+        hashId.value,
       );
       const tableProps = omit(props, ['columns']);
-      return (
+      return wrapSSR(
         <div class={wrapperClassNames} style={attrs.style as CSSProperties}>
           <Spin spinning={false} {...spinProps}>
             {topPaginationNode}
@@ -677,7 +633,7 @@ const InteralTable = defineComponent<
             />
             {bottomPaginationNode}
           </Spin>
-        </div>
+        </div>,
       );
     };
   },

components/table/hooks/useFilter/FilterSearch.tsx

@@ -1,19 +1,19 @@
-import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import SearchOutlined from '@ant-design/icons-vue/SearchOutlined';
 import type { FilterSearchType, TableLocale } from '../../interface';
 import Input from '../../../input';
+import { stringType, someType, functionType, objectType } from '../../../_util/type';
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'FilterSearch',
   inheritAttrs: false,
   props: {
-    value: String,
-    onChange: Function as PropType<(e: InputEvent) => void>,
-    filterSearch: [Boolean, Function] as PropType<FilterSearchType>,
-    tablePrefixCls: String,
-    locale: { type: Object as PropType<TableLocale>, default: undefined as TableLocale },
+    value: stringType(),
+    onChange: functionType<(e: InputEvent) => void>(),
+    filterSearch: someType<FilterSearchType>([Boolean, Function]),
+    tablePrefixCls: stringType(),
+    locale: objectType<TableLocale>(),
   },
   setup(props) {
     return () => {

components/table/index.en-US.md

@@ -3,7 +3,7 @@ category: Components
 cols: 1
 type: Data Display
 title: Table
-cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3yz3QqMlShYAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 A table displays rows of data.

components/table/index.zh-CN.md

@@ -4,7 +4,7 @@ cols: 1
 type: 数据展示
 title: Table
 subtitle: 表格
-cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3yz3QqMlShYAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 展示行列数据。