diff --git a/.changeset/friendly-phones-return.md b/.changeset/friendly-phones-return.md new file mode 100644 index 000000000..1dfdc1053 --- /dev/null +++ b/.changeset/friendly-phones-return.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +Table feat: add footerRender api diff --git a/.changeset/smooth-ways-smash.md b/.changeset/smooth-ways-smash.md new file mode 100644 index 000000000..2b93bb12d --- /dev/null +++ b/.changeset/smooth-ways-smash.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/table": minor +--- + +feat: add footerRender api diff --git a/packages/ui/table/src/BaseTable.tsx b/packages/ui/table/src/BaseTable.tsx index 65cdfccf3..b500e9fca 100644 --- a/packages/ui/table/src/BaseTable.tsx +++ b/packages/ui/table/src/BaseTable.tsx @@ -187,6 +187,7 @@ export const BaseTable = forwardRef( canScroll, bodyTableRef, scrollWidth, + footerRender, } = providedValue const hasBorder = borderedProp ?? bordered @@ -266,7 +267,7 @@ export const BaseTable = forwardRef( : undefined } > - {extraFooter} + {isFunction(footerRender) ? footerRender(<>{extraFooter}) : extraFooter} ) diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts index 1e5f9e6ec..3c0595808 100644 --- a/packages/ui/table/src/use-table.ts +++ b/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 | void + /** + * 自定义渲染页脚 + */ + footerRender?: (...nodes: React.ReactElement[]) => React.ReactNode } export type UseTableReturn = ReturnType diff --git a/packages/ui/table/stories/footer-render.stories.tsx b/packages/ui/table/stories/footer-render.stories.tsx new file mode 100644 index 000000000..320598e41 --- /dev/null +++ b/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([]) + + return ( + <> +

FooterRender for Table

+
+ { + 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 ( +
+
+ 已选 {selectedRowKeys.length} 项 +
+ {pagination} +
+ ) + }} + /> + + + ) +} diff --git a/packages/ui/table/stories/index.stories.tsx b/packages/ui/table/stories/index.stories.tsx index 1a3a892c4..5afc50184 100644 --- a/packages/ui/table/stories/index.stories.tsx +++ b/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'