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

feat: 表格支持隐藏表头属性 #796

Merged
merged 3 commits into from
Mar 13, 2023
Merged

feat: 表格支持隐藏表头属性 #796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5bc5349
feat: 表格支持隐藏表头属性
midday Mar 13, 2023
84e8136
refactor: 将hideHeader改为showHeader，与antd对齐
midday Mar 13, 2023
7b06506
docs: showHeader属性添加关联版本号
midday Mar 13, 2023
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
10 changes: 10 additions & 0 deletions src/packages/table/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface T {
customCell: string
asynchronousRendering: string
sorting: string
hideHeader: string
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如沟通，建议属性名为：showHeader

}

interface TableColumnProps {
Expand All @@ -33,6 +34,7 @@ const TableDemo = () => {
summaryTitle: '显示总结栏',
summary: '这是总结栏',
striped: '条纹、明暗交替',
hideHeader: '隐藏表头',
noDataTitle: '无数据默认展示，支持自定义',
customNoData: '这里是自定义展示',
customCell: '自定义单元格',
Expand All @@ -45,6 +47,7 @@ const TableDemo = () => {
summaryTitle: 'Show summary bar',
summary: 'This is the summary column',
striped: 'Stripes, alternating light and shade',
hideHeader: 'Hide table header',
noDataTitle:
'No data is displayed by default, and customization is supported',
customNoData: 'Here is the custom display',
Expand Down Expand Up @@ -275,6 +278,13 @@ const TableDemo = () => {
style={{ background: '#fff' }}
striped
/>
<h2>{translated.hideHeader}</h2>
<Table
columns={columns1}
data={data1}
style={{ background: '#fff' }}
showHeader={false}
/>
<h2>{translated.noDataTitle}</h2>
<Table columns={columns1} data={data2} style={{ background: '#fff' }} />
<Table
Expand Down
10 changes: 10 additions & 0 deletions src/packages/table/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ interface T {
customCell: string
asynchronousRendering: string
sorting: string
hideHeader: string
}

const TableDemo = () => {
Expand All @@ -27,6 +28,7 @@ const TableDemo = () => {
summaryTitle: '显示总结栏',
summary: '这是总结栏',
striped: '条纹、明暗交替',
hideHeader: '隐藏表头',
noDataTitle: '无数据默认展示，支持自定义',
customNoData: '这里是自定义展示',
customCell: '自定义单元格',
Expand All @@ -39,6 +41,7 @@ const TableDemo = () => {
summaryTitle: 'Show summary bar',
summary: 'This is the summary column',
striped: 'Stripes, alternating light and shade',
hideHeader: 'Hide table header',
noDataTitle:
'No data is displayed by default, and customization is supported',
customNoData: 'Here is the custom display',
Expand Down Expand Up @@ -249,6 +252,13 @@ const TableDemo = () => {
style={{ background: '#fff' }}
striped
/>
<h2>{translated.hideHeader}</h2>
<Table
columns={columns1}
data={data1}
style={{ background: '#fff' }}
showHeader={false}
/>
<h2>{translated.noDataTitle}</h2>
<Table columns={columns1} data={data2} style={{ background: '#fff' }} />
<Table
Expand Down
66 changes: 66 additions & 0 deletions src/packages/table/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,71 @@ export default App;
```
:::

### Hide table header
:::demo
```tsx
import React, { useState } from "react";
import { Table } from '@nutui/nutui-react';

interface TableColumnProps {
key?: string
title?: string
align?: string
sorter?: ((a: any, b: any) => number) | boolean | string
render?: (rowData?: any, rowIndex?: number) => string | React.ReactNode
}

const App = () => {
const [columns1, setColumns1] = useState([
{
title: '姓名',
key: 'name',
},
{
title: '性别',
key: 'sex',
render: (record: any) => {
return (
<span style={{ color: record.sex === '女' ? 'blue' : 'green' }}>
{record.sex}
</span>
)
},
},
{
title: '学历',
key: 'record',
},
])

const [data1, setData1] = useState([
{
name: 'Tom',
sex: '男',
record: '小学',
},
{
name: 'Lucy',
sex: '女',
record: '本科',
},
{
name: 'Jack',
sex: '男',
record: '高中',
},
])

return <Table
columns={columns1}
data={data1}
showHeader={false}
/>;
};
export default App;
```
:::

### No data is displayed by default, and customization is supported
:::demo
```tsx
Expand Down Expand Up @@ -549,6 +614,7 @@ export default App;
| data | Table data | Object[] | `[]` |
| summary | Show profile | ReactNode | - |
| striped | Whether the stripes alternate light and dark | boolean | `false` |
| showHeader`v1.5.0` | Show Header | boolean | `true` |
| noData | Custom noData | ReactNode | - |

### TableColumnProps
Expand Down
66 changes: 66 additions & 0 deletions src/packages/table/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,71 @@ export default App;
```
:::

### 隐藏表头
:::demo
```tsx
import React, { useState } from "react";
import { Table } from '@nutui/nutui-react';

interface TableColumnProps {
key?: string
title?: string
align?: string
sorter?: ((a: any, b: any) => number) | boolean | string
render?: (rowData?: any, rowIndex?: number) => string | React.ReactNode
}

const App = () => {
const [columns1, setColumns1] = useState<Array<TableColumnProps>>([
{
title: '姓名',
key: 'name',
},
{
title: '性别',
key: 'sex',
render: (record: any) => {
return (
<span style={{ color: record.sex === '女' ? 'blue' : 'green' }}>
{record.sex}
</span>
)
},
},
{
title: '学历',
key: 'record',
},
])

const [data1, setData1] = useState([
{
name: 'Tom',
sex: '男',
record: '小学',
},
{
name: 'Lucy',
sex: '女',
record: '本科',
},
{
name: 'Jack',
sex: '男',
record: '高中',
},
])

return <Table
columns={columns1}
data={data1}
showHeader={false}
/>;
};
export default App;
```
:::

### 无数据默认展示，支持自定义
:::demo
```tsx
Expand Down Expand Up @@ -559,6 +624,7 @@ export default App;
| data | 表格数据 | Object[] | `[]` |
| summary | 是否显示简介 | ReactNode | - |
| striped | 条纹是否明暗交替 | boolean | `false` |
| showHeader`v1.5.0` | 是否显示表头 | boolean | `true` |
| noData | 自定义无数据 | ReactNode | - |

### TableColumnProps
Expand Down
66 changes: 66 additions & 0 deletions src/packages/table/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,71 @@ export default App;
```
:::

### 隐藏表头
:::demo
```tsx
import React, { useState } from "react";
import { Table } from '@nutui/nutui-react-taro';

interface TableColumnProps {
key?: string
title?: string
align?: string
sorter?: ((a: any, b: any) => number) | boolean | string
render?: (rowData?: any, rowIndex?: number) => string | React.ReactNode
}

const App = () => {
const [columns1, setColumns1] = useState<Array<TableColumnProps>>([
{
title: '姓名',
key: 'name',
},
{
title: '性别',
key: 'sex',
render: (record: any) => {
return (
<span style={{ color: record.sex === '女' ? 'blue' : 'green' }}>
{record.sex}
</span>
)
},
},
{
title: '学历',
key: 'record',
},
])

const [data1, setData1] = useState([
{
name: 'Tom',
sex: '男',
record: '小学',
},
{
name: 'Lucy',
sex: '女',
record: '本科',
},
{
name: 'Jack',
sex: '男',
record: '高中',
},
])

return <Table
columns={columns1}
data={data1}
showHeader={false}
/>;
};
export default App;
```
:::

### 无数据默认展示，支持自定义
:::demo
```tsx
Expand Down Expand Up @@ -558,6 +623,7 @@ export default App;
| data | 表格数据 | Object[] | `[]` |
| summary | 是否显示简介 | ReactNode | - |
| striped | 条纹是否明暗交替 | boolean | false |
| showHeader`v1.5.0` | 是否显示表头 | boolean | `true` |
| noData | 自定义无数据 | ReactNode | - |

### TableColumnProps
Expand Down
10 changes: 7 additions & 3 deletions src/packages/table/table.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const defaultProps = {
bordered: true,
striped: false,
noData: '无数据',
showHeader: true,
} as TableProps
export const Table: FunctionComponent<
Partial<TableProps> & React.HTMLAttributes<HTMLDivElement>
Expand All @@ -37,6 +38,7 @@ export const Table: FunctionComponent<
onSorter,
iconClassPrefix,
iconFontClassName,
showHeader,
...rest
} = {
...defaultProps,
Expand Down Expand Up @@ -146,9 +148,11 @@ export const Table: FunctionComponent<
'nut-table__main--striped': striped,
})}
>
<div className="nut-table__main__head">
<div className="nut-table__main__head__tr">{renderHeadCells()}</div>
</div>
{showHeader && (
<div className="nut-table__main__head">
<div className="nut-table__main__head__tr">{renderHeadCells()}</div>
</div>
)}
<div className="nut-table__main__body">{renderBoyTrs()}</div>
</div>
{summary && (
Expand Down
10 changes: 7 additions & 3 deletions src/packages/table/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const defaultProps = {
bordered: true,
striped: false,
noData: '无数据',
showHeader: true,
} as TableProps
export const Table: FunctionComponent<
Partial<TableProps> & React.HTMLAttributes<HTMLDivElement>
Expand All @@ -37,6 +38,7 @@ export const Table: FunctionComponent<
onSorter,
iconClassPrefix,
iconFontClassName,
showHeader,
...rest
} = {
...defaultProps,
Expand Down Expand Up @@ -146,9 +148,11 @@ export const Table: FunctionComponent<
'nut-table__main--striped': striped,
})}
>
<div className="nut-table__main__head">
<div className="nut-table__main__head__tr">{renderHeadCells()}</div>
</div>
{showHeader && (
<div className="nut-table__main__head">
<div className="nut-table__main__head__tr">{renderHeadCells()}</div>
</div>
)}
<div className="nut-table__main__body">{renderBoyTrs()}</div>
</div>
{summary && (
Expand Down
1 change: 1 addition & 0 deletions src/packages/table/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export interface BasicTableProps extends BasicComponent {
striped?: boolean
noData?: React.ReactNode
onSorter?: (item: TableColumnProps, data: Array<any>) => void
showHeader?: boolean
}

export interface TableColumnProps {
Expand Down