Библиотеки
TableAddons
qTableSave

Директива qTableSave

Директива qTableSave позволяет сохранять такие табличные настройки как: ширина столбцов и порядок столбцов, параметры пагинации, сортировка, параметры табличных фильтров.

С чего начать

Установите библиотеку

npm install @diasoft/qpalette-table-addons

Импортируйте модуль сохранения табличных настроек:

import { QTableSaveModule } from '@diasoft/qpalette-table-addons';
 
imports: [
  ...
  QTableSaveModule,
  ...
]

Встройте директиву в тег таблицы и укажите в ней необходимый табличный идентификатор:

Примеры

Сохранение настроек осуществляется для любого количества таблиц на странице. В качестве рабочих примеров таблиц с сохряющимися настройками ниже будут представлены три таблицы с различным функционалом.

Порядок и ширина столбцов

У данной таблицы есть функционал по изменению ширины стоблцов, а так же возможность их произвольного расположения. Попробуйте поменять порядок и ширину столбцов и перезагрузите страницу.

<p-table
qTableSave="reorderResizeTable"
[value]="productsReorder"
[columns]="cols"
[reorderableColumns]="true"
[resizableColumns]="true"
responsiveLayout="scroll"
>
<ng-template pTemplate="header" let-columns>
  <tr #tableHeader>
    <th style="width: 3rem"></th>
    <th *ngFor="let col of columns" pReorderableColumn pResizableColumn>
      { { col.header } }
    </th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
  <tr [pReorderableRow]="index">
    <td>
      <span class="pi pi-bars" [pReorderableRowHandle]="index"></span>
    </td>
    <td *ngFor="let col of columns">
      { { rowData[col.field] } }
    </td>
  </tr>
</ng-template>
</p-table>

Пагинация, фильтрация, сортировка

У данной таблицы есть функционал сортировки данных в столбцах, встроенные фильтры и пагинатор. Попробуйте поменять различные настройки и перезагрузите страницу.

<p-table
qTableSave="pagFilSortTable"
[value]="customersFilterMenu"
[rows]="3"
[reorderableColumns]="true"
styleClass="p-datatable-striped"
[showCurrentPageReport]="true"
[rowsPerPageOptions]="[1, 2, 3, 4, 5]"
[paginator]="true"
currentPageReportTemplate="Показано: с {first} по {last} из {totalRecords} строк"
>
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="name">
        <div class="p-d-flex p-jc-between p-ai-center">
          <p-sortIcon field="name"></p-sortIcon>
          Name
          <p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
        </div>
      </th>
      <th pSortableColumn="country.name">
        <div class="p-d-flex p-jc-between p-ai-center">
          <p-sortIcon field="country.name"></p-sortIcon>
          Country
          <p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
        </div>
      </th>
      <th>
        <div class="p-d-flex p-jc-between p-ai-center">
          Date
          <p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
        </div>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-customer>
    <tr>
      <td>
        { { customer.name } }
      </td>
      <td>
        <span class="image-text">{ { customer.country.name } }</span>
      </td>
      <td>
        { { customer.date | 'date: MM/dd/yyyy'} }
      </td>
    </tr>
  </ng-template>
  <ng-template pTemplate="emptymessage">
    <tr>
      <td colspan="7">No customers found.</td>
    </tr>
  </ng-template>
</p-table>

Toggle

У данной таблицы есть функционал включения/отключения столбцов с помощью toggle. Попробуйте выбрать нужные столбцы и перезагрузите страницу.

col.header

<p-table
  #toggledTable
  qTableSave="toggleTable"
  [toggledSelectedColumns]="toggledSelectedColumns$ | async"
  [columns]="selectedColumns"
  [value]="productsReorder"
  responsiveLayout="scroll"
>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        { { col.header } }
      </th>
      <th style="width: 8rem; text-align: right">
        <button
          (click)="tableMenu.toggle($event)"
          pButton
          type="button"
          icon="pi pi-sliders-v"
          class="p-button-text p-button-secondary p-button-sm"
        ></button>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        { { product[col.field] } }
      </td>
      <td class="">
        <div class="p-d-flex p-jc-end">
          <button
            (click)="clauseMenu.toggle($event)"
            pButton
            type="button"
            icon="pi pi-ellipsis-h"
            class="p-button-plain p-button-text p-button-sm"
          ></button>
        </div>
      </td>
    </tr>
  </ng-template>
</p-table>
 
<p-tieredMenu #tableMenu [model]="tableMenuItems" [popup]="true" appendTo="body"></p-tieredMenu>
 
<p-menu #clauseMenu [popup]="true" [model]="clauseMenuItems"></p-menu>
 
<p-dialog header="Отображение колонок" [(visible)]="colsToggle" [style]="{ width: '20rem' }" [contentStyle]="{ padding: '0' }">
  <p-listbox
    [options]="cols"
    [(ngModel)]="toggledTable.columns"
    (onChange)="onChangeToggle(toggledTable.columns)"
    [metaKeySelection]="false"
    [checkbox]="true"
    [filter]="true"
    [multiple]="true"
    optionLabel="name"
  >
    <ng-template let-col pTemplate="item">
      <div class="country-item">
        <div>{ { col.header } }</div>
      </div>
    </ng-template>
  </p-listbox>
</p-dialog>
qTableExportКнопка настройки таблицы