From 4f06ebcdd2b77dffdc0007a6e5510f9ba45c4f8b Mon Sep 17 00:00:00 2001
From: Katherine <katherine_15995@163.com>
Date: Tue, 29 Apr 2025 11:07:17 +0800
Subject: [PATCH] style: optimize subtable add button style and align paginator
 on the same row (#6790)

---
 .../antd/association-field/SubTable.tsx       | 71 +++++++++++--------
 1 file changed, 41 insertions(+), 30 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx b/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx
index 53225b028c..ace49b127e 100644
--- a/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx
@@ -70,6 +70,15 @@ const subTableContainer = css`
   .ant-table-thead .ant-table-cell {
     font-weight: normal;
   }
+  .ant-pagination {
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+  }
+  .ant-table-footer {
+    margin-top: 10px;
+    background: inherit;
+  }
 `;
 
 const tableClassName = css`
@@ -252,37 +261,39 @@ export const SubTable: any = observer(
                   locale={{
                     emptyText: <span> {field.editable ? t('Please add or select record') : t('No data')}</span>,
                   }}
+                  footer={() => (
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                      {field.editable && (
+                        <Space
+                          style={{
+                            gap: 15,
+                          }}
+                        >
+                          {allowAddnew !== false && (
+                            <Action.Link
+                              useAction={useSubTableAddNewProps}
+                              title={
+                                <Space style={{ gap: 2 }} className="nb-sub-table-addNew">
+                                  <PlusOutlined /> {t('Add new')}
+                                </Space>
+                              }
+                            />
+                          )}
+                          {allowSelectExistingRecord && (
+                            <Action.Link
+                              useAction={useSubTableSelectProps}
+                              title={
+                                <Space style={{ gap: 2 }}>
+                                  <ZoomInOutlined /> {t('Select record')}
+                                </Space>
+                              }
+                            />
+                          )}
+                        </Space>
+                      )}
+                    </div>
+                  )}
                 />
-                {field.editable && (
-                  <Space
-                    style={{
-                      position: 'relative',
-                      bottom: '0',
-                      gap: 15,
-                    }}
-                  >
-                    {allowAddnew !== false && (
-                      <Action.Link
-                        useAction={useSubTableAddNewProps}
-                        title={
-                          <Space style={{ gap: 2 }} className="nb-sub-table-addNew">
-                            <PlusOutlined /> {t('Add new')}
-                          </Space>
-                        }
-                      />
-                    )}
-                    {allowSelectExistingRecord && (
-                      <Action.Link
-                        useAction={useSubTableSelectProps}
-                        title={
-                          <Space style={{ gap: 2 }}>
-                            <ZoomInOutlined /> {t('Select record')}
-                          </Space>
-                        }
-                      />
-                    )}
-                  </Space>
-                )}
               </SubFormProvider>
             </FormActiveFieldsProvider>
           </CollectionRecordProvider>