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(module:table): use nzCustomColumn to hide columns without using width and flex css property #8891

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat(module:table): use nzCustomColumn to hide columns without using width and flex css property #8891

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
035db2d
feat(module:table): mode hide only for nzCustomColumn (no flex css)
tmpi-fr Nov 22, 2024
61a8003
docs(module:table): doc for hide column only for nzCustomColumn
tmpi-fr Nov 22, 2024
be5694b
docs(module:table): changed component and selector name
tmpi-fr Jan 16, 2025
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
14 changes: 14 additions & 0 deletions components/table/demo/hidden-column.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
order: 32
title:
en-US: Hidden Column
zh-CN: 隐藏栏
---

## zh-CN

仅控制表中列的可见性

## en-US

Control only the visibility of columns in a table without using flex css property.
92 changes: 92 additions & 0 deletions components/table/demo/hidden-column.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { NzHiddenColumn, NzTableModule } from 'ng-zorro-antd/table';

interface Person {
key: string;
name: string;
gender: 'male' | 'female';
age: number;
address: string;
}

@Component({
selector: 'nz-demo-table-hidden-column',
standalone: true,
imports: [NzCheckboxModule, NzTableModule, FormsModule],
template: `
<nz-table #basicTable [nzData]="listOfData" [nzTitle]="tableTitle" [nzCustomColumn]="customColumn">
<thead>
<tr>
<th nzCellControl="name">Name</th>
<th nzCellControl="gender">Gender</th>
<th nzCellControl="age">Age</th>
<th nzCellControl="address">Address</th>
</tr>
</thead>
<tbody>
@for (data of basicTable.data; track data) {
<tr>
<td nzCellControl="name">{{ data.name }}</td>
<td nzCellControl="gender">{{ data.gender }}</td>
<td nzCellControl="age">{{ data.age }}</td>
<td nzCellControl="address">{{ data.address }}</td>
</tr>
}
</tbody>
</nz-table>
<ng-template #tableTitle>
<label nz-checkbox [(ngModel)]="checked" (ngModelChange)="onCheckedChange()">Hide age column</label>
</ng-template>
`
})
export class NzDemoTableHiddenColumnComponent {
listOfData: Person[] = [
{
key: '1',
name: 'John Brown',
gender: 'female',
age: 32,
address: 'New York No. 1 Lake Park'
},
{
key: '2',
name: 'Jim Green',
gender: 'female',
age: 42,
address: 'London No. 1 Lake Park'
},
{
key: '3',
name: 'Joe Black',
gender: 'male',
age: 32,
address: 'Sidney No. 1 Lake Park'
}
];

checked = false;
customColumn: NzHiddenColumn[] = [];

constructor() {}

onCheckedChange(): void {
if (this.checked) {
this.customColumn = [
{
value: 'age',
hidden: true
}
];
} else {
this.customColumn = [
{
value: 'age',
hidden: false
}
];
}
}
}
8 changes: 4 additions & 4 deletions components/table/doc/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula
| `[nzData]` | Data record array to be rendered | `T[]` | - |
| `[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` |
| `[nzTotal]` | Total data count. Should set when `nzFrontPagination` is `false` | `number` | - |
| `[nzCustomColumn]` | Control the display and sorting of table columns, (after enabling `nzWidthConfig` and `[nzWidth]` of `th` will not take effect) | `NzCustomColumn[]` | - |
| `[nzCustomColumn]` | Control the display and sorting of table columns, (after enabling `nzWidthConfig` and `[nzWidth]` of `th` will not take effect) | `NzCustomColumn[] \| NzHiddenColumn[]` | - |
| `[nzPageIndex]` | pageIndex , double binding | `number` | - |
| `[nzPageSize]` | pageSize, double binding | `number` | - |
| `[nzShowPagination]` | Whether to show pagination component at bottom of the table | `boolean` | `true` |
Expand Down Expand Up @@ -100,7 +100,7 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula
| `(nzPageIndexChange)` | Callback when `pageIndex` changes | `EventEmitter<number>` | - |
| `(nzPageSizeChange)` | Callback when `pageSize` changes | `EventEmitter<number>` | - |
| `(nzCurrentPageDataChange)` | Callback when current pageData changes | `EventEmitter<T[]>` | - |
| `(nzCustomColumnChange)` | Callback when the table is reordered | `EventEmitter<NzCustomColumn[]>` | - |
| `(nzCustomColumnChange)` | Callback when the table is reordered | `EventEmitter<NzCustomColumn[] \| NzHiddenColumn[]>` | - |
| `(nzQueryParams)` | Callback with params when working with server side pagination, sorting and filtering | `EventEmitter<NzTableQueryParams>` | - |

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

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

Expand Down
26 changes: 17 additions & 9 deletions components/table/src/cell/custom-column.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,24 @@
if (item.length) {
item.forEach((v, i) => {
if (v.value === this.nzCellControl) {
if (!v.default) {
this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
if ('default' in v) {
if (!v.default) {
this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
} else {
this.renderer.setStyle(this.el.nativeElement, 'display', 'block');
}
this.renderer.setStyle(this.el.nativeElement, 'order', i);
if (!v?.fixWidth) {
this.renderer.setStyle(this.el.nativeElement, 'flex', `1 1 ${v.width}px`);
} else {

Check warning on line 41 in components/table/src/cell/custom-column.directive.ts

View check run for this annotation

Codecov / codecov/patch

components/table/src/cell/custom-column.directive.ts#L41 

Added line #L41 was not covered by tests
this.renderer.setStyle(this.el.nativeElement, 'flex', `1 0 ${v.width}px`);
}
} else {
this.renderer.setStyle(this.el.nativeElement, 'display', 'block');
}
this.renderer.setStyle(this.el.nativeElement, 'order', i);
if (!v?.fixWidth) {
this.renderer.setStyle(this.el.nativeElement, 'flex', `1 1 ${v.width}px`);
} else {
this.renderer.setStyle(this.el.nativeElement, 'flex', `1 0 ${v.width}px`);
if (v.hidden) {
this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
} else {

Check warning on line 47 in components/table/src/cell/custom-column.directive.ts

View check run for this annotation

Codecov / codecov/patch

components/table/src/cell/custom-column.directive.ts#L47 

Added line #L47 was not covered by tests
this.renderer.removeStyle(this.el.nativeElement, 'display');
}
}
}
});
Expand Down
5 changes: 3 additions & 2 deletions components/table/src/table-data.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { debounceTime, distinctUntilChanged, filter, map, skip, switchMap, takeU

import {
NzCustomColumn,
NzHiddenColumn,
NzTableFilterFn,
NzTableFilterValue,
NzTableQueryParams,
Expand All @@ -23,7 +24,7 @@ export class NzTableDataService<T> implements OnDestroy {
private frontPagination$ = new BehaviorSubject<boolean>(true);
private pageSize$ = new BehaviorSubject<number>(10);
private listOfData$ = new BehaviorSubject<readonly T[]>([]);
listOfCustomColumn$ = new BehaviorSubject<NzCustomColumn[]>([]);
listOfCustomColumn$ = new BehaviorSubject<NzCustomColumn[] | NzHiddenColumn[]>([]);
pageIndexDistinct$ = this.pageIndex$.pipe(distinctUntilChanged());
pageSizeDistinct$ = this.pageSize$.pipe(distinctUntilChanged());
listOfCalcOperator$ = new BehaviorSubject<
Expand Down Expand Up @@ -129,7 +130,7 @@ export class NzTableDataService<T> implements OnDestroy {
updateListOfData(list: readonly T[]): void {
this.listOfData$.next(list);
}
updateListOfCustomColumn(list: NzCustomColumn[]): void {
updateListOfCustomColumn(list: NzCustomColumn[] | NzHiddenColumn[]): void {
this.listOfCustomColumn$.next(list);
}
constructor() {}
Expand Down
5 changes: 5 additions & 0 deletions components/table/src/table.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,9 @@ export interface NzCustomColumn {
fixWidth?: boolean;
}

export interface NzHiddenColumn {
value: string;
hidden: boolean;
}

export type NzTableSummaryFixedType = 'top' | 'bottom';
7 changes: 4 additions & 3 deletions components/table/src/table/table.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import { NzTableDataService } from '../table-data.service';
import { NzTableStyleService } from '../table-style.service';
import {
NzCustomColumn,
NzHiddenColumn,
NzTableLayout,
NzTablePaginationPosition,
NzTablePaginationType,
Expand Down Expand Up @@ -146,7 +147,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'table';
host: {
class: 'ant-table-wrapper',
'[class.ant-table-wrapper-rtl]': 'dir === "rtl"',
'[class.ant-table-custom-column]': `nzCustomColumn.length`
'[class.ant-table-custom-column]': `nzCustomColumn.length && nzCustomColumn[0].hidden === undefined`
},
imports: [
NzSpinComponent,
Expand Down Expand Up @@ -178,7 +179,7 @@ export class NzTableComponent<T> implements OnInit, OnDestroy, OnChanges, AfterV
@Input() nzTotal = 0;
@Input() nzWidthConfig: ReadonlyArray<string | null> = [];
@Input() nzData: readonly T[] = [];
@Input() nzCustomColumn: NzCustomColumn[] = [];
@Input() nzCustomColumn: NzCustomColumn[] | NzHiddenColumn[] = [];

@Input() nzPaginationPosition: NzTablePaginationPosition = 'bottom';
@Input() nzScroll: { x?: string | null; y?: string | null } = { x: null, y: null };
Expand All @@ -200,7 +201,7 @@ export class NzTableComponent<T> implements OnInit, OnDestroy, OnChanges, AfterV
@Output() readonly nzPageIndexChange = new EventEmitter<number>();
@Output() readonly nzQueryParams = new EventEmitter<NzTableQueryParams>();
@Output() readonly nzCurrentPageDataChange = new EventEmitter<readonly T[]>();
@Output() readonly nzCustomColumnChange = new EventEmitter<readonly NzCustomColumn[]>();
@Output() readonly nzCustomColumnChange = new EventEmitter<readonly NzCustomColumn[] | NzHiddenColumn[]>();

/** public data for ngFor tr */
public data: readonly T[] = [];
Expand Down
Loading
Loading