From 9e1cf0e622b952e684d2b69754f7a920bb2ca719 Mon Sep 17 00:00:00 2001 From: Laszlo Ilonka Date: Mon, 12 Oct 2026 11:19:52 +0200 Subject: [PATCH] feat(table): add samples --- .../table-appearances-example.component.html | 26 +++ .../table-appearances-example.component.ts | 24 +++ .../table-basic-example.component.html | 5 + .../table-basic-example.component.ts | 24 +++ ...stom-cell-templates-example.component.html | 20 ++ ...stom-cell-templates-example.component.scss | 23 +++ ...custom-cell-templates-example.component.ts | 45 +++++ .../table-empty-state-example.component.html | 6 + .../table-empty-state-example.component.ts | 21 ++ .../table/table-example-intl.ts | 28 +++ .../table/table-example.utils.ts | 163 ++++++++++++++++ .../table/table-examples.ts | 184 ++++++++++++++++++ .../table-fixed-header-example.component.html | 7 + .../table-fixed-header-example.component.scss | 5 + .../table-fixed-header-example.component.ts | 25 +++ ...table-master-detail-example.component.html | 18 ++ ...table-master-detail-example.component.scss | 8 + .../table-master-detail-example.component.ts | 30 +++ ...table-row-selection-example.component.html | 10 + .../table-row-selection-example.component.ts | 27 +++ .../table-server-side-example.component.html | 28 +++ .../table-server-side-example.component.scss | 25 +++ .../table-server-side-example.component.ts | 57 ++++++ .../table-sizes-example.component.html | 34 ++++ .../table-sizes-example.component.scss | 12 ++ .../table-sizes-example.component.ts | 25 +++ .../table-sorting-example.component.html | 10 + .../table-sorting-example.component.ts | 48 +++++ .../table-variants-example.component.html | 26 +++ .../table-variants-example.component.ts | 24 +++ .../table-with-border-example.component.html | 5 + .../table-with-border-example.component.ts | 24 +++ .../app/pages/table/table-demo.component.html | 6 + .../app/pages/table/table-demo.component.ts | 4 + projects/demo/src/assets/i18n/en.json | 74 +++++++ projects/demo/src/assets/i18n/hu.json | 74 +++++++ 36 files changed, 1175 insertions(+) create mode 100644 projects/demo/src/app/components-example/table/table-appearances-example/table-appearances-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-appearances-example/table-appearances-example.component.ts create mode 100644 projects/demo/src/app/components-example/table/table-basic-example/table-basic-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-basic-example/table-basic-example.component.ts create mode 100644 projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.scss create mode 100644 projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.ts create mode 100644 projects/demo/src/app/components-example/table/table-empty-state-example/table-empty-state-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-empty-state-example/table-empty-state-example.component.ts create mode 100644 projects/demo/src/app/components-example/table/table-example-intl.ts create mode 100644 projects/demo/src/app/components-example/table/table-example.utils.ts create mode 100644 projects/demo/src/app/components-example/table/table-examples.ts create mode 100644 projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.scss create mode 100644 projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.ts create mode 100644 projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.scss create mode 100644 projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.ts create mode 100644 projects/demo/src/app/components-example/table/table-row-selection-example/table-row-selection-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-row-selection-example/table-row-selection-example.component.ts create mode 100644 projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.scss create mode 100644 projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.ts create mode 100644 projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.scss create mode 100644 projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.ts create mode 100644 projects/demo/src/app/components-example/table/table-sorting-example/table-sorting-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-sorting-example/table-sorting-example.component.ts create mode 100644 projects/demo/src/app/components-example/table/table-variants-example/table-variants-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-variants-example/table-variants-example.component.ts create mode 100644 projects/demo/src/app/components-example/table/table-with-border-example/table-with-border-example.component.html create mode 100644 projects/demo/src/app/components-example/table/table-with-border-example/table-with-border-example.component.ts diff --git a/projects/demo/src/app/components-example/table/table-appearances-example/table-appearances-example.component.html b/projects/demo/src/app/components-example/table/table-appearances-example/table-appearances-example.component.html new file mode 100644 index 00000000..7f549abc --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-appearances-example/table-appearances-example.component.html @@ -0,0 +1,26 @@ +
+
+ {{ "EXAMPLES.TABLE.APPEARANCES.CONTENT.LINE_DIVISION" | translate }} + + + {{ value | translate }} + + +
+
+ {{ "EXAMPLES.TABLE.APPEARANCES.CONTENT.ZEBRA" | translate }} + + + {{ value | translate }} + + +
+
+ {{ "EXAMPLES.TABLE.APPEARANCES.CONTENT.PLAIN" | translate }} + + + {{ value | translate }} + + +
+
diff --git a/projects/demo/src/app/components-example/table/table-appearances-example/table-appearances-example.component.ts b/projects/demo/src/app/components-example/table/table-appearances-example/table-appearances-example.component.ts new file mode 100644 index 00000000..f57b224e --- /dev/null +++ b/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; +} diff --git a/projects/demo/src/app/components-example/table/table-basic-example/table-basic-example.component.html b/projects/demo/src/app/components-example/table/table-basic-example/table-basic-example.component.html new file mode 100644 index 00000000..d5fcdc1a --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-basic-example/table-basic-example.component.html @@ -0,0 +1,5 @@ + + + {{ value | translate }} + + diff --git a/projects/demo/src/app/components-example/table/table-basic-example/table-basic-example.component.ts b/projects/demo/src/app/components-example/table/table-basic-example/table-basic-example.component.ts new file mode 100644 index 00000000..cd02f2a6 --- /dev/null +++ b/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; +} diff --git a/projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.html b/projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.html new file mode 100644 index 00000000..2cd881d8 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.html @@ -0,0 +1,20 @@ + + + {{ value | translate }} + + + + + + {{ value | translate }} + + + {{ row.name }} + + + + {{ value | translate }} + + + {{ row.status }} + diff --git a/projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.scss b/projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.scss new file mode 100644 index 00000000..61ea9fb5 --- /dev/null +++ b/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); +} diff --git a/projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.ts b/projects/demo/src/app/components-example/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.ts new file mode 100644 index 00000000..d6cf479b --- /dev/null +++ b/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'; + } +} diff --git a/projects/demo/src/app/components-example/table/table-empty-state-example/table-empty-state-example.component.html b/projects/demo/src/app/components-example/table/table-empty-state-example/table-empty-state-example.component.html new file mode 100644 index 00000000..400344b4 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-empty-state-example/table-empty-state-example.component.html @@ -0,0 +1,6 @@ + + + {{ value | translate }} + +
{{ "EXAMPLES.TABLE.EMPTY_STATE.CONTENT.NO_ROWS" | translate }}
+ diff --git a/projects/demo/src/app/components-example/table/table-empty-state-example/table-empty-state-example.component.ts b/projects/demo/src/app/components-example/table/table-empty-state-example/table-empty-state-example.component.ts new file mode 100644 index 00000000..457dbf19 --- /dev/null +++ b/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[] = []; +} diff --git a/projects/demo/src/app/components-example/table/table-example-intl.ts b/projects/demo/src/app/components-example/table/table-example-intl.ts new file mode 100644 index 00000000..6375f030 --- /dev/null +++ b/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 { + 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): string { + return colDef.label ? this._translate.instant(colDef.label) : ''; + } +} + +export const TABLE_EXAMPLE_INTL_PROVIDER = { + provide: IdsTableIntl, + useClass: TableExampleIntl, +}; diff --git a/projects/demo/src/app/components-example/table/table-example.utils.ts b/projects/demo/src/app/components-example/table/table-example.utils.ts new file mode 100644 index 00000000..2655015d --- /dev/null +++ b/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[] { + 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 { + 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)); + }; +} diff --git a/projects/demo/src/app/components-example/table/table-examples.ts b/projects/demo/src/app/components-example/table/table-examples.ts new file mode 100644 index 00000000..61263793 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-examples.ts @@ -0,0 +1,184 @@ +import { TableAppearancesExampleComponent } from './table-appearances-example/table-appearances-example.component'; +import { TableBasicExampleComponent } from './table-basic-example/table-basic-example.component'; +import { TableCustomCellTemplatesExampleComponent } from './table-custom-cell-templates-example/table-custom-cell-templates-example.component'; +import { TableEmptyStateExampleComponent } from './table-empty-state-example/table-empty-state-example.component'; +import { TableFixedHeaderExampleComponent } from './table-fixed-header-example/table-fixed-header-example.component'; +import { TableMasterDetailExampleComponent } from './table-master-detail-example/table-master-detail-example.component'; +import { TableRowSelectionExampleComponent } from './table-row-selection-example/table-row-selection-example.component'; +import { TableServerSideExampleComponent } from './table-server-side-example/table-server-side-example.component'; +import { TableSizesExampleComponent } from './table-sizes-example/table-sizes-example.component'; +import { TableSortingExampleComponent } from './table-sorting-example/table-sorting-example.component'; +import { TableVariantsExampleComponent } from './table-variants-example/table-variants-example.component'; +import { TableWithBorderExampleComponent } from './table-with-border-example/table-with-border-example.component'; + +import { IdsExampleDef, IdsExampleFile } from '../../shared/ids-example-viewer/ids-example.model'; + +const TABLE_EXAMPLE_SHARED_FILES: IdsExampleFile[] = [ + { + HTMLpath: '', + TSpath: 'assets/examples/table/table-example.utils.ts', + }, + { + HTMLpath: '', + TSpath: 'assets/examples/table/table-example-intl.ts', + }, +]; + +export const TABLE_EXAMPLES: IdsExampleDef[] = [ + { + id: 'table-basic', + title: 'EXAMPLES.TABLE.BASIC.TITLE', + description: 'EXAMPLES.TABLE.BASIC.DESCRIPTION', + component: TableBasicExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-basic-example/table-basic-example.component.html', + TSpath: 'assets/examples/table/table-basic-example/table-basic-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, + { + id: 'table-appearances', + title: 'EXAMPLES.TABLE.APPEARANCES.TITLE', + description: 'EXAMPLES.TABLE.APPEARANCES.DESCRIPTION', + component: TableAppearancesExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-appearances-example/table-appearances-example.component.html', + TSpath: 'assets/examples/table/table-appearances-example/table-appearances-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, + { + id: 'table-variants', + title: 'EXAMPLES.TABLE.VARIANTS.TITLE', + description: 'EXAMPLES.TABLE.VARIANTS.DESCRIPTION', + component: TableVariantsExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-variants-example/table-variants-example.component.html', + TSpath: 'assets/examples/table/table-variants-example/table-variants-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, + { + id: 'table-sizes', + title: 'EXAMPLES.TABLE.SIZES.TITLE', + description: 'EXAMPLES.TABLE.SIZES.DESCRIPTION', + component: TableSizesExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-sizes-example/table-sizes-example.component.html', + TSpath: 'assets/examples/table/table-sizes-example/table-sizes-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, + { + id: 'table-sorting', + title: 'EXAMPLES.TABLE.SORTING.TITLE', + description: 'EXAMPLES.TABLE.SORTING.DESCRIPTION', + component: TableSortingExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-sorting-example/table-sorting-example.component.html', + TSpath: 'assets/examples/table/table-sorting-example/table-sorting-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, + { + id: 'table-server-side', + title: 'EXAMPLES.TABLE.SERVER_SIDE.TITLE', + description: 'EXAMPLES.TABLE.SERVER_SIDE.DESCRIPTION', + component: TableServerSideExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-server-side-example/table-server-side-example.component.html', + TSpath: 'assets/examples/table/table-server-side-example/table-server-side-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, + { + id: 'table-row-selection', + title: 'EXAMPLES.TABLE.ROW_SELECTION.TITLE', + description: 'EXAMPLES.TABLE.ROW_SELECTION.DESCRIPTION', + component: TableRowSelectionExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-row-selection-example/table-row-selection-example.component.html', + TSpath: 'assets/examples/table/table-row-selection-example/table-row-selection-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, + { + id: 'table-master-detail', + title: 'EXAMPLES.TABLE.MASTER_DETAIL.TITLE', + description: 'EXAMPLES.TABLE.MASTER_DETAIL.DESCRIPTION', + component: TableMasterDetailExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-master-detail-example/table-master-detail-example.component.html', + TSpath: 'assets/examples/table/table-master-detail-example/table-master-detail-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, + { + id: 'table-custom-cell-templates', + title: 'EXAMPLES.TABLE.CUSTOM_CELL_TEMPLATES.TITLE', + description: 'EXAMPLES.TABLE.CUSTOM_CELL_TEMPLATES.DESCRIPTION', + component: TableCustomCellTemplatesExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.html', + TSpath: 'assets/examples/table/table-custom-cell-templates-example/table-custom-cell-templates-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, + { + id: 'table-with-border', + title: 'EXAMPLES.TABLE.WITH_BORDER.TITLE', + description: 'EXAMPLES.TABLE.WITH_BORDER.DESCRIPTION', + component: TableWithBorderExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-with-border-example/table-with-border-example.component.html', + TSpath: 'assets/examples/table/table-with-border-example/table-with-border-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, + { + id: 'table-fixed-header', + title: 'EXAMPLES.TABLE.FIXED_HEADER.TITLE', + description: 'EXAMPLES.TABLE.FIXED_HEADER.DESCRIPTION', + component: TableFixedHeaderExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-fixed-header-example/table-fixed-header-example.component.html', + TSpath: 'assets/examples/table/table-fixed-header-example/table-fixed-header-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, + { + id: 'table-empty-state', + title: 'EXAMPLES.TABLE.EMPTY_STATE.TITLE', + description: 'EXAMPLES.TABLE.EMPTY_STATE.DESCRIPTION', + component: TableEmptyStateExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/table/table-empty-state-example/table-empty-state-example.component.html', + TSpath: 'assets/examples/table/table-empty-state-example/table-empty-state-example.component.ts', + }, + ...TABLE_EXAMPLE_SHARED_FILES, + ], + }, +]; diff --git a/projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.html b/projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.html new file mode 100644 index 00000000..9c5e7015 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.html @@ -0,0 +1,7 @@ +
+ + + {{ value | translate }} + + +
diff --git a/projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.scss b/projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.scss new file mode 100644 index 00000000..cf14b6f8 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.scss @@ -0,0 +1,5 @@ +.table-fixed-header-scroll { + width: 100%; + height: 240px; + overflow: auto; +} diff --git a/projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.ts b/projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.ts new file mode 100644 index 00000000..f41e970a --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-fixed-header-example/table-fixed-header-example.component.ts @@ -0,0 +1,25 @@ +import { TABLE_EXAMPLE_INTL_PROVIDER } from '../table-example-intl'; +import { + createTableExampleColumnDefs, + TABLE_EXAMPLE_SCROLL_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-fixed-header-example', + imports: [ + IdsTableComponent, + IdsTableCellTemplateDirective, + TranslateModule, + ], + templateUrl: './table-fixed-header-example.component.html', + styleUrl: './table-fixed-header-example.component.scss', + viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER], +}) +export class TableFixedHeaderExampleComponent { + protected readonly _columnDefs = createTableExampleColumnDefs(); + protected readonly _dataSource = TABLE_EXAMPLE_SCROLL_ROWS; +} diff --git a/projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.html b/projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.html new file mode 100644 index 00000000..439977d4 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.html @@ -0,0 +1,18 @@ +
+ + +
+ + + {{ value | translate }} + + {{ row.description }} + diff --git a/projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.scss b/projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.scss new file mode 100644 index 00000000..fe84b1b6 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.scss @@ -0,0 +1,8 @@ +.table-master-detail-actions { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 0.5rem; + margin-bottom: 0.5rem; + width: 100%; +} diff --git a/projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.ts b/projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.ts new file mode 100644 index 00000000..4f29adc6 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-master-detail-example/table-master-detail-example.component.ts @@ -0,0 +1,30 @@ +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 { IdsButtonComponent } from '@i-cell/ids-angular/button'; +import { IdsTableCellTemplateDirective, IdsTableComponent } from '@i-cell/ids-angular/table'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-table-master-detail-example', + imports: [ + IdsButtonComponent, + IdsTableComponent, + IdsTableCellTemplateDirective, + TranslateModule, + ], + templateUrl: './table-master-detail-example.component.html', + styleUrl: './table-master-detail-example.component.scss', + viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER], +}) +export class TableMasterDetailExampleComponent { + protected readonly _columnDefs = createTableExampleColumnDefs(); + protected readonly _dataSource = TABLE_EXAMPLE_ROWS; + + protected _hasDetailRow = (_index: number, row: TableExampleRow): boolean => !!row.description; +} diff --git a/projects/demo/src/app/components-example/table/table-row-selection-example/table-row-selection-example.component.html b/projects/demo/src/app/components-example/table/table-row-selection-example/table-row-selection-example.component.html new file mode 100644 index 00000000..53d78ae6 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-row-selection-example/table-row-selection-example.component.html @@ -0,0 +1,10 @@ + + + {{ value | translate }} + + diff --git a/projects/demo/src/app/components-example/table/table-row-selection-example/table-row-selection-example.component.ts b/projects/demo/src/app/components-example/table/table-row-selection-example/table-row-selection-example.component.ts new file mode 100644 index 00000000..b4f2406d --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-row-selection-example/table-row-selection-example.component.ts @@ -0,0 +1,27 @@ +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 { IdsTableCellTemplateDirective, IdsTableComponent } from '@i-cell/ids-angular/table'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-table-row-selection-example', + imports: [ + IdsTableComponent, + IdsTableCellTemplateDirective, + TranslateModule, + ], + templateUrl: './table-row-selection-example.component.html', + viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER], +}) +export class TableRowSelectionExampleComponent { + protected readonly _columnDefs = createTableExampleColumnDefs(); + protected readonly _dataSource = TABLE_EXAMPLE_ROWS; + + protected _isRowSelectable = (_index: number, row: TableExampleRow): boolean => row.status !== 'Inactive'; +} diff --git a/projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.html b/projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.html new file mode 100644 index 00000000..d0bdc30e --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.html @@ -0,0 +1,28 @@ +
+ +
+ @if (_isLoading()) { +
+ +
+ } + + + {{ value | translate }} + + +
+
diff --git a/projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.scss b/projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.scss new file mode 100644 index 00000000..b9a4c132 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.scss @@ -0,0 +1,25 @@ +.table-server-side { + display: flex; + flex-direction: column; + gap: 0.5rem; + width: 100%; +} + +.table-server-side__table { + position: relative; +} + +.table-server-side__loading { + position: absolute; + inset: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + background-color: rgb(255 255 255 / 60%); +} + +.table-server-side__table-content--loading { + pointer-events: none; + opacity: 0.5; +} diff --git a/projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.ts b/projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.ts new file mode 100644 index 00000000..b19ed3ab --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-server-side-example/table-server-side-example.component.ts @@ -0,0 +1,57 @@ +import { TABLE_EXAMPLE_INTL_PROVIDER } from '../table-example-intl'; +import { + createTableExampleColumnDefs, + createTableExampleServerSideRequestFactory, + TABLE_EXAMPLE_SERVER_SIDE_PAGE_SIZE, +} from '../table-example.utils'; + +import { Component, DestroyRef, inject, OnInit } from '@angular/core'; +import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'; +import { IdsPaginatorComponent } from '@i-cell/ids-angular/paginator'; +import { IdsSpinnerComponent } from '@i-cell/ids-angular/spinner'; +import { IdsTableCellTemplateDirective, IdsTableComponent, ServerSideDataSource } from '@i-cell/ids-angular/table'; +import { TranslateModule } from '@ngx-translate/core'; +import { map } from 'rxjs'; + +@Component({ + selector: 'app-table-server-side-example', + imports: [ + IdsPaginatorComponent, + IdsSpinnerComponent, + IdsTableCellTemplateDirective, + IdsTableComponent, + TranslateModule, + ], + templateUrl: './table-server-side-example.component.html', + styleUrl: './table-server-side-example.component.scss', + viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER], +}) +export class TableServerSideExampleComponent implements OnInit { + private readonly _destroyRef = inject(DestroyRef); + + protected readonly _columnDefs = createTableExampleColumnDefs(); + protected readonly _pageSize = TABLE_EXAMPLE_SERVER_SIDE_PAGE_SIZE; + protected readonly _pageSizeOptions = [ + TABLE_EXAMPLE_SERVER_SIDE_PAGE_SIZE, + TABLE_EXAMPLE_SERVER_SIDE_PAGE_SIZE * 2, + ]; + + protected readonly _dataSource = new ServerSideDataSource(createTableExampleServerSideRequestFactory()); + protected readonly _totalRows = toSignal( + this._dataSource.pageInfo$.pipe( + map((pageInfo) => pageInfo?.totalRows ?? 0), + takeUntilDestroyed(this._destroyRef), + ), + { initialValue: 0 }, + ); + + protected readonly _isLoading = toSignal(this._dataSource.isLoading$, { initialValue: false }); + + protected _currentPageIndex = 0; + + public ngOnInit(): void { + this._dataSource.pageIndex$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((pageIndex) => { + this._currentPageIndex = pageIndex; + }); + } +} diff --git a/projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.html b/projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.html new file mode 100644 index 00000000..c21bcacf --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.html @@ -0,0 +1,34 @@ +
+
+ Dense + + + {{ value | translate }} + + +
+
+ Compact + + + {{ value | translate }} + + +
+
+ Comfortable + + + {{ value | translate }} + + +
+
+ Spacious + + + {{ value | translate }} + + +
+
diff --git a/projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.scss b/projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.scss new file mode 100644 index 00000000..e4ee55cc --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.scss @@ -0,0 +1,12 @@ +.table-sizes-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + width: 100%; +} + +.table-sizes-item { + display: grid; + gap: 0.5rem; + min-width: 0; +} diff --git a/projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.ts b/projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.ts new file mode 100644 index 00000000..61f71ca7 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-sizes-example/table-sizes-example.component.ts @@ -0,0 +1,25 @@ +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-sizes-example', + imports: [ + IdsTableComponent, + IdsTableCellTemplateDirective, + TranslateModule, + ], + templateUrl: './table-sizes-example.component.html', + styleUrl: './table-sizes-example.component.scss', + viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER], +}) +export class TableSizesExampleComponent { + protected readonly _columnDefs = createTableExampleColumnDefs(); + protected readonly _dataSource = TABLE_EXAMPLE_ROWS; +} diff --git a/projects/demo/src/app/components-example/table/table-sorting-example/table-sorting-example.component.html b/projects/demo/src/app/components-example/table/table-sorting-example/table-sorting-example.component.html new file mode 100644 index 00000000..345b1420 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-sorting-example/table-sorting-example.component.html @@ -0,0 +1,10 @@ + + + {{ value | translate }} + + diff --git a/projects/demo/src/app/components-example/table/table-sorting-example/table-sorting-example.component.ts b/projects/demo/src/app/components-example/table/table-sorting-example/table-sorting-example.component.ts new file mode 100644 index 00000000..c4d6cad8 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-sorting-example/table-sorting-example.component.ts @@ -0,0 +1,48 @@ +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 { IdsTableCellTemplateDirective, IdsTableComponent, IdsTableSortInfo } from '@i-cell/ids-angular/table'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-table-sorting-example', + imports: [ + IdsTableComponent, + IdsTableCellTemplateDirective, + TranslateModule, + ], + templateUrl: './table-sorting-example.component.html', + viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER], +}) +export class TableSortingExampleComponent { + protected readonly _columnDefs = createTableExampleColumnDefs(); + protected _dataSource = [...TABLE_EXAMPLE_ROWS]; + + protected _onSortChange(sortInfo: IdsTableSortInfo | null): void { + if (!sortInfo) { + this._dataSource = [...TABLE_EXAMPLE_ROWS]; + return; + } + + const { sortBy, direction } = sortInfo; + const field = this._columnDefs.find((col) => col.id === sortBy)?.field as keyof TableExampleRow; + + this._dataSource = [...TABLE_EXAMPLE_ROWS].sort((a, b) => { + const aValue = a[field]; + const bValue = b[field]; + + if (typeof aValue === 'number' && typeof bValue === 'number') { + return direction === 'asc' ? aValue - bValue : bValue - aValue; + } + + return direction === 'asc' + ? String(aValue).localeCompare(String(bValue)) + : String(bValue).localeCompare(String(aValue)); + }); + } +} diff --git a/projects/demo/src/app/components-example/table/table-variants-example/table-variants-example.component.html b/projects/demo/src/app/components-example/table/table-variants-example/table-variants-example.component.html new file mode 100644 index 00000000..699ba76e --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-variants-example/table-variants-example.component.html @@ -0,0 +1,26 @@ +
+
+ {{ "EXAMPLES.TABLE.VARIANTS.CONTENT.PRIMARY" | translate }} + + + {{ value | translate }} + + +
+
+ {{ "EXAMPLES.TABLE.VARIANTS.CONTENT.SECONDARY" | translate }} + + + {{ value | translate }} + + +
+
+ {{ "EXAMPLES.TABLE.VARIANTS.CONTENT.SURFACE" | translate }} + + + {{ value | translate }} + + +
+
diff --git a/projects/demo/src/app/components-example/table/table-variants-example/table-variants-example.component.ts b/projects/demo/src/app/components-example/table/table-variants-example/table-variants-example.component.ts new file mode 100644 index 00000000..0536a94e --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-variants-example/table-variants-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-variants-example', + imports: [ + IdsTableComponent, + IdsTableCellTemplateDirective, + TranslateModule, + ], + templateUrl: './table-variants-example.component.html', + viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER], +}) +export class TableVariantsExampleComponent { + protected readonly _columnDefs = createTableExampleColumnDefs(); + protected readonly _dataSource = TABLE_EXAMPLE_ROWS; +} diff --git a/projects/demo/src/app/components-example/table/table-with-border-example/table-with-border-example.component.html b/projects/demo/src/app/components-example/table/table-with-border-example/table-with-border-example.component.html new file mode 100644 index 00000000..77ed3f68 --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-with-border-example/table-with-border-example.component.html @@ -0,0 +1,5 @@ + + + {{ value | translate }} + + diff --git a/projects/demo/src/app/components-example/table/table-with-border-example/table-with-border-example.component.ts b/projects/demo/src/app/components-example/table/table-with-border-example/table-with-border-example.component.ts new file mode 100644 index 00000000..d1c7dbcc --- /dev/null +++ b/projects/demo/src/app/components-example/table/table-with-border-example/table-with-border-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-with-border-example', + imports: [ + IdsTableComponent, + IdsTableCellTemplateDirective, + TranslateModule, + ], + templateUrl: './table-with-border-example.component.html', + viewProviders: [TABLE_EXAMPLE_INTL_PROVIDER], +}) +export class TableWithBorderExampleComponent { + protected readonly _columnDefs = createTableExampleColumnDefs(); + protected readonly _dataSource = TABLE_EXAMPLE_ROWS; +} diff --git a/projects/demo/src/app/pages/table/table-demo.component.html b/projects/demo/src/app/pages/table/table-demo.component.html index e64fbc90..006ab432 100644 --- a/projects/demo/src/app/pages/table/table-demo.component.html +++ b/projects/demo/src/app/pages/table/table-demo.component.html @@ -67,3 +67,9 @@ + +
+ @for (example of tableExamples; track example.id) { + + } +
diff --git a/projects/demo/src/app/pages/table/table-demo.component.ts b/projects/demo/src/app/pages/table/table-demo.component.ts index a7d07cff..aaa4746e 100644 --- a/projects/demo/src/app/pages/table/table-demo.component.ts +++ b/projects/demo/src/app/pages/table/table-demo.component.ts @@ -5,6 +5,8 @@ import { ControlTableComponent } from '../../components/control-table/control-ta import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; +import { TABLE_EXAMPLES } from '../../components-example/table/table-examples'; +import { IdsExampleViewerComponent } from '../../shared/ids-example-viewer/ids-example-viewer.component'; import { Component, DestroyRef, inject, Injectable, input, OnInit, viewChild, ViewEncapsulation } from '@angular/core'; import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'; @@ -85,6 +87,7 @@ export class TableDemoTableIntl extends IdsTableIntl { DemoAndCodeComponent, TryoutControlComponent, ControlTableComponent, + IdsExampleViewerComponent, ], templateUrl: './table-demo.component.html', styleUrl: './table-demo.component.scss', @@ -97,6 +100,7 @@ export class TableDemoTableIntl extends IdsTableIntl { ], }) export class TableDemoComponent implements OnInit { + public readonly tableExamples = TABLE_EXAMPLES; protected _tableDemoService = inject(TableDemoService); private _table = viewChild(IdsTableComponent); diff --git a/projects/demo/src/assets/i18n/en.json b/projects/demo/src/assets/i18n/en.json index 723bf99b..7f6dd582 100644 --- a/projects/demo/src/assets/i18n/en.json +++ b/projects/demo/src/assets/i18n/en.json @@ -1332,6 +1332,80 @@ "DESCRIPTION": "Use isTrack to show or hide the circular track behind the active indicator." } }, + "TABLE": { + "COMMON": { + "COL_NAME": "Name", + "COL_ROLE": "Role", + "COL_STATUS": "Status", + "COL_SCORE": "Score" + }, + "BASIC": { + "TITLE": "Basic table", + "DESCRIPTION": "A simple table with column definitions and a client-side data source array. Use headerCellRenderer with an idsCellTemplate and the translate pipe to localize column headers." + }, + "APPEARANCES": { + "TITLE": "Table appearances", + "DESCRIPTION": "Tables with different row styling: line-division (default), zebra, and plain.", + "CONTENT": { + "LINE_DIVISION": "Line division", + "ZEBRA": "Zebra", + "PLAIN": "Plain" + } + }, + "VARIANTS": { + "TITLE": "Table variants", + "DESCRIPTION": "Tables with different color variants: primary, secondary, and surface (default).", + "CONTENT": { + "PRIMARY": "Primary", + "SECONDARY": "Secondary", + "SURFACE": "Surface" + } + }, + "SIZES": { + "TITLE": "Table sizes", + "DESCRIPTION": "Tables with different sizes: dense, compact (default), comfortable, and spacious." + }, + "SORTING": { + "TITLE": "Sorting", + "DESCRIPTION": "Enable sorting on sortable columns with enableSorting. Handle sortChange to update the data source." + }, + "SERVER_SIDE": { + "TITLE": "Server-side data with paginator", + "DESCRIPTION": "Use ServerSideDataSource with a request factory and ids-paginator to load paged data. Handle sortChange with dataSource.sort() and page changes with dataSource.page(). Subscribe to dataSource.isLoading$ to show a loading indicator while data is fetched.", + "LOADING": "Loading table data" + }, + "ROW_SELECTION": { + "TITLE": "Row selection", + "DESCRIPTION": "Enable row selection with enableRowSelection. Use isRowSelectable to exclude specific rows." + }, + "MASTER_DETAIL": { + "TITLE": "Master detail", + "DESCRIPTION": "Expand rows to show additional content with masterDetail, hasDetailRow, and a detail cell template." + }, + "CELL_TEMPLATE": { + "TITLE": "Cell template", + "DESCRIPTION": "Customize cell rendering with idsCellTemplate. Set cellRenderer on the column definition to match the template name." + }, + "CUSTOM_CELL_TEMPLATES": { + "TITLE": "Header and cell templates", + "DESCRIPTION": "Use headerCellRenderer and cellRenderer with matching idsCellTemplate definitions to customize both header and body cells in the same table." + }, + "WITH_BORDER": { + "TITLE": "With border", + "DESCRIPTION": "Add an outer border around the table with withBorder." + }, + "FIXED_HEADER": { + "TITLE": "Fixed header", + "DESCRIPTION": "Keep the header visible while scrolling by enabling fixedHeader and placing the table inside a container with a limited height and overflow: auto." + }, + "EMPTY_STATE": { + "TITLE": "Empty state", + "DESCRIPTION": "When dataSource is empty, a message is shown. Customize it by projecting content with the idsNoRowsToShow attribute.", + "CONTENT": { + "NO_ROWS": "No users found." + } + } + }, "PAGINATOR": { "VARIANTS": { "TITLE": "Paginator variants", diff --git a/projects/demo/src/assets/i18n/hu.json b/projects/demo/src/assets/i18n/hu.json index 806c2b38..67f27cb4 100644 --- a/projects/demo/src/assets/i18n/hu.json +++ b/projects/demo/src/assets/i18n/hu.json @@ -1328,6 +1328,80 @@ "DESCRIPTION": "Az isTrack beállítással megjeleníthető vagy elrejthető a kör alakú track az aktív indikátor mögött." } }, + "TABLE": { + "COMMON": { + "COL_NAME": "Név", + "COL_ROLE": "Szerepkör", + "COL_STATUS": "Státusz", + "COL_SCORE": "Pontszám" + }, + "BASIC": { + "TITLE": "Alap táblázat", + "DESCRIPTION": "Egyszerű táblázat oszlopdefiníciókkal és kliens oldali adatforrással. A fejlécek lokalizálásához használj headerCellRenderer-t idsCellTemplate-tel és a translate pipe-pal." + }, + "APPEARANCES": { + "TITLE": "Táblázat megjelenések", + "DESCRIPTION": "Táblázatok különböző sormegjelenéssel: line-division (alapértelmezett), zebra és plain.", + "CONTENT": { + "LINE_DIVISION": "Line division", + "ZEBRA": "Zebra", + "PLAIN": "Plain" + } + }, + "VARIANTS": { + "TITLE": "Táblázat változatok", + "DESCRIPTION": "Táblázatok különböző színváltozatokkal: primary, secondary és surface (alapértelmezett).", + "CONTENT": { + "PRIMARY": "Primary", + "SECONDARY": "Secondary", + "SURFACE": "Surface" + } + }, + "SIZES": { + "TITLE": "Táblázat méretek", + "DESCRIPTION": "Táblázatok különböző méretekkel: dense, compact (alapértelmezett), comfortable és spacious." + }, + "SORTING": { + "TITLE": "Rendezés", + "DESCRIPTION": "Rendezhető oszlopok engedélyezése az enableSorting-gel. A sortChange esemény kezelésével frissíthető az adatforrás." + }, + "SERVER_SIDE": { + "TITLE": "Szerver oldali adat paginatorral", + "DESCRIPTION": "Használj ServerSideDataSource-ot request factory-vel és ids-paginatorral lapozott adatok betöltéséhez. A sortChange eseményt a dataSource.sort(), az oldalváltást a dataSource.page() kezeli. A dataSource.isLoading$ feliratkozásával megjeleníthető a betöltés állapota.", + "LOADING": "Táblázat adatok betöltése" + }, + "ROW_SELECTION": { + "TITLE": "Sorkiválasztás", + "DESCRIPTION": "Sorkiválasztás engedélyezése az enableRowSelection-nel. Az isRowSelectable kizárhat bizonyos sorokat." + }, + "MASTER_DETAIL": { + "TITLE": "Master detail", + "DESCRIPTION": "Sorok kibontása további tartalommal a masterDetail, hasDetailRow és egy detail cell sablon segítségével." + }, + "CELL_TEMPLATE": { + "TITLE": "Cella sablon", + "DESCRIPTION": "Egyedi cellamegjelenítés idsCellTemplate-tel. A cellRenderer értékének egyeznie kell a sablon nevével." + }, + "CUSTOM_CELL_TEMPLATES": { + "TITLE": "Fejléc és cella sablonok", + "DESCRIPTION": "A headerCellRenderer és cellRenderer beállításokkal, illeszkedő idsCellTemplate definíciókkal egyszerre szabhatod testre a fejléc- és adatsor-cellákat." + }, + "WITH_BORDER": { + "TITLE": "Kerettel", + "DESCRIPTION": "Külső keret hozzáadása a táblázathoz a withBorder beállítással." + }, + "FIXED_HEADER": { + "TITLE": "Rögzített fejléc", + "DESCRIPTION": "A fejléc görgetés közbeni rögzítéséhez kapcsold be a fixedHeader beállítást, és helyezd a táblázatot egy korlátozott magasságú, overflow: auto konténerbe." + }, + "EMPTY_STATE": { + "TITLE": "Üres állapot", + "DESCRIPTION": "Üres dataSource esetén üzenet jelenik meg. Az idsNoRowsToShow attribútummal testreszabható a megjelenő szöveg.", + "CONTENT": { + "NO_ROWS": "Nincs megjeleníthető felhasználó." + } + } + }, "PAGINATOR": { "VARIANTS": { "TITLE": "Paginator változatai",