feat(comp:table): redesign TableColumn and support children in templa…

…te (#708) BREAKING CHANGE: `customRender`, `customTtile`, `customIcon` and `customExpand` have been deprecated, please use `slots` instead
IDuxFE · Jan 7, 2022 · 356faaf · 356faaf
1 parent 526c71e
commit 356faaf
Show file tree

Hide file tree

Showing 37 changed files with 529 additions and 516 deletions.
diff --git a/packages/components/table/demo/Basic.vue b/packages/components/table/demo/Basic.vue
@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import { h } from 'vue'
 
-import { TableColumn, TableColumnRenderOption } from '@idux/components/table'
+import { TableColumn } from '@idux/components/table'
 import { IxTag } from '@idux/components/tag'
 
 interface Data {
@@ -28,7 +28,7 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
+    slots: { cell: 'name' },
   },
   {
     title: 'Age',
@@ -41,19 +41,21 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Tags',
     dataKey: 'tags',
-    customRender: ({ value }: TableColumnRenderOption<Data['tags'], Data>) =>
-      value.map(tag => {
-        let color = tag.length > 5 ? 'warning' : 'success'
-        if (tag === 'loser') {
-          color = 'error'
-        }
-        return h(IxTag, { color }, { default: () => tag.toUpperCase() })
-      }),
+    slots: {
+      cell: ({ value }) =>
+        value.map((tag: string) => {
+          let color = tag.length > 5 ? 'warning' : 'success'
+          if (tag === 'loser') {
+            color = 'error'
+          }
+          return h(IxTag, { color }, { default: () => tag.toUpperCase() })
+        }),
+    },
   },
   {
     title: 'Action',
     key: 'action',
-    customRender: 'action',
+    slots: { cell: 'action' },
   },
 ]
 

diff --git a/packages/components/table/demo/ColSpanRowSpan.vue b/packages/components/table/demo/ColSpanRowSpan.vue
@@ -24,8 +24,8 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
     colSpan: record => (record.name === 'Jake White' ? 5 : 1),
+    slots: { cell: 'name' },
   },
   {
     title: 'Age',

diff --git a/packages/components/table/demo/Expandable.vue b/packages/components/table/demo/Expandable.vue
@@ -29,12 +29,12 @@ const columns: TableColumn<Data>[] = [
     type: 'expandable',
     disabled: record => !record.description,
     onChange: expendedRowKeys => console.log(expendedRowKeys),
-    customExpand: 'expand',
+    slots: { expand: 'expand' },
   },
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
+    slots: { cell: 'name' },
   },
   {
     title: 'Age',

diff --git a/packages/components/table/demo/Filterable.vue b/packages/components/table/demo/Filterable.vue
@@ -17,13 +17,11 @@ interface Data {
   address: string
 }
 
-type AgeFilter = (age: number) => boolean
-
 const columns: TableColumn<Data>[] = [
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
+    slots: { cell: 'name' },
   },
   {
     title: 'Age',
@@ -46,7 +44,7 @@ const columns: TableColumn<Data>[] = [
         return currentFilterBy.every(filterBy => filterBy(record.age))
       },
     },
-  } as TableColumn<Data, AgeFilter>,
+  },
   {
     title: 'Grade',
     dataKey: 'grade',
@@ -65,11 +63,11 @@ const columns: TableColumn<Data>[] = [
           value: 'New York',
         },
       ],
-      handleFilter(currentFilterBy, record) {
+      filter(currentFilterBy, record) {
         return currentFilterBy.every(filterBy => record.address.includes(filterBy))
       },
     },
-  } as TableColumn<Data, string>,
+  },
 ]
 
 const data: Data[] = [

diff --git a/packages/components/table/demo/FilterableFilterBy.vue b/packages/components/table/demo/FilterableFilterBy.vue
@@ -85,7 +85,7 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
+    slots: { cell: 'name' },
   },
   {
     title: 'Age',

diff --git a/packages/components/table/demo/Fixed.vue b/packages/components/table/demo/Fixed.vue
@@ -23,9 +23,9 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
     width: 100,
     fixed: 'start',
+    slots: { cell: 'name' },
   },
   {
     title: 'Age',
@@ -85,7 +85,7 @@ const columns: TableColumn<Data>[] = [
     key: 'action',
     fixed: 'end',
     width: 100,
-    customRender: 'action',
+    slots: { cell: 'action' },
   },
 ]
 

diff --git a/packages/components/table/demo/HeadGroup.vue b/packages/components/table/demo/HeadGroup.vue
@@ -3,10 +3,6 @@
     <template #name="{ value }">
       <a>{{ value }}</a>
     </template>
-    <template #action="{ record }">
-      <a style="margin-right: 8px">Invite {{ record.name }}</a>
-      <a>Delete</a>
-    </template>
   </IxTable>
 </template>
 
@@ -29,9 +25,9 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
     width: 100,
     fixed: 'start',
+    slots: { cell: 'name' },
   },
   {
     title: 'Other',

diff --git a/packages/components/table/demo/Selectable.vue b/packages/components/table/demo/Selectable.vue
@@ -43,7 +43,7 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
+    slots: { cell: 'name' },
   },
   {
     title: 'Age',

diff --git a/packages/components/table/demo/SelectableOptions.vue b/packages/components/table/demo/SelectableOptions.vue
@@ -9,6 +9,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
+import { VKey } from '@idux/cdk/utils'
 import { TableColumn } from '@idux/components/table'
 
 interface Data {
@@ -18,38 +19,39 @@ interface Data {
   address: string
 }
 
-const selectedRowKeys = ref<(string | number)[]>([])
+const selectedRowKeys = ref<VKey[]>([])
 
 const columns: TableColumn<Data>[] = [
   {
     type: 'selectable',
     disabled: record => record.key % 10 === 9,
-    options: [
+    menus: [
       'all',
       'invert',
       'none',
       'pageInvert',
       {
+        type: 'item',
         key: 'odd',
+
         label: 'Select Odd Row',
-        onClick: currentPageRowKeys => {
-          selectedRowKeys.value = currentPageRowKeys.filter((_, index) => index % 2 === 0)
-        },
       },
       {
+        type: 'item',
         key: 'even',
         label: 'Select Even Row',
-        onClick: currentPageRowKeys => {
-          selectedRowKeys.value = currentPageRowKeys.filter((_, index) => index % 2 !== 0)
-        },
       },
     ],
     onChange: (selectedKeys, selectedRows) => console.log(selectedKeys, selectedRows),
+    onMenuClick: (options, currentPageRowKeys) => {
+      const filterFlag = options.key === 'odd' ? 0 : 1
+      selectedRowKeys.value = currentPageRowKeys.filter((_, index) => index % 2 === filterFlag)
+    },
   },
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
+    slots: { cell: 'name' },
   },
   {
     title: 'Age',

diff --git a/packages/components/table/demo/Server.vue b/packages/components/table/demo/Server.vue
@@ -1,8 +1,5 @@
 <template>
   <IxTable :columns="columns" :dataSource="dataSource" :rowKey="getRowKey" :pagination="pagination" :spin="loading">
-    <template #name="{ value }">
-      <a>{{ value }}</a>
-    </template>
   </IxTable>
 </template>
 

diff --git a/packages/components/table/demo/Sortable.vue b/packages/components/table/demo/Sortable.vue
@@ -21,11 +21,11 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
     sortable: {
       orders: ['descend'],
       sorter: (curr, next) => curr.name.length - next.name.length,
     },
+    slots: { cell: 'name' },
   },
   {
     title: 'Age',

diff --git a/packages/components/table/demo/SortableOrderBy.vue b/packages/components/table/demo/SortableOrderBy.vue
@@ -61,7 +61,7 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
+    slots: { cell: 'name' },
   },
   {
     title: 'Age',

diff --git a/packages/components/table/demo/Tree.vue b/packages/components/table/demo/Tree.vue
@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import { h } from 'vue'
 
-import { TableColumn, TableColumnRenderOption } from '@idux/components/table'
+import { TableColumn } from '@idux/components/table'
 import { IxTag } from '@idux/components/tag'
 
 interface Data {
@@ -35,7 +35,7 @@ const columns: TableColumn<Data>[] = [
     indent: 10,
     title: 'Event Name',
     dataKey: 'eventName',
-    customRender: 'name',
+    slots: { cell: 'name' },
   },
   {
     title: 'Description',
@@ -52,14 +52,17 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Tags',
     dataKey: 'tags',
-    customRender: ({ value }: TableColumnRenderOption<Data['tags'], Data>) =>
-      value.map(tag => {
-        let color = tag.length > 5 ? 'warning' : 'success'
-        if (tag === 'attack' || tag === 'damage') {
-          color = 'error'
-        }
-        return h(IxTag, { color }, { default: () => tag.toUpperCase() })
-      }),
+    slots: {
+      cell: ({ value }) =>
+        value.map((tag: string) => {
+          let color = tag.length > 5 ? 'warning' : 'success'
+          if (tag === 'attack' || tag === 'damage') {
+            color = 'error'
+          }
+          return h(IxTag, { color }, { default: () => tag.toUpperCase() })
+        }),
+    },
+
     filterable: {
       filters: [
         {
@@ -83,7 +86,7 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Action',
     key: 'action',
-    customRender: 'action',
+    slots: { cell: 'action' },
   },
 ]
 

diff --git a/packages/components/table/demo/Virtual.vue b/packages/components/table/demo/Virtual.vue
@@ -20,7 +20,7 @@ const columns: TableColumn<Data>[] = [
   {
     title: 'Name',
     dataKey: 'name',
-    customRender: 'name',
+    slots: { cell: 'name' },
   },
   {
     title: 'Age',