Table

Simple table with actions.

Rows can be selectable by making first column as a selectable column, to perform operations and clear selections after selecting some rows, all data strategy should be controlled by the developers.

Use nzSelections to custom selections.

Filter: Use [nzFilters] to define options of the filter menu, [nzFilterFn] to determine filtered result, and [nzFilterMultiple] to indicate whether it's multiple or single selection, you can enable a filter by default by setting a [nzFilters] object's property: { byDefault: true }.

Sort: Use [nzSortOrder] to make a column sorted by default, use [nzSortFn] to determine sort result, and [nzSortDirections] to define available sort methods.

Use [nzSortPriority] to config the priority of sort columns. Though [nzSortFn] to customize compare function.

Control sorters and filters by [nzSortOrder] and [nzFilters].

Implement a customized column search example via <nz-filter-trigger>.

This example shows how to fetch and present data from remote server, and how to implement filtering and sorting in server side by sending related parameters to server.

• Pagination：Set [nzFrontPagination]="false" to disable frontend pagination.
• Sort：Set [nzSortFn]="true" to enable server sort, if you need multiple sort, set [nzSortPriority]="true".
• Filter：Pass options to [nzFilters] and set [nzFilterFn]="true" to enable server filter.
• Params：Get all params from (nzQueryParams), the data structure is

{
  pageIndex: number;
  pageSize: number;
  sort: Array<{ key: string; value: 'ascend' | 'descend' | null }>;
  filter: Array<{ key: string; value: any | any[] }>;
}

Note, this example uses a Mock API that you can look up in Network Console.

Two compacted table size: middle and small, small size is used in Modal only.

Add border, title and footer for table.

When there's too much information to show and the table can't display all at once.

When using the nzExpand prop, add the nzExpandIcon custom expand icon.

Use colspan and rowspan like W3C standards <table>

Display tree structure data in Table, control the indent width by setting nzIndentSize.

Display large amounts of data in scrollable view via set y of [nzScroll], you can specify column width via [nzWidth].

To fix some columns and scroll inside other columns, and you must set [nzScroll].x, [nzLeft] and [nzRight] meanwhile.

Specify the [nzWidth] of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout. A fixed value which is greater than table width for nzScroll.x is recommended. The sum of unfixed columns should not greater than nzScroll.x. Note: We using sticky to implement fixed effect. IE 11 will downgrade to horizontal scroll.

Fixed header and column at the same time, a solution for displaying large amounts of data with long columns.

Specify the [nzWidth] of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout. A fixed value which is greater than table width for nzScroll.x is recommended. The sum of unfixed columns should not greater than nzScroll.x. Note: We using sticky to implement fixed effect. IE 11 will downgrade to horizontal scroll.

Group table head with fixed columns.

Table with editable cells.

In order to get better performance, all NG-ZORRO's components are running under OnPush mode, this means any mutate to the @Input() data won't trigger change detection, please use immutable way to update array or object.

User can refer to this example to customize the way of editing forms.

Table with editable rows.

In order to get better performance, all NG-ZORRO's components are running under OnPush mode, this means any mutate to the @Input() data won't trigger change detection, please use immutable way to update array or object.

User can refer to this example to customize the way of editing forms.

Showing more detailed info of every row.

Virtual scrolling combine with cdk scrolling used to display large data, you can get cdkVirtualScrollViewport in NzTableComponent and find more API here.

By using custom components, we can integrate table with @angular/cdk/drag-drop to implement drag sorting.

Note: Need to import { DragDropModule } from '@angular/cdk/drag-drop';

Template mode, same usage as table, there is no need to data to nzData.

Insert line breaks within words with nzBreakWord to prevent text from overflowing its content box

Ellipsis cell content via setting nzEllipsis and nzTableLayout="fixed".

can not working with sorter and filters for now

Set summary content by nzSummary prop. You can fixed it by set nzFixed prop.

Select different settings to see the result.

Control the display and ordering of columns in a table.