@geom_team/ngx-page-table
v0.0.3
Published
基于ng-zorro-antd table组件开发的分页表格组件，内置排序、筛选、分页、编辑单元格等功能，支持配置式生成表格列，提供page-table-column 等组件，用以支持自定义配置相关功能。简化在ng-zorro-antd table组件在angular项目中的使用
Downloads
4
Readme
NgxPageTable
基于ng-zorro-antd table组件开发的分页表格组件，内置排序、筛选、分页、编辑单元格等功能，支持配置式生成表格列，提供page-table-column 等组件，用以支持自定义配置相关功能。简化在ng-zorro-antd table组件在angular项目中的使用
安装
# use npm
npm install @geom_team/ngx-page-table
# use yarn
yarn add @geom_team/ngx-page-table
import { NgxPageTableModule } from '@geom_team/ngx-page-table';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxPageTableModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
基本用法
<ngx-page-table [tableData]="tableData" [tableColumns]="tableColumns" [paginationConfig]="paginationConfig"
[tableConfig]="tableConfig"
[virtualConfig]="virtualConfig"
(pageSizeChange)="onPageSizeChange($event)"
(pageIndexChange)="onPageIndexChange($event)"
(currentPageDataChange)="onPageDataChange($event)"
(queryParamsChange)="onQueryParamsChange($event)"
(sortChange)="onSortChange($event)"
(filterChange)="onFilterChange($event)"
(selectionChange)="onSelectionChange($event)"
(editComplete)="onEditComplete($event)"
(selectAllChange)="onSelectAllChange($event)"
>
</ngx-page-table>export class TableDemoComponent {
tableData: Array<any> = mockTableData;
tableColumns: Array<ITableColumn<any>> = mockTableColumns;
paginationConfig: IPagination = {
pageIndex: 1,
pageSize: 10,
total: 0,
show: true,
showSizeChanger: true
}; // 分页配置
tableConfig: ITableConfig = {
loading: false,
title: '',
noResult: 'noResultTemplate',
scroll: {x: 1620 +'px', y: '460px'},
showSelection: true,
showOperation: true,
showRowSelection: false,
size: 'small',
border: true,
outerBorder: true
}; // 表格配置
virtualConfig = {
virtualItemSize: 0,
virtualMaxBufferPx: 100,
virtualMinBufferPx: 500,
virtualForTrackBy: VirtualForTrackBy
}, // 虚拟滚动配置
constructor(private cdr: ChangeDetectorRef) {
}
onPageSizeChange(size: number) {
console.log('onPageSizeChange size:', size);
}
onPageIndexChange(page: number) {
console.log('onPageIndexChange page:', page);
}
onPageDataChange(data: Array<any>) {
console.log('onPageDataChange data:', data);
}
onQueryParameterChange(params: any) {
console.log('onQueryParameterChange params:', params);
}
onSortChange($event) {
console.log('onSortChange $event:', $event);
}
onFilterChange($event) {
console.log('onFilterChange $event:', $event);
}
onSelectionChange($event) {
console.log('onSelectionChange $event:', $event);
}
onEditComplete($event) {
console.log('onEditComplete $event:', $event);
}
onSelectAllChange($event) {
console.log('onSelectAllChange $event:', $event);
}
}
自定义组件
自定义列
使用 page-table-column 组件自定义列
<ngx-page-table [tableData]="tableData" [tableColumns]="tableColumns" [paginationConfig]="paginationConfig"
[tableConfig]="tableConfig"
[virtualConfig]="virtualConfig"
>
<page-table-column label="ID" key="key" align="center" [showOverflowTooltip]="true" [width]="65">
<ng-template let-row>
<td nzAlign="center">
<button nz-button class="temporary_storage">
{{row['key']}}
</button>
</td>
</ng-template>
</page-table-column>
<page-table-column label="操作" key="operation" type="operation">
<ng-template let-listData>
<td> <a (click)="handleDetails(listData)">详情</a></td>
</ng-template>
</page-table-column>
</ngx-page-table>export class TableDemoComponent {
tableData: Array<any> = mockTableData;
tableColumns: Array<ITableColumn<any>> = mockTableColumns;
paginationConfig: IPagination = {
pageIndex: 1,
pageSize: 10,
total: 0,
show: true,
showSizeChanger: true
}; // 分页配置
tableConfig: ITableConfig = {
loading: false,
title: '',
noResult: 'noResultTemplate',
scroll: {x: 1620 +'px', y: '460px'},
showSelection: true,
showOperation: true,
showRowSelection: false,
size: 'small',
border: true,
outerBorder: true
}; // 表格配置
virtualConfig = {
virtualItemSize: 0,
virtualMaxBufferPx: 100,
virtualMinBufferPx: 500,
virtualForTrackBy: VirtualForTrackBy
}, // 虚拟滚动配置
constructor(private cdr: ChangeDetectorRef) {
}
handleDetails(data) {
console.log("handleDetails", data);
}
}自定义title, footer, noResult, total
可通过两种方式定义表格title, footer, noResult, total
使用组件
page-table-title 组件自定义title, page-table-footer 组件自定义footer, page-table-no-result 组件自定义noResult, page-table-total 组件自定义total
<ngx-page-table [tableData]="tableData" [tableColumns]="tableColumns" [paginationConfig]="paginationConfig"
[tableConfig]="tableConfig"
[virtualConfig]="virtualConfig"
>
<!-- 自定义title -->
<page-table-title>
<ng-template>
<div nz-row>
<div nz-col nzSpan="12">
<span>tableTitle</span>
</div>
<div nz-col nzSpan="12">
<button nz-button nzType="primary" (click)="console.log('aaa')">表格title</button>
</div>
</div>
</ng-template>
</page-table-title>
<!-- 自定义表格列 -->
<page-table-column label="ID" key="key" align="center" [showOverflowTooltip]="true" [width]="65">
<ng-template let-listData>
<td nzAlign="center">
<button nz-button class="temporary_storage">
{{listData['key']}}
</button>
</td>
</ng-template>
</page-table-column>
<page-table-column label="操作" key="operation" type="operation">
<ng-template let-listData>
<td> <a (click)="handleDetails(listData)">详情</a></td>
</ng-template>
</page-table-column>
<!-- 自定义total -->
<page-table-total>
<ng-template let-total>
共{{total}} 条
</ng-template>
</page-table-total>
<!-- 自定义footer -->
<page-table-footer>
<ng-template>
<div nz-row>
<div nz-col nzSpan="12">
<button nz-button nzType="danger">页脚</button>
</div>
</div>
</ng-template>
</page-table-footer>
</ngx-page-table>使用配置项
通过tableConfig.title 配置表格title, 优先级低于 page-table-title组件
tableConfig.footer 配置表格footer, 优先级低于 page-table-footer组件
tableConfig.noResult 配置表格无数据时显示的模板, 优先级低于 page-table-no-result组件
paginationConfig.total 配置分页器total, 优先级低于 page-table-total组件
<ngx-page-table [tableData]="tableData" [tableColumns]="tableColumns" [paginationConfig]="paginationConfig"
[tableConfig]="tableConfig"
[virtualConfig]="virtualConfig"
>
<page-table-column label="ID" key="key" align="center" [showOverflowTooltip]="true" [width]="65">
<ng-template let-listData>
<td nzAlign="center">
<button nz-button class="temporary_storage">
{{listData['key']}}
</button>
</td>
</ng-template>
</page-table-column>
<page-table-column label="操作" key="operation" type="operation">
<ng-template let-listData>
<td> <a (click)="handleDetails(listData)">详情</a></td>
</ng-template>
</page-table-column>
</ngx-page-table>
<ng-template #title>
<div>title</div>
</ng-template>
<ng-template #noResult>
<div>无数据</div>
</ng-template>
<ng-template #totalRef let-total>
<div>{{total}} 条</div>
</ng-template>export class TableDemoComponent {
@ViewChild('title') templateTitle: TemplateRef<void> | null = null;
@ViewChild('footer') templateFooter: TemplateRef<void> | null = null;
@ViewChild('noResult') templateNoResult: TemplateRef<void> | null = null;
@ViewChild('totalRef') templateTotal: TemplateRef<{ $implicit: number; range: [number, number]}> | null = null;
tableData: Array<any> = mockTableData;
tableColumns: Array<ITableColumn<any>> = mockTableColumns;
paginationConfig: IPagination = {
pageIndex: 1,
pageSize: 10,
total: 0,
show: true,
showSizeChanger: true
}; // 分页配置
tableConfig: ITableConfig = {
loading: false,
title: '',
noResult: 'noResultTemplate',
scroll: {x: 1620 +'px', y: '460px'},
showSelection: true,
showOperation: true,
showRowSelection: false,
size: 'small',
border: true,
outerBorder: true
}; // 表格配置
virtualConfig = {
virtualItemSize: 0,
virtualMaxBufferPx: 100,
virtualMinBufferPx: 500,
virtualForTrackBy: VirtualForTrackBy
}, // 虚拟滚动配置
constructor(private cdr: ChangeDetectorRef) {
}
handleDetails(data) {
console.log("handleDetails", data);
}
ngAfterViewInit() {
this.tableConfig.title = this.templateTitle ;
this.tableConfig.footer = this.templateFooter;
this.tableConfig.noResult = this.templateNoResult;
this.paginationConfig.totalRef = this.templateTotal;
}
}API
tableData
tableData 为数组，则为前端分页，tableData 为Observable，则为后端分页
tableConfig
| 参数 | 说明 | 类型 | 默认值 | 备注 | | --- | --- | --- | --- | --- | | rowKey | 表格数据索引字段key | string | 'id' | | | frontPagination | 是否前端分页 | boolean | true | tableData 类型为Array时，默认为true, tableData 类型为Observable时，默认为false | |initFetchData | 后端分页时，是否初始化就请求数据 | boolean | false | | | border | 是否带有纵向边框 | boolean | false | | | outerBorder | 是否带有外边框 | boolean | false | | | size | 表格大小 | string | 'default' | 可选值：default,middle,small | | loading | 是否显示加载中效果 | boolean | false | | | loadingIndicator | 加载中自定义内容 | TemplateRef | | | loadingDelay | 加载延迟时间 | number | 0 | | | scroll | 表格滚动区域 | { x: string, y: string } | | | title | 表格标题 | string | TemplateRef | null | | | | footer | 表格页脚 | string | TemplateRef | null | | | | noResult | 无数据时显示内容 | string | TemplateRef | null | | | | dataPath | 后端分页时，从请求结果中获取数据的路径 | string | null | null | eg: res: { data: {data: {list: [], total: 10}}, meta: {}} => 'data.data.list' | | totalPath | 后端分页时，从请求结果中获取数据的总数 | string | null | null | eg: res: { data: {data: {list: [], total: 10}}, meta: {}} => 'data.data.total' | | showSelection | 是否显示筛选列 | boolean | false | | | showOperation | 是否显示操作列 | boolean | false | | | showRowSelection | 是否显示全选按钮 | boolean | false | | | selections | 自定义表头筛选项 | Array | [] | | | dragSort | 是否开启拖拽排序 | boolean | false | | | showSelectAll | 是否显示跨页全选按钮 | boolean | false | |
paginationConfig
| 属性 | 说明 | 类型 | 默认值 | 备注 | | --- | --- | --- | --- | --- | | show | 是否显示分页器 | boolean | true | | position | 分页器位置 | 'top' | 'bottom' | 'both' | 'bottom' | | size | 分页器大小 | 'default' | 'small' | 'default' | | pageSizeOptions | 每页显示条目数可选项 | number[] | [10, 20, 30, 40, 50] | | showSizeChanger | 是否可以改变每页显示多少条 | boolean | false | | showQuickJumper | 是否可以快速跳转至某页 | boolean | false | | showTotal | 是否显示total | boolean | false | | totalRef | 自定义total模板 | TemplateRef | null | | hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false| null| | simple | 使用简单模式 | boolean | false | | | total | 分页总数 | number | 0 | | pageSize | 每页显示条目数 | number | 10 | | pageIndex | 当前页数 | number| 1 |
virtualConfig
虚拟滚动配置
| 属性 | 说明 | 类型 | 默认值 | 备注 | | --- | --- | --- | --- | --- | | virtualItemSize | 虚拟滚动时每一列的高度 | number | 0 |与 cdk itemSize 相同 | | virtualMaxBufferPx | 缓冲区最大像素高度 | number | 100 | 与 cdk maxBufferPx 相同 | | virtualMinBufferPx | 缓冲区最小像素高度 | number | 500 | 低于该值时将加载新结构，与 cdk minBufferPx 相同 | | virtualForTrackBy | 虚拟滚动时，用于跟踪数据的唯一标识 | TrackByFunction | null | 与 cdk virtualForTrackBy 相同 |
tableColumn
表格列配置
| 属性 | 说明 | 类型 | 默认值 | 备注 | | --- | --- | --- | --- | --- | | key | 列索引 | string | '' | | type | 列类型 | string | undefined | 可选： 'selection' | 'operation' | | label | 列标题 | string | '' | | width | 列宽度 | number | undefined | | fixed | 列固定位置 | 'left' | 'right' | undefined | undefined | type ="selection" 自动固定在左侧，type="operation" 自动固定在右侧 | | align | 列对齐方式 | 'left' | 'center' | 'right' | 'left' | | breakWord | 是否换行 | boolean | false | | ellipsis | 是否省略 | boolean | false | | showOverflowTooltip | 列内容过长时是否显示tooltip | boolean | false | | sortOrder | 默认排序顺序 | 'ascend' | 'descend' | null | null | | sortDirections | 可以进行排序的顺序 | 'ascend' | 'descend' | null | null | | showSort | 是否显示排序图标 | boolean | false | | showFilter | 是否显示筛选图标 | boolean | false | | sortFn | 排序函数 | Function | null | | filterFn | 筛选函数 | Function | null | | filterMultiple | 过滤器是否多选 | boolean | true | | listOfFilter | 筛选列表 | Array<{ text: string; value: string; disabled?: boolean }> | null | | formatter | 格式化函数 | Function | null | | render | 自定义渲染模板 | TemplateRef | null | | colSpan | 列合并数 | number | 1 | | rowSpan | 行合并数 | number | 1 | | lineClamp | 默认显示行数 | number | 1 | 超过指定行数显示省略号 | | sortPriority | 排序优先级 | number | 0 | | editable | 单元格是否可编辑 | boolean | false |
event
| 事件名 | 说明 | 回调参数 | 备注 | | --- | --- | --- | --- | | pageSizeChange | 每页显示条数改变 | (size: number) | | pageIndexChange | 当前页改变 | (index: number) | | currentPageDataChange | 当前页数据改变 | (data: any[]) | | queryParamsChange | 查询参数改变 | (params: any) | | sortChange | 排序改变 | ({order: any, field: ITableColumn}) | | filterChange | 过滤条件改变 | ({filter: any, field: ITableColumn}) | | selectionChange | 选中项改变 | (selectedId: Set, selectedData: any[]) | | editComplete | 单元格编辑完成 | (data: any) | 当前编辑的数据项 | | selectAllChange | 跨页全选改变 | ({selectAll: boolean, selectedId: Set, selectedData: any[]}) |