chore: model list render time

src/components/drop-down-buttons/index.tsx

@@ -1,6 +1,7 @@
 import { MoreOutlined } from '@ant-design/icons';
 import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
 import _ from 'lodash';
+import { memo, useCallback } from 'react';
 
 interface DropdownButtonsProps {
   items: MenuProps['items'];
@@ -13,16 +14,16 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   size = 'small',
   onSelect
 }) => {
-  const handleMenuClick = (item: any) => {
+  const handleMenuClick = useCallback((item: any) => {
     console.log('menu click', item.key);
     const selectItem = _.find(items, { key: item.key });
     onSelect(item.key, selectItem);
-  };
+  }, []);
 
-  const handleButtonClick = (e: any) => {
+  const handleButtonClick = useCallback((e: any) => {
     const headItem = _.head(items);
     onSelect(headItem.key, headItem);
-  };
+  }, []);
 
   if (!items?.length) {
     return <span></span>;
@@ -61,4 +62,4 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   );
 };
 
-export default DropdownButtons;
+export default memo(DropdownButtons);

src/components/seal-table/components/header.tsx

@@ -0,0 +1,51 @@
+import { Col, Row } from 'antd';
+import React from 'react';
+import { SealColumnProps } from '../types';
+import TableHeader from './table-header';
+
+interface HeaderProps {
+  children: React.ReactNode[];
+  onSort?: (dataIndex: string, order: any) => void;
+}
+
+const Header: React.FC<HeaderProps> = (props) => {
+  const { onSort } = props;
+  return (
+    <Row className="row">
+      {React.Children.map(props.children, (child, i) => {
+        const { props: columnProps } = child as any;
+        const {
+          title,
+          dataIndex,
+          align,
+          span,
+          headerStyle,
+          sortOrder,
+          sorter,
+          defaultSortOrder
+        } = columnProps as SealColumnProps;
+        if (React.isValidElement(child)) {
+          return (
+            <Col span={span} key={i}>
+              <TableHeader
+                onSort={onSort}
+                sorter={sorter}
+                dataIndex={dataIndex}
+                sortOrder={sortOrder}
+                defaultSortOrder={defaultSortOrder}
+                title={title}
+                style={headerStyle}
+                firstCell={i === 0}
+                align={align}
+                lastCell={i === props.children.length - 1}
+              ></TableHeader>
+            </Col>
+          );
+        }
+        return null;
+      })}
+    </Row>
+  );
+};
+
+export default Header;

src/components/seal-table/components/pagination.tsx

@@ -0,0 +1,8 @@
+import { Pagination, type PaginationProps } from 'antd';
+import { memo } from 'react';
+
+const PaginationComponent: React.FC<PaginationProps> = (props) => {
+  return <Pagination {...props} />;
+};
+
+export default memo(PaginationComponent);

src/components/seal-table/components/table-header.tsx

@@ -14,8 +14,7 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
     sortOrder,
     onSort,
     sorter,
-    dataIndex,
-    defaultSortOrder
+    dataIndex
   } = props;
 
   const handleOnSort = () => {

src/components/seal-table/index.tsx

@@ -2,19 +2,17 @@ import { RightOutlined } from '@ant-design/icons';
 import {
   Button,
   Checkbox,
-  Col,
   Empty,
   Pagination,
-  Row,
   Spin,
   type PaginationProps
 } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import TableHeader from './components/table-header';
+import Header from './components/header';
 import TableRow from './components/table-row';
 import './styles/index.less';
-import { SealColumnProps, SealTableProps } from './types';
+import { SealTableProps } from './types';
 
 const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
   props
@@ -111,48 +109,6 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     return null;
   };
 
-  const renderHeader = () => {
-    return (
-      <div className="header-row-wrapper">
-        {renderHeaderPrefix()}
-        <Row className="row">
-          {React.Children.map(props.children, (child, i) => {
-            const { props: columnProps } = child as any;
-            const {
-              title,
-              dataIndex,
-              align,
-              span,
-              headerStyle,
-              sortOrder,
-              sorter,
-              defaultSortOrder
-            } = columnProps as SealColumnProps;
-            if (React.isValidElement(child)) {
-              return (
-                <Col span={span} key={i}>
-                  <TableHeader
-                    onSort={onSort}
-                    sorter={sorter}
-                    dataIndex={dataIndex}
-                    sortOrder={sortOrder}
-                    defaultSortOrder={defaultSortOrder}
-                    title={title}
-                    style={headerStyle}
-                    firstCell={i === 0}
-                    align={align}
-                    lastCell={i === props.children.length - 1}
-                  ></TableHeader>
-                </Col>
-              );
-            }
-            return null;
-          })}
-        </Row>
-      </div>
-    );
-  };
-
   const renderContent = useCallback(() => {
     if (!props.dataSource.length) {
       return (
@@ -190,14 +146,12 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
   return (
     <>
       <div className="seal-table-container">
-        {renderHeader()}
-        {/* {loading ? (
-          <div className="spin">
-            <Spin></Spin>
+        {
+          <div className="header-row-wrapper">
+            {renderHeaderPrefix()}
+            <Header onSort={onSort}>{children}</Header>
           </div>
-        ) : (
-          renderContent()
-        )} */}
+        }
 
         <Spin spinning={loading}>{renderContent()}</Spin>
       </div>