improve(design): Remove pagination borderTop for bordered Table

oceanbase · Oct 23, 2023 · b2626ed · b2626ed
1 parent 9f1477b
commit b2626ed
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 5 deletions.
diff --git a/packages/design/src/table/demo/bordered.tsx b/packages/design/src/table/demo/bordered.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Table } from '@oceanbase/design';
+import type { ColumnsType } from '@oceanbase/design/es/table';
+
+interface DataType {
+  key: string;
+  name: string;
+  money: string;
+  address: string;
+}
+
+const columns: ColumnsType<DataType> = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    render: text => <a>{text}</a>,
+  },
+  {
+    title: 'Cash Assets',
+    className: 'column-money',
+    dataIndex: 'money',
+    align: 'right',
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+  },
+];
+
+const data: DataType[] = [
+  {
+    key: '1',
+    name: 'John Brown',
+    money: '￥300,000.00',
+    address: 'New York No. 1 Lake Park',
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    money: '￥1,256,000.00',
+    address: 'London No. 1 Lake Park',
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    money: '￥120,000.00',
+    address: 'Sydney No. 1 Lake Park',
+  },
+];
+
+const App: React.FC = () => (
+  <Table
+    columns={columns}
+    dataSource={data}
+    bordered
+    title={() => 'Header'}
+    footer={() => 'Footer'}
+  />
+);
+
+export default App;
diff --git a/packages/design/src/table/index.md b/packages/design/src/table/index.md
@@ -14,6 +14,8 @@ nav:
 
 <code src="./demo/basic.tsx" title="基本"></code>
 
+<code src="./demo/bordered.tsx" title="带边框" description="添加表格边框线"></code>
+
 <code src="./demo/fixed-columns-header-tables.tsx" title="固定头和列"></code>
 
 <code src="./demo/multiple-tables.tsx" title="选择和操作"></code>

diff --git a/packages/design/src/table/style/index.ts b/packages/design/src/table/style/index.ts
@@ -171,11 +171,6 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
             },
         },
       },
-      [`${componentCls}-pagination`]: {
-        [`&${antCls}-pagination`]: {
-          borderTop: 'none',
-        },
-      },
     },
 
     // 分页器样式
@@ -202,6 +197,14 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
           },
         },
       },
+      [`${componentCls}${componentCls}-bordered`]: {
+        [`&+${componentCls}-pagination`]: {
+          [`&${antCls}-pagination`]: {
+            // Remove pagination borderTop for bordered Table
+            borderTop: 'none',
+          },
+        },
+      },
     },
 
     // 批量操作栏中的弹出层样式