perf: table

Author: tangjinzhou

components/legacy-table/src/TableRow.jsx

@@ -3,7 +3,6 @@ import PropTypes, { withUndefined } from '../../_util/vue-types';
 import TableCell from './TableCell';
 import { initDefaultProps, findDOMNode } from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
-import warning from '../../_util/warning';
 import { computed, inject } from 'vue';
 function noop() {}
 const TableRow = {

components/table/Table.tsx

@@ -35,15 +35,17 @@ import defaultLocale from '../locale/en_US';
 import type { SizeType } from '../config-provider';
 import devWarning from '../vc-util/devWarning';
 import type { PropType } from 'vue';
-import { computed, defineComponent, ref, toRef, watchEffect } from 'vue';
+import { reactive } from 'vue';
+import { computed, defineComponent, toRef, watchEffect } from 'vue';
 import type { DefaultRecordType } from '../vc-table/interface';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
 import classNames from '../_util/classNames';
 import omit from '../_util/omit';
 import { initDefaultProps } from '../_util/props-util';
-import { ContextSlots, useProvideSlots } from './context';
+import { useProvideSlots } from './context';
+import type { ContextSlots } from './context';
 import useColumns from './hooks/useColumns';
 import { convertChildrenToColumns } from './util';
 
@@ -77,6 +79,7 @@ export interface TableProps<RecordType = DefaultRecordType>
     | 'scroll'
     | 'emptyText'
     | 'canExpandable'
+    | 'onUpdateInternalRefs'
   > {
   dropdownPrefixCls?: string;
   dataSource?: RcTableProps<RecordType>['data'];
@@ -217,11 +220,11 @@ const InteralTable = defineComponent<
   }
 >({
   name: 'InteralTable',
+  inheritAttrs: false,
   props: initDefaultProps(tableProps(), {
     rowKey: 'key',
   }) as any,
-  inheritAttrs: false,
-  emits: [],
+  // emits: ['expandedRowsChange', 'change', 'expand'],
   slots: [
     'emptyText',
     'expandIcon',
@@ -282,8 +285,12 @@ const InteralTable = defineComponent<
       return null;
     });
 
-    const internalRefs = {
-      body: ref<HTMLDivElement>(),
+    const internalRefs = reactive({
+      body: null,
+    });
+
+    const updateInternalRefs = refs => {
+      Object.assign(internalRefs, refs);
     };
 
     // ============================ RowKey ============================
@@ -325,9 +332,9 @@ const InteralTable = defineComponent<
         }
       }
 
-      if (scroll && scroll.scrollToFirstRowOnChange !== false && internalRefs.body.value) {
+      if (scroll && scroll.scrollToFirstRowOnChange !== false && internalRefs.body) {
         scrollTo(0, {
-          getContainer: () => internalRefs.body.value!,
+          getContainer: () => internalRefs.body,
         });
       }
 
@@ -606,7 +613,8 @@ const InteralTable = defineComponent<
               rowClassName={internalRowClassName}
               // Internal
               internalHooks={INTERNAL_HOOKS}
-              internalRefs={internalRefs as any}
+              internalRefs={internalRefs}
+              onUpdateInternalRefs={updateInternalRefs}
               transformColumns={transformColumns}
               v-slots={{
                 ...slots,

components/table/demo/fixed-columns.vue

@@ -25,7 +25,7 @@ To fix some columns and scroll inside other columns, and you must set `scroll.x`
 </docs>
 
 <template>
-  <a-table :columns="columns" :data-source="data" :scroll="{ x: 1300 }">
+  <a-table :columns="columns" :data-source="data" :scroll="{ x: 1300, y: 1000 }">
     <template #bodyCell="{ column, text }">
       <template v-if="column.key === 'operation'">
         <a>action</a>

components/table/demo/summary.vue

@@ -38,6 +38,7 @@ Set summary content by `summary` prop. Sync column fixed status with `a-table-su
       </a-table-summary-row>
     </template>
   </a-table>
+  <br />
   <a-table
     :columns="fixedColumns"
     :data-source="fixedData"

components/table/hooks/useColumns.tsx

@@ -1,6 +1,6 @@
 import devWarning from '../../vc-util/devWarning';
 import type { Ref } from 'vue';
-import { ContextSlots } from '../context';
+import type { ContextSlots } from '../context';
 import type { TransformColumns, ColumnsType } from '../interface';
 
 function fillSlots<RecordType>(columns: ColumnsType<RecordType>, contextSlots: Ref<ContextSlots>) {

components/table/index.tsx

@@ -2,7 +2,8 @@ import Table, { tableProps } from './Table';
 import Column from './Column';
 import ColumnGroup from './ColumnGroup';
 import type { TableProps, TablePaginationConfig } from './Table';
-import { App, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
+import type { App } from 'vue';
 import { Summary, SummaryCell, SummaryRow } from '../vc-table';
 import { SELECTION_ALL, SELECTION_INVERT, SELECTION_NONE } from './hooks/useSelection';
 

components/vc-table/Body/BodyRow.tsx

@@ -24,6 +24,8 @@ export interface BodyRowProps<RecordType> {
 }
 
 export default defineComponent<BodyRowProps<unknown>>({
+  name: 'BodyRow',
+  inheritAttrs: false,
   props: [
     'record',
     'index',
@@ -38,8 +40,6 @@ export default defineComponent<BodyRowProps<unknown>>({
     'getRowKey',
     'childrenColumnName',
   ] as any,
-  name: 'BodyRow',
-  inheritAttrs: false,
   setup(props, { attrs }) {
     const tableContext = useInjectTable();
     const bodyContext = useInjectBody();
@@ -92,6 +92,7 @@ export default defineComponent<BodyRowProps<unknown>>({
       } else if (typeof rowClassName === 'function') {
         return rowClassName(record, index, indent);
       }
+      return '';
     });
 
     const columnsKey = computed(() => getColumnsKey(bodyContext.flattenColumns));

components/vc-table/Body/ExpandedRow.tsx

@@ -17,6 +17,7 @@ export interface ExpandedRowProps {
 
 export default defineComponent<ExpandedRowProps>({
   name: 'ExpandedRow',
+  inheritAttrs: false,
   props: [
     'prefixCls',
     'component',
@@ -28,7 +29,6 @@ export default defineComponent<ExpandedRowProps>({
     'expanded',
     'colSpan',
   ] as any,
-  inheritAttrs: false,
   setup(props, { slots, attrs }) {
     const tableContext = useInjectTable();
     return () => {

components/vc-table/Body/MeasureCell.tsx

@@ -1,3 +1,4 @@
+import { defineComponent, onMounted, ref } from 'vue';
 import VCResizeObserver from '../../vc-resize-observer';
 import type { Key } from '../interface';
 
@@ -6,16 +7,28 @@ export interface MeasureCellProps {
   onColumnResize: (key: Key, width: number) => void;
 }
 
-export default function MeasureCell({ columnKey }: MeasureCellProps, { emit }) {
-  return (
-    <VCResizeObserver
-      onResize={({ offsetWidth }) => {
-        emit('columnResize', columnKey, offsetWidth);
-      }}
-    >
-      <td style={{ padding: 0, border: 0, height: 0 }}>
-        <div style={{ height: 0, overflow: 'hidden' }}>&nbsp;</div>
-      </td>
-    </VCResizeObserver>
-  );
-}
+export default defineComponent<MeasureCellProps>({
+  name: 'MeasureCell',
+  props: ['columnKey'] as any,
+  setup(props, { emit }) {
+    const tdRef = ref();
+    onMounted(() => {
+      if (tdRef.value) {
+        emit('columnResize', props.columnKey, tdRef.value.offsetWidth);
+      }
+    });
+    return () => {
+      return (
+        <VCResizeObserver
+          onResize={({ offsetWidth }) => {
+            emit('columnResize', props.columnKey, offsetWidth);
+          }}
+        >
+          <td ref={tdRef} style={{ padding: 0, border: 0, height: 0 }}>
+            <div style={{ height: 0, overflow: 'hidden' }}>&nbsp;</div>
+          </td>
+        </VCResizeObserver>
+      );
+    };
+  },
+});

components/vc-table/Body/index.tsx

@@ -107,7 +107,7 @@ export default defineComponent<BodyProps<any>>({
       const columnsKey = getColumnsKey(flattenColumns);
 
       return (
-        <WrapperComponent className={`${prefixCls}-tbody`}>
+        <WrapperComponent class={`${prefixCls}-tbody`}>
           {/* Measure body column width with additional hidden col */}
           {measureColumnWidth && (
             <tr

components/vc-table/FixedHolder/index.tsx

@@ -48,6 +48,7 @@ export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
 
 export default defineComponent<FixedHeaderProps<DefaultRecordType>>({
   name: 'FixedHolder',
+  inheritAttrs: false,
   props: [
     'columns',
     'flattenColumns',
@@ -64,7 +65,6 @@ export default defineComponent<FixedHeaderProps<DefaultRecordType>>({
     'stickyClassName',
   ] as any,
   emits: ['scroll'],
-  inheritAttrs: false,
   setup(props, { attrs, slots, emit }) {
     const tableContext = useInjectTable();
     const combinationScrollBarSize = computed(() =>

components/vc-table/Footer/Cell.tsx

@@ -14,8 +14,8 @@ export interface SummaryCellProps {
 
 export default defineComponent<SummaryCellProps>({
   name: 'SummaryCell',
-  props: ['index', 'colSpan', 'rowSpan', 'align'] as any,
   inheritAttrs: false,
+  props: ['index', 'colSpan', 'rowSpan', 'align'] as any,
   setup(props, { attrs, slots }) {
     const tableContext = useInjectTable();
     const summaryContext = useInjectSummary();

components/vc-table/Footer/Summary.tsx

@@ -7,8 +7,8 @@ export interface SummaryProps {
 
 let indexGuid = 0;
 const Summary = defineComponent<SummaryProps>({
-  props: ['fixed'] as any,
   name: 'Summary',
+  props: ['fixed'] as any,
   setup(props, { slots }) {
     const tableContext = useInjectTable();
     const uniKey = `table-summary-uni-key-${++indexGuid}`;

components/vc-table/Footer/index.tsx

@@ -14,8 +14,8 @@ export interface FooterProps<RecordType = DefaultRecordType> {
 
 export default defineComponent({
   name: 'Footer',
-  props: ['stickyOffsets', 'flattenColumns'],
   inheritAttrs: false,
+  props: ['stickyOffsets', 'flattenColumns'],
   setup(props, { slots }) {
     const tableContext = useInjectTable();
     useProvideSummary(