Skip to content

Commit d26870f

Browse files
OriginRingOriginRing
authored
feat(module:table): support display and sorting of custom table columns (#7966)
1 parent 4143473 commit d26870f

13 files changed

+607
-4
lines changed

‎components/table/demo/custom-column.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 31
3+
title:
4+
en-US: Custom Column
5+
zh-CN: 自定义列
6+
---
7+
8+
## zh-CN
9+
10+
控制表格中列的展示与排序
11+
12+
## en-US
13+
14+
Control the display and ordering of columns in a table.

‎components/table/demo/custom-column.ts

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
2+
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
3+
4+
import { NzCustomColumn } from 'ng-zorro-antd/table';
5+
6+
interface Person {
7+
key: string;
8+
name: string;
9+
gender: 'male' | 'female';
10+
age: number;
11+
address: string;
12+
}
13+
14+
interface CustomColumn extends NzCustomColumn {
15+
name: string;
16+
required?: boolean;
17+
position?: 'left' | 'right';
18+
}
19+
20+
@Component({
21+
selector: 'nz-demo-table-custom-column',
22+
template: `
23+
<button nz-button nzType="primary" nzSize="small" (click)="showModal()" style="margin-bottom: 8px;">
24+
<span nz-icon nzType="setting" nzTheme="outline"></span>
25+
</button>
26+
<nz-table #basicTable [nzData]="listOfData" [nzCustomColumn]="customColumn">
27+
<thead>
28+
<tr>
29+
<th nzCellControl="name">Name</th>
30+
<th nzCellControl="gender">Gender</th>
31+
<th nzCellControl="age">Age</th>
32+
<th nzCellControl="address">Address</th>
33+
<th nzCellControl="action">Action</th>
34+
</tr>
35+
</thead>
36+
<tbody>
37+
<tr *ngFor="let data of basicTable.data">
38+
<td nzCellControl="name">{{ data.name }}</td>
39+
<td nzCellControl="gender">{{ data.gender }}</td>
40+
<td nzCellControl="age">{{ data.age }}</td>
41+
<td nzCellControl="address">{{ data.address }}</td>
42+
<td nzCellControl="action">
43+
<a>Action</a>
44+
<nz-divider nzType="vertical"></nz-divider>
45+
<a>Delete</a>
46+
</td>
47+
</tr>
48+
</tbody>
49+
</nz-table>
50+
51+
<nz-modal [(nzVisible)]="isVisible" nzTitle="Custom Column" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
52+
<ng-container *nzModalContent>
53+
<div nz-row [nzGutter]="24">
54+
<div nz-col class="gutter-row" [nzSpan]="12">
55+
<div class="example-container">
56+
<p>Displayed (drag and drop to sort)</p>
57+
<div class="example-box" *ngFor="let item of title">
58+
{{ item.name }}
59+
</div>
60+
<div
61+
cdkDropList
62+
#todoList="cdkDropList"
63+
[cdkDropListData]="fix"
64+
[cdkDropListConnectedTo]="[doneList]"
65+
class="example-list"
66+
(cdkDropListDropped)="drop($event)"
67+
>
68+
<div class="example-box" *ngFor="let item of fix; let i = index" cdkDrag>
69+
{{ item.name }}
70+
<span nz-icon nzType="minus-circle" nzTheme="outline" (click)="deleteCustom(item, i)"></span>
71+
</div>
72+
</div>
73+
<div class="example-box" *ngFor="let item of footer">
74+
{{ item.name }}
75+
</div>
76+
</div>
77+
</div>
78+
<div nz-col class="gutter-row" [nzSpan]="12">
79+
<div class="example-container">
80+
<p>Not Shown</p>
81+
<div
82+
cdkDropList
83+
#doneList="cdkDropList"
84+
[cdkDropListData]="notFix"
85+
[cdkDropListConnectedTo]="[todoList]"
86+
class="example-list"
87+
(cdkDropListDropped)="drop($event)"
88+
>
89+
<div class="example-box" *ngFor="let item of notFix; let i = index" cdkDrag>
90+
{{ item.name }}
91+
<span nz-icon nzType="plus-circle" nzTheme="outline" (click)="addCustom(item, i)"></span>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
</ng-container>
98+
</nz-modal>
99+
`,
100+
styles: [
101+
`
102+
.example-container {
103+
height: 350px;
104+
display: flex;
105+
flex-direction: column;
106+
}
107+
108+
.example-list {
109+
min-height: 60px;
110+
border-radius: 4px;
111+
overflow-x: hidden;
112+
overflow-y: auto;
113+
display: block;
114+
border: 1px dashed #ccc;
115+
flex: 1 1 auto;
116+
}
117+
118+
.example-list > .example-box {
119+
cursor: move;
120+
}
121+
122+
.cdk-drag-preview {
123+
box-sizing: border-box;
124+
border-radius: 4px;
125+
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
126+
0 3px 14px 2px rgba(0, 0, 0, 0.12);
127+
}
128+
129+
.cdk-drag-placeholder {
130+
opacity: 0;
131+
}
132+
133+
.cdk-drag-animating {
134+
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
135+
}
136+
137+
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
138+
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
139+
}
140+
141+
.example-box {
142+
display: flex;
143+
flex-direction: row;
144+
justify-content: space-between;
145+
align-items: center;
146+
box-sizing: border-box;
147+
margin: 4px;
148+
padding: 4px 8px;
149+
background-color: rgb(0 112 204 / 15%);
150+
}
151+
152+
.example-box span {
153+
cursor: pointer;
154+
}
155+
`
156+
]
157+
})
158+
export class NzDemoTableCustomColumnComponent implements OnInit {
159+
listOfData: Person[] = [
160+
{
161+
key: '1',
162+
name: 'John Brown',
163+
gender: 'female',
164+
age: 32,
165+
address: 'New York No. 1 Lake Park'
166+
},
167+
{
168+
key: '2',
169+
name: 'Jim Green',
170+
gender: 'female',
171+
age: 42,
172+
address: 'London No. 1 Lake Park'
173+
},
174+
{
175+
key: '3',
176+
name: 'Joe Black',
177+
gender: 'male',
178+
age: 32,
179+
address: 'Sidney No. 1 Lake Park'
180+
}
181+
];
182+
183+
customColumn: CustomColumn[] = [
184+
{
185+
name: 'Name',
186+
value: 'name',
187+
default: true,
188+
required: true,
189+
position: 'left',
190+
width: 200,
191+
fixWidth: true
192+
},
193+
{
194+
name: 'Gender',
195+
value: 'gender',
196+
default: true,
197+
width: 200
198+
},
199+
{
200+
name: 'Address',
201+
value: 'address',
202+
default: true,
203+
width: 200
204+
},
205+
{
206+
name: 'Age',
207+
value: 'age',
208+
default: true,
209+
width: 200
210+
},
211+
{
212+
name: 'Action',
213+
value: 'action',
214+
default: true,
215+
required: true,
216+
position: 'right',
217+
width: 200
218+
}
219+
];
220+
221+
isVisible: boolean = false;
222+
title: CustomColumn[] = [];
223+
footer: CustomColumn[] = [];
224+
fix: CustomColumn[] = [];
225+
notFix: CustomColumn[] = [];
226+
227+
constructor(private cdr: ChangeDetectorRef) {}
228+
229+
ngOnInit(): void {
230+
this.title = this.customColumn.filter(item => item.position === 'left' && item.required);
231+
this.footer = this.customColumn.filter(item => item.position === 'right' && item.required);
232+
this.fix = this.customColumn.filter(item => item.default && !item.required);
233+
this.notFix = this.customColumn.filter(item => !item.default && !item.required);
234+
}
235+
236+
drop(event: CdkDragDrop<CustomColumn[]>): void {
237+
if (event.previousContainer === event.container) {
238+
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
239+
} else {
240+
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
241+
}
242+
this.fix = this.fix.map(item => {
243+
item.default = true;
244+
return item;
245+
});
246+
this.notFix = this.notFix.map(item => {
247+
item.default = false;
248+
return item;
249+
});
250+
this.cdr.markForCheck();
251+
}
252+
253+
deleteCustom(value: CustomColumn, index: number): void {
254+
value.default = false;
255+
this.notFix = [...this.notFix, value];
256+
this.fix.splice(index, 1);
257+
this.cdr.markForCheck();
258+
}
259+
260+
addCustom(value: CustomColumn, index: number): void {
261+
value.default = true;
262+
this.fix = [...this.fix, value];
263+
this.notFix.splice(index, 1);
264+
this.cdr.markForCheck();
265+
}
266+
267+
showModal(): void {
268+
this.isVisible = true;
269+
}
270+
271+
handleOk(): void {
272+
this.customColumn = [...this.title, ...this.fix, ...this.notFix, ...this.footer];
273+
this.isVisible = false;
274+
this.cdr.markForCheck();
275+
}
276+
277+
handleCancel(): void {
278+
this.isVisible = false;
279+
}
280+
}

‎components/table/demo/module

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
88
import { NzButtonModule } from 'ng-zorro-antd/button';
99
import { NzInputModule } from 'ng-zorro-antd/input';
1010
import { NzIconModule } from 'ng-zorro-antd/icon';
11+
import { NzModalModule } from 'ng-zorro-antd/modal';
12+
import { NzGridModule } from 'ng-zorro-antd/grid';
1113
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
1214

1315
export const moduleList = [
1416
NzTableModule,
17+
NzGridModule,
18+
NzModalModule,
1519
NzDividerModule,
1620
NzDropDownModule,
1721
NzSwitchModule,

‎components/table/doc/index.en-US.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula
6767
| `[nzData]` | Data record array to be rendered | `T[]` | - |
6868
| `[nzFrontPagination]` | Whether to paginate data on client. Should be set to `false` if data is to be paginated on server side or if all the data is to be displayed at once in the table without any pagination | `boolean` | `true` |
6969
| `[nzTotal]` | Total data count. Should set when `nzFrontPagination` is `false` | `number` | - |
70+
| `[nzCustomColumn]` | Control the display and sorting of table columns, (after enabling `nzWidthConfig` and `[nzWidth]` of `th` will not take effect) | `NzCustomColumn[]` | - |
7071
| `[nzPageIndex]` | pageIndex , double binding | `number` | - |
7172
| `[nzPageSize]` | pageSize, double binding | `number` | - |
7273
| `[nzShowPagination]` | Whether to show pagination component at bottom of the table | `boolean` | `true` |
@@ -98,6 +99,7 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula
9899
| `(nzPageIndexChange)` | Callback when `pageIndex` changes | `EventEmitter<number>` | - |
99100
| `(nzPageSizeChange)` | Callback when `pageSize` changes | `EventEmitter<number>` | - |
100101
| `(nzCurrentPageDataChange)` | Callback when current pageData changes | `EventEmitter<T[]>` | - |
102+
| `(nzCustomColumnChange)` | Callback when the table is reordered | `EventEmitter<NzCustomColumn[]>` | - |
101103
| `(nzQueryParams)` | Callback with params when working with server side pagination, sorting and filtering | `EventEmitter<NzTableQueryParams>` | - |
102104

103105
### th
@@ -150,6 +152,7 @@ Style property
150152
| `[nzLeft]` | Left pixels, used to fixed column to left, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - |
151153
| `[nzRight]` | Right pixels, used to fixed column to right, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - |
152154
| `[nzAlign]` | Specify how content is aligned | `'left' \| 'right' \| 'center'` | - |
155+
| `[nzCellControl]` | Set the position of the column, which is the value of the `value` field in the `NzCustomColumn` type | `string` | - |
153156
| `[nzBreakWord]` | Whether insert line breaks within words | `boolean` | `false` |
154157
| `[nzEllipsis]` | ellipsis cell content, not working with sorter and filters for now. Only work when nzTableLayout was `fixed` | `boolean` | `false` |
155158

@@ -190,6 +193,7 @@ Style property
190193
| `[nzLeft]` | Left pixels, used to fixed column to left, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - |
191194
| `[nzRight]` | Right pixels, used to fixed column to right, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - |
192195
| `[nzAlign]` | Specify how content is aligned | `'left' \| 'right' \| 'center'` | - |
196+
| `[nzCellControl]` | Set the position of the column, which is the value of the `value` field in the `NzCustomColumn` type | `string` | - |
193197
| `[nzBreakWord]` | Whether insert line breaks within words | `boolean` | `false` |
194198
| `[nzEllipsis]` | ellipsis cell content, not working with sorter and filters for now. Only work when nzTableLayout was `fixed` | `boolean` | `false` |
195199

‎components/table/doc/index.zh-CN.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ Table 组件同时具备了易用性和高度可定制性
6868
| `[nzData]` | 数据数组 | `T[]` | - |
6969
| `[nzFrontPagination]` | 是否在前端对数据进行分页，如果在服务器分页数据或者需要在前端显示全部数据时传入 false | `boolean` | `true` |
7070
| `[nzTotal]` | 当前总数据，在服务器渲染时需要传入 | `number` | - |
71+
| `[nzCustomColumn]` | 控制表格列的展示与排序，(开启后 `nzWidthConfig` 和 `th` 的 `[nzWidth]` 将不生效) | `NzCustomColumn[]` | - |
7172
| `[nzPageIndex]` | 当前页码，可双向绑定 | `number` | - |
7273
| `[nzPageSize]` | 每页展示多少数据，可双向绑定 | `number` | - |
7374
| `[nzShowPagination]` | 是否显示分页器 | `boolean` | `true` |
@@ -99,6 +100,7 @@ Table 组件同时具备了易用性和高度可定制性
99100
| `(nzPageIndexChange)` | 当前页码改变时的回调函数 | `EventEmitter<number>` | - |
100101
| `(nzPageSizeChange)` | 页数改变时的回调函数 | `EventEmitter<number>` | - |
101102
| `(nzCurrentPageDataChange)` | 当前页面展示数据改变的回调函数 | `EventEmitter<T[]>` | - |
103+
| `(nzCustomColumnChange)` | 当表格重新排序后的回调 | `EventEmitter<NzCustomColumn[]>` | - |
102104
| `(nzQueryParams)` | 当服务端分页、筛选、排序时，用于获得参数，具体见示例 | `EventEmitter<NzTableQueryParams>` | - |
103105

104106
### th
@@ -148,6 +150,7 @@ Table 组件同时具备了易用性和高度可定制性
148150
| `[nzLeft]` | 左侧距离，用于固定左侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` |
149151
| `[nzRight]` | 右侧距离，用于固定右侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` |
150152
| `[nzAlign]` | 设置列内容的对齐方式 | `'left' \| 'right' \| 'center'` | - |
153+
| `[nzCellControl]` | 设置列的位置，该值为 `NzCustomColumn` 类型中 `value` 字段的值 | `string` | - |
151154
| `[nzBreakWord]` | 是否折行显示 | `boolean` | `false` |
152155
| `[nzEllipsis]` | 超过宽度将自动省略，暂不支持和排序筛选一起使用。仅当表格布局将为 `nzTableLayout="fixed"`时可用 | `boolean` | `false` |
153156
| `[colSpan]` | 每单元格中扩展列的数量 | `number` | `null` |
@@ -190,6 +193,7 @@ Table 组件同时具备了易用性和高度可定制性
190193
| `[nzLeft]` | 左侧距离，用于固定左侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` |
191194
| `[nzRight]` | 右侧距离，用于固定右侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` |
192195
| `[nzAlign]` | 设置列内容的对齐方式 | `'left' \| 'right' \| 'center'` | - |
196+
| `[nzCellControl]` | 设置列的位置，该值为 `NzCustomColumn` 类型中 `value` 字段的值 | `string` | - |
193197
| `[nzBreakWord]` | 是否折行显示 | `boolean` | `false` |
194198
| `[nzEllipsis]` | 超过宽度将自动省略，暂不支持和排序筛选一起使用。仅当表格布局将为 `nzTableLayout="fixed"`时可用 | `boolean` | `false` |
195199

‎components/table/public-api.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export * from './src/table/title-footer.component';
2222
export * from './src/table/tr-measure.component';
2323
export * from './src/cell/cell-fixed.directive';
2424
export * from './src/cell/cell.directive';
25+
export * from './src/cell/custom-column.directive';
2526
export * from './src/cell/th-measure.directive';
2627
export * from './src/cell/td-addon.component';
2728
export * from './src/cell/th-selection.component';

0 commit comments

Comments
 (0)