feat(Table): add support for fillHeight on <Table>

docs/index.tsx

@@ -73,6 +73,10 @@ function App() {
             title: 'Automatic height',
             content: require('./md/AutoHeightTable.md')
           },
+          {
+            title: 'Fill height',
+            content: require('./md/FillHeightTable.md')
+          },
 
           {
             title: 'Affix Header',

docs/md/FillHeightTable.md

@@ -0,0 +1,84 @@
+### Fill height
+
+<!--start-code-->
+
+```js
+const App = () => {
+  const [height, setheight] = React.useState(30);
+  const handleChange = event => {
+    const value = parseInt(event.target.value);
+    setheight(value);
+  };
+
+  const data = fakeData.filter((item, index) => index < 50);
+  return (
+    <div>
+      container height: <input type="text" onChange={handleChange} value={height} /> rem
+      <hr />
+      <div style={{ border: '1px solid red', height: `${height}rem` }}>
+        <Table
+          height={400}
+          fillHeight
+          data={data}
+          onRowClick={data => {
+            console.log(data);
+          }}
+        >
+          <Column width={70} align="center">
+            <HeaderCell>Id</HeaderCell>
+            <Cell dataKey="id" />
+          </Column>
+
+          <Column width={130}>
+            <HeaderCell>First Name</HeaderCell>
+            <Cell dataKey="firstName" />
+          </Column>
+
+          <Column width={130}>
+            <HeaderCell>Last Name</HeaderCell>
+            <Cell dataKey="lastName" />
+          </Column>
+
+          <Column width={200}>
+            <HeaderCell>City</HeaderCell>
+            <Cell dataKey="city" />
+          </Column>
+
+          <Column width={200}>
+            <HeaderCell>Street</HeaderCell>
+            <Cell dataKey="street" />
+          </Column>
+
+          <Column width={200}>
+            <HeaderCell>Company Name</HeaderCell>
+            <Cell dataKey="companyName" />
+          </Column>
+
+          <Column width={200}>
+            <HeaderCell>Email</HeaderCell>
+            <Cell dataKey="email" />
+          </Column>
+
+          <Column width={200}>
+            <HeaderCell>Email</HeaderCell>
+            <Cell dataKey="email" />
+          </Column>
+
+          <Column width={200}>
+            <HeaderCell>Email</HeaderCell>
+            <Cell dataKey="email" />
+          </Column>
+
+          <Column width={200}>
+            <HeaderCell>Email</HeaderCell>
+            <Cell dataKey="email" />
+          </Column>
+        </Table>
+      </div>
+    </div>
+  );
+};
+ReactDOM.render(<App />);
+```
+
+<!--end-code-->

src/Table.tsx

@@ -44,7 +44,6 @@ import type {
   RowKeyType,
   TableLocaleType
 } from './@types/common';
-
 /**
  * Filter those expanded nodes.
  * @param data
@@ -67,9 +66,18 @@ const filterTreeData = (data: any[], expandedRowKeys: RowKeyType[], rowKey?: Row
 };
 
 export interface TableProps extends Omit<StandardProps, 'onScroll'> {
-  /** Automatic Height */
+  /**
+   * The height of the table will be automatically expanded according to the number of data rows,
+   * and no vertical scroll bar will appear
+   * */
   autoHeight?: boolean;
 
+  /**
+   * Force the height of the table to be equal to the height of its parent container.
+   * Cannot be used together with autoHeight.
+   */
+  fillHeight?: boolean;
+
   /** Affix the table header to the specified position on the page */
   affixHeader?: boolean | number;
 
@@ -95,7 +103,7 @@ export interface TableProps extends Omit<StandardProps, 'onScroll'> {
   defaultExpandedRowKeys?: RowKeyType[];
 
   /** Table data */
-  data: RowDataType[];
+  data?: RowDataType[];
 
   /** Specify the default expanded row by  rowkey (Controlled) */
   expandedRowKeys?: RowKeyType[];
@@ -269,6 +277,7 @@ const Table = React.forwardRef((props: TableProps, ref) => {
     minHeight = 0,
     height = 200,
     autoHeight,
+    fillHeight,
     rtl: rtlProp,
     translate3d = true,
     rowKey,
@@ -377,7 +386,8 @@ const Table = React.forwardRef((props: TableProps, ref) => {
     tableOffset,
     headerOffset,
     setScrollY,
-    setScrollX
+    setScrollX,
+    getTableHeight
   } = useTableDimension({
     data: dataProp,
     width: widthProp,
@@ -389,7 +399,9 @@ const Table = React.forwardRef((props: TableProps, ref) => {
     affixHorizontalScrollbar,
     headerHeight,
     height,
+    minHeight,
     autoHeight,
+    fillHeight,
     children,
     expandedRowKeys,
     onTableScroll: (coords: { x?: number; y?: number }) => {
@@ -406,16 +418,8 @@ const Table = React.forwardRef((props: TableProps, ref) => {
     }
   });
 
-  const getTableHeight = useCallback(() => {
-    if (data.length === 0 && autoHeight) {
-      return height;
-    }
-
-    return autoHeight ? Math.max(headerHeight + contentHeight.current, minHeight) : height;
-  }, [autoHeight, contentHeight, data.length, headerHeight, height, minHeight]);
-
   useAffix({
-    tableHeight: getTableHeight,
+    getTableHeight,
     contentHeight,
     affixHorizontalScrollbar,
     affixHeader,
@@ -1049,14 +1053,15 @@ const Table = React.forwardRef((props: TableProps, ref) => {
 Table.displayName = 'Table';
 Table.propTypes = {
   autoHeight: PropTypes.bool,
+  fillHeight: PropTypes.bool,
   affixHeader: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   affixHorizontalScrollbar: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   bordered: PropTypes.bool,
   className: PropTypes.string,
   classPrefix: PropTypes.string,
   children: PropTypes.any,
   cellBordered: PropTypes.bool,
-  data: PropTypes.array.isRequired,
+  data: PropTypes.array,
   defaultExpandAllRows: PropTypes.bool,
   defaultExpandedRowKeys: PropTypes.array,
   defaultSortType: PropTypes.any,

src/utils/useAffix.ts

@@ -10,7 +10,7 @@ import type { ListenerCallback, ElementOffset } from '../@types/common';
 import type { ScrollbarInstance } from '../Scrollbar';
 
 interface AffixProps {
-  tableHeight: () => number;
+  getTableHeight: () => number;
   contentHeight: React.MutableRefObject<number>;
   affixHeader?: boolean | number;
   affixHorizontalScrollbar?: boolean | number;
@@ -23,7 +23,7 @@ interface AffixProps {
 
 const useAffix = (props: AffixProps) => {
   const {
-    tableHeight,
+    getTableHeight,
     contentHeight,
     affixHorizontalScrollbar,
     affixHeader,
@@ -38,7 +38,7 @@ const useAffix = (props: AffixProps) => {
   const handleAffixHorizontalScrollbar = useCallback(() => {
     const scrollY = window.scrollY || window.pageYOffset;
     const windowHeight = getHeight(window);
-    const height = tableHeight();
+    const height = getTableHeight();
 
     const bottom = typeof affixHorizontalScrollbar === 'number' ? affixHorizontalScrollbar : 0;
     const offsetTop = tableOffset.current?.top || 0;
@@ -56,7 +56,7 @@ const useAffix = (props: AffixProps) => {
         removeStyle(scrollbarXRef.current.root, 'bottom');
       }
     }
-  }, [affixHorizontalScrollbar, headerHeight, scrollbarXRef, tableHeight, tableOffset]);
+  }, [affixHorizontalScrollbar, headerHeight, scrollbarXRef, getTableHeight, tableOffset]);
 
   const handleAffixTableHeader = useCallback(() => {
     const top = typeof affixHeader === 'number' ? affixHeader : 0;
@@ -88,7 +88,7 @@ const useAffix = (props: AffixProps) => {
    * Update the position of the fixed element after the height of the table changes.
    * fix: https://github.com/rsuite/rsuite/issues/1716
    */
-  useUpdateEffect(handleWindowScroll, [tableHeight]);
+  useUpdateEffect(handleWindowScroll, [getTableHeight]);
 
   useEffect(() => {
     if (isNumberOrTrue(affixHeader) || isNumberOrTrue(affixHorizontalScrollbar)) {

src/utils/useScrollListener.ts

@@ -406,6 +406,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
 
   const onScrollTop = (top = 0) => {
     const [nextScrollY, handleScrollY] = getControlledScrollTopValue(top);
+    const height = getTableHeight();
 
     setScrollY(nextScrollY);
     scrollbarYRef?.current?.resetScrollBarPosition?.(handleScrollY);