test: update table

components/empty/__tests__/__snapshots__/demo.test.js.snap

@@ -113,32 +113,47 @@ exports[`renders ./components/empty/demo/config-provider.vue correctly 1`] = `
     <div class="ant-spin-nested-loading">
       <!---->
       <div class="ant-spin-container">
-        <div class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left">
+        <div class="ant-table ant-table-empty" style="margin-top: 8px;">
           <!---->
-          <div class="ant-table-content">
+          <div class="ant-table-container">
-            <!---->
+            <div class="ant-table-content">
-            <div class="ant-table-body">
+              <table style="table-layout: auto;">
-              <table class="">
+                <colgroup></colgroup>
-                <colgroup>
-                  <col data-key="0">
-                  <col data-key="1">
-                </colgroup>
                 <thead class="ant-table-thead">
                   <tr>
-                    <th colstart="0" colspan="1" colend="0" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
+                    <th class="ant-table-cell" colstart="0" colend="0">
-            </div></span>
+                      <!---->Name
-            <!---->
+                    </th>
-            </th>
+                    <th class="ant-table-cell" colstart="1" colend="1">
-            <th colstart="1" colspan="1" colend="1" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter"><!----></span>
+                      <!---->Age
-          </div></span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="ant-table-tbody">
+                  <!---->
+                  <tr class="ant-table-placeholder">
+                    <td colspan="2" class="ant-table-cell">
+                      <!---->No data
+                    </td>
+                  </tr>
+                </tbody>
+                <!---->
+              </table>
+            </div>
+          </div>
           <!---->
-          </th>
-          </tr>
-          </thead>
-          <tbody class="ant-table-tbody"></tbody>
-          </table>
         </div>
-        <div class="ant-table-placeholder">
+      </div>
+    </div>
+  </div>
+  <h3>List</h3>
+  <div class="ant-list ant-list-split">
+    <!---->
+    <!---->
+    <div class="ant-spin-nested-loading">
+      <!---->
+      <div class="ant-spin-container">
+        <div class="ant-list-empty-text">
           <div class="ant-empty ant-empty-normal">
             <div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
                 <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
@@ -153,39 +168,11 @@ exports[`renders ./components/empty/demo/config-provider.vue correctly 1`] = `
             <!---->
           </div>
         </div>
-        <!---->
       </div>
     </div>
-  </div>
-</div>
-</div>
-<h3>List</h3>
-<div class="ant-list ant-list-split">
-  <!---->
-  <!---->
-  <div class="ant-spin-nested-loading">
     <!---->
-    <div class="ant-spin-container">
+    <!---->
-      <div class="ant-list-empty-text">
-        <div class="ant-empty ant-empty-normal">
-          <div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
-              <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
-                <ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
-                <g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
-                  <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
-                  <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
-                </g>
-              </g>
-            </svg></div>
-          <p class="ant-empty-description">No Data</p>
-          <!---->
-        </div>
-      </div>
-    </div>
   </div>
-  <!---->
-  <!---->
-</div>
 </div>
 `;
 

components/table/Table.tsx

@@ -35,7 +35,7 @@ import defaultLocale from '../locale/en_US';
 import type { SizeType } from '../config-provider';
 import devWarning from '../vc-util/devWarning';
 import type { PropType } from 'vue';
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { computed, defineComponent, toRef, watchEffect } from 'vue';
 import type { DefaultRecordType } from '../vc-table/interface';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
@@ -237,7 +237,7 @@ const InteralTable = defineComponent<
     'customFilterIcon',
     'customFilterDropdown',
   ],
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     devWarning(
       !(typeof props.rowKey === 'function' && props.rowKey.length > 1),
       'Table',
@@ -497,7 +497,9 @@ const InteralTable = defineComponent<
         mergedRowClassName,
       );
     };
-
+    expose({
+      selectedKeySet,
+    });
     const expandIconColumnIndex = computed(() => {
       // Adjust expand icon index, no overwrite expandIconColumnIndex if set.
       if (expandType.value === 'nest' && props.expandIconColumnIndex === undefined) {
@@ -633,11 +635,16 @@ const InteralTable = defineComponent<
 const Table = defineComponent<TableProps>({
   name: 'ATable',
   inheritAttrs: false,
-  setup(_props, { attrs, slots }) {
+  setup(_props, { attrs, slots, expose }) {
+    const table = ref();
+    expose({
+      table,
+    });
     return () => {
       const columns = (attrs.columns || convertChildrenToColumns(slots.default?.())) as ColumnsType;
       return (
         <InteralTable
+          ref={table}
           {...attrs}
           columns={columns || []}
           expandedRowRender={slots.expandedRowRender}

components/table/__tests__/SelectionBox.test.js

@@ -1,129 +0,0 @@
-import * as Vue from 'vue';
-import { mount } from '@vue/test-utils';
-import SelectionBox from '../SelectionBox';
-
-const getDefaultStore = selectedRowKeys => {
-  return Vue.reactive({
-    selectedRowKeys: selectedRowKeys || [],
-    selectionDirty: false,
-  });
-};
-
-describe('SelectionBox', () => {
-  it('unchecked by selectedRowKeys ', () => {
-    const wrapper = mount(SelectionBox, {
-      props: {
-        store: getDefaultStore(),
-        rowIndex: '1',
-        disabled: false,
-        onChange: () => {},
-        defaultSelection: [],
-      },
-      listeners: {
-        change: () => {},
-      },
-      sync: false,
-    });
-
-    expect(wrapper.vm.checked).toEqual(false);
-  });
-
-  it('checked by selectedRowKeys ', () => {
-    const wrapper = mount(SelectionBox, {
-      props: {
-        store: getDefaultStore(['1']),
-        rowIndex: '1',
-        disabled: false,
-        onChange: () => {},
-        defaultSelection: [],
-      },
-      sync: false,
-    });
-
-    expect(wrapper.vm.checked).toEqual(true);
-  });
-
-  it('checked by defaultSelection', () => {
-    const wrapper = mount(SelectionBox, {
-      props: {
-        store: getDefaultStore(),
-        rowIndex: '1',
-        disabled: false,
-        onChange: () => {},
-        defaultSelection: ['1'],
-      },
-      sync: false,
-    });
-    expect(wrapper.vm.checked).toEqual(true);
-  });
-
-  it('checked when store change', () => {
-    const store = getDefaultStore();
-    const wrapper = mount(SelectionBox, {
-      props: {
-        store,
-        rowIndex: '1',
-        disabled: false,
-        onChange: () => {},
-        defaultSelection: [],
-      },
-      sync: false,
-    });
-
-    store.selectedRowKeys = ['1'];
-    store.selectionDirty = true;
-
-    expect(wrapper.vm.checked).toEqual(true);
-  });
-
-  it('passes props to Checkbox', done => {
-    const checkboxProps = {
-      name: 'testName',
-      id: 'testId',
-    };
-    const wrapper = mount(SelectionBox, {
-      props: {
-        store: getDefaultStore(),
-        rowIndex: '1',
-        disabled: false,
-        onChange: () => {},
-        defaultSelection: ['1'],
-        ...checkboxProps,
-      },
-      sync: false,
-    });
-    Vue.nextTick(() => {
-      wrapper.findAllComponents({ name: 'ACheckbox' }).forEach(box => {
-        expect(box.props().name).toEqual(checkboxProps.name);
-        expect(box.props().id).toEqual(checkboxProps.id);
-      });
-      done();
-    });
-  });
-
-  it('passes props to Radios', done => {
-    const radioProps = {
-      name: 'testName',
-      id: 'testId',
-    };
-    const wrapper = mount(SelectionBox, {
-      props: {
-        store: getDefaultStore(),
-        rowIndex: '1',
-        disabled: false,
-        onChange: () => {},
-        defaultSelection: ['1'],
-        type: 'radio',
-        ...radioProps,
-      },
-      sync: false,
-    });
-    Vue.nextTick(() => {
-      wrapper.findAllComponents({ name: 'ARadio' }).forEach(radio => {
-        expect(radio.props().name).toEqual(radioProps.name);
-        expect(radio.props().id).toEqual(radioProps.id);
-      });
-      done();
-    });
-  });
-});

components/table/__tests__/Table.pagination.test.js

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import Table from '..';
 import * as Vue from 'vue';
 import { asyncExpect } from '@/tests/utils';
+import { sleep } from '../../../tests/utils';
 
 describe('Table.pagination', () => {
   const columns = [
@@ -33,7 +34,7 @@ describe('Table.pagination', () => {
   }
 
   function renderedNames(wrapper) {
-    return wrapper.findAllComponents({ name: 'TableRow' }).map(row => {
+    return wrapper.findAllComponents({ name: 'BodyRow' }).map(row => {
       return row.props().record.name;
     });
   }
@@ -76,7 +77,7 @@ describe('Table.pagination', () => {
     });
   });
 
-  xit('paginate data', done => {
+  it('paginate data', done => {
     const wrapper = mount(Table, getTableOptions());
     Vue.nextTick(() => {
       expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']);
@@ -89,7 +90,7 @@ describe('Table.pagination', () => {
     });
   });
 
-  xit('repaginates when pageSize change', () => {
+  it('repaginates when pageSize change', () => {
     const wrapper = mount(Table, getTableOptions());
     wrapper.setProps({ pagination: { pageSize: 1 } });
     Vue.nextTick(() => {
@@ -97,7 +98,7 @@ describe('Table.pagination', () => {
     });
   });
 
-  xit('fires change event', done => {
+  it('fires change event', done => {
     const handleChange = jest.fn();
     const handlePaginationChange = jest.fn();
     const noop = () => {};
@@ -108,8 +109,8 @@ describe('Table.pagination', () => {
           ...pagination,
           onChange: handlePaginationChange,
           onShowSizeChange: noop,
-          onChange: handleChange,
         },
+        onChange: handleChange,
       }),
     );
     Vue.nextTick(() => {
@@ -131,6 +132,7 @@ describe('Table.pagination', () => {
             { key: 2, name: 'Tom' },
             { key: 3, name: 'Jerry' },
           ],
+          action: 'paginate',
         },
       );
 
@@ -156,7 +158,7 @@ describe('Table.pagination', () => {
 
   // https://github.com/ant-design/ant-design/issues/4532
   // https://codepen.io/afc163/pen/pWVRJV?editors=001
-  xit('should display pagination as prop pagination change between true and false', async () => {
+  it('should display pagination as prop pagination change between true and false', async () => {
     const wrapper = mount(Table, getTableOptions());
     await asyncExpect(() => {
       expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
@@ -182,8 +184,8 @@ describe('Table.pagination', () => {
     });
     await asyncExpect(() => {
       expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
-      expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(1); // pageSize will be 10
+      expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2); // pageSize will be 10
-      expect(renderedNames(wrapper)).toHaveLength(4);
+      expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
     });
   });
 
@@ -202,30 +204,30 @@ describe('Table.pagination', () => {
     });
   });
 
-  xit('specify the position of pagination', async () => {
+  it('specify the position of pagination', async () => {
-    const wrapper = mount(Table, getTableOptions({ pagination: { position: 'top' } }));
+    const wrapper = mount(Table, getTableOptions({ pagination: { position: ['topLeft'] } }));
     await asyncExpect(() => {
       expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2);
-      expect(wrapper.findAll('.ant-spin-container > *')[0].findAll('.ant-pagination')).toHaveLength(
+      expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
-        1,
+      wrapper.setProps({ pagination: { position: 'bottomRight' } });
-      );
-      wrapper.setProps({ pagination: { position: 'bottom' } });
     }, 0);
     await asyncExpect(() => {
       expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2);
-      expect(wrapper.findAll('.ant-spin-container > *')[1].findAll('.ant-pagination')).toHaveLength(
+      expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
-        1,
+      wrapper.setProps({ pagination: { position: ['topLeft', 'bottomRight'] } });
-      );
-      wrapper.setProps({ pagination: { position: 'both' } });
     }, 0);
     await asyncExpect(() => {
       expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(3);
-      expect(wrapper.findAll('.ant-spin-container > *')[0].findAll('.ant-pagination')).toHaveLength(
+      expect(wrapper.findAll('.ant-pagination')).toHaveLength(2);
-        1,
-      );
-      expect(wrapper.findAll('.ant-spin-container > *')[2].findAll('.ant-pagination')).toHaveLength(
-        1,
-      );
     }, 0);
+    wrapper.setProps({ pagination: { position: ['none', 'none'] } });
+    await sleep();
+    expect(wrapper.findAll('.ant-pagination')).toHaveLength(0);
+    wrapper.setProps({ pagination: { position: ['invalid'] } });
+    await sleep();
+    expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
+    wrapper.setProps({ pagination: { position: ['invalid', 'invalid'] } });
+    await sleep();
+    expect(wrapper.findAll('.ant-pagination')).toHaveLength(1);
   });
 });

components/table/__tests__/Table.rowSelection.test.js

@@ -4,6 +4,15 @@ import Table from '..';
 import { sleep } from '../../../tests/utils';
 
 describe('Table.rowSelection', () => {
+  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  afterEach(() => {
+    errorSpy.mockReset();
+  });
+
+  afterAll(() => {
+    errorSpy.mockRestore();
+  });
   const columns = [
     {
       title: 'Name',
@@ -30,13 +39,13 @@ describe('Table.rowSelection', () => {
     };
   }
   function renderedNames(wrapper) {
-    return wrapper.findAllComponents({ name: 'TableRow' }).map(row => {
+    return wrapper.findAllComponents({ name: 'BodyRow' }).map(row => {
       return row.props().record.name;
     });
   }
 
-  function getStore(wrapper) {
+  function getSelections(wrapper) {
-    return wrapper.vm.$refs.table.store;
+    return [...wrapper.vm.table.selectedKeySet].sort();
   }
 
   it('select by checkbox', async () => {
@@ -46,26 +55,17 @@ describe('Table.rowSelection', () => {
     checkboxAll.element.checked = true;
     checkboxAll.trigger('change');
     await asyncExpect(() => {
-      expect(getStore(wrapper)).toEqual({
+      expect(getSelections(wrapper)).toEqual([0, 1, 2, 3]);
-        selectedRowKeys: [0, 1, 2, 3],
-        selectionDirty: true,
-      });
     });
     checkboxes[1].element.checked = false;
     checkboxes[1].trigger('change');
     await asyncExpect(() => {
-      expect(getStore(wrapper)).toEqual({
+      expect(getSelections(wrapper)).toEqual([1, 2, 3]);
-        selectedRowKeys: [1, 2, 3],
-        selectionDirty: true,
-      });
     });
     checkboxes[1].element.checked = true;
     checkboxes[1].trigger('change');
     await asyncExpect(() => {
-      expect(getStore(wrapper)).toEqual({
+      expect(getSelections(wrapper)).toEqual([0, 1, 2, 3]);
-        selectedRowKeys: [1, 2, 3, 0],
-        selectionDirty: true,
-      });
     });
   });
 
@@ -77,103 +77,84 @@ describe('Table.rowSelection', () => {
     radios[0].element.checked = true;
     radios[0].trigger('change');
     await asyncExpect(() => {
-      expect(getStore(wrapper)).toEqual({
+      expect(getSelections(wrapper)).toEqual([0]);
-        selectedRowKeys: [0],
-        selectionDirty: true,
-      });
     });
     radios[radios.length - 1].element.checked = true;
     radios[radios.length - 1].trigger('change');
     await asyncExpect(() => {
-      expect(getStore(wrapper)).toEqual({
+      expect(getSelections(wrapper)).toEqual([3]);
-        selectedRowKeys: [3],
-        selectionDirty: true,
-      });
     });
   });
 
-  xit('pass getCheckboxProps to checkbox', async () => {
+  it('pass getCheckboxProps to checkbox', async () => {
     const rowSelection = {
       getCheckboxProps: record => ({
-        props: {
+        disabled: record.name === 'Lucy',
-          disabled: record.name === 'Lucy',
+        name: record.name,
-          name: record.name,
-        },
       }),
     };
 
     const wrapper = mount(Table, getTableOptions({ rowSelection }));
     const checkboxes = wrapper.findAll('input');
     await sleep();
-    expect(checkboxes[1].props.disabled).toBe(false);
+    expect(checkboxes[1].wrapperElement.disabled).toBe(false);
-    expect(checkboxes[1].vnode.data.attrs.name).toEqual(data[0].name);
+    expect(checkboxes[1].wrapperElement.name).toEqual(data[0].name);
-    expect(checkboxes[2].vnode.data.attrs.disabled).toBe(true);
+    expect(checkboxes[2].wrapperElement.disabled).toBe(true);
-    expect(checkboxes[2].vnode.data.attrs.name).toEqual(data[1].name);
+    expect(checkboxes[2].wrapperElement.name).toEqual(data[1].name);
   });
 
-  xit('works with pagination', async () => {
+  it('works with pagination', async () => {
     const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 2 } }));
 
-    const checkboxAll = wrapper.findAllComponents({ name: 'SelectionCheckboxAll' });
+    await sleep();
+    const checkboxAll = wrapper.find('input');
+    checkboxAll.wrapperElement.checked = true;
+    checkboxAll.trigger('change');
     const pagers = wrapper.findAllComponents({ name: 'Pager' });
-    checkboxAll.find('input').element.checked = true;
-    checkboxAll.find('input').trigger('change');
     await asyncExpect(() => {
-      expect(checkboxAll.vm.$data).toEqual({ checked: true, indeterminate: false });
+      expect(wrapper.findComponent({ name: 'ACheckbox' }).props()).toEqual(
+        expect.objectContaining({ checked: true, indeterminate: false }),
+      );
     });
     pagers[1].trigger('click');
     await asyncExpect(() => {
-      expect(checkboxAll.vm.$data).toEqual({ checked: false, indeterminate: false });
+      expect(wrapper.findComponent({ name: 'ACheckbox' }).props()).toEqual(
+        expect.objectContaining({ checked: false, indeterminate: false }),
+      );
     });
     pagers[0].trigger('click');
     await asyncExpect(() => {
-      expect(checkboxAll.vm.$data).toEqual({ checked: true, indeterminate: false });
+      expect(wrapper.findComponent({ name: 'ACheckbox' }).props()).toEqual(
+        expect.objectContaining({ checked: true, indeterminate: false }),
+      );
     });
   });
 
   // https://github.com/ant-design/ant-design/issues/4020
-  xit('handles defaultChecked', async () => {
+  it('handles defaultChecked', async () => {
     const rowSelection = {
       getCheckboxProps: record => {
         return {
-          props: {
+          defaultChecked: record.key === 0,
-            defaultChecked: record.key === 0,
-          },
         };
       },
     };
 
-    const wrapper = mount(Table, getTableOptions({ rowSelection }));
+    mount(Table, getTableOptions({ rowSelection }));
 
-    await asyncExpect(() => {
+    expect(errorSpy).toHaveBeenCalledWith(
-      const checkboxs = wrapper.findAll('input');
+      'Warning: [ant-design-vue: Table] Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.',
-      expect(checkboxs[1].vnode.data.domProps.checked).toBe(true);
+    );
-      expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(false);
-      checkboxs.at(2).element.checked = true;
-      checkboxs.at(2).trigger('change');
-    }, 0);
-
-    await asyncExpect(() => {
-      const checkboxs = wrapper.findAll('input');
-      expect(checkboxs[1].vnode.data.domProps.checked).toBe(true);
-      expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(true);
-    }, 1000);
   });
 
   it('can be controlled', async () => {
     const wrapper = mount(Table, getTableOptions({ rowSelection: { selectedRowKeys: [0] } }));
 
-    expect(getStore(wrapper)).toEqual({
+    expect(getSelections(wrapper)).toEqual([0]);
-      selectedRowKeys: [0],
-      selectionDirty: false,
-    });
 
     wrapper.setProps({ rowSelection: { selectedRowKeys: [1] } });
     await asyncExpect(() => {
-      expect(getStore(wrapper)).toEqual({
+      expect(getSelections(wrapper)).toEqual([1]);
-        selectedRowKeys: [1],
-        selectionDirty: false,
-      });
     });
   });
 
@@ -216,7 +197,7 @@ describe('Table.rowSelection', () => {
     });
   });
 
-  xit('render with default selection correctly', async () => {
+  it('render with default selection correctly', async () => {
     const rowSelection = {
       selections: true,
     };
@@ -224,7 +205,7 @@ describe('Table.rowSelection', () => {
     const dropdownWrapper = mount(
       {
         render() {
-          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
+          return wrapper.findComponent({ name: 'Trigger' }).vm.getComponent();
         },
       },
       { sync: false },
@@ -232,14 +213,12 @@ describe('Table.rowSelection', () => {
     await asyncExpect(() => {
       expect(dropdownWrapper.html()).toMatchSnapshot();
     });
-
-    await asyncExpect(() => {});
   });
 
-  xit('click select all selection', () => {
+  it('click select all selection', () => {
-    const handleSelectAll = jest.fn();
+    const handleChange = jest.fn();
     const rowSelection = {
-      onSelectAll: handleSelectAll,
+      onChange: handleChange,
       selections: true,
     };
     const wrapper = mount(Table, getTableOptions({ rowSelection }));
@@ -247,17 +226,17 @@ describe('Table.rowSelection', () => {
     const dropdownWrapper = mount(
       {
         render() {
-          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
+          return wrapper.findComponent({ name: 'Trigger' }).vm.getComponent();
         },
       },
       { sync: false },
     );
-    dropdownWrapper.findAll('.ant-dropdown-menu-item > div')[0].trigger('click');
+    dropdownWrapper.findAll('.ant-dropdown-menu-item')[0].trigger('click');
 
-    expect(handleSelectAll).toBeCalledWith(true, data, data);
+    expect(handleChange.mock.calls[0][0]).toEqual([0, 1, 2, 3]);
   });
 
-  xit('fires selectInvert event', () => {
+  it('fires selectInvert event', async () => {
     const handleSelectInvert = jest.fn();
     const rowSelection = {
       onSelectInvert: handleSelectInvert,
@@ -267,25 +246,28 @@ describe('Table.rowSelection', () => {
     const checkboxes = wrapper.findAll('input');
     checkboxes[1].element.checked = true;
     checkboxes[1].trigger('change');
+    await sleep();
     const dropdownWrapper = mount(
       {
         render() {
-          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
+          return wrapper.findComponent({ name: 'Trigger' }).vm.getComponent();
         },
       },
       { sync: false },
     );
-    const div = dropdownWrapper.findAll('.ant-dropdown-menu-item > div');
+    const div = dropdownWrapper.findAll('li.ant-dropdown-menu-item');
-    div.at(div.length - 1).trigger('click');
+    div.at(1).trigger('click');
 
     expect(handleSelectInvert).toBeCalledWith([1, 2, 3]);
   });
 
-  xit('fires selection event', () => {
+  it('fires selection event', () => {
     const handleSelectOdd = jest.fn();
     const handleSelectEven = jest.fn();
     const rowSelection = {
       selections: [
+        Table.SELECTION_ALL,
+        Table.SELECTION_INVERT,
         {
           key: 'odd',
           text: '奇数项',
@@ -303,21 +285,21 @@ describe('Table.rowSelection', () => {
     const dropdownWrapper = mount(
       {
         render() {
-          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
+          return wrapper.findComponent({ name: 'Trigger' }).vm.getComponent();
         },
       },
       { sync: false },
     );
     expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(4);
 
-    dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(2).trigger('click');
+    dropdownWrapper.findAll('.ant-dropdown-menu-item')[2].trigger('click');
     expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3]);
 
-    dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(3).trigger('click');
+    dropdownWrapper.findAll('.ant-dropdown-menu-item').at(3).trigger('click');
     expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3]);
   });
 
-  xit('could hide default selection options', () => {
+  it('could hide default selection options', () => {
     const rowSelection = {
       hideDefaultSelections: true,
       selections: [
@@ -335,7 +317,7 @@ describe('Table.rowSelection', () => {
     const dropdownWrapper = mount(
       {
         render() {
-          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
+          return wrapper.findComponent({ name: 'Trigger' }).vm.getComponent();
         },
       },
       { sync: false },
@@ -343,7 +325,7 @@ describe('Table.rowSelection', () => {
     expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(2);
   });
 
-  xit('handle custom selection onSelect correctly when hide default selection options', () => {
+  it('handle custom selection onSelect correctly when hide default selection options', () => {
     const handleSelectOdd = jest.fn();
     const handleSelectEven = jest.fn();
     const rowSelection = {
@@ -366,25 +348,25 @@ describe('Table.rowSelection', () => {
     const dropdownWrapper = mount(
       {
         render() {
-          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
+          return wrapper.findComponent({ name: 'Trigger' }).vm.getComponent();
         },
       },
       { sync: false },
     );
     expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(2);
 
-    dropdownWrapper.findAll('.ant-dropdown-menu-item > div')[0].trigger('click');
+    dropdownWrapper.findAll('.ant-dropdown-menu-item')[0].trigger('click');
     expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3]);
 
-    dropdownWrapper.findAll('.ant-dropdown-menu-item > div')[1].trigger('click');
+    dropdownWrapper.findAll('.ant-dropdown-menu-item')[1].trigger('click');
     expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3]);
   });
 
   // https:// github.com/ant-design/ant-design/issues/4245
-  xit('handles disabled checkbox correctly when dataSource changes', async () => {
+  it('handles disabled checkbox correctly when dataSource changes', async () => {
     const rowSelection = {
       getCheckboxProps: record => {
-        return { props: { disabled: record.disabled } };
+        return { disabled: record.disabled };
       },
     };
     const wrapper = mount(Table, getTableOptions({ rowSelection }));
@@ -396,14 +378,14 @@ describe('Table.rowSelection', () => {
       wrapper.setProps({ dataSource: newData });
     });
     await asyncExpect(() => {
-      wrapper.findAll('input').wrappers.forEach(checkbox => {
+      wrapper.findAll('input').forEach(checkbox => {
-        expect(checkbox.vnode.data.attrs.disabled).toBe(true);
+        expect(checkbox.wrapperElement.disabled).toBe(true);
       });
     });
   });
 
   // https://github.com/ant-design/ant-design/issues/4779
-  xit('should not switch pagination when select record', async () => {
+  it('should not switch pagination when select record', async () => {
     const newData = [];
     for (let i = 0; i < 20; i += 1) {
       newData.push({
@@ -418,7 +400,7 @@ describe('Table.rowSelection', () => {
         dataSource: newData,
       }),
     );
-    const pager = wrapper.findAll({ name: 'Pager' });
+    const pager = wrapper.findAllComponents({ name: 'Pager' });
     pager.at(pager.length - 1).trigger('click'); // switch to second page
     wrapper.findAll('input')[0].element.checked = true;
     wrapper.findAll('input')[0].trigger('change');
@@ -460,7 +442,7 @@ describe('Table.rowSelection', () => {
   });
 
   // https://github.com/ant-design/ant-design/issues/10629
-  xit('should keep all checked state when remove item from dataSource', async () => {
+  it('should keep all checked state when remove item from dataSource', async () => {
     const wrapper = mount(Table, {
       props: {
         columns,
@@ -510,7 +492,7 @@ describe('Table.rowSelection', () => {
       sync: false,
     });
     await asyncExpect(() => {
-      expect(wrapper.findAll('thead tr div')[0].text()).toBe('多选');
+      expect(wrapper.findAll('thead tr th')[0].text()).toBe('多选');
     });
     await asyncExpect(() => {
       wrapper.setProps({
@@ -521,12 +503,12 @@ describe('Table.rowSelection', () => {
       });
     });
     await asyncExpect(() => {
-      expect(wrapper.findAll('thead tr div')[0].text()).toBe('单选');
+      expect(wrapper.findAll('thead tr th')[0].text()).toBe('单选');
     });
   });
 
   // https://github.com/ant-design/ant-design/issues/11384
-  xit('should keep item even if in filter', async () => {
+  it('should keep item even if in filter', async () => {
     const filterColumns = [
       {
         title: 'Name',
@@ -563,11 +545,21 @@ describe('Table.rowSelection', () => {
     const dropdownWrapper = mount(
       {
         render() {
-          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
+          return wrapper.findComponent({ name: 'Trigger' }).vm.getComponent();
         },
       },
       { sync: false },
     );
+    await sleep();
+    function clickFilter(indexList) {
+      indexList.forEach(index => {
+        dropdownWrapper
+          .findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')
+          .at(index)
+          .trigger('click');
+      });
+      dropdownWrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').trigger('click');
+    }
 
     function clickItem() {
       wrapper.findAll(
@@ -577,10 +569,7 @@ describe('Table.rowSelection', () => {
     }
 
     // Check Jack
-    dropdownWrapper.findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')[0].trigger('click');
+    clickFilter([0]);
-    dropdownWrapper
-      .find('.ant-table-filter-dropdown-btns .ant-table-filter-dropdown-link.confirm')
-      .trigger('click');
     await asyncExpect(() => {
       expect(wrapper.findAll('tbody tr').length).toBe(1);
     });
@@ -592,19 +581,9 @@ describe('Table.rowSelection', () => {
       expect(onChange.mock.calls[0][1].length).toBe(1);
     });
 
-    await asyncExpect(() => {
+    // Check Lucy
-      dropdownWrapper.findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')[0].trigger('click');
+    clickFilter([0, 1]);
-    });
 
-    await asyncExpect(() => {
-      // Check Lucy
-      dropdownWrapper.findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')[1].trigger('click');
-    });
-    await asyncExpect(() => {
-      dropdownWrapper
-        .find('.ant-table-filter-dropdown-btns .ant-table-filter-dropdown-link.confirm')
-        .trigger('click');
-    });
     await asyncExpect(() => {
       expect(wrapper.findAll('tbody tr').length).toBe(1);
     });
@@ -617,7 +596,7 @@ describe('Table.rowSelection', () => {
     });
   });
 
-  xit('render correctly when set childrenColumnName', async () => {
+  it('render correctly when set childrenColumnName', async () => {
     const newDatas = [
       {
         key: 1,
@@ -652,16 +631,18 @@ describe('Table.rowSelection', () => {
     });
 
     const checkboxes = wrapper.findAll('input');
-    const checkboxAll = wrapper.findAllComponents({ name: 'SelectionCheckboxAll' });
-
     checkboxes[1].element.checked = true;
     checkboxes[1].trigger('change');
-    expect(checkboxAll.$data).toEqual({ indeterminate: true, checked: false });
+    await sleep();
-
+    expect(wrapper.findComponent({ name: 'ACheckbox' }).props()).toEqual(
+      expect.objectContaining({ checked: false, indeterminate: true }),
+    );
     checkboxes[2].element.checked = true;
     checkboxes[2].trigger('change');
     await asyncExpect(() => {
-      expect(checkboxAll.vm.$data).toEqual({ indeterminate: false, checked: true });
+      expect(wrapper.findComponent({ name: 'ACheckbox' }).props()).toEqual(
+        expect.objectContaining({ checked: true, indeterminate: false }),
+      );
     });
   });
 });

components/table/__tests__/Table.sorter.test.js

@@ -9,6 +9,7 @@ describe('Table.sorter', () => {
   const column = {
     title: 'Name',
     dataIndex: 'name',
+    key: 'name',
     sorter: sorterFn,
   };
 
@@ -38,7 +39,7 @@ describe('Table.sorter', () => {
   }
 
   function renderedNames(wrapper) {
-    return wrapper.findAllComponents({ name: 'TableRow' }).wrappers.map(row => {
+    return wrapper.findAllComponents({ name: 'BodyRow' }).map(row => {
       return row.props().record.name;
     });
   }
@@ -51,7 +52,7 @@ describe('Table.sorter', () => {
     });
   });
 
-  xit('default sort order ascend', done => {
+  it('default sort order ascend', done => {
     const wrapper = mount(
       Table,
       getTableOptions(
@@ -67,7 +68,7 @@ describe('Table.sorter', () => {
     });
   });
 
-  xit('default sort order descend', done => {
+  it('default sort order descend', done => {
     const wrapper = mount(
       Table,
       getTableOptions(
@@ -104,7 +105,7 @@ describe('Table.sorter', () => {
     });
   });
 
-  xit('can be controlled by sortOrder', done => {
+  it('can be controlled by sortOrder', done => {
     const wrapper = mount(
       Table,
       getTableOptions({
@@ -148,7 +149,7 @@ describe('Table.sorter', () => {
     });
   });
 
-  xit('works with grouping columns in controlled mode', done => {
+  it('works with grouping columns in controlled mode', done => {
     const columns = [
       {
         title: 'group',

components/table/__tests__/Table.test.js

@@ -1,4 +1,4 @@
-import { shallowMount as shallow, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Table from '..';
 import * as Vue from 'vue';
 import mountTest from '../../../tests/shared/mountTest';
@@ -55,7 +55,7 @@ describe('Table', () => {
         dataIndex: 'name',
       },
     ];
-    const wrapper = shallow(Table, {
+    const wrapper = mount(Table, {
       props: {
         columns,
       },
@@ -70,7 +70,7 @@ describe('Table', () => {
     ];
     wrapper.setProps({ columns: newColumns });
     await sleep();
-    expect(wrapper.vm.columns).toStrictEqual(newColumns);
+    expect(wrapper.find('th').text()).toEqual('Title');
   });
 
   it('loading with Spin', async () => {

components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

@@ -95,15 +95,27 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
 
 exports[`Table.rowSelection render with default selection correctly 1`] = `
 <div>
-  <div class="ant-dropdown  ant-dropdown-placement-bottomLeft" style="display: none;">
+  <!---->
-    <ul role="menu" tabindex="0" class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root ant-dropdown-menu-light ant-table-selection-menu ant-dropdown-content">
+  <div class="ant-dropdown" style="pointer-events: none; display: none;">
-      <li role="menuitem" class="ant-dropdown-menu-item">
+    <div class="ant-dropdown-content">
-        <div>Select current page</div>
+      <!---->
-      </li>
+      <ul class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light" role="menu" data-menu-list="true">
-      <li role="menuitem" class="ant-dropdown-menu-item">
+        <!---->
-        <div>Invert current page</div>
+        <li class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="all" aria-disabled="false">
-      </li>
+          <!----><span class="ant-dropdown-menu-title-content">Select all data</span>
-    </ul>
+        </li>
+        <!---->
+        <li class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="invert" aria-disabled="false">
+          <!----><span class="ant-dropdown-menu-title-content">Invert current page</span>
+        </li>
+        <!---->
+        <li class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="none" aria-disabled="false">
+          <!----><span class="ant-dropdown-menu-title-content">Clear all data</span>
+        </li>
+        <!---->
+        <!---->
+      </ul>
+    </div>
   </div>
 </div>
 `;

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -1093,24 +1093,12 @@ exports[`renders ./components/table/demo/fixed-columns.vue correctly 1`] = `
   <div class="ant-spin-nested-loading">
     <!---->
     <div class="ant-spin-container">
-      <div class="ant-table ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right">
+      <div class="ant-table ant-table-fixed-header ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right">
         <!---->
         <div class="ant-table-container">
-          <div style="overflow-x: auto; overflow-y: hidden;" class="ant-table-content">
+          <div style="overflow: hidden;" class="ant-table-header">
-            <table style="width: 1300px; min-width: 100%; table-layout: fixed;">
+            <table style="table-layout: fixed; visibility: hidden;">
-              <colgroup>
+              <colgroup></colgroup>
-                <col style="width: 100px;">
-                <col style="width: 100px;">
-                <col>
-                <col>
-                <col>
-                <col>
-                <col>
-                <col>
-                <col>
-                <col>
-                <col style="width: 100px;">
-              </colgroup>
               <thead class="ant-table-thead">
                 <tr>
                   <th class="ant-table-cell ant-table-cell-fix-left" style="position: sticky; left: 0px;" colstart="0" colend="0">
@@ -1148,6 +1136,24 @@ exports[`renders ./components/table/demo/fixed-columns.vue correctly 1`] = `
                   </th>
                 </tr>
               </thead>
+              <!---->
+            </table>
+          </div>
+          <div style="overflow-x: auto; overflow-y: scroll; max-height: 1000px;" class="ant-table-body">
+            <table style="width: 1300px; min-width: 100%; table-layout: fixed;">
+              <colgroup>
+                <col style="width: 100px;">
+                <col style="width: 100px;">
+                <col>
+                <col>
+                <col>
+                <col>
+                <col>
+                <col>
+                <col>
+                <col>
+                <col style="width: 100px;">
+              </colgroup>
               <tbody class="ant-table-tbody">
                 <tr aria-hidden="true" class="ant-table-measure-row" style="height: 0px; font-size: 0px;">
                   <td style="padding: 0px; border: 0px; height: 0px;">
@@ -1260,6 +1266,8 @@ exports[`renders ./components/table/demo/fixed-columns.vue correctly 1`] = `
               <!---->
             </table>
           </div>
+          <!---->
+          <!---->
         </div>
         <!---->
       </div>
@@ -4365,7 +4373,7 @@ exports[`renders ./components/table/demo/summary.vue correctly 1`] = `
       </div>
     </div>
   </div>
-</div>
+</div><br>
 <div class="ant-table-wrapper">
   <div class="ant-spin-nested-loading">
     <!---->

components/table/__tests__/__snapshots__/empty.test.js.snap

@@ -43,8 +43,7 @@ exports[`Table renders empty table 1`] = `
                 <!---->
                 <tr class="ant-table-placeholder">
                   <td colspan="8" class="ant-table-cell">
-                    <!---->
+                    <!---->No data
-                    <!---->
                   </td>
                 </tr>
               </tbody>
@@ -102,8 +101,7 @@ exports[`Table renders empty table with custom emptyText 1`] = `
                 <!---->
                 <tr class="ant-table-placeholder">
                   <td colspan="8" class="ant-table-cell">
-                    <!---->
+                    <!---->custom empty text
-                    <!---->
                   </td>
                 </tr>
               </tbody>
@@ -182,8 +180,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
                 <!---->
                 <tr class="ant-table-placeholder">
                   <td colspan="11" class="ant-table-cell">
-                    <!---->
+                    <!---->No data
-                    <!---->
                   </td>
                 </tr>
               </tbody>
@@ -245,8 +242,7 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
                 <!---->
                 <tr class="ant-table-placeholder">
                   <td colspan="8" class="ant-table-cell">
-                    <!---->
+                    <!---->No data
-                    <!---->
                   </td>
                 </tr>
               </tbody>

components/transfer/__tests__/__snapshots__/demo.test.js.snap

@@ -421,340 +421,327 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
             <div class="ant-spin-nested-loading">
               <!---->
               <div class="ant-spin-container">
-                <div class="ant-table ant-table-small ant-table-scroll-position-left">
+                <div class="ant-table ant-table-small">
                   <!---->
-                  <div class="ant-table-content">
+                  <div class="ant-table-container">
-                    <!---->
+                    <div class="ant-table-content">
-                    <div class="ant-table-body">
+                      <table style="table-layout: auto;">
-                      <table class="">
                         <colgroup>
-                          <col data-key="selection-column" class="ant-table-selection-col">
+                          <col class="ant-table-selection-col">
-                          <col data-key="title">
-                          <col data-key="description">
                         </colgroup>
                         <thead class="ant-table-thead">
                           <tr>
-                            <th colstart="0" colspan="1" colend="0" rowspan="1" class="ant-table-selection-column"><span class="ant-table-header-column"><div><span class="ant-table-column-title"><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                            <th class="ant-table-cell ant-table-selection-column" colstart="0" colend="0">
-                              <!----></label>
                               <!---->
-                    </div></span><span class="ant-table-column-sorter"><!----></span>
+                              <div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                  </div></span>
+                                  <!---->
-                  <!---->
+                                </label>
-                  </th>
+                                <!---->
-                  <th colstart="1" colspan="1" colend="1" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
+                              </div>
-                </div></span>
+                            </th>
-                <!---->
+                            <th class="ant-table-cell" colstart="1" colend="1">
-                </th>
+                              <!---->Name
-                <th colstart="2" colspan="1" colend="2" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Description</span><span class="ant-table-column-sorter"><!----></span>
+                            </th>
-              </div></span>
+                            <th class="ant-table-cell" colstart="2" colend="2">
-              <!---->
+                              <!---->Description
-              </th>
+                            </th>
-              </tr>
+                          </tr>
-              </thead>
+                        </thead>
-              <tbody class="ant-table-tbody">
+                        <tbody class="ant-table-tbody">
-                <tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
-                  <td class="ant-table-selection-column">
-                    <!---->
-                    <!----><span><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                    <!----></label></span>
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->content1
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->description of content1
-                  </td>
-                </tr>
-                <tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
-                  <td class="ant-table-selection-column">
-                    <!---->
-                    <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                    <!----></label></span>
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->content2
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->description of content2
-                  </td>
-                </tr>
-                <tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
-                  <td class="ant-table-selection-column">
-                    <!---->
-                    <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                    <!----></label></span>
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->content4
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->description of content4
-                  </td>
-                </tr>
-                <tr class="ant-table-row ant-table-row-level-0" data-row-key="4">
-                  <td class="ant-table-selection-column">
-                    <!---->
-                    <!----><span><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                    <!----></label></span>
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->content5
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->description of content5
-                  </td>
-                </tr>
-                <tr class="ant-table-row ant-table-row-level-0" data-row-key="6">
-                  <td class="ant-table-selection-column">
-                    <!---->
-                    <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                    <!----></label></span>
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->content7
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->description of content7
-                  </td>
-                </tr>
-                <tr class="ant-table-row ant-table-row-level-0" data-row-key="7">
-                  <td class="ant-table-selection-column">
-                    <!---->
-                    <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                    <!----></label></span>
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->content8
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->description of content8
-                  </td>
-                </tr>
-                <tr class="ant-table-row ant-table-row-level-0" data-row-key="9">
-                  <td class="ant-table-selection-column">
-                    <!---->
-                    <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                    <!----></label></span>
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->content10
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->description of content10
-                  </td>
-                </tr>
-                <tr class="ant-table-row ant-table-row-level-0" data-row-key="10">
-                  <td class="ant-table-selection-column">
-                    <!---->
-                    <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                    <!----></label></span>
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->content11
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->description of content11
-                  </td>
-                </tr>
-                <tr class="ant-table-row ant-table-row-level-0" data-row-key="12">
-                  <td class="ant-table-selection-column">
-                    <!---->
-                    <!----><span><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                    <!----></label></span>
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->content13
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->description of content13
-                  </td>
-                </tr>
-                <tr class="ant-table-row ant-table-row-level-0" data-row-key="13">
-                  <td class="ant-table-selection-column">
-                    <!---->
-                    <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                    <!----></label></span>
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->content14
-                  </td>
-                  <td class="">
-                    <!---->
-                    <!---->description of content14
-                  </td>
-                </tr>
-              </tbody>
-              </table>
-            </div>
-            <!---->
-            <!---->
-          </div>
-        </div>
-        <ul unselectable="on" class="ant-pagination mini ant-table-pagination">
-          <!---->
-          <li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
-          <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
-          <li title="2" tabindex="0" class="ant-pagination-item ant-pagination-item-2"><a rel="nofollow">2</a></li>
-          <li title="Next Page" tabindex="0" class="ant-pagination-next" aria-disabled="false"><button class="ant-pagination-item-link" type="button" tabindex="-1"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
-          <!---->
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>
-</div>
-<!---->
-</div>
-<div class="ant-transfer-operation"><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></div>
-<div class="ant-transfer-list">
-  <div class="ant-transfer-list-header">
-    <!---->
-    <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>6 items</span><span class="ant-transfer-list-header-title"></span></span>
-  </div>
-  <div class="ant-transfer-list-body">
-    <!---->
-    <div class="ant-transfer-list-body-customize-wrapper">
-      <div class="ant-table-wrapper">
-        <div class="ant-spin-nested-loading">
-          <!---->
-          <div class="ant-spin-container">
-            <div class="ant-table ant-table-small ant-table-scroll-position-left">
-              <!---->
-              <div class="ant-table-content">
-                <!---->
-                <div class="ant-table-body">
-                  <table class="">
-                    <colgroup>
-                      <col data-key="selection-column" class="ant-table-selection-col">
-                      <col data-key="title">
-                    </colgroup>
-                    <thead class="ant-table-thead">
-                      <tr>
-                        <th colstart="0" colspan="1" colend="0" rowspan="1" class="ant-table-selection-column"><span class="ant-table-header-column"><div><span class="ant-table-column-title"><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                          <!----></label>
                           <!---->
-                </div></span><span class="ant-table-column-sorter"><!----></span>
+                          <tr data-row-key="0" class="ant-table-row ant-table-row-level-0">
-              </div></span>
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
-              <!---->
+                              <!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-              </th>
+                                <!---->
-              <th colstart="1" colspan="1" colend="1" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
+                              </label>
-            </div></span>
+                            </td>
-            <!---->
+                            <td class="ant-table-cell ant-table-cell-with-append">
-            </th>
+                              <!---->content1
-            </tr>
+                            </td>
-            </thead>
+                            <td class="ant-table-cell ant-table-cell-with-append">
-            <tbody class="ant-table-tbody">
+                              <!---->description of content1
-              <tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
+                            </td>
-                <td class="ant-table-selection-column">
+                          </tr>
+                          <!---->
+                          <tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content2
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->description of content2
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="3" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content4
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->description of content4
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="4" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content5
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->description of content5
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="6" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content7
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->description of content7
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="7" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content8
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->description of content8
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="9" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content10
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->description of content10
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="10" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content11
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->description of content11
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="12" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content13
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->description of content13
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="13" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content14
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->description of content14
+                            </td>
+                          </tr>
+                          <!---->
+                        </tbody>
+                        <!---->
+                      </table>
+                    </div>
+                  </div>
                   <!---->
-                  <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                </div>
-                  <!----></label></span>
+                <ul unselectable="on" class="ant-pagination mini ant-table-pagination ant-table-pagination-right">
-                </td>
-                <td class="">
                   <!---->
-                  <!---->content3
+                  <li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
-                </td>
+                  <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
-              </tr>
+                  <li title="2" tabindex="0" class="ant-pagination-item ant-pagination-item-2"><a rel="nofollow">2</a></li>
-              <tr class="ant-table-row ant-table-row-level-0" data-row-key="5">
+                  <li title="Next Page" tabindex="0" class="ant-pagination-next" aria-disabled="false"><button class="ant-pagination-item-link" type="button" tabindex="-1"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
-                <td class="ant-table-selection-column">
                   <!---->
-                  <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                </ul>
-                  <!----></label></span>
+              </div>
-                </td>
+            </div>
-                <td class="">
-                  <!---->
-                  <!---->content6
-                </td>
-              </tr>
-              <tr class="ant-table-row ant-table-row-level-0" data-row-key="8">
-                <td class="ant-table-selection-column">
-                  <!---->
-                  <!----><span><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                  <!----></label></span>
-                </td>
-                <td class="">
-                  <!---->
-                  <!---->content9
-                </td>
-              </tr>
-              <tr class="ant-table-row ant-table-row-level-0" data-row-key="11">
-                <td class="ant-table-selection-column">
-                  <!---->
-                  <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                  <!----></label></span>
-                </td>
-                <td class="">
-                  <!---->
-                  <!---->content12
-                </td>
-              </tr>
-              <tr class="ant-table-row ant-table-row-level-0" data-row-key="14">
-                <td class="ant-table-selection-column">
-                  <!---->
-                  <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                  <!----></label></span>
-                </td>
-                <td class="">
-                  <!---->
-                  <!---->content15
-                </td>
-              </tr>
-              <tr class="ant-table-row ant-table-row-level-0" data-row-key="17">
-                <td class="ant-table-selection-column">
-                  <!---->
-                  <!----><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
-                  <!----></label></span>
-                </td>
-                <td class="">
-                  <!---->
-                  <!---->content18
-                </td>
-              </tr>
-            </tbody>
-            </table>
           </div>
-          <!---->
-          <!---->
         </div>
       </div>
-      <ul unselectable="on" class="ant-pagination mini ant-table-pagination">
+      <!---->
-        <!---->
-        <li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
-        <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
-        <li title="Next Page" class="ant-pagination-next ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
-        <!---->
-      </ul>
     </div>
-  </div>
+    <div class="ant-transfer-operation"><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></div>
+    <div class="ant-transfer-list">
+      <div class="ant-transfer-list-header">
+        <!---->
+        <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>6 items</span><span class="ant-transfer-list-header-title"></span></span>
+      </div>
+      <div class="ant-transfer-list-body">
+        <!---->
+        <div class="ant-transfer-list-body-customize-wrapper">
+          <div class="ant-table-wrapper">
+            <div class="ant-spin-nested-loading">
+              <!---->
+              <div class="ant-spin-container">
+                <div class="ant-table ant-table-small">
+                  <!---->
+                  <div class="ant-table-container">
+                    <div class="ant-table-content">
+                      <table style="table-layout: auto;">
+                        <colgroup>
+                          <col class="ant-table-selection-col">
+                        </colgroup>
+                        <thead class="ant-table-thead">
+                          <tr>
+                            <th class="ant-table-cell ant-table-selection-column" colstart="0" colend="0">
+                              <!---->
+                              <div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                  <!---->
+                                </label>
+                                <!---->
+                              </div>
+                            </th>
+                            <th class="ant-table-cell" colstart="1" colend="1">
+                              <!---->Name
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody class="ant-table-tbody">
+                          <!---->
+                          <tr data-row-key="2" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content3
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="5" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content6
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="8" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content9
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="11" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content12
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="14" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content15
+                            </td>
+                          </tr>
+                          <!---->
+                          <tr data-row-key="17" class="ant-table-row ant-table-row-level-0">
+                            <td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column">
+                              <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+                                <!---->
+                              </label>
+                            </td>
+                            <td class="ant-table-cell ant-table-cell-with-append">
+                              <!---->content18
+                            </td>
+                          </tr>
+                          <!---->
+                        </tbody>
+                        <!---->
+                      </table>
+                    </div>
+                  </div>
+                  <!---->
+                </div>
+                <ul unselectable="on" class="ant-pagination mini ant-table-pagination ant-table-pagination-right">
+                  <!---->
+                  <li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
+                  <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
+                  <li title="Next Page" class="ant-pagination-next ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
+                  <!---->
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!---->
+    </div>
+  </div><button style="margin-top: 16px;" type="button" role="switch" aria-checked="false" class="ant-switch">
+    <!----><span class="ant-switch-inner">disabled</span>
+  </button><button style="margin-top: 16px;" type="button" role="switch" aria-checked="false" class="ant-switch">
+    <!----><span class="ant-switch-inner">showSearch</span>
+  </button>
 </div>
-</div>
-</div>
-<!---->
-</div>
-</div><button style="margin-top: 16px;" type="button" role="switch" aria-checked="false" class="ant-switch">
-  <!----><span class="ant-switch-inner">disabled</span>
-</button><button style="margin-top: 16px;" type="button" role="switch" aria-checked="false" class="ant-switch">
-  <!----><span class="ant-switch-inner">showSearch</span>
-</button></div>
 `;
 
 exports[`renders ./components/transfer/demo/tree-transfer.vue correctly 1`] = `

components/vc-table/Table.tsx

@@ -562,7 +562,7 @@ export default defineComponent<TableProps>({
         getRowKey={getRowKey.value}
         customRow={props.customRow}
         childrenColumnName={mergedChildrenColumnName.value}
-        v-slots={{ emptyText: emptyNode }}
+        v-slots={{ emptyNode }}
       />
     );
 

tests/__snapshots__/index.test.js.snap

@@ -106,6 +106,9 @@ Array [
   "Table",
   "TableColumn",
   "TableColumnGroup",
+  "TableSummary",
+  "TableSummaryRow",
+  "TableSummaryCell",
   "Transfer",
   "Tree",
   "TreeNode",