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

src/lib/components/data-table/data-table.component.ts

@@ -0,0 +1,94 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TableModule } from 'primeng/table';
+import { PrimeTemplate } from 'primeng/api';
+
+export interface DataTableColumn {
+  field?: string;
+  header?: string;
+  sortable?: boolean;
+  style?: string;
+  headerStyle?: string;
+  selectionMode?: 'single' | 'multiple';
+}
+
+@Component({
+  selector: 'data-table',
+  host: { style: 'display: block' },
+  standalone: true,
+  imports: [TableModule, PrimeTemplate],
+  template: `
+    <p-table
+      [value]="value"
+      [columns]="columns"
+      [stripedRows]="stripedRows"
+      [showGridlines]="showGridlines"
+      [loading]="loading"
+      [size]="size"
+      [scrollable]="scrollable"
+      [scrollHeight]="scrollHeight || undefined"
+      [paginator]="paginator"
+      [rows]="rows"
+      [rowsPerPageOptions]="rowsPerPageOptions.length ? rowsPerPageOptions : undefined"
+      [selectionMode]="selectionMode"
+      [selection]="selection"
+      (selectionChange)="selectionChange.emit($event)"
+      [dataKey]="dataKey"
+    >
+      <ng-template pTemplate="header" let-columns>
+        <tr>
+          @for (col of columns; track $index) {
+            @if (col.selectionMode === 'single') {
+              <th [style]="col.headerStyle || 'width: 3rem'"></th>
+            } @else if (col.selectionMode === 'multiple') {
+              <th [style]="col.headerStyle || 'width: 3rem'">
+                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+              </th>
+            } @else {
+              <th [pSortableColumn]="col.sortable ? col.field : null" [style]="col.headerStyle || ''">
+                {{ col.header }}
+                @if (col.sortable) {
+                  <p-sortIcon [field]="col.field"></p-sortIcon>
+                }
+              </th>
+            }
+          }
+        </tr>
+      </ng-template>
+
+      <ng-template pTemplate="body" let-rowData let-columns="columns">
+        <tr [pSelectableRow]="rowData">
+          @for (col of columns; track $index) {
+            @if (col.selectionMode === 'single') {
+              <td>
+                <p-tableRadioButton [value]="rowData"></p-tableRadioButton>
+              </td>
+            } @else if (col.selectionMode === 'multiple') {
+              <td>
+                <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
+              </td>
+            } @else {
+              <td [style]="col.style || ''">{{ rowData[col.field] }}</td>
+            }
+          }
+        </tr>
+      </ng-template>
+    </p-table>
+  `,
+})
+export class DataTableComponent {
+  @Input() value: any[] = [];
+  @Input() columns: DataTableColumn[] = [];
+  @Input() stripedRows = false;
+  @Input() showGridlines = false;
+  @Input() loading = false;
+  @Input() size: 'small' | 'large' | undefined = undefined;
+  @Input() scrollable = false;
+  @Input() scrollHeight = '';
+  @Input() paginator = false;
+  @Input() rows = 5;
+  @Input() rowsPerPageOptions: number[] = [5, 10, 25];
+  @Input() selectionMode: 'single' | 'multiple' | undefined = undefined;
+  @Input() selection: any = null;
+  @Output() selectionChange = new EventEmitter<any>();
+  @Input() dataKey = 'id';
+}

src/prime-preset/map-tokens.ts

@@ -4,6 +4,7 @@ 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'],
@@ -14,6 +15,10 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
       ...(tokens.components.button as unknown as ComponentsDesignTokens['button']),
       css: buttonCss,
     },
+    datatable: {
+      ...(tokens.components.datatable as unknown as ComponentsDesignTokens['datatable']),
+      css: dataTableCss,
+    },
   } as ComponentsDesignTokens,
 };
 

src/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')};
+  }
+`;