feat: add resize table column

Author: tangjinzhou

components/table/Table.tsx

@@ -43,7 +43,7 @@ import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
 import classNames from '../_util/classNames';
 import omit from '../_util/omit';
 import { initDefaultProps } from '../_util/props-util';
-import { useProvideSlots } from './context';
+import { useProvideSlots, useProvideTableContext } from './context';
 import type { ContextSlots } from './context';
 import useColumns from './hooks/useColumns';
 import { convertChildrenToColumns } from './util';
@@ -195,7 +195,10 @@ export const tableProps = () => {
       >,
       default: undefined,
     },
-
+    onResizeColumn: {
+      type: Function as PropType<(w: number, col: ColumnsType) => void>,
+      default: undefined,
+    },
     rowSelection: { type: Object as PropType<TableRowSelection>, default: undefined },
     getPopupContainer: { type: Function as PropType<GetPopupContainer>, default: undefined },
     scroll: {
@@ -243,15 +246,19 @@ const InteralTable = defineComponent<
     'customFilterIcon',
     'customFilterDropdown',
   ],
-  setup(props, { attrs, slots, expose }) {
+  setup(props, { attrs, slots, expose, emit }) {
     devWarning(
       !(typeof props.rowKey === 'function' && props.rowKey.length > 1),
       'Table',
       '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
     );
 
     useProvideSlots(computed(() => props.contextSlots));
-
+    useProvideTableContext({
+      onResizeColumn: (w, col) => {
+        emit('resizeColumn', w, col);
+      },
+    });
     const screens = useBreakpoint();
 
     const mergedColumns = computed(() => {

components/table/context.ts

@@ -1,5 +1,6 @@
 import type { ComputedRef, InjectionKey } from 'vue';
 import { computed, inject, provide } from 'vue';
+import type { ColumnType } from './interface';
 
 export type ContextSlots = {
   emptyText?: (...args: any[]) => any;
@@ -15,14 +16,28 @@ export type ContextSlots = {
   [key: string]: ((...args: any[]) => any) | undefined;
 };
 
-export type ContextProps = ComputedRef<ContextSlots>;
+type SlotsContextProps = ComputedRef<ContextSlots>;
 
-export const ContextKey: InjectionKey<ContextProps> = Symbol('ContextProps');
+const SlotsContextKey: InjectionKey<SlotsContextProps> = Symbol('SlotsContextProps');
 
-export const useProvideSlots = (props: ContextProps) => {
-  provide(ContextKey, props);
+export const useProvideSlots = (props: SlotsContextProps) => {
+  provide(SlotsContextKey, props);
 };
 
 export const useInjectSlots = () => {
-  return inject(ContextKey, computed(() => ({})) as ContextProps);
+  return inject(SlotsContextKey, computed(() => ({})) as SlotsContextProps);
+};
+
+type ContextProps = {
+  onResizeColumn: (w: number, column: ColumnType<any>) => void;
+};
+
+const ContextKey: InjectionKey<ContextProps> = Symbol('ContextProps');
+
+export const useProvideTableContext = (props: ContextProps) => {
+  provide(ContextKey, props);
+};
+
+export const useInjectTableContext = () => {
+  return inject(ContextKey, { onResizeColumn: () => {} } as ContextProps);
 };

components/table/demo/index.vue

@@ -22,6 +22,7 @@
     <RowSelectionCustom />
     <RowSelection />
     <Sticky />
+    <ResizableColumn />
     <Size />
     <Stripe />
     <Summary />
@@ -57,6 +58,7 @@ import Stripe from './stripe.vue';
 import MultipleSorter from './multiple-sorter.vue';
 import Summary from './summary.vue';
 import Sticky from './sticky.vue';
+import ResizableColumn from './resizable-column.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from '@vue/runtime-core';
@@ -91,6 +93,7 @@ export default defineComponent({
     MultipleSorter,
     Summary,
     Sticky,
+    ResizableColumn,
   },
 });
 </script>

components/table/demo/resizable-column.vue

@@ -0,0 +1,138 @@
+<docs>
+---
+order: 0
+title:
+  en-US: Resizable column
+  zh-CN: 可伸缩列
+---
+
+## zh-CN
+
+设置 resizable 开启拖动列
+
+鼠标 hover 到 Name、 Age 分割线上体验一下吧
+
+## en-US
+
+set resizable for drag column
+</docs>
+
+<template>
+  <a-table :columns="columns" :data-source="data" @resizeColumn="handleResizeColumn">
+    <template #headerCell="{ column }">
+      <template v-if="column.key === 'name'">
+        <span>
+          <smile-outlined />
+          Name
+        </span>
+      </template>
+    </template>
+
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'name'">
+        <a>
+          {{ record.name }}
+        </a>
+      </template>
+      <template v-else-if="column.key === 'tags'">
+        <span>
+          <a-tag
+            v-for="tag in record.tags"
+            :key="tag"
+            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
+          >
+            {{ tag.toUpperCase() }}
+          </a-tag>
+        </span>
+      </template>
+      <template v-else-if="column.key === 'action'">
+        <span>
+          <a>Invite 一 {{ record.name }}</a>
+          <a-divider type="vertical" />
+          <a>Delete</a>
+          <a-divider type="vertical" />
+          <a class="ant-dropdown-link">
+            More actions
+            <down-outlined />
+          </a>
+        </span>
+      </template>
+    </template>
+  </a-table>
+</template>
+<script lang="ts">
+import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
+import { defineComponent, ref } from 'vue';
+
+const data = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+    tags: ['nice', 'developer'],
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+];
+
+export default defineComponent({
+  components: {
+    SmileOutlined,
+    DownOutlined,
+  },
+  setup() {
+    const columns = ref([
+      {
+        name: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+        resizable: true,
+        width: 150,
+      },
+      {
+        title: 'Age',
+        dataIndex: 'age',
+        key: 'age',
+        resizable: true,
+        width: 100,
+        minWidth: 100,
+        maxWidth: 200,
+      },
+      {
+        title: 'Address',
+        dataIndex: 'address',
+        key: 'address',
+      },
+      {
+        title: 'Tags',
+        key: 'tags',
+        dataIndex: 'tags',
+      },
+      {
+        title: 'Action',
+        key: 'action',
+      },
+    ]);
+    return {
+      data,
+      columns,
+      handleResizeColumn: (w, col) => {
+        col.width = w;
+      },
+    };
+  },
+});
+</script>

components/table/style/index.less

@@ -2,6 +2,7 @@
 @import '../../style/mixins/index';
 @import './size';
 @import './bordered';
+@import './resize.less';
 
 @table-prefix-cls: ~'@{ant-prefix}-table';
 @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';

components/table/style/resize.less

@@ -0,0 +1,28 @@
+.@{table-prefix-cls}-resize-handle {
+  position: absolute;
+  top: 0;
+  height: 100% !important;
+  bottom: 0;
+  left: auto !important;
+  right: -8px;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: auto;
+  width: 16px;
+  z-index: 1;
+  &-line {
+    display: block;
+    width: 3px;
+    margin-left: 7px;
+    height: 100% !important;
+    background-color: @primary-color;
+    opacity: 0;
+  }
+  &:hover &-line {
+    opacity: 1;
+  }
+}
+
+.dragging .@{table-prefix-cls}-resize-handle-line {
+  opacity: 1;
+}

components/vc-table/Cell/index.tsx

@@ -273,6 +273,7 @@ export default defineComponent<CellProps>({
         <Component {...componentProps}>
           {appendNode}
           {childNode}
+          {slots.dragHandle?.()}
         </Component>
       );
     };