feat(table): add footerRender api (#2638)

.changeset/friendly-phones-return.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Table feat: add footerRender api

.changeset/smooth-ways-smash.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": minor
+---
+
+feat: add footerRender api

packages/ui/table/src/BaseTable.tsx

@@ -187,6 +187,7 @@ export const BaseTable = forwardRef<HTMLDivElement | null, BaseTableProps>(
       canScroll,
       bodyTableRef,
       scrollWidth,
+      footerRender,
     } = providedValue
 
     const hasBorder = borderedProp ?? bordered
@@ -266,7 +267,7 @@ export const BaseTable = forwardRef<HTMLDivElement | null, BaseTableProps>(
             : undefined
         }
       >
-        {extraFooter}
+        {isFunction(footerRender) ? footerRender(<>{extraFooter}</>) : extraFooter}
       </div>
     )
 

packages/ui/table/src/use-table.ts

@@ -75,6 +75,7 @@ export const useTable = ({
   showColMenu,
   rowSelection,
   cellRender,
+  footerRender,
   fieldKey = 'key',
   virtual,
   ...rootProps
@@ -633,6 +634,7 @@ export const useTable = ({
     onColumnResizable,
     isTree: isTreeView,
     cellRender,
+    footerRender,
     showColMenu,
     onLoadChildren,
   }
@@ -805,6 +807,10 @@ export interface UseTableProps {
    * 点击异步加载子项
    */
   onLoadChildren?: (item: TableRowEventData) => Promise<any[] | void> | void
+  /**
+   * 自定义渲染页脚
+   */
+  footerRender?: (...nodes: React.ReactElement[]) => React.ReactNode
 }
 
 export type UseTableReturn = ReturnType<typeof useTable>

packages/ui/table/stories/footer-render.stories.tsx

@@ -0,0 +1,181 @@
+import React from 'react'
+import Table from '../src'
+
+/**
+ * @title 自定义页脚
+ */
+export const FooterRender = () => {
+  const [columns] = React.useState([
+    {
+      title: '商品名',
+      dataKey: 'name',
+    },
+    {
+      title: '品类',
+      dataKey: 'type',
+    },
+    {
+      title: '规格',
+      dataKey: 'size',
+    },
+    {
+      title: '单价',
+      dataKey: 'price',
+    },
+    {
+      title: '门店',
+      dataKey: 'address',
+    },
+    {
+      title: '库存',
+      dataKey: 'stock',
+    },
+  ])
+
+  const [dataSource] = React.useState([
+    {
+      name: '小米9',
+      type: '手机',
+      size: '6G+64G 幻彩蓝',
+      price: '3299.00',
+      address: '华润五彩城店',
+      stock: '29,000',
+      key: 1,
+    },
+    {
+      name: '小米9 SE',
+      type: '手机',
+      size: '6G+64G 幻彩蓝',
+      price: '1999.00',
+      address: '清河店',
+      stock: '10,000',
+      key: 2,
+    },
+    {
+      name: '小米8',
+      type: '手机',
+      size: '6G+64G 幻彩蓝',
+      price: '2599.00',
+      address: '双安店',
+      stock: '12,000',
+      key: 3,
+    },
+    {
+      name: 'Redmi Note7',
+      type: '手机',
+      size: '6G+64G 幻彩蓝',
+      price: '999.00',
+      address: '华润五彩城店',
+      stock: '140,000',
+      key: 4,
+    },
+    {
+      name: '小米8 SE',
+      type: '手机',
+      size: '6G+64G 幻彩蓝',
+      price: '699.00',
+      address: '双安店',
+      stock: '12,000',
+      key: 5,
+    },
+    {
+      name: '小米10',
+      type: '手机',
+      size: '6G+64G 幻彩蓝',
+      price: '3299.00',
+      address: '华润五彩城店',
+      stock: '29,000',
+      key: 6,
+    },
+    {
+      name: '小米10 SE',
+      type: '手机',
+      size: '6G+64G 幻彩蓝',
+      price: '1999.00',
+      address: '清河店',
+      stock: '10,000',
+      key: 7,
+    },
+    {
+      name: '小米8',
+      type: '手机',
+      size: '6G+64G 幻彩蓝',
+      price: '2599.00',
+      address: '双安店',
+      stock: '12,000',
+      key: 8,
+    },
+    {
+      name: 'Redmi Note7',
+      type: '手机',
+      size: '6G+64G 幻彩蓝',
+      price: '999.00',
+      address: '华润五彩城店',
+      stock: '140,000',
+      key: 9,
+    },
+    {
+      name: '小米8 SE',
+      type: '手机',
+      size: '6G+64G 幻彩蓝',
+      price: '699.00',
+      address: '双安店',
+      stock: '12,000',
+      key: 10,
+    },
+  ])
+
+  const [paginationState, setPaginationState] = React.useState({
+    current: 1,
+    data: dataSource.slice(0, 5),
+  })
+
+  const [selectedRowKeys, setSelectedRowKeys] = React.useState<any>([])
+
+  return (
+    <>
+      <h1>FooterRender for Table</h1>
+      <div className="table-footer-render__wrap" style={{ minWidth: 660 }}>
+        <Table
+          pagination={{
+            showTotal: true,
+            showJumper: true,
+            pageSize: 5,
+            total: dataSource.length,
+            current: paginationState.current,
+            onChange: (page, pre, size = 5) => {
+              console.log('onPaginationChange', page, pre, size)
+
+              setPaginationState({
+                current: page,
+                data: dataSource.slice(size * (page - 1), size * page),
+              })
+            },
+          }}
+          columns={columns}
+          data={paginationState.data}
+          rowSelection={{
+            selectedRowKeys,
+            onChange: (keys, target, shouldChecked, rows) => {
+              console.log(keys, target, shouldChecked, rows)
+
+              setSelectedRowKeys(keys)
+            },
+          }}
+          footerRender={(pagination) => {
+            return (
+              <div
+                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
+              >
+                <div>
+                  已选 <span style={{ color: '#237ffa' }}>{selectedRowKeys.length}</span> 项
+                </div>
+                {pagination}
+              </div>
+            )
+          }}
+        />
+      </div>
+    </>
+  )
+}

packages/ui/table/stories/index.stories.tsx

@@ -27,6 +27,7 @@ export * from './on-load-children.stories'
 export * from './expanded-render.stories'
 export * from './async-expanded-render.stories'
 export * from './row-selection.stories'
+export * from './footer-render.stories'
 export * from './merged-cell.stories'
 export * from './pagination.stories'
 export * from './data-source.stories'