data-table: стилизация, сторисы, обёртки

src/lib/providers/prime-preset/tokens/components/data-table.ts

@@ -0,0 +1,28 @@
+export const dataTableCss = ({ dt }: { dt: (token: string) => string }): string => `
+  .p-datatable .p-datatable-thead > tr > th {
+    font-weight: ${dt('datatable.columnTitle.fontWeight')};
+  }
+
+  .p-datatable .p-datatable-tfoot > tr > td {
+    font-weight: ${dt('datatable.columnFooter.fontWeight')};
+  }
+
+  .p-datatable .p-datatable-sort-icon {
+    width: ${dt('datatable.sortIcon.size')};
+    height: ${dt('datatable.sortIcon.size')};
+  }
+
+  .p-datatable .p-datatable-loading-icon {
+    width: ${dt('datatable.loadingIcon.size')};
+    height: ${dt('datatable.loadingIcon.size')};
+  }
+
+  .p-datatable .p-datatable-row-toggle-button {
+    width: ${dt('datatable.rowToggleButton.size')};
+    height: ${dt('datatable.rowToggleButton.size')};
+  }
+
+  .p-datatable .p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
+    color: ${dt('text.hoverColor')};
+  }
+`;

src/prime-preset/map-tokens.ts

@@ -0,0 +1,25 @@
+import { Preset } from '@primeuix/themes/types';
+import type { ComponentsDesignTokens } from '@primeuix/themes/types';
+import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
+
+import tokens from './tokens/tokens.json';
+import { buttonCss } from './tokens/components/button';
+import { dataTableCss } from './tokens/components/data-table';
+
+const presetTokens: Preset<AuraBaseDesignTokens> = {
+  primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
+  semantic: tokens.semantic as unknown as AuraBaseDesignTokens['semantic'],
+  components: {
+    ...(tokens.components as unknown as ComponentsDesignTokens),
+    button: {
+      ...(tokens.components.button as unknown as ComponentsDesignTokens['button']),
+      css: buttonCss,
+    },
+    datatable: {
+      ...(tokens.components.datatable as unknown as ComponentsDesignTokens['datatable']),
+      css: dataTableCss,
+    },
+  } as ComponentsDesignTokens,
+};
+
+export default presetTokens;

src/stories/components/p-data-table/examples/primeng-table-custom-body.component.ts

@@ -0,0 +1,134 @@
+import { Component } from '@angular/core';
+import { StoryObj, moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { TableModule } from 'primeng/table';
+import { TagModule } from 'primeng/tag';
+
+const SHIPMENTS = [
+  { id: 1, trackNumber: 'ЦД-00123456', destination: 'Москва', status: 'В пути', weight: 2.5, cost: 1200 },
+  { id: 2, trackNumber: 'ЦД-00123457', destination: 'Новосибирск', status: 'Доставлен', weight: 0.8, cost: 450 },
+  { id: 3, trackNumber: 'ЦД-00123458', destination: 'Екатеринбург', status: 'Задержан', weight: 5.2, cost: 2100 },
+  { id: 4, trackNumber: 'ЦД-00123459', destination: 'Казань', status: 'В пути', weight: 1.3, cost: 750 },
+  { id: 5, trackNumber: 'ЦД-00123460', destination: 'Краснодар', status: 'Доставлен', weight: 3.7, cost: 1800 },
+];
+
+@Component({
+  selector: 'app-primeng-table-custom-body',
+  standalone: true,
+  imports: [CommonModule, TableModule, TagModule],
+  template: `
+    <p-table [value]="shipments">
+      <ng-template pTemplate="header">
+        <tr>
+          <th pSortableColumn="trackNumber">Трек-номер <p-sortIcon field="trackNumber"></p-sortIcon></th>
+          <th pSortableColumn="destination">Назначение <p-sortIcon field="destination"></p-sortIcon></th>
+          <th pSortableColumn="status">Статус <p-sortIcon field="status"></p-sortIcon></th>
+          <th pSortableColumn="weight">Вес, кг <p-sortIcon field="weight"></p-sortIcon></th>
+          <th pSortableColumn="cost">Стоимость, ₽ <p-sortIcon field="cost"></p-sortIcon></th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-shipment>
+        <tr>
+          <td>{{ shipment.trackNumber }}</td>
+          <td>{{ shipment.destination }}</td>
+          <td>
+            <p-tag [value]="shipment.status" [severity]="getSeverity(shipment.status)"></p-tag>
+          </td>
+          <td>{{ shipment.weight }} кг</td>
+          <td><strong>{{ shipment.cost | currency:'RUB':'symbol':'1.0-0':'ru' }}</strong></td>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="emptymessage">
+        <tr><td colspan="5" class="text-center p-4">Нет данных для отображения</td></tr>
+      </ng-template>
+    </p-table>
+  `,
+})
+export class PDataTableCustomBodyComponent {
+  shipments = SHIPMENTS;
+
+  getSeverity(status: string): 'success' | 'warn' | 'danger' | 'info' | 'secondary' | undefined {
+    switch (status) {
+      case 'Доставлен': return 'success';
+      case 'В пути': return 'info';
+      case 'Задержан': return 'danger';
+      case 'Ожидание': return 'warn';
+      default: return 'secondary';
+    }
+  }
+}
+
+export const CustomBody: StoryObj = {
+  name: 'Custom Templates',
+  decorators: [moduleMetadata({ imports: [PDataTableCustomBodyComponent] })],
+  render: () => ({ template: `<app-primeng-table-custom-body></app-primeng-table-custom-body>` }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story: 'Кастомные шаблоны для заголовка и тела таблицы на базе PrimeNG pTable.',
+      },
+      source: {
+        language: 'ts',
+        code: `import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TableModule } from 'primeng/table';
+import { TagModule } from 'primeng/tag';
+
+const SHIPMENTS = [
+  { id: 1, trackNumber: 'ЦД-00123456', destination: 'Москва', status: 'В пути', weight: 2.5, cost: 1200 },
+  { id: 2, trackNumber: 'ЦД-00123457', destination: 'Новосибирск', status: 'Доставлен', weight: 0.8, cost: 450 },
+  { id: 3, trackNumber: 'ЦД-00123458', destination: 'Екатеринбург', status: 'Задержан', weight: 5.2, cost: 2100 },
+  { id: 4, trackNumber: 'ЦД-00123459', destination: 'Казань', status: 'В пути', weight: 1.3, cost: 750 },
+  { id: 5, trackNumber: 'ЦД-00123460', destination: 'Краснодар', status: 'Доставлен', weight: 3.7, cost: 1800 },
+];
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [CommonModule, TableModule, TagModule],
+  template: \`
+    <p-table [value]="shipments">
+      <ng-template pTemplate="header">
+        <tr>
+          <th pSortableColumn="trackNumber">Трек-номер <p-sortIcon field="trackNumber"></p-sortIcon></th>
+          <th pSortableColumn="destination">Назначение <p-sortIcon field="destination"></p-sortIcon></th>
+          <th pSortableColumn="status">Статус <p-sortIcon field="status"></p-sortIcon></th>
+          <th pSortableColumn="weight">Вес, кг <p-sortIcon field="weight"></p-sortIcon></th>
+          <th pSortableColumn="cost">Стоимость, ₽ <p-sortIcon field="cost"></p-sortIcon></th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-shipment>
+        <tr>
+          <td>{{ shipment.trackNumber }}</td>
+          <td>{{ shipment.destination }}</td>
+          <td>
+            <p-tag [value]="shipment.status" [severity]="getSeverity(shipment.status)"></p-tag>
+          </td>
+          <td>{{ shipment.weight }} кг</td>
+          <td><strong>{{ shipment.cost | currency:'RUB':'symbol':'1.0-0':'ru' }}</strong></td>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="emptymessage">
+        <tr><td colspan="5" class="text-center p-4">Нет данных для отображения</td></tr>
+      </ng-template>
+    </p-table>
+  \`,
+})
+export class ExampleComponent {
+  shipments = SHIPMENTS;
+
+  getSeverity(status: string): 'success' | 'warn' | 'danger' | 'info' | 'secondary' | undefined {
+    switch (status) {
+      case 'Доставлен': return 'success';
+      case 'В пути': return 'info';
+      case 'Задержан': return 'danger';
+      case 'Ожидание': return 'warn';
+      default: return 'secondary';
+    }
+  }
+}`,
+      },
+    },
+  },
+};

src/stories/components/p-data-table/examples/primeng-table-default.component.ts

@@ -0,0 +1,106 @@
+import { Component } from '@angular/core';
+import { StoryObj, moduleMetadata } from '@storybook/angular';
+import { TableModule } from 'primeng/table';
+
+const SHIPMENTS = [
+  { id: 1, trackNumber: 'ЦД-00123456', destination: 'Москва', status: 'В пути', weight: 2.5, cost: 1200 },
+  { id: 2, trackNumber: 'ЦД-00123457', destination: 'Новосибирск', status: 'Доставлен', weight: 0.8, cost: 450 },
+  { id: 3, trackNumber: 'ЦД-00123458', destination: 'Екатеринбург', status: 'Задержан', weight: 5.2, cost: 2100 },
+  { id: 4, trackNumber: 'ЦД-00123459', destination: 'Казань', status: 'В пути', weight: 1.3, cost: 750 },
+  { id: 5, trackNumber: 'ЦД-00123460', destination: 'Краснодар', status: 'Доставлен', weight: 3.7, cost: 1800 },
+  { id: 6, trackNumber: 'ЦД-00123461', destination: 'Воронеж', status: 'Ожидание', weight: 0.5, cost: 350 },
+  { id: 7, trackNumber: 'ЦД-00123462', destination: 'Самара', status: 'В пути', weight: 8.0, cost: 3200 },
+  { id: 8, trackNumber: 'ЦД-00123463', destination: 'Ростов-на-Дону', status: 'Доставлен', weight: 2.1, cost: 980 },
+];
+
+@Component({
+  selector: 'app-primeng-table-default',
+  standalone: true,
+  imports: [TableModule],
+  template: `
+    <p-table [value]="shipments">
+      <ng-template pTemplate="header">
+        <tr>
+          <th pSortableColumn="trackNumber">Трек-номер <p-sortIcon field="trackNumber"></p-sortIcon></th>
+          <th pSortableColumn="destination">Назначение <p-sortIcon field="destination"></p-sortIcon></th>
+          <th pSortableColumn="status">Статус <p-sortIcon field="status"></p-sortIcon></th>
+          <th pSortableColumn="weight">Вес, кг <p-sortIcon field="weight"></p-sortIcon></th>
+          <th pSortableColumn="cost">Стоимость, ₽ <p-sortIcon field="cost"></p-sortIcon></th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-shipment>
+        <tr>
+          <td>{{ shipment.trackNumber }}</td>
+          <td>{{ shipment.destination }}</td>
+          <td>{{ shipment.status }}</td>
+          <td>{{ shipment.weight }}</td>
+          <td>{{ shipment.cost }}</td>
+        </tr>
+      </ng-template>
+    </p-table>
+  `,
+})
+export class PDataTableDefaultComponent {
+  shipments = SHIPMENTS;
+}
+
+export const Default: StoryObj = {
+  name: 'DataTable',
+  decorators: [moduleMetadata({ imports: [PDataTableDefaultComponent] })],
+  render: () => ({ template: `<app-primeng-table-default></app-primeng-table-default>` }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story: 'Базовая таблица отправлений с сортировкой по всем столбцам на базе PrimeNG pTable.',
+      },
+      source: {
+        language: 'ts',
+        code: `import { Component } from '@angular/core';
+import { TableModule } from 'primeng/table';
+
+const SHIPMENTS = [
+  { id: 1, trackNumber: 'ЦД-00123456', destination: 'Москва', status: 'В пути', weight: 2.5, cost: 1200 },
+  { id: 2, trackNumber: 'ЦД-00123457', destination: 'Новосибирск', status: 'Доставлен', weight: 0.8, cost: 450 },
+  { id: 3, trackNumber: 'ЦД-00123458', destination: 'Екатеринбург', status: 'Задержан', weight: 5.2, cost: 2100 },
+  { id: 4, trackNumber: 'ЦД-00123459', destination: 'Казань', status: 'В пути', weight: 1.3, cost: 750 },
+  { id: 5, trackNumber: 'ЦД-00123460', destination: 'Краснодар', status: 'Доставлен', weight: 3.7, cost: 1800 },
+  { id: 6, trackNumber: 'ЦД-00123461', destination: 'Воронеж', status: 'Ожидание', weight: 0.5, cost: 350 },
+  { id: 7, trackNumber: 'ЦД-00123462', destination: 'Самара', status: 'В пути', weight: 8.0, cost: 3200 },
+  { id: 8, trackNumber: 'ЦД-00123463', destination: 'Ростов-на-Дону', status: 'Доставлен', weight: 2.1, cost: 980 },
+];
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TableModule],
+  template: \`
+    <p-table [value]="shipments">
+      <ng-template pTemplate="header">
+        <tr>
+          <th pSortableColumn="trackNumber">Трек-номер <p-sortIcon field="trackNumber"></p-sortIcon></th>
+          <th pSortableColumn="destination">Назначение <p-sortIcon field="destination"></p-sortIcon></th>
+          <th pSortableColumn="status">Статус <p-sortIcon field="status"></p-sortIcon></th>
+          <th pSortableColumn="weight">Вес, кг <p-sortIcon field="weight"></p-sortIcon></th>
+          <th pSortableColumn="cost">Стоимость, ₽ <p-sortIcon field="cost"></p-sortIcon></th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-shipment>
+        <tr>
+          <td>{{ shipment.trackNumber }}</td>
+          <td>{{ shipment.destination }}</td>
+          <td>{{ shipment.status }}</td>
+          <td>{{ shipment.weight }}</td>
+          <td>{{ shipment.cost }}</td>
+        </tr>
+      </ng-template>
+    </p-table>
+  \`,
+})
+export class ExampleComponent {
+  shipments = SHIPMENTS;
+}`,
+      },
+    },
+  },
+};

src/stories/components/p-data-table/examples/primeng-table-grid-lines.component.ts

@@ -0,0 +1,100 @@
+import { Component } from '@angular/core';
+import { StoryObj, moduleMetadata } from '@storybook/angular';
+import { TableModule } from 'primeng/table';
+
+const SHIPMENTS = [
+  { id: 1, trackNumber: 'ЦД-00123456', destination: 'Москва', status: 'В пути', weight: 2.5, cost: 1200 },
+  { id: 2, trackNumber: 'ЦД-00123457', destination: 'Новосибирск', status: 'Доставлен', weight: 0.8, cost: 450 },
+  { id: 3, trackNumber: 'ЦД-00123458', destination: 'Екатеринбург', status: 'Задержан', weight: 5.2, cost: 2100 },
+  { id: 4, trackNumber: 'ЦД-00123459', destination: 'Казань', status: 'В пути', weight: 1.3, cost: 750 },
+  { id: 5, trackNumber: 'ЦД-00123460', destination: 'Краснодар', status: 'Доставлен', weight: 3.7, cost: 1800 },
+];
+
+@Component({
+  selector: 'app-primeng-table-grid-lines',
+  standalone: true,
+  imports: [TableModule],
+  template: `
+    <p-table [value]="shipments" [showGridlines]="true">
+      <ng-template pTemplate="header">
+        <tr>
+          <th pSortableColumn="trackNumber">Трек-номер <p-sortIcon field="trackNumber"></p-sortIcon></th>
+          <th pSortableColumn="destination">Назначение <p-sortIcon field="destination"></p-sortIcon></th>
+          <th pSortableColumn="status">Статус <p-sortIcon field="status"></p-sortIcon></th>
+          <th pSortableColumn="weight">Вес, кг <p-sortIcon field="weight"></p-sortIcon></th>
+          <th pSortableColumn="cost">Стоимость, ₽ <p-sortIcon field="cost"></p-sortIcon></th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-shipment>
+        <tr>
+          <td>{{ shipment.trackNumber }}</td>
+          <td>{{ shipment.destination }}</td>
+          <td>{{ shipment.status }}</td>
+          <td>{{ shipment.weight }}</td>
+          <td>{{ shipment.cost }}</td>
+        </tr>
+      </ng-template>
+    </p-table>
+  `,
+})
+export class PDataTableGridLinesComponent {
+  shipments = SHIPMENTS;
+}
+
+export const GridLines: StoryObj = {
+  name: 'GridLines',
+  decorators: [moduleMetadata({ imports: [PDataTableGridLinesComponent] })],
+  render: () => ({ template: `<app-primeng-table-grid-lines></app-primeng-table-grid-lines>` }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story: 'Сетка между ячейками для наглядного разграничения данных на базе PrimeNG pTable.',
+      },
+      source: {
+        language: 'ts',
+        code: `import { Component } from '@angular/core';
+import { TableModule } from 'primeng/table';
+
+const SHIPMENTS = [
+  { id: 1, trackNumber: 'ЦД-00123456', destination: 'Москва', status: 'В пути', weight: 2.5, cost: 1200 },
+  { id: 2, trackNumber: 'ЦД-00123457', destination: 'Новосибирск', status: 'Доставлен', weight: 0.8, cost: 450 },
+  { id: 3, trackNumber: 'ЦД-00123458', destination: 'Екатеринбург', status: 'Задержан', weight: 5.2, cost: 2100 },
+  { id: 4, trackNumber: 'ЦД-00123459', destination: 'Казань', status: 'В пути', weight: 1.3, cost: 750 },
+  { id: 5, trackNumber: 'ЦД-00123460', destination: 'Краснодар', status: 'Доставлен', weight: 3.7, cost: 1800 },
+];
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TableModule],
+  template: \`
+    <p-table [value]="shipments" [showGridlines]="true">
+      <ng-template pTemplate="header">
+        <tr>
+          <th pSortableColumn="trackNumber">Трек-номер <p-sortIcon field="trackNumber"></p-sortIcon></th>
+          <th pSortableColumn="destination">Назначение <p-sortIcon field="destination"></p-sortIcon></th>
+          <th pSortableColumn="status">Статус <p-sortIcon field="status"></p-sortIcon></th>
+          <th pSortableColumn="weight">Вес, кг <p-sortIcon field="weight"></p-sortIcon></th>
+          <th pSortableColumn="cost">Стоимость, ₽ <p-sortIcon field="cost"></p-sortIcon></th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-shipment>
+        <tr>
+          <td>{{ shipment.trackNumber }}</td>
+          <td>{{ shipment.destination }}</td>
+          <td>{{ shipment.status }}</td>
+          <td>{{ shipment.weight }}</td>
+          <td>{{ shipment.cost }}</td>
+        </tr>
+      </ng-template>
+    </p-table>
+  \`,
+})
+export class ExampleComponent {
+  shipments = SHIPMENTS;
+}`,
+      },
+    },
+  },
+};