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

Директива qTableExport

Директива qTableExport позволяет выгрузить данные из таблицы в формате excel.

С чего начать

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

npm install @diasoft/qpalette-table-addons

Импортируйте модуль дрективы:

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

Встройте директиву в тег таблицы и укажите в ней API, в которой хранятся данные для таблицы:

Использование

Для скачивания данных существует два способа:

  1. Горячие клавиши Alt + P

  2. По кнопке
    Реализация данного способа зависит от выбранной настройки скачивания данных, которые рассмотренны в разделе Настройка -> Скачивание по кнопке

Настройка

Фильтры

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

ДляqteSearchParamsнеобходимо передать объект, где ключ - наименование фильтра таблицы, значение - подготовленные http-параметры.

export class customersTable {
 
  filters = {
    name: 'ci(contains(тест))',
    systemName: 'ci(contains(qd))',
    sort: 'changeDate,desc',
    page: 0
  }
 
}

Максимальное количество

Для установки максимального количества данных, которое может экспортировать пользователь, необходимо передать выбранное количество свойствуqteMaxTotalRecordsForExport. По умолчанию данное значение равно 500.

Необходимо отметить, что при увеличении данного параметра, нагрузка на приложение находится в ответственности разработчика.

Выбор стобцов

Для выбора выгружаемых столбцов, необходимо передать массив с их наименованиями свойствуqteCurrentCols.

{{ colsNamesExample }}

Поскольку лежащая в основе библиотека не принимает вложенные данные, то директива преобразует их вJSON.

Кастомизация

Самотоятельно подготовленные или кастомизированные данные готовые к экспорту необходимо передать свойствуqteCurrentCols. Формат данных должен представлять массив простых объектов, где ключ - это наименование столбца, а значение является простым типом.

{{ colsDataExample }}

Экспорт по кнопке

Для скачивания по кнопке, необходимо использовать метод директивы export(). Если вы передаёте катомизированные данные, то они сразу экспортируются, без показа диалогового окна.

{{ exportButtonTemplateExample }}

Если вы передаёте катомизированные данные через свойствоqteCurrentCols, то они сразу экспортируются, без показа диалогового окна.

Пример

<p-card
    styleClass="projects-card p-card--no-padding p-card--no-border p-mb-0"
    *ngIf="{
      table: (tableData$ | async),
      loading: (isLoading$ | async)
    } as data"
  >
  <ng-template pTemplate="header">
    <div class="q-header p-ai-center p-mb-0 p-p-3">
      <h1 class="q-header__title p-pl-0">Проекты</h1>
    </div>
    <div class="q-header__filter-wrapper">
      <form class="projects__filters q-flex q-flex--gap-1" [formGroup]="filtersForm">
        <q-filter-wrapper label="Наименование:">
          <input pInputText type="text" formControlName="name"/>
        </q-filter-wrapper>
        <q-filter-wrapper label="Автор:">
          <input pInputText type="text" formControlName="author"/>
        </q-filter-wrapper>
      </form>
 
      <div class="projects__actions">
        <button
          pButton
          class="p-button-text p-button-secondary p-button-icon-only p-button-tiny"
          icon="pi pi-cloud-upload"
          pTooltip="Выгрузить"
          tooltipPosition="left"
          (click)="download()"
        ></button>
      </div>
    </div>
  </ng-template>
  <div class="full-view">
    <div class="full-view__container">
      <div class="table-wrapper">
        <p-table
          #table
          qTableExport="{ { api } }"
          [customFilters]="filtersForm.valueChanges | async"
          responsiveLayout="scroll"
          styleClass="p-datatable-unstriped"
          scrollHeight="flex"
          [lazy]="true"
          [loading]="data.loading ?? false"
          [value]="data.table?.data ?? []"
          [rows]="rows"
          [rowsPerPageOptions]="[5, 10, 30, 50]"
          [scrollable]="true"
          [columns]="columns"
          [paginator]="true"
          [totalRecords]="data.table?.totalItems ?? 0"
          (onLazyLoad)="loadData($event)"
        >
          <ng-template pTemplate="header">
            <tr>
              <th [pSortableColumn]="column.field" *ngFor="let column of columns">
                <span>{ { column.header } }</span>
                <p-sortIcon *ngIf="column.field !== 'systemName'" [field]="column.field"
                            [style.margin-left]="'.5rem'"></p-sortIcon>
                <p-columnFilter *ngIf="column.field === 'systemName'" type="text" field="systemName" display="menu"
                                [showOperator]="false" [showAddButton]="false"
                                [style.margin-left]="'.5rem'"></p-columnFilter>
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-project>
            <tr class="table-body">
              <td *ngFor="let column of columns">
                <span *ngIf="column.field !== 'changeDate'">{ { project[column.field] ?? "" } }</span>
              </td>
            </tr>
          </ng-template>
          <ng-template pTemplate="paginatorleft">
            <div class="flex align-items-center justify-content-between">
              Итого: { { data.table?.totalItems ?? 0 } } записей.
            </div>
          </ng-template>
        </p-table>
      </div>
    </div>
  </div>
</p-card>
MindElixirqTableSave