feat(table): 表格功能迭代&优化

.changeset/cyan-apricots-help.md

@@ -0,0 +1,8 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(table): add fixed and rowClassName api
+feat(table): SettingDrawer 增加 extraHeader extraFooter itemRender api
+feat(table): SettingDrawer 支持配置列是否禁止拖拽
+fix(table): 修复resize模式下多选时宽度被重置问题

.changeset/odd-days-sip.md

@@ -0,0 +1,13 @@
+---
+"@hi-ui/table": minor
+---
+
+feat: add fixed and rowClassName api
+feat: SettingDrawer 增加 extraHeader showCheckAll itemRender api
+fix: 修复边框模式下样式问题
+feat: SettingDrawer 支持配置列是否禁止拖拽
+fix: 修复resize模式下多选时宽度被重置问题
+fix: 修复树形表格节点图标没有对齐问题
+fix: 修复虚拟表格边框样式问题
+fix: 修复虚拟表格下双滚动条问题
+fix: 修复虚拟表格下size和maxHeight失效问题

packages/ui/scrollbar/src/styles/scrollbar.scss

@@ -97,8 +97,8 @@ $prefix: '#{$component-prefix}-scrollbar' !default;
     }
   }
 
-  > .ps__thumb-y,
-  > .ps__thumb-x {
+  > .ps__rail-y,
+  > .ps__rail-x {
     z-index: var(--scrollbar-zIndex);
   }
 }

packages/ui/table/package.json

@@ -59,6 +59,7 @@
     "@hi-ui/pagination": "^4.0.14",
     "@hi-ui/popper": "^4.1.3",
     "@hi-ui/react-utils": "^4.0.4",
+    "@hi-ui/scrollbar": "^4.0.6",
     "@hi-ui/select": "^4.2.5",
     "@hi-ui/spinner": "^4.0.8",
     "@hi-ui/times": "^4.0.4",

packages/ui/table/src/SettingDrawer.tsx

@@ -1,19 +1,20 @@
-import React, { forwardRef, useEffect, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
 import { MoveOutlined } from '@hi-ui/icons'
 import { useLatestCallback } from '@hi-ui/use-latest'
 import { HiBaseHTMLProps, useLocaleContext } from '@hi-ui/core'
 import { runIfFunc } from '@hi-ui/func-utils'
 import { useDrag, useDrop } from '@hi-ui/use-drag-sorter'
+import { isFunction } from '@hi-ui/type-assertion'
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state'
-import { useColSorter } from './hooks/use-col-sorter'
-import { useColHidden } from './hooks/use-col-hidden'
 import { Drawer, DrawerProps } from '@hi-ui/drawer'
 import { Button } from '@hi-ui/button'
 import { Checkbox } from '@hi-ui/checkbox'
 import { useColSet } from './hooks/use-col-set'
 import { TableColumnItem } from './types'
+import { useColSorter } from './hooks/use-col-sorter'
+import { useColHidden } from './hooks/use-col-hidden'
 
 const _prefix = getPrefixCls('setting')
 
@@ -33,13 +34,19 @@ export const SettingDrawer = forwardRef<HTMLDivElement | null, SettingDrawerProp
       sortedColKeys: sortedColKeysPropBeforeVerify,
       onSortedColKeysChange,
       onSetColKeysChange,
-      checkDisabledColKeys = [],
+      checkDisabledColKeys,
+      dragDisabledColKeys,
+      extraHeader,
+      itemRender,
       drawerProps,
+      showCheckAll,
     },
     ref
   ) => {
     const i18n = useLocaleContext()
 
+    const [cacheHiddenColKeys, setCacheHiddenColKeys] = useState<string[]>([])
+
     // 根据列字段合并 sortedColKeys、hiddenColKeys
     const { sortedColKeys: sortedColKeysProp, hiddenColKeys: hiddenColKeysProp } = useColSet({
       columns: columnsProp,
@@ -55,12 +62,7 @@ export const SettingDrawer = forwardRef<HTMLDivElement | null, SettingDrawerProp
     })
 
     // 列隐藏
-    const {
-      hiddenColKeys,
-      setHiddenColKeys,
-      cacheHiddenColKeys,
-      setCacheHiddenColKeys,
-    } = useColHidden({
+    const { hiddenColKeys, setHiddenColKeys } = useColHidden({
       // 基于排序的 columns，隐藏的也能排序
       columns: sortedCols,
       hiddenColKeys: hiddenColKeysProp,
@@ -113,6 +115,34 @@ export const SettingDrawer = forwardRef<HTMLDivElement | null, SettingDrawerProp
       setVisible(false)
     }
 
+    const CheckAllContent = (
+      <Checkbox
+        indeterminate={
+          cacheHiddenColKeys.length > 0 && cacheHiddenColKeys.length < columnsProp.length
+        }
+        checked={cacheHiddenColKeys.length === 0}
+        onChange={(e) => {
+          const checked = e.target.checked
+          if (checked) {
+            setCacheHiddenColKeys([])
+          } else {
+            setCacheHiddenColKeys(
+              columnsProp
+                .filter(
+                  (d1) =>
+                    !checkDisabledColKeys?.some((d2) => {
+                      return d2 === d1.dataKey
+                    })
+                )
+                .map((d) => d.dataKey ?? '')
+            )
+          }
+        }}
+      >
+        {i18n.get('checkSelect.checkAll')}
+      </Checkbox>
+    )
+
     const cls = cx(`${prefixCls}-drawer`, className)
 
     return (
@@ -124,34 +154,33 @@ export const SettingDrawer = forwardRef<HTMLDivElement | null, SettingDrawerProp
         onClose={() => onClose?.()}
         width={304}
         footer={
-          <div className={`${prefixCls}__btn-group`}>
-            <Button key={0} className={`${prefixCls}__btn-cancel`} onClick={resetLatest}>
-              {i18n.get('table.reset')}
-            </Button>
-            <Button
-              key={1}
-              className={`${prefixCls}__btn-confirm`}
-              onClick={onConfirm}
-              type="primary"
-            >
-              {i18n.get('table.confirm')}
-            </Button>
+          <div className={`${prefixCls}-footer`}>
+            <div className={`${prefixCls}-footer__extra`}>{showCheckAll && CheckAllContent}</div>
+            <div className={`${prefixCls}-footer__action`}>
+              <Button onClick={resetLatest}>{i18n.get('table.reset')}</Button>
+              <Button onClick={onConfirm} type="primary">
+                {i18n.get('table.confirm')}
+              </Button>
+            </div>
           </div>
         }
         {...drawerProps}
       >
         <div className={`${prefixCls}__content`}>
+          {extraHeader}
           {cacheSortedCols.map((col: any, index: number) => {
             return (
               <SettingItem
                 key={col.dataKey}
                 prefixCls={prefixCls}
                 column={col}
                 index={index}
+                render={itemRender}
                 dropProps={dropProps}
                 cacheHiddenColKeys={cacheHiddenColKeys}
                 setCacheHiddenColKeys={setCacheHiddenColKeys}
-                checkDisabled={checkDisabledColKeys.includes(col.dataKey)}
+                checkDisabled={checkDisabledColKeys?.includes(col.dataKey)}
+                dragDisabled={dragDisabledColKeys?.includes(col.dataKey)}
               />
             )
           })}
@@ -167,6 +196,7 @@ export interface SettingDrawerProps extends HiBaseHTMLProps<'div'> {
   columns?: TableColumnItem[]
   onClose?: () => void
   checkDisabledColKeys?: string[]
+  dragDisabledColKeys?: string[]
   onSetColKeysChange?: (
     sortedColKeys: string[],
     hiddenColKeys: string[],
@@ -176,7 +206,10 @@ export interface SettingDrawerProps extends HiBaseHTMLProps<'div'> {
   onHiddenColKeysChange?: (hiddenColKeys: string[]) => void
   sortedColKeys?: string[]
   onSortedColKeysChange?: (sortedColKeys: string[]) => void
+  extraHeader?: React.ReactNode
+  itemRender?: (item: TableColumnItem) => React.ReactNode
   drawerProps?: Omit<DrawerProps, 'className'>
+  showCheckAll?: boolean
 }
 
 if (__DEV__) {
@@ -191,10 +224,14 @@ function SettingItem({
   dropProps,
   index,
   checkDisabled,
+  dragDisabled,
+  render,
 }: any) {
   const { dataKey, title } = column
+
   const { dragging, direction, getDragTriggerProps, getDropTriggerProps } = useDrag({
     ...dropProps,
+    draggable: !dragDisabled,
     item: column,
     index,
     idFieldName: 'dataKey',
@@ -206,6 +243,7 @@ function SettingItem({
       className={cx(
         `${prefixCls}-item`,
         dragging && `${prefixCls}-item--dragging`,
+        dragDisabled && `${prefixCls}-item--drag-disabled`,
         direction && `${prefixCls}-item--direction-${direction}`
       )}
       {...getDragTriggerProps()}
@@ -224,9 +262,9 @@ function SettingItem({
             setCacheHiddenColKeys(nextCacheHiddenColKeys)
           }}
         >
-          <span>{runIfFunc(title)}</span>
+          <span>{isFunction(render) ? render(column) : runIfFunc(title)}</span>
         </Checkbox>
-        <MoveOutlined />
+        {!dragDisabled && <MoveOutlined />}
       </div>
     </div>
   )

packages/ui/table/src/Table.tsx

@@ -285,6 +285,8 @@ export const Table = forwardRef<HTMLDivElement | null, TableProps>(
         const selectionColumn: TableColumnItem = {
           dataKey: SELECTION_DATA_KEY,
           width: checkboxColWidth,
+          // selectionColumn 宽度固定，防止自动被拉伸
+          fixed: true,
           className: `${prefixCls}__selection-col`,
           title: renderSelectionTitleCell,
           // @ts-ignore

packages/ui/table/src/TableBody.tsx

@@ -84,23 +84,32 @@ export const TableBody = forwardRef<HTMLDivElement | null, TableBodyProps>(
             maxHeight: maxHeight !== undefined ? maxHeight : undefined,
             // 表格宽度大于div宽度才出现横向滚动条
             overflowX: canScroll ? 'scroll' : undefined,
+            overflowY: 'hidden',
           }}
         >
-          <div ref={measureRowElementRef} style={{ height: 1, background: 'transparent' }}></div>
+          <div
+            ref={measureRowElementRef}
+            style={{ height: 1, marginTop: -1, background: 'transparent' }}
+          ></div>
           <div
             ref={bodyTableRef}
-            style={{ height: 1, background: 'transparent', width: rowWidth }}
+            style={{ height: 1, marginTop: -1, background: 'transparent', width: rowWidth }}
           ></div>
           {isArrayNonEmpty(transitionData) ? (
             <div style={{ width: '100%', position: 'sticky', left: 0 }}>
               <VirtualList
+                prefixCls={`${cls}--virtual`}
                 data={transitionData}
                 height={vMaxHeight}
+                fullHeight={false}
                 itemHeight={10}
                 itemKey="id"
                 children={(row, index) => {
                   return (
-                    <div style={{ position: 'relative', left: -scrollLeft }}>
+                    <div
+                      className={`${prefixCls}-virtual-row`}
+                      style={{ position: 'relative', left: -scrollLeft }}
+                    >
                       <TableRow
                         // key={depth + index}
                         key={row.id}

packages/ui/table/src/TableRow.tsx

@@ -20,6 +20,7 @@ export const TableRow = forwardRef<HTMLTableRowElement | null, TableRowProps>(
   (
     {
       prefixCls = _prefix,
+      className,
       rowData: rowDataProp,
       rowIndex,
       expandedTree,
@@ -49,6 +50,7 @@ export const TableRow = forwardRef<HTMLTableRowElement | null, TableRowProps>(
       onRow,
       colWidths,
       virtual,
+      cellClassName,
     } = useTableContext()
 
     const { raw: rowData, id: rowId } = rowDataProp
@@ -188,7 +190,8 @@ export const TableRow = forwardRef<HTMLTableRowElement | null, TableRowProps>(
       draggable && dragDirection && `${prefixCls}-row--drag-${dragDirection}`,
       isSumRow && `${prefixCls}-row--total`,
       isAvgRow && `${prefixCls}-row--avg`,
-      virtual && `${prefixCls}-row--virtual`
+      virtual && `${prefixCls}-row--virtual`,
+      className
     )
 
     const firstColumn = flattedColumnsWithoutChildren.find((item) => {
@@ -265,6 +268,7 @@ export const TableRow = forwardRef<HTMLTableRowElement | null, TableRowProps>(
             return (
               <TableCell
                 key={idx}
+                className={cellClassName?.(rowDataProp, column, idx)}
                 column={column}
                 isSwitcherCol={firstColumn ? firstColumn.id === column.id : false}
                 rowData={rowDataProp}
@@ -290,6 +294,10 @@ export interface TableRowProps {
    * 组件默认的选择器类
    */
   prefixCls?: string
+  /**
+   * 样式类名
+   */
+  className?: string
   /**
    * 是否为总计行
    */

packages/ui/table/src/TbodyContent.tsx

@@ -23,6 +23,7 @@ export const TbodyContent = forwardRef<HTMLDivElement | null, TbodyContentProps>
       hasSumColumn,
       sumRow,
       measureRowElementRef,
+      rowClassName,
     } = useTableContext()
 
     const getRequiredProps = useLatestCallback(
@@ -50,6 +51,7 @@ export const TbodyContent = forwardRef<HTMLDivElement | null, TbodyContentProps>
                   ref={index === 0 ? measureRowElementRef : null}
                   // key={depth + index}
                   key={row.id}
+                  className={rowClassName?.(row, index)}
                   // @ts-ignore
                   rowIndex={index}
                   rowData={row}