feat: virtual table

packages/core/client/src/flow/FlowPage.tsx

@@ -20,7 +20,7 @@ function InternalFlowPage({ uid, ...props }) {
   return (
     <FlowModelRenderer
       model={model}
-      fallback={<SkeletonFallback />}
+      fallback={<SkeletonFallback style={{ margin: 16 }} />}
       hideRemoveInSettings
       showFlowSettings={{ showBackground: false, showBorder: false }}
       {...props}
@@ -106,7 +106,7 @@ export const RemoteFlowModelRenderer = (props) => {
     },
   );
   if (loading || !data?.uid) {
-    return <SkeletonFallback />;
+    return <SkeletonFallback style={{ margin: 16 }} />;
   }
   return <InternalFlowPage uid={data.uid} {...rest} />;
 };

packages/core/client/src/flow/components/SkeletonFallback.tsx

@@ -10,9 +10,9 @@
 import { Card, Skeleton, Spin } from 'antd';
 import React from 'react';
 
-export function SkeletonFallback() {
+export function SkeletonFallback(props) {
   return (
-    <Card style={{ margin: 16 }}>
+    <Card {...props}>
       <Skeleton paragraph={{ rows: 3 }} />
     </Card>
   );

packages/core/client/src/flow/models/base/GridModel.tsx

@@ -18,12 +18,13 @@ import {
   FlowsFloatContextMenu,
   useStepSettingContext,
 } from '@nocobase/flow-engine';
+import { tval } from '@nocobase/utils/client';
 import { Alert, Space } from 'antd';
 import _ from 'lodash';
 import React, { useState } from 'react';
-import { tval } from '@nocobase/utils/client';
 import { Grid } from '../../components/Grid';
 import JsonEditor from '../../components/JsonEditor';
+import { SkeletonFallback } from '../../components/SkeletonFallback';
 import { BlockModel } from './BlockModel';
 
 type GridModelStructure = {
@@ -111,6 +112,7 @@ export class GridModel extends FlowModel<GridModelStructure> {
                 <FlowModelRenderer
                   model={item}
                   key={item.uid}
+                  fallback={<SkeletonFallback />}
                   showFlowSettings={{ showBackground: false }}
                   showErrorFallback
                 />

packages/core/client/src/flow/models/data-blocks/table/TableModel.tsx

@@ -22,6 +22,7 @@ import {
 import { tval } from '@nocobase/utils/client';
 import { Card, Space, Spin, Table } from 'antd';
 import classNames from 'classnames';
+import { t } from 'i18next';
 import _ from 'lodash';
 import React, { useRef } from 'react';
 import { ActionModel } from '../../base/ActionModel';
@@ -257,13 +258,15 @@ export class TableModel extends DataBlockModel<TableModelStructure> {
             tableLayout="fixed"
             rowKey={this.collection.filterTargetKey}
             rowSelection={{
+              columnWidth: 50,
               type: 'checkbox',
               onChange: (_, selectedRows) => {
                 this.resource.setSelectedRows(selectedRows);
               },
               selectedRowKeys: this.resource.getSelectedRows().map((row) => row.id),
             }}
-            scroll={{ x: 'max-content', y: 'calc(100vh - 300px)' }}
+            virtual={this.props.virtual}
+            scroll={{ x: 'max-content', y: 'calc(100vh - 200px)' }}
             dataSource={this.resource.getData()}
             columns={this.getColumns()}
             pagination={{
@@ -272,6 +275,7 @@ export class TableModel extends DataBlockModel<TableModelStructure> {
               total: this.resource.getMeta('count'),
             }}
             onChange={(pagination) => {
+              console.log('onChange pagination:', pagination);
               this.resource.setPage(pagination.current);
               this.resource.setPageSize(pagination.pageSize);
               this.resource.loading = true;
@@ -288,6 +292,21 @@ TableModel.registerFlow({
   key: 'default',
   auto: true,
   steps: {
+    virtual: {
+      title: tval('Virtual'),
+      uiSchema: {
+        virtual: {
+          'x-component': 'Switch',
+          'x-decorator': 'FormItem',
+        },
+      },
+      defaultParams: {
+        virtual: false,
+      },
+      handler(ctx, params) {
+        ctx.model.setProps('virtual', params.virtual);
+      },
+    },
     enableEditable: {
       title: tval('Editable'),
       uiSchema: {