Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve(design): Table empty min-height set to 360px #818

Merged
merged 1 commit into from
Nov 11, 2024
Merged

improve(design): Table empty min-height set to 360px #818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 58 additions & 37 deletions packages/design/src/table/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -495,51 +495,72 @@ exports[`Table > default empty should work 1`] = `
colspan="3"
>
<div
class="ant-empty ant-empty-normal"
class="ant-table-empty-wrapper"
>
<div
class="ant-empty-image"
class="ant-empty ant-empty ant-empty-small"
>
<svg
height="41"
viewBox="0 0 64 41"
width="64"
xmlns="http://www.w3.org/2000/svg"
<div
class="ant-empty-image"
>
<title>
No data
</title>
<g
fill="none"
fill-rule="evenodd"
transform="translate(0 1)"
<svg
height="56px"
version="1.1"
viewBox="0 0 56 56"
width="56px"
xmlns="http://www.w3.org/2000/svg"
>
<ellipse
cx="32"
cy="33"
fill="#f5f5f5"
rx="32"
ry="7"
/>
<g
fill-rule="nonzero"
stroke="#d9d9d9"
fill="none"
fill-rule="evenodd"
stroke="none"
stroke-width="1"
>
<path
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
/>
<path
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
fill="#fafafa"
/>
<g
fill-rule="nonzero"
transform="translate(4.2, 4.2)"
>
<rect
fill="#CDD5E4"
height="29.176"
rx="4.03"
width="37.121"
x="5.495"
y="0"
/>
<rect
fill="#F8F8F8"
height="1.652"
rx="0.826"
width="25.046"
x="11.452"
y="5.257"
/>
<rect
fill="#F8F8F8"
height="1.652"
rx="0.826"
width="16.681"
x="11.452"
y="10.997"
/>
<path
d="M45.143,48.083 L2.821,48.083 C1.267,48.083 0,46.823 0,45.262 L0,21.028 C0,19.474 1.26,18.207 2.821,18.207 L19.264,18.207 C20.216,18.207 21.098,18.683 21.623,19.481 L23.149,21.798 C23.667,22.589 24.556,23.072 25.508,23.072 L45.15,23.072 C46.704,23.072 47.971,24.332 47.971,25.893 L47.971,45.262 C47.971,46.816 46.711,48.083 45.15,48.083 L45.143,48.083 Z"
fill="#F3F6FC"
/>
</g>
</g>
</g>
</svg>
</div>
<div
class="ant-empty-description"
>
No data
</svg>
</div>
<div
class="ant-empty-description"
>
<div
class="ant-empty-description-content"
>
No data
</div>
</div>
</div>
</div>
</td>
Expand Down
40 changes: 40 additions & 0 deletions packages/design/src/table/demo/empty.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';
import { Divider, Table } from '@oceanbase/design';

const App: React.FC = () => {
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
];

return (
<>
<Divider>Empty Table</Divider>
<Table columns={columns} dataSource={[]} />
<Divider>Nested Empty Table</Divider>
<Table
columns={columns}
expandable={{
expandedRowRender: () => <Table columns={columns} dataSource={[]} />,
defaultExpandedRowKeys: ['0'],
}}
dataSource={[{ key: '0', name: '胡彦斌', age: 32, address: `西湖区湖底公园` }]}
/>
</>
);
};

export default App;
2 changes: 2 additions & 0 deletions packages/design/src/table/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ nav:

<code src="./demo/card-table.tsx" title="和 Card 组合使用"></code>

<code src="./demo/empty.tsx" title="空状态"></code>

## API

| 参数 | 说明 | 类型 | 默认值 | 版本 |
Expand Down
16 changes: 14 additions & 2 deletions packages/design/src/table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type { ReactElement, ReactNode } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import ConfigProvider from '../config-provider';
import Typography from '../typography';
import Empty from '../empty';
import useStyle from './style';
import type { AnyObject } from '../_util/type';
import useDefaultPagination from './hooks/useDefaultPagination';
Expand Down Expand Up @@ -61,7 +62,11 @@ function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.R
const pagination = useDefaultPagination(customPagination);

const { getPrefixCls, locale, table } = useContext(ConfigProvider.ConfigContext);
const { batchOperationBar, ...restLocale } = {
const {
batchOperationBar,
emptyText = <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />,
...restLocale
} = {
...customLocale,
batchOperationBar: {
...enUS.Table?.batchOperationBar,
Expand Down Expand Up @@ -206,7 +211,14 @@ function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.R
ref={ref}
prefixCls={customizePrefixCls}
className={tableCls}
locale={restLocale}
locale={{
...restLocale,
emptyText: (
<div className={`${prefixCls}-empty-wrapper`}>
{typeof emptyText === 'function' ? emptyText() : emptyText}
</div>
),
}}
columns={newColumns}
rowSelection={
rowSelection
Expand Down
11 changes: 11 additions & 0 deletions packages/design/src/table/style/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,13 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
borderRadius: borderRadiusLG,
},
},
// empty wrapper style
[`${componentCls}-empty-wrapper`]: {
minHeight: 360,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
// 嵌套子表格样式
[`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
// 调整嵌套子表格的间距
Expand All @@ -100,6 +107,10 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
borderRadius: borderRadiusLG,
},
},
// empty wrapper style
[`${componentCls}-empty-wrapper`]: {
minHeight: 'auto',
},
},
},
},
Expand Down
Loading