feat(table): modify table functions and style (#672)

* add tree table indent support
* fix tree table sort function
* fix sort orderby(was't controlled previously)
* add filter function for table
* expandable column now extends base column(usual data column)
* modify table style according to new design

packages/components/config/src/defaultConfig.ts

@@ -255,7 +255,7 @@ const table: TableConfig = {
     align: 'start',
     sortable: { nextTooltip: false, orders: ['ascend', 'descend'] },
   },
-  columnExpandable: { icon: ['plus', 'minus'] },
+  columnExpandable: { icon: ['plus-square', 'minus-square'] },
 }
 
 const tooltip: TooltipConfig = {

packages/components/icon/demo/all.ts

@@ -80,6 +80,7 @@ export const allIcons = [
   'file-text',
   'file-zip',
   'file',
+  'filter-filled',
   'filter',
   'folder-add',
   'folder-open',

packages/components/icon/src/definitions.ts

@@ -410,6 +410,11 @@ export const File = {
   svg: '<svg viewBox="64 64 896 896"><path d="M854.6 288.6 639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"/></svg>',
 }
 
+export const FilterFilled = {
+  name: 'filter-filled',
+  svg: '<svg viewBox="64 64 896 896"><path d="M46.976 118.997a14.208 14.208 0 0 1-4.31-10.197V14.336C42.667 6.443 49.28 0 57.345 0h909.312c8.107 0 14.677 6.443 14.677 14.336V108.8c0 3.84-1.536 7.51-4.309 10.197l-347.69 340.054v450.133a14.293 14.293 0 0 1-8.107 12.885l-205.312 100.395a14.933 14.933 0 0 1-14.336-.64 14.293 14.293 0 0 1-6.912-12.288V459.008L46.976 118.955z"/></svg>',
+}
+
 export const Filter = {
   name: 'filter',
   svg: '<svg viewBox="64 64 896 896"><path d="M896 513.92v64H704v-64zm0 128v64H704v-64zm0 128v64H704v-64z"/><path d="M787.2 64H173.056a44.8 44.8 0 0 0-44.8 44.8v139.392l.64 7.552a44.8 44.8 0 0 0 14.272 25.792l175.552 157.12v373.44a44.8 44.8 0 0 0 14.4 32.832L453.312 956.48a44.8 44.8 0 0 0 30.464 11.968H595.2l6.08-.448A44.8 44.8 0 0 0 640 923.648l-.064-484.864 177.024-157.12A44.8 44.8 0 0 0 832 248.128V108.8A44.8 44.8 0 0 0 787.2 64zM768 128v111.424L591.04 396.672l-4.48 4.544A44.8 44.8 0 0 0 576 430.208l-.064 474.176h-84.608L382.72 803.712V430.144l-.64-7.552a44.8 44.8 0 0 0-14.208-25.856l-175.616-157.12V128H768z"/></svg>',

packages/components/icon/src/dependencies.ts

@@ -25,6 +25,7 @@ import {
   Empty,
   ExclamationCircle,
   ExclamationCircleFilled,
+  FilterFilled,
   InfoCircle,
   InfoCircleFilled,
   Left,
@@ -67,6 +68,7 @@ export const IDUX_ICON_DEPENDENCIES: IconDefinition[] = [
   Empty, // Empty
   ExclamationCircle, // Message Result Alert Notification
   ExclamationCircleFilled, // Modal Popconfirm
+  FilterFilled, // Table
   InfoCircle, // Message Result Alert Notification
   InfoCircleFilled, // Modal
   Left, // date-panel

packages/components/style/variable/height.less

@@ -3,5 +3,6 @@
 @height-md: 32px;
 @height-lg: 40px;
 @height-xl: 48px;
+@height-xxl: 64px;
 
 @line-height-base: 1.5715;

packages/components/table/demo/Basic.vue

@@ -43,11 +43,11 @@ const columns: TableColumn<Data>[] = [
     dataKey: 'tags',
     customRender: ({ value }: TableColumnRenderOption<Data['tags'], Data>) =>
       value.map(tag => {
-        let type = tag.length > 5 ? 'warning' : 'success'
+        let color = tag.length > 5 ? 'warning' : 'success'
         if (tag === 'loser') {
-          type = 'error'
+          color = 'error'
         }
-        return h(IxTag, { type }, { default: () => tag.toUpperCase() })
+        return h(IxTag, { color }, { default: () => tag.toUpperCase() })
       }),
   },
   {

packages/components/table/demo/ColSpanRowSpan.md

@@ -2,7 +2,7 @@
 title:
   zh: 行/列合并
   en: Merge row and column
-order: 60
+order: 10
 ---
 
 ## zh

packages/components/table/demo/Expandable.vue

@@ -66,13 +66,13 @@ const data: Data[] = [
     name: 'Joe Black',
     age: 32,
     address: 'Sidney No. 1 Lake Park',
+    description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
   },
   {
     key: 4,
     name: 'Disabled User',
     age: 99,
     address: 'Sidney No. 1 Lake Park',
-    description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
   },
 ]
 </script>

packages/components/table/demo/Filterable.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 可筛选
+  en: Filterable
+order: 52
+---
+
+## zh
+
+通过设置 `filterable` 对某一列数据进行筛选。
+
+## en
+
+Sort a column of data by setting `filterable`.

packages/components/table/demo/Filterable.vue

@@ -0,0 +1,105 @@
+<template>
+  <IxTable :columns="columns" :dataSource="data" :pagination="false">
+    <template #name="{ value }">
+      <a>{{ value }}</a>
+    </template>
+  </IxTable>
+</template>
+
+<script lang="ts" setup>
+import { TableColumn } from '@idux/components/table'
+
+interface Data {
+  key: number
+  name: string
+  age: number
+  grade: number
+  address: string
+}
+
+type AgeFilter = (age: number) => boolean
+
+const columns: TableColumn<Data>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+    customRender: 'name',
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+    sortable: {
+      sorter: (curr, next) => curr.age - next.age,
+    },
+    filterable: {
+      filters: [
+        {
+          text: 'over 19',
+          value: (age: number) => age > 19,
+        },
+        {
+          text: 'below 21',
+          value: (age: number) => age < 21,
+        },
+      ],
+      filter(currentFilterBy, record) {
+        return currentFilterBy.every(filterBy => filterBy(record.age))
+      },
+    },
+  } as TableColumn<Data, AgeFilter>,
+  {
+    title: 'Grade',
+    dataKey: 'grade',
+  },
+  {
+    title: 'Address',
+    dataKey: 'address',
+    filterable: {
+      filters: [
+        {
+          text: 'Sidney',
+          value: 'Sidney',
+        },
+        {
+          text: 'New York',
+          value: 'New York',
+        },
+      ],
+      handleFilter(currentFilterBy, record) {
+        return currentFilterBy.every(filterBy => record.address.includes(filterBy))
+      },
+    },
+  } as TableColumn<Data, string>,
+]
+
+const data: Data[] = [
+  {
+    key: 1,
+    name: 'John Brown',
+    age: 18,
+    grade: 1,
+    address: 'New York No. 1 Lake Park',
+  },
+  {
+    key: 2,
+    name: 'Jim Green',
+    age: 20,
+    grade: 3,
+    address: 'London No. 1 Lake Park',
+  },
+  {
+    key: 3,
+    name: 'Joe Black',
+    age: 19,
+    grade: 2,
+    address: 'Sidney No. 1 Lake Park',
+  },
+  {
+    key: 4,
+    name: 'Disabled User',
+    age: 21,
+    grade: 2,
+    address: 'Sidney No. 1 Lake Park',
+  },
+]
+</script>

packages/components/table/demo/FilterableFilterBy.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 受控的筛选
+  en: Controlled filterable
+order: 53
+---
+
+## zh
+
+如果设置了 `filterable` 的 `filterby`，表格列的筛选将为受控状态。
+
+## en
+
+If `filterby` of `filterable` is set, the filtering of the column will be in a controlled state.

packages/components/table/demo/FilterableFilterBy.vue

@@ -0,0 +1,139 @@
+<template>
+  <IxSpace>
+    <IxButton @Click="filterByAge19">Filter By Age(over 19)</IxButton>
+    <IxButton @Click="filterBySidney">Filter By Address(sidney)</IxButton>
+    <IxButton @Click="clear">Clear</IxButton>
+  </IxSpace>
+  <IxTable :columns="columns" :dataSource="data" :pagination="false">
+    <template #name="{ value }">
+      <a>{{ value }}</a>
+    </template>
+  </IxTable>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+import { TableColumn, TableColumnFilterable } from '@idux/components/table'
+
+interface Data {
+  key: number
+  name: string
+  age: number
+  grade: number
+  address: string
+}
+
+type AgeFilter = (age: number) => boolean
+
+const ageFilterable: TableColumnFilterable<Data, AgeFilter> = reactive({
+  filters: [
+    {
+      text: 'over 19',
+      value: (age: number) => age > 19,
+    },
+    {
+      text: 'below 21',
+      value: (age: number) => age < 21,
+    },
+  ],
+  filter(currentFilterBy, record) {
+    return currentFilterBy.every(filterBy => filterBy(record.age))
+  },
+  filterBy: [],
+  onChange(currentFilterBy) {
+    ageFilterable.filterBy = currentFilterBy
+  },
+})
+
+const addressFilterable: TableColumnFilterable<Data, string> = reactive({
+  filters: [
+    {
+      text: 'Sidney',
+      value: 'Sidney',
+    },
+    {
+      text: 'New York',
+      value: 'New York',
+    },
+  ],
+  filter(currentFilterBy, record) {
+    return currentFilterBy.every(filterBy => record.address.includes(filterBy))
+  },
+  filterBy: [],
+  onChange(currentFilterBy) {
+    addressFilterable.filterBy = currentFilterBy
+  },
+})
+
+const filterByAge19 = () => {
+  ageFilterable.filterBy = [ageFilterable.filters[0].value]
+  addressFilterable.filterBy = []
+}
+
+const filterBySidney = () => {
+  ageFilterable.filterBy = []
+  addressFilterable.filterBy = ['Sidney']
+}
+
+const clear = () => {
+  ageFilterable.filterBy = []
+  addressFilterable.filterBy = []
+}
+
+const columns: TableColumn<Data>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+    customRender: 'name',
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+    sortable: {
+      sorter: (curr, next) => curr.age - next.age,
+    },
+    filterable: ageFilterable,
+  } as TableColumn<Data, AgeFilter>,
+  {
+    title: 'Grade',
+    dataKey: 'grade',
+  },
+  {
+    title: 'Address',
+    dataKey: 'address',
+    filterable: addressFilterable,
+  } as TableColumn<Data, string>,
+]
+
+const data: Data[] = [
+  {
+    key: 1,
+    name: 'John Brown',
+    age: 18,
+    grade: 1,
+    address: 'New York No. 1 Lake Park',
+  },
+  {
+    key: 2,
+    name: 'Jim Green',
+    age: 20,
+    grade: 3,
+    address: 'London No. 1 Lake Park',
+  },
+  {
+    key: 3,
+    name: 'Joe Black',
+    age: 19,
+    grade: 2,
+    address: 'Sidney No. 1 Lake Park',
+  },
+  {
+    key: 4,
+    name: 'Disabled User',
+    age: 21,
+    grade: 2,
+    address: 'Sidney No. 1 Lake Park',
+  },
+]
+</script>

packages/components/table/demo/Tree.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 树表格
+  en: Tree table
+order: 80
+---
+
+## zh
+
+树形表格
+
+## en
+
+Tree table