feat(table): add samples

projects/demo/src/app/components-example/table/table-appearances-example/table-appearances-example.component.html

@@ -0,0 +1,26 @@
+<div class="flex flex-col gap-8 w-full">
+  <div class="grid gap-2">
+    <span>{{ "EXAMPLES.TABLE.APPEARANCES.CONTENT.LINE_DIVISION" | translate }}</span>
+    <ids-table appearance="line-division" [columnDefs]="_columnDefs" [dataSource]="_dataSource">
+      <ng-template let-value="cellValue" idsCellTemplate="translateHeader">
+        {{ value | translate }}
+      </ng-template>
+    </ids-table>
+  </div>
+  <div class="grid gap-2">
+    <span>{{ "EXAMPLES.TABLE.APPEARANCES.CONTENT.ZEBRA" | translate }}</span>
+    <ids-table appearance="zebra" [columnDefs]="_columnDefs" [dataSource]="_dataSource">
+      <ng-template let-value="cellValue" idsCellTemplate="translateHeader">
+        {{ value | translate }}
+      </ng-template>
+    </ids-table>
+  </div>
+  <div class="grid gap-2">
+    <span>{{ "EXAMPLES.TABLE.APPEARANCES.CONTENT.PLAIN" | translate }}</span>
+    <ids-table appearance="plain" [columnDefs]="_columnDefs" [dataSource]="_dataSource">
+      <ng-template let-value="cellValue" idsCellTemplate="translateHeader">
+        {{ value | translate }}
+      </ng-template>
+    </ids-table>
+  </div>
+</div>

projects/demo/src/app/components-example/table/table-appearances-example/table-appearances-example.component.ts

@@ -0,0 +1,24 @@
+import { TABLE_EXAMPLE_INTL_PROVIDER } from '../table-example-intl';
+import {
+  createTableExampleColumnDefs,
+  TABLE_EXAMPLE_ROWS,
+} from '../table-example.utils';
+
+import { Component } from '@angular/core';
+import { IdsTableCellTemplateDirective, IdsTableComponent } from '@i-cell/ids-angular/table';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-table-appearances-example',
+  imports: [
+    IdsTableComponent,
+    IdsTableCellTemplateDirective,
+    TranslateModule,
+  ],
+  templateUrl: './table-appearances-example.component.html',
+  viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER],
+})
+export class TableAppearancesExampleComponent {
+  protected readonly _columnDefs = createTableExampleColumnDefs();
+  protected readonly _dataSource = TABLE_EXAMPLE_ROWS;
+}

projects/demo/src/app/components-example/table/table-basic-example/table-basic-example.component.html

@@ -0,0 +1,5 @@
+<ids-table [columnDefs]="_columnDefs" [dataSource]="_dataSource">
+  <ng-template let-value="cellValue" idsCellTemplate="translateHeader">
+    {{ value | translate }}
+  </ng-template>
+</ids-table>

projects/demo/src/app/components-example/table/table-basic-example/table-basic-example.component.ts

@@ -0,0 +1,24 @@
+import { TABLE_EXAMPLE_INTL_PROVIDER } from '../table-example-intl';
+import {
+  createTableExampleColumnDefs,
+  TABLE_EXAMPLE_ROWS,
+} from '../table-example.utils';
+
+import { Component } from '@angular/core';
+import { IdsTableCellTemplateDirective, IdsTableComponent } from '@i-cell/ids-angular/table';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-table-basic-example',
+  imports: [
+    IdsTableComponent,
+    IdsTableCellTemplateDirective,
+    TranslateModule,
+  ],
+  templateUrl: './table-basic-example.component.html',
+  viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER],
+})
+export class TableBasicExampleComponent {
+  protected readonly _columnDefs = createTableExampleColumnDefs();
+  protected readonly _dataSource = TABLE_EXAMPLE_ROWS;
+}

projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.html

@@ -0,0 +1,20 @@
+<ids-table [columnDefs]="_columnDefs" [dataSource]="_dataSource">
+  <ng-template let-value="cellValue" idsCellTemplate="translateHeader">
+    {{ value | translate }}
+  </ng-template>
+
+  <ng-template let-value="cellValue" idsCellTemplate="nameHeader">
+    <span class="table-custom-cell-templates__header">
+      <ids-icon fontIcon="person" />
+      {{ value | translate }}
+    </span>
+  </ng-template>
+  <strong *idsCellTemplate="'nameCell'; let row" class="table-custom-cell-templates__name">{{ row.name }}</strong>
+
+  <ng-template let-value="cellValue" idsCellTemplate="statusHeader">
+    <span class="table-custom-cell-templates__header table-custom-cell-templates__header--status">
+      {{ value | translate }}
+    </span>
+  </ng-template>
+  <span *idsCellTemplate="'statusCell'; let row" [class]="_statusClass(row)">{{ row.status }}</span>
+</ids-table>

projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.scss

@@ -0,0 +1,23 @@
+.table-custom-cell-templates__header {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 600;
+
+  &--status {
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+}
+
+.table-custom-cell-templates__name {
+  font-weight: 600;
+}
+
+.table-custom-cell-templates__status--active {
+  color: var(--ids-color-success, #2e7d32);
+}
+
+.table-custom-cell-templates__status--inactive {
+  color: var(--ids-color-on-surface-variant, #666);
+}

projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.ts

@@ -0,0 +1,45 @@
+import { TABLE_EXAMPLE_INTL_PROVIDER } from '../table-example-intl';
+import {
+  createTableExampleColumnDefs,
+  TABLE_EXAMPLE_ROWS,
+  TableExampleRow,
+} from '../table-example.utils';
+
+import { Component } from '@angular/core';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+import { IdsTableCellTemplateDirective, IdsTableComponent } from '@i-cell/ids-angular/table';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-table-custom-cell-templates-example',
+  imports: [
+    IdsIconComponent,
+    IdsTableComponent,
+    IdsTableCellTemplateDirective,
+    TranslateModule,
+  ],
+  templateUrl: './table-custom-cell-templates-example.component.html',
+  styleUrl: './table-custom-cell-templates-example.component.scss',
+  viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER],
+})
+export class TableCustomCellTemplatesExampleComponent {
+  protected readonly _columnDefs = createTableExampleColumnDefs().map((col) => {
+    if (col.id === 'name') {
+      return { ...col, headerCellRenderer: 'nameHeader', cellRenderer: 'nameCell' };
+    }
+
+    if (col.id === 'status') {
+      return { ...col, headerCellRenderer: 'statusHeader', cellRenderer: 'statusCell' };
+    }
+
+    return col;
+  });
+
+  protected readonly _dataSource = TABLE_EXAMPLE_ROWS;
+
+  protected _statusClass(row: TableExampleRow): string {
+    return row.status === 'Active'
+      ? 'table-custom-cell-templates__status--active'
+      : 'table-custom-cell-templates__status--inactive';
+  }
+}

projects/demo/src/app/components-example/table/table-empty-state-example/table-empty-state-example.component.html

@@ -0,0 +1,6 @@
+<ids-table [columnDefs]="_columnDefs" [dataSource]="_dataSource">
+  <ng-template let-value="cellValue" idsCellTemplate="translateHeader">
+    {{ value | translate }}
+  </ng-template>
+  <div idsNoRowsToShow>{{ "EXAMPLES.TABLE.EMPTY_STATE.CONTENT.NO_ROWS" | translate }}</div>
+</ids-table>

projects/demo/src/app/components-example/table/table-empty-state-example/table-empty-state-example.component.ts

@@ -0,0 +1,21 @@
+import { TABLE_EXAMPLE_INTL_PROVIDER } from '../table-example-intl';
+import { createTableExampleColumnDefs, TableExampleRow } from '../table-example.utils';
+
+import { Component } from '@angular/core';
+import { IdsTableCellTemplateDirective, IdsTableComponent } from '@i-cell/ids-angular/table';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-table-empty-state-example',
+  imports: [
+    IdsTableCellTemplateDirective,
+    IdsTableComponent,
+    TranslateModule,
+  ],
+  templateUrl: './table-empty-state-example.component.html',
+  viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER],
+})
+export class TableEmptyStateExampleComponent {
+  protected readonly _columnDefs = createTableExampleColumnDefs();
+  protected readonly _dataSource: TableExampleRow[] = [];
+}

projects/demo/src/app/components-example/table/table-example-intl.ts

@@ -0,0 +1,28 @@
+import { TableExampleRow } from './table-example.utils';
+
+import { DestroyRef, inject, Injectable } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IdsTableColumnDef, IdsTableIntl } from '@i-cell/ids-angular/table';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable()
+export class TableExampleIntl extends IdsTableIntl<TableExampleRow> {
+  private readonly _translate = inject(TranslateService);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  constructor() {
+    super();
+    this._translate.onLangChange.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+      this.changes.next();
+    });
+  }
+
+  public override getColLabel(colDef: IdsTableColumnDef<TableExampleRow>): string {
+    return colDef.label ? this._translate.instant(colDef.label) : '';
+  }
+}
+
+export const TABLE_EXAMPLE_INTL_PROVIDER = {
+  provide: IdsTableIntl,
+  useClass: TableExampleIntl,
+};

projects/demo/src/app/components-example/table/table-example.utils.ts

@@ -0,0 +1,163 @@
+import { compare } from '@i-cell/ids-angular/core';
+import {
+  IdsTableColumnDef,
+  IdsTableRequestFactory,
+  IdsTableSortDirection,
+} from '@i-cell/ids-angular/table';
+import { delay, of } from 'rxjs';
+
+export const TABLE_EXAMPLE_SERVER_SIDE_PAGE_SIZE = 5;
+export const TABLE_EXAMPLE_SERVER_SIDE_DELAY_MS = 1000;
+
+export const TABLE_EXAMPLE_HEADER_RENDERER = 'translateHeader';
+
+export interface TableExampleRow {
+  name: string;
+  role: string;
+  status: string;
+  score: number;
+  description: string;
+}
+
+export const TABLE_EXAMPLE_ROWS: TableExampleRow[] = [
+  {
+    name: 'Alice',
+    role: 'Admin',
+    status: 'Active',
+    score: 92,
+    description: 'Team lead with full access to all modules.',
+  },
+  {
+    name: 'Bob',
+    role: 'Editor',
+    status: 'Active',
+    score: 85,
+    description: 'Can edit content and review submissions.',
+  },
+  {
+    name: 'Carol',
+    role: 'Viewer',
+    status: 'Inactive',
+    score: 71,
+    description: 'Read-only access to published content.',
+  },
+];
+
+export const TABLE_EXAMPLE_SCROLL_ROWS: TableExampleRow[] = [
+  ...TABLE_EXAMPLE_ROWS,
+  {
+    name: 'David',
+    role: 'Editor',
+    status: 'Active',
+    score: 88,
+    description: 'Reviews and publishes weekly content updates.',
+  },
+  {
+    name: 'Eva',
+    role: 'Admin',
+    status: 'Active',
+    score: 95,
+    description: 'Manages user accounts and permissions.',
+  },
+  {
+    name: 'Frank',
+    role: 'Viewer',
+    status: 'Active',
+    score: 76,
+    description: 'Monitors dashboards and reports.',
+  },
+  {
+    name: 'Grace',
+    role: 'Editor',
+    status: 'Inactive',
+    score: 82,
+    description: 'Former content editor on extended leave.',
+  },
+  {
+    name: 'Henry',
+    role: 'Viewer',
+    status: 'Active',
+    score: 69,
+    description: 'Read-only access for audit purposes.',
+  },
+  {
+    name: 'Ivy',
+    role: 'Admin',
+    status: 'Active',
+    score: 91,
+    description: 'Coordinates team onboarding workflows.',
+  },
+  {
+    name: 'Jack',
+    role: 'Editor',
+    status: 'Active',
+    score: 87,
+    description: 'Maintains documentation and release notes.',
+  },
+];
+
+export function createTableExampleColumnDefs(): IdsTableColumnDef<TableExampleRow>[] {
+  return [
+    {
+      id: 'name',
+      label: 'EXAMPLES.TABLE.COMMON.COL_NAME',
+      headerCellRenderer: TABLE_EXAMPLE_HEADER_RENDERER,
+      field: 'name',
+      identifier: true,
+      sortable: true,
+    },
+    {
+      id: 'role',
+      label: 'EXAMPLES.TABLE.COMMON.COL_ROLE',
+      headerCellRenderer: TABLE_EXAMPLE_HEADER_RENDERER,
+      field: 'role',
+    },
+    {
+      id: 'status',
+      label: 'EXAMPLES.TABLE.COMMON.COL_STATUS',
+      headerCellRenderer: TABLE_EXAMPLE_HEADER_RENDERER,
+      field: 'status',
+    },
+    {
+      id: 'score',
+      label: 'EXAMPLES.TABLE.COMMON.COL_SCORE',
+      headerCellRenderer: TABLE_EXAMPLE_HEADER_RENDERER,
+      field: 'score',
+      cellRenderer: 'numeric',
+      sortable: true,
+    },
+  ];
+}
+
+export function createTableExampleServerSideRequestFactory(
+  rows: TableExampleRow[] = TABLE_EXAMPLE_SCROLL_ROWS,
+  defaultPageSize = TABLE_EXAMPLE_SERVER_SIDE_PAGE_SIZE,
+): IdsTableRequestFactory<TableExampleRow> {
+  return (paginationData, sortInfo) => {
+    const pageSize = paginationData?.rows ?? defaultPageSize;
+    const page = paginationData?.page ?? 1;
+    const result = [...rows];
+
+    if (sortInfo?.sortBy && sortInfo.direction !== IdsTableSortDirection.NONE) {
+      const isAscending = sortInfo.direction === IdsTableSortDirection.ASC;
+
+      result.sort((item1, item2) => {
+        const value1 = item1[sortInfo.sortBy as keyof TableExampleRow];
+        const value2 = item2[sortInfo.sortBy as keyof TableExampleRow];
+
+        return compare(isAscending ? value1 : value2, isAscending ? value2 : value1);
+      });
+    }
+
+    const startIndex = (page - 1) * pageSize;
+
+    return of({
+      resultList: result.slice(startIndex, startIndex + pageSize),
+      paginationParams: {
+        totalRows: rows.length,
+        rows: pageSize,
+        page,
+      },
+    }).pipe(delay(TABLE_EXAMPLE_SERVER_SIDE_DELAY_MS));
+  };
+}