diff --git a/.changeset/blue-rats-bow.md b/.changeset/blue-rats-bow.md new file mode 100644 index 000000000..0206156e3 --- /dev/null +++ b/.changeset/blue-rats-bow.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +Table feat: maxHeight 支持表达式 diff --git a/.changeset/plenty-panthers-confess.md b/.changeset/plenty-panthers-confess.md new file mode 100644 index 000000000..11c27433b --- /dev/null +++ b/.changeset/plenty-panthers-confess.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/table": patch +--- + +feat: maxHeight 支持表达式 diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts index 94a1d6337..c9ddc3b39 100644 --- a/packages/ui/table/src/use-table.ts +++ b/packages/ui/table/src/use-table.ts @@ -667,7 +667,7 @@ export interface UseTableProps { /** * 表格最大高度,当穿过该高度时,展示滚动条且表头固定 */ - maxHeight?: number + maxHeight?: number | string /** * 表格列冻结默认设置,为 string 时仅支持从左侧冻结至某一列 */ diff --git a/packages/ui/table/stories/index.stories.tsx b/packages/ui/table/stories/index.stories.tsx index f01982773..1a3a892c4 100644 --- a/packages/ui/table/stories/index.stories.tsx +++ b/packages/ui/table/stories/index.stories.tsx @@ -10,6 +10,7 @@ export * from './col-menu.stories' export * from './data-sorter.stories' export * from './custom-filter.stories' export * from './resizable.stories' +export * from './max-height.stories' export * from './highlight.stories' export * from './highlight-rows.stories' export * from './highlight-cols.stories' diff --git a/packages/ui/table/stories/max-height.stories.tsx b/packages/ui/table/stories/max-height.stories.tsx new file mode 100644 index 000000000..e91bbf6bf --- /dev/null +++ b/packages/ui/table/stories/max-height.stories.tsx @@ -0,0 +1,127 @@ +import React from 'react' +import Table from '../src' + +/** + * @title 设置最大高度 + */ +export const MaxHeight = () => { + const [columns] = React.useState([ + { + title: '商品名', + dataKey: 'name', + render: (text, row) => { + console.log(text, row) + return text + '*' + }, + }, + { + title: '品类', + dataKey: 'type', + }, + { + title: '规格', + dataKey: 'size', + }, + { + title: '单价', + dataKey: 'price', + }, + { + title: '门店', + dataKey: 'address', + }, + { + title: '库存', + dataKey: 'stock', + }, + ]) + + const [data] = 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: '小米9', + type: '手机', + size: '6G+64G 幻彩蓝', + price: '2599.00', + address: '双安店', + stock: '12,000', + key: 6, + }, + { + name: 'Redmi Note10', + type: '手机', + size: '6G+64G 幻彩蓝', + price: '999.00', + address: '华润五彩城店', + stock: '140,000', + key: 7, + }, + { + name: '小米11', + type: '手机', + size: '6G+64G 幻彩蓝', + price: '699.00', + address: '双安店', + stock: '12,000', + key: 8, + }, + ]) + + return ( + <> +

MaxHeight for Table

+
+ + + + ) +}