add typescript table row genericity

ElemeFE · Jul 27, 2020 · d6eeaab · d6eeaab
1 parent c3100c3
commit d6eeaab
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 40 deletions.
diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -603,7 +603,7 @@ declare namespace ElementReact {
   export class Slider extends ElementReactLibs.Component<SliderProps, {}> { }
 
   // Table
-  interface TableColumn {
+  interface TableColumn<RowType> {
     label?: string
     prop?: string
     property?: string
@@ -619,11 +619,11 @@ declare namespace ElementReact {
     fixed?: boolean | string
     filterMethod?: () => void
     filters?: Object[]
-    render?: (data? :Object, column? :Object, index? :number) => void
+    render?: (data? :RowType, column? :Object, index? :number) => void
   }
-  interface TableProps extends ElementReactLibs.ComponentProps<{}> {
-    columns?: TableColumn[]
-    data?: Object[]
+  interface TableProps<RowType> extends ElementReactLibs.ComponentProps<{}> {
+    columns?: TableColumn<RowType>[]
+    data?: RowType[]
     height?: number
     stripe?: boolean
     border?: boolean
@@ -635,7 +635,7 @@ declare namespace ElementReact {
     onSelectAll?(): void
     onSelectChange?(): void
   }
-  export class Table extends ElementReactLibs.Component<TableProps, {}> { }
+  export class Table<RowType> extends ElementReactLibs.Component<TableProps<RowType>, {}> { }
 
   // Switch
   interface SwitchProps extends ElementReactLibs.ComponentProps<{}> {

diff --git a/typings/typing-tests/Table.tsx b/typings/typing-tests/Table.tsx
@@ -2,13 +2,56 @@ import * as React from 'react'
 import { Table } from 'element-react'
 import { Table as TableNext } from 'element-react/next'
 
+interface TestTableRow {
+  date: string;
+  name: string;
+  address: string;
+}
+
+const testData: TestTableRow[] = [{
+  date: '2016-05-02',
+  name: '王小虎',
+  address: '上海市普陀区金沙江路 1518 弄'
+}, {
+  date: '2016-05-04',
+  name: '王小虎',
+  address: '上海市普陀区金沙江路 1517 弄'
+}, {
+  date: '2016-05-01',
+  name: '王小虎',
+  address: '上海市普陀区金沙江路 1519 弄'
+}, {
+  date: '2016-05-03',
+  name: '王小虎',
+  address: '上海市普陀区金沙江路 1516 弄'
+}, {
+  date: '2016-05-02',
+  name: '王小虎',
+  address: '上海市普陀区金沙江路 1518 弄'
+}, {
+  date: '2016-05-04',
+  name: '王小虎',
+  address: '上海市普陀区金沙江路 1517 弄'
+}, {
+  date: '2016-05-01',
+  name: '王小虎',
+  address: '上海市普陀区金沙江路 1519 弄'
+}, {
+  date: '2016-05-03',
+  name: '王小虎',
+  address: '上海市普陀区金沙江路 1516 弄'
+}]
+
 class Component extends React.Component<{}, {}> {
   state = {
     columns: [
       {
         label: "日期",
         prop: "date",
-        width: 180
+        width: 180,
+        render: function (data: TestTableRow, columns, index) {
+          return data.date;
+        }
       },
       {
         label: "姓名",
@@ -20,39 +63,7 @@ class Component extends React.Component<{}, {}> {
         prop: "address"
       }
     ],
-    data: [{
-      date: '2016-05-02',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-04',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1517 弄'
-    }, {
-      date: '2016-05-01',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1519 弄'
-    }, {
-      date: '2016-05-03',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1516 弄'
-    }, {
-      date: '2016-05-02',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-04',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1517 弄'
-    }, {
-      date: '2016-05-01',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1519 弄'
-    }, {
-      date: '2016-05-03',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1516 弄'
-    }]
+    data: testData
   }
   render() {
     const { columns, data } = this.state