feat(table): table新增自定义行

src/packages/table/demo.taro.tsx

@@ -16,6 +16,7 @@ import Demo10 from './demos/taro/demo10'
 import Demo11 from './demos/taro/demo11'
 import Demo12 from './demos/taro/demo12'
 import Demo13 from './demos/taro/demo13'
+import Demo14 from './demos/taro/demo14'
 
 const TableDemo = () => {
   const [translated] = useTranslate({
@@ -33,6 +34,7 @@ const TableDemo = () => {
       stickyHeader: '固定表头',
       stickyLeftColumn: '固定左列',
       stickyRightColumn: '固定右列',
+      customRow: '自定义行',
     },
     'en-US': {
       basic: 'Basic usage',
@@ -50,6 +52,7 @@ const TableDemo = () => {
       stickyHeader: 'sticky header',
       stickyLeftColumn: 'sticky left column',
       stickyRightColumn: 'sticky right column',
+      customRow: 'Custom Row',
     },
   })
 
@@ -94,6 +97,8 @@ const TableDemo = () => {
         <Demo12 />
         <h2>{translated.stickyRightColumn}</h2>
         <Demo13 />
+        <h2>{translated.customRow}</h2>
+        <Demo14 />
       </div>
     </>
   )

src/packages/table/demo.tsx

@@ -13,6 +13,7 @@ import Demo10 from './demos/h5/demo10'
 import Demo11 from './demos/h5/demo11'
 import Demo12 from './demos/h5/demo12'
 import Demo13 from './demos/h5/demo13'
+import Demo14 from './demos/h5/demo14'
 
 const TableDemo = () => {
   const [translated] = useTranslate({
@@ -30,6 +31,7 @@ const TableDemo = () => {
       stickyHeader: '固定表头',
       stickyLeftColumn: '固定左列',
       stickyRightColumn: '固定右列',
+      customRow: '自定义行',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -46,6 +48,7 @@ const TableDemo = () => {
       stickyHeader: 'Sticky Header',
       stickyLeftColumn: 'Sticky Left Column',
       stickyRightColumn: 'Sticky Rright Column',
+      customRow: 'Custom Row',
     },
   })
 
@@ -77,6 +80,8 @@ const TableDemo = () => {
       <Demo12 />
       <h2>{translated.stickyRightColumn}</h2>
       <Demo13 />
+      <h2>{translated.customRow}</h2>
+      <Demo14 />
     </div>
   )
 }

src/packages/table/demos/h5/demo14.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import { Table, TableColumnProps } from '@nutui/nutui-react'
+
+const Demo14 = () => {
+  const [columns] = useState<Array<TableColumnProps>>([
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '性别',
+      key: 'gender',
+    },
+    {
+      title: '学历',
+      key: 'record',
+    },
+  ])
+
+  const [data] = useState([
+    {
+      name: 'Tom',
+      gender: '男',
+      record: '小学',
+    },
+    {
+      height: '50px',
+      text: '这里是自定义行',
+      Component: (props: any) => {
+        return (
+          <div style={{ height: props.height }}>
+            <div
+              style={{
+                position: 'absolute',
+                height: props.height,
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderBottom:
+                  '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))',
+              }}
+            >
+              {props.text}
+            </div>
+          </div>
+        )
+      },
+      rowRender: (item: any) => {
+        const { Component, ...rest } = item
+        return <Component {...rest} />
+      },
+    },
+    {
+      name: 'Lucy',
+      gender: '女',
+      record: '本科',
+    },
+    {
+      name: 'Jack',
+      gender: '男',
+      record: '高中',
+    },
+  ])
+
+  return <Table columns={columns} data={data} />
+}
+export default Demo14

src/packages/table/demos/taro/demo14.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import { Table, TableColumnProps } from '@nutui/nutui-react-taro'
+
+const Demo14 = () => {
+  const [columns] = useState<Array<TableColumnProps>>([
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '性别',
+      key: 'gender',
+    },
+    {
+      title: '学历',
+      key: 'record',
+    },
+  ])
+
+  const [data] = useState([
+    {
+      name: 'Tom',
+      gender: '男',
+      record: '小学',
+    },
+    {
+      height: '50px',
+      text: '这里是自定义行',
+      Component: (props: any) => {
+        return (
+          <div style={{ height: props.height }}>
+            <div
+              style={{
+                position: 'absolute',
+                height: props.height,
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderBottom:
+                  '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))',
+              }}
+            >
+              {props.text}
+            </div>
+          </div>
+        )
+      },
+      rowRender: (item: any) => {
+        const { Component, ...rest } = item
+        return <Component {...rest} />
+      },
+    },
+    {
+      name: 'Lucy',
+      gender: '女',
+      record: '本科',
+    },
+    {
+      name: 'Jack',
+      gender: '男',
+      record: '高中',
+    },
+  ])
+
+  return <Table columns={columns} data={data} />
+}
+export default Demo14

src/packages/table/index.taro.ts

@@ -1,4 +1,5 @@
 import { Table } from './table.taro'
 
 export type { TableProps } from './table.taro'
+export type { TableColumnProps } from './types'
 export default Table

src/packages/table/index.ts

@@ -1,4 +1,5 @@
 import { Table } from './table'
 
 export type { TableProps } from './table'
+export type { TableColumnProps } from './types'
 export default Table

src/packages/table/table.taro.tsx

@@ -125,6 +125,10 @@ export const Table: FunctionComponent<
   }
 
   const renderBodyTds = (item: any, rowIndex: number) => {
+    const { rowRender } = item
+    if (rowRender && typeof rowRender === 'function') {
+      return rowRender(item, rowIndex)
+    }
     return sortDataItem().map(([value, render]) => {
       return (
         <div

src/packages/table/table.tsx

@@ -122,6 +122,10 @@ export const Table: FunctionComponent<
   }
 
   const renderBodyTds = (item: any, rowIndex: number) => {
+    const { rowRender } = item
+    if (rowRender && typeof rowRender === 'function') {
+      return rowRender(item, rowIndex)
+    }
     return sortDataItem().map(([value, render]) => {
       return (
         <div