Table pagination bottom

docs/demo-data.ts

@@ -63,6 +63,7 @@ export const initSchema: DripTableSchema<CustomColumnSchema, SubtableDataSourceK
     ],
   },
   pagination: {
+    sticky: true,
     border: true,
     simple: false,
     pageSize: 20,

docs/drip-table/demo/demo.tsx

@@ -12,7 +12,7 @@ import DripTable, { DripTableFilters, DripTableInstance } from 'drip-table';
 import { JsonEditor } from 'jsoneditor-react';
 import React from 'react';
 
-import { initSchema, mockData, SampleRecordType, SubtableDataSourceKey } from '../../demo-data';
+import { initSchema, mockData, SampleRecordType } from '../../demo-data';
 import { CustomColumnSchema, CustomComponentEvent, CustomComponents } from './custom-components';
 
 import styles from './demo.module.less';
@@ -110,7 +110,6 @@ function Demo() {
         CustomColumnSchema: CustomColumnSchema;
         CustomComponentEvent: CustomComponentEvent;
         CustomComponentExtraData: never;
-        SubtableDataSourceKey: SubtableDataSourceKey;
       }>
         ref={dripTable}
         schema={schema}

packages/drip-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drip-table",
-  "version": "3.2.1-alpha.12",
+  "version": "3.2.2-alpha.1",
   "description": "A tiny and powerful enterprise-class solution for building tables.",
   "main": "dist/index.min.js",
   "module": "lib/index.js",

packages/drip-table/src/components/react-components/spin/index.tsx

@@ -15,6 +15,8 @@ export interface SpinProps {
   children?: React.ReactNode;
   spinning?: boolean;
   tip?: string;
+  className?: string;
+  innerClassName?: string;
 }
 
 const prefixCls = 'jfe-drip-table-rc-spin';
@@ -35,9 +37,9 @@ function Indicator() {
 }
 
 const Spin = React.memo(({ ...props }: SpinProps) => (
-  <div className={`${prefixCls}-nested-loading`}>
+  <div className={classNames(`${prefixCls}-nested-loading`, props.className)}>
     { props.spinning && <Indicator /> }
-    <div className={classNames(`${prefixCls}-container`, { [`${prefixCls}-blur`]: props.spinning })}>
+    <div className={classNames(`${prefixCls}-container`, props.innerClassName, { [`${prefixCls}-blur`]: props.spinning })}>
       { props.tip }
       { props.children }
     </div>

packages/drip-table/src/layouts/index.less

@@ -0,0 +1,10 @@
+@import url("@@drip-table-src/styles/theme/default.less");
+
+@prefixCls: jfe-drip-table-layout-table;
+
+.@{prefixCls}-sticky-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+}

packages/drip-table/src/layouts/index.tsx

@@ -6,6 +6,8 @@
  * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
  */
 
+import './index.less';
+
 import classnames from 'classnames';
 import React, { useEffect } from 'react';
 
@@ -136,9 +138,11 @@ function DripTableLayout<
 
   return (
     <ErrorBoundary>
-      <Spin spinning={tableProps.loading}>
+      <Spin spinning={tableProps.loading} className={tableProps.spinClassName} innerClassName={tableProps.spinInnerClassName}>
         <div
-          className={classnames(tableProps.className, tableProps.schema.className)}
+          className={classnames(tableProps.className, tableProps.schema.className, {
+            'jfe-drip-table-layout-table-sticky-container': tableProps.schema.pagination && tableProps.schema.pagination.sticky,
+          })}
           style={Object.assign({}, tableProps.style, tableProps.schema.style, themeStyle)}
         >
           { layoutNode }

packages/drip-table/src/layouts/table/index.tsx

@@ -180,37 +180,37 @@ const hookColumRender = <
       <React.Fragment>
         { render?.(d, row, index) }
         {
-        columnSchema && ('sorter' in columnSchema || columnSchema.style || columnSchema.hoverStyle || columnSchema.rowHoverStyle || columnSchema.columnHoverStyle)
-          ? (
-            <div
-              style={{ display: 'none' }}
-              ref={(el) => {
-                const tdEl = el?.parentElement;
-                if (tdEl) {
-                  const context = { props: { record: row.record, recordIndex: row.index, ext: extraProps.ext } };
-                  const parseStyleSchema = (style: string | Record<string, string> | undefined) => parseCSS(typeof style === 'string' ? safeExecute(style, context) : style);
-                  tdEl.dataset.tableUuid = tableInfo.uuid;
-                  tdEl.dataset.columnKey = columnSchema.key;
-                  tdEl.dataset.rowKey = row.key;
-                  tdEl.dataset.basicStyle = stringifyCSS(Object.assign(
-                    {
-                      'text-align': columnSchema.align,
-                      background: sorter?.key === columnSchema.key ? 'var(--drip-table-column-sorted-background-color, inherit)' : void 0,
-                    },
-                    parseStyleSchema(columnSchema.style),
-                  ));
-                  tdEl.dataset.hoverStyle = stringifyCSS(parseStyleSchema(columnSchema.hoverStyle));
-                  tdEl.dataset.rowHoverStyle = stringifyCSS(parseStyleSchema(columnSchema.rowHoverStyle));
-                  tdEl.dataset.columnHoverStyle = stringifyCSS(parseStyleSchema(columnSchema.columnHoverStyle));
-                  tdEl.addEventListener('mouseenter', onCellMouseEnter);
-                  tdEl.addEventListener('mouseleave', onCellMouseLeave);
-                  updateCellElementStyle(tdEl, void 0, void 0);
-                }
-              }}
-            />
-          )
-          : null
-      }
+          columnSchema && ('sorter' in columnSchema || columnSchema.style || columnSchema.hoverStyle || columnSchema.rowHoverStyle || columnSchema.columnHoverStyle)
+            ? (
+              <div
+                style={{ display: 'none' }}
+                ref={(el) => {
+                  const tdEl = el?.parentElement;
+                  if (tdEl) {
+                    const context = { props: { record: row.record, recordIndex: row.index, ext: extraProps.ext } };
+                    const parseStyleSchema = (style: string | Record<string, string> | undefined) => parseCSS(typeof style === 'string' ? safeExecute(style, context) : style);
+                    tdEl.dataset.tableUuid = tableInfo.uuid;
+                    tdEl.dataset.columnKey = columnSchema.key;
+                    tdEl.dataset.rowKey = row.key;
+                    tdEl.dataset.basicStyle = stringifyCSS(Object.assign(
+                      {
+                        'text-align': columnSchema.align,
+                        background: sorter?.key === columnSchema.key ? 'var(--drip-table-column-sorted-background-color, inherit)' : void 0,
+                      },
+                      parseStyleSchema(columnSchema.style),
+                    ));
+                    tdEl.dataset.hoverStyle = stringifyCSS(parseStyleSchema(columnSchema.hoverStyle));
+                    tdEl.dataset.rowHoverStyle = stringifyCSS(parseStyleSchema(columnSchema.rowHoverStyle));
+                    tdEl.dataset.columnHoverStyle = stringifyCSS(parseStyleSchema(columnSchema.columnHoverStyle));
+                    tdEl.addEventListener('mouseenter', onCellMouseEnter);
+                    tdEl.addEventListener('mouseleave', onCellMouseLeave);
+                    updateCellElementStyle(tdEl, void 0, void 0);
+                  }
+                }}
+              />
+            )
+            : null
+        }
       </React.Fragment>
     );
   };
@@ -1422,7 +1422,9 @@ function TableLayout<
                   </Slot>
                 )
                 : (
-                  <span className={`${prefixCls}-row-slot__error`}>{ `自定义插槽组件渲染函数 tableProps.slots['${slotType}'] 不存在` }</span>
+                  <span className={`${prefixCls}-row-slot__error`}>
+                    { `自定义插槽组件渲染函数 tableProps.slots['${slotType}'] 不存在` }
+                  </span>
                 );
             }
             return render?.(o, row, index);
@@ -1772,8 +1774,8 @@ function TableLayout<
               ...subtable ? tableProps.subtableProps.filter(sp => sp.subtableID === subtable.id) || [] : [],
               ...tableProps.subtableProps.filter(
                 sp => sp.recordKeys
-            && sp.recordKeys.length === 1
-            && sp.recordKeys[0] === row.record[rowKey],
+                  && sp.recordKeys.length === 1
+                  && sp.recordKeys[0] === row.record[rowKey],
               ) || [],
             ].map(sp => sp.properties),
           )
@@ -1901,9 +1903,8 @@ function TableLayout<
     [tableProps.emptyText, tableProps.schema.emptyText],
   );
 
-  return (
+  const renderTableLayout = (
     <React.Fragment>
-      { paginationPosition === 'top' ? renderPagination : void 0 }
       { props.header }
       <ResizeObserver onResize={rcTableOnResize}>
         <div className={`${prefixCls}-resize-observer`}>
@@ -1968,9 +1969,24 @@ function TableLayout<
         </div>
       </ResizeObserver>
       { props.footer }
-      { paginationPosition === 'bottom' ? renderPagination : void 0 }
     </React.Fragment>
   );
+
+  return tableProps.schema.pagination && tableProps.schema.pagination?.sticky
+    ? (
+      <React.Fragment>
+        { paginationPosition === 'top' ? renderPagination : void 0 }
+        <div>{ renderTableLayout }</div>
+        { paginationPosition === 'bottom' ? renderPagination : void 0 }
+      </React.Fragment>
+    )
+    : (
+      <React.Fragment>
+        { paginationPosition === 'top' ? renderPagination : void 0 }
+        { renderTableLayout }
+        { paginationPosition === 'bottom' ? renderPagination : void 0 }
+      </React.Fragment>
+    );
 }
 
 export default TableLayout;

packages/drip-table/src/types/index.ts

@@ -256,6 +256,7 @@ export interface DripTableSchema<
    * 是否展示分页以及配置
    */
   pagination?: false | {
+    sticky?: boolean;
     border?: boolean;
     simple?: boolean;
     size?: 'small' | 'default';
@@ -561,6 +562,8 @@ export interface DripTableProps<
    * 自定义样式表
    */
   style?: React.CSSProperties;
+  spinClassName?: string;
+  spinInnerClassName?: string;
   /**
    * 表单 Schema
    */

packages/drip-table/src/utils/ajv.ts

@@ -275,6 +275,7 @@ const getDripTablePropsAjvSchema = (options?: AjvOptions) => {
             {
               type: 'object',
               properties: {
+                sticky: { type: 'boolean' },
                 border: { type: 'boolean' },
                 simple: { type: 'boolean' },
                 size: { enum: ['small', 'default'] },
@@ -435,6 +436,8 @@ const getDripTablePropsAjvSchema = (options?: AjvOptions) => {
           items: {},
         },
         className: { type: 'string' },
+        spinClassName: { type: 'string' },
+        spinInnerClassName: { type: 'string' },
         style: DRIP_TABLE_CSS_SCHEMA,
         selectedRowKeys: {},
         displayColumnKeys: {},