diff --git a/packages/design/src/table/demo/bordered.tsx b/packages/design/src/table/demo/bordered.tsx new file mode 100644 index 000000000..273747904 --- /dev/null +++ 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 = [ + { + title: 'Name', + dataIndex: 'name', + render: text => {text}, + }, + { + 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 = () => ( + 'Header'} + footer={() => 'Footer'} + /> +); + +export default App; diff --git a/packages/design/src/table/index.md b/packages/design/src/table/index.md index 77eb5ad05..ff107580d 100644 --- a/packages/design/src/table/index.md +++ b/packages/design/src/table/index.md @@ -14,6 +14,8 @@ nav: + + diff --git a/packages/design/src/table/style/index.ts b/packages/design/src/table/style/index.ts index f2394e2b4..f6c763d60 100644 --- a/packages/design/src/table/style/index.ts +++ b/packages/design/src/table/style/index.ts @@ -171,11 +171,6 @@ export const genTableStyle: GenerateStyle = (token: TableToken): CSS }, }, }, - [`${componentCls}-pagination`]: { - [`&${antCls}-pagination`]: { - borderTop: 'none', - }, - }, }, // 分页器样式 @@ -202,6 +197,14 @@ export const genTableStyle: GenerateStyle = (token: TableToken): CSS }, }, }, + [`${componentCls}${componentCls}-bordered`]: { + [`&+${componentCls}-pagination`]: { + [`&${antCls}-pagination`]: { + // Remove pagination borderTop for bordered Table + borderTop: 'none', + }, + }, + }, }, // 批量操作栏中的弹出层样式