feat(Table): Table 添加 scroll 属性，解决表格冗余 div fix #687 (#690)

uiwjs · Mar 18, 2022 · d20b5e8 · d20b5e8
1 parent 1982a14
commit d20b5e8
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 9 deletions.
diff --git a/packages/react-table/README.md b/packages/react-table/README.md
@@ -65,7 +65,6 @@ const Demo = () => (
 );
 ReactDOM.render(<Demo />, _mount_);
 ```
-
 ### 表头分组
 
 表头分组通过 `columns` 数组中对象的 `children` 来实现，以渲染分组表头。。
@@ -814,6 +813,66 @@ const Demo = () => {
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+### 表格列过宽导致 footer 滑动出表格底部
+
+使用 scroll 属性给表格设置宽(x)或高(y)即可
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import ReactDOM from 'react-dom';
+import { Table, Button } from 'uiw';
+
+const columns = [
+  {
+    // title: '姓名',
+    ellipsis: true, 
+    width: 1000,
+    title: ({ key }) => {
+      return (
+        <span>字段: {key}</span>
+      )
+    },
+    key: 'name', 
+  }, {
+    title: '年龄',
+    style: { color: 'red' },
+    key: 'age',
+  }, {
+    title: '地址',
+    key: 'info',
+  }, {
+    title: '操作',
+    key: 'edit',
+    width: 98,
+    render: (text, key, rowData, rowNumber, columnNumber) => (
+      <div>
+        <Button size="small" type="danger">删除</Button>
+        <Button size="small" type="success">修改</Button>
+      </div>
+    ),
+  },
+];
+const dataSource = [
+  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },
+  { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },
+  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },
+  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },
+  { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },
+  { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },
+  { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },
+];
+const Demo = () => (
+  <div>
+    <Table 
+      scroll={{x: 1800, y: 100}}
+      footer={<div style={{height: 20, }}>这个是footer</div>}
+      columns={columns} data={dataSource} 
+    />
+  </div>
+);
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ## Props
 
 ### Table
@@ -845,6 +904,7 @@ ReactDOM.render(<Demo />, _mount_);
 | render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前值的 `key`，行索引数据，当前行号，当前列号。| `Function(text, key, rowData, rowNumber, columnNumber)` | - |
 | align | 设置列的对齐方式 | "left"|"center"|"right" | - |
 | className | 列样式类名 | string | - |
+| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高 | { x?: React.CSSProperties['width'], y?: React.CSSProperties['height'] } | - |
 
 ### expandable
 

diff --git a/packages/react-table/src/TableTr.tsx b/packages/react-table/src/TableTr.tsx
@@ -75,7 +75,7 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
                   children: trData[keyName.key!],
                 };
                 if (render[keyName.key!]) {
-                  const child = render[keyName.key!](trData[keyName.key!], keyName.key!, trData, rowNum, colNum);
+                  const child = render[keyName.key!](trData[keyName.key!], keyName.key, trData, rowNum, colNum);
                   if (React.isValidElement(child)) {
                     objs.children = child;
                   } else {
@@ -106,7 +106,7 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
                     {...objs}
                     key={colNum}
                     // style={keyName?.style}
-                    className={`${objs.className} ${prefixCls}-tr-children-${keyName?.align || 'left'}  ${
+                    className={`${objs.className || ''} ${prefixCls}-tr-children-${keyName.align || 'left'}  ${
                       keyName.className || ''
                     }`}
                     onClick={(evn) => onCell(trData, { rowNum, colNum, keyName: keyName.key! }, evn)}

diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
@@ -66,6 +66,7 @@ export interface TableProps<T extends { [key: string]: V } = any, V = any> exten
   ) => void;
   expandable?: ExpandableType<T>;
   rowKey?: keyof T;
+  scroll?: { x?: React.CSSProperties['width']; y?: React.CSSProperties['height'] };
 }
 
 export interface ICellOptions {
@@ -88,6 +89,7 @@ export default function Table<T extends { [key: string]: V }, V>(props: TablePro
     children,
     expandable,
     rowKey,
+    scroll,
     ...other
   } = props;
   const [expandIndex, setExpandIndex] = useState<Array<T[keyof T] | number>>([]);
@@ -187,14 +189,31 @@ export default function Table<T extends { [key: string]: V }, V>(props: TablePro
       selfColumns,
     };
   }, [columns, expandIndex]);
-
+  const style: { table: React.CSSProperties; div: React.CSSProperties } = useMemo(() => {
+    const style: { table: React.CSSProperties; div: React.CSSProperties } = {
+      table: {},
+      div: {},
+    };
+    if (scroll) {
+      if (scroll.x !== undefined) {
+        style.table.minWidth = '100%';
+        style.table.width = scroll.x;
+        style.div.overflowX = 'auto';
+        style.div.overflowY = 'hidden';
+      }
+      if (scroll.y !== undefined) {
+        style.div.maxHeight = scroll.y;
+        style.div.overflowY = 'scroll';
+      }
+    }
+    return style;
+  }, [scroll]);
   const cls = [prefixCls, className, bordered ? `${prefixCls}-bordered` : null].filter(Boolean).join(' ').trim();
   const { header, render, ellipsis } = getLevelItems(self.selfColumns);
-
   return (
-    <div>
-      <div style={{ overflowY: 'scroll' }} className={cls} {...other}>
-        <table style={ellipsis ? { tableLayout: 'fixed' } : {}}>
+    <React.Fragment>
+      <div className={cls} {...other} style={{ ...other.style, ...style.div }}>
+        <table style={{ tableLayout: ellipsis ? 'fixed' : 'auto', ...style.table }}>
           {title && <caption>{title}</caption>}
           {columns && columns.length > 0 && <Thead onCellHead={onCellHead} data={header} />}
           {data && data.length > 0 && (
@@ -227,6 +246,6 @@ export default function Table<T extends { [key: string]: V }, V>(props: TablePro
         </table>
       </div>
       {footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
-    </div>
+    </React.Fragment>
   );
 }