@enigmatry/entry-components 20.3.2 → 21.1.2-preview.1

package/table/README.md

@@ -4,13 +4,13 @@ Reusable table component with context menu, sorting and paging.
 
 ## Installation
 
-```
+```batch
 npm install @enigmatry/entry-components
 ```
 
 ## Basic Usage
 
-Import the `EntryTableModule` in your `feature.module` or `shared.module`
+Import the `EntryTableModule` in your `feature.module`, `shared.module` or your standalone component
 
 ```typescript
 import { EntryTableModule } from '@enigmatry/entry-components/table';
@@ -19,32 +19,38 @@ import { EntryTableModule } from '@enigmatry/entry-components/table';
 `component.ts`
 
 ```typescript
-import { PagedData, ContextMenuItem, ColumnDef } from '@enigmatry/entry-components/table';
+import { EntryTableComponent } from '@enigmatry/entry-components/table';
+import { ContextMenuItem, ColumnDefinition } from '@enigmatry/entry-components/table/interfaces';
+import { Component, computed, inject, resource } from '@angular/core';
+import { lastValueFrom } from 'rxjs';
+import { User } from '../../search-filter/search-filter/users';
+import { UsersService } from '../../search-filter/search-filter/users.service';
 
 @Component({
-...
+  selector: 'app-table-example',
+  imports: [EntryTableComponent],
+  templateUrl: './table-example.component.html',
+  styleUrls: ['./table-example.component.scss']
 })
-export class UserListComponent implements OnInit {
-
-  @Input() data: PagedData<GetUsersResponseItem> | null;
-
-  @Input() columns: ColumnDef[] = [];
-  @Input() contextMenuItems: ContextMenuItem[] = [];
-
-  constructor() { }
-
-  ngOnInit(): void {
-    this.columns = [
-      { field: 'id', hide: true, sortable: true },
-      { field: 'userName', header: `E-mail`, hide: false, sortable: true },
-      { field: 'name', header: `Name`, hide: false, sortable: true },
-      { field: 'createdOn', header: `Created on`, hide: false, sortable: true, type: 'date' },
-      { field: 'updatedOn', header: `Updated on`, hide: false, sortable: true, type: 'date' }
-    ];
-    this.contextMenuItems = [
-      { id: 'edit', name: `Edit`, icon: 'edit' }
-    ];
-  }
+export class TableExampleComponent {
+  protected readonly columns: ColumnDefinition[] = [
+    { field: 'id', hide: true },
+    { field: 'userName', header: 'E-mail', sortable: true },
+    { field: 'firstName', header: 'First name', hide: false, sortable: true },
+    { field: 'lastName', header: 'Last name', hide: false, sortable: true },
+    { field: 'dateOfBirth', header: 'Date of birth', hide: false, sortable: true, type: 'date', typeParameter: { format: 'dd-MM-yyyy' } },
+    { field: 'occupation', header: 'Occupation', hide: false, sortable: true },
+    { field: 'lastLogin', header: 'Last login', hide: false, sortable: true, type: 'date' }
+  ];
+  protected readonly contextMenuItems: ContextMenuItem[] = [{ id: 'edit', name: 'Edit' }];
+
+  private readonly usersService: UsersService = inject(UsersService);
+  readonly usersResource = resource({
+    loader: async() => {
+      return lastValueFrom(this.usersService.getUsers({}));
+    }
+  });
+  protected readonly users = computed<User[]>(() => this.usersResource.hasValue() ? this.usersResource.value() : []);
 }
 ```
 
@@ -53,14 +59,12 @@ export class UserListComponent implements OnInit {
 ```html
 <entry-table
     [columns]="columns"
-    [data]="data"
+    [data]="users()"
     [showPaginator]="true"
     [showContextMenu]="true"
-    [contextMenuItems]="contextMenuItems"
-    (pageChange)="pageChange.emit($event)"
-    (sortChange)="sortChange.emit($event)"
-    (rowSelectionChange)="selectionChange.emit($event)"
-    (contextMenuItemSelected)="contextMenuItemSelected.emit($event)">
+    [rowSelectable]="true"
+    [multiSelectable]="true"
+    [contextMenuItems]="contextMenuItems">
 </entry-table>
 ```
 
@@ -68,35 +72,43 @@ export class UserListComponent implements OnInit {
 
 Default values are:
 
- * showPaginator: true
- * showFirstLastButtons: false
- * pageSize: 20
- * pageSizeOptions: [20, 50, 100]
- * hidePageSize: false
- * noResultsText: 'No results found'
- * rowFocusVisible: false
+* showPaginator: true
+* showFirstLastButtons: false
+* pageSize: 20
+* pageSizeOptions: [20, 50, 100]
+* hidePageSize: false
+* noResultsText: 'No results found'
+* rowFocusVisible: false
 
-To override with custom defaults use `provideEntryTableConfig` function:
+To override with custom defaults use `provideEntryTableConfiguration` function:
 
 ```ts
-import { EntryTableModule, provideEntryTableConfig } from '@enigmatry/entry-components/table';
+import { EntryTableModule, provideEntryTableConfiguration } from '@enigmatry/entry-components/table';
+import { CommonModule, DATE_PIPE_DEFAULT_OPTIONS } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TableExampleComponent } from './table-example/table-example.component';
 
 @NgModule({
   imports: [
-    EntryTableModule
+    CommonModule,
+    EntryTableModule,
+    TableExampleComponent
+  ],
+  exports: [
+    TableExampleComponent
   ],
   providers: [
-      provideEntryTableConfig({
+    { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { dateFormat: 'dd-MM-yyyy HH:mm' } },
+    provideEntryTableConfiguration({
       showPaginator: true,
       pageSizeOptions: [10, 25, 50],
       rowFocusVisible: true
     })
   ]
 })
-export class EntryComponentsModule { }
+export class TableExampleModule { }
 ```
 
-
 ## Compatibility with Angular Versions
 
 | @enigmatry/entry-components | Angular version |
@@ -108,6 +120,7 @@ export class EntryComponentsModule { }
 | 18.x                        | = 18            |
 | 19.x                        | = 19            |
 | 20.x                        | = 20            |
+| 21.x                        | = 21            |
 
 ## License
 

package/{button/index.d.ts → types/enigmatry-entry-components-button.d.ts}

@@ -20,7 +20,7 @@ declare class EntryButtonDirective implements OnInit {
 
 declare class EntryButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EntryButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EntryButtonModule, [typeof EntryButtonDirective], [typeof i2.CommonModule, typeof i3.MatButtonModule], [typeof EntryButtonDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EntryButtonModule, [typeof EntryButtonDirective], [typeof i2.CommonModule, typeof i3.MatButton, typeof i3.MatButton], [typeof EntryButtonDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EntryButtonModule>;
 }
 

package/types/enigmatry-entry-components-table.d.ts

@@ -0,0 +1,256 @@
+import * as _angular_material_paginator from '@angular/material/paginator';
+import { PageEvent } from '@angular/material/paginator';
+export { PageEvent } from '@angular/material/paginator';
+import * as i4 from '@angular/material/sort';
+import { Sort, SortDirection } from '@angular/material/sort';
+export { SortDirection, Sort as SortEvent } from '@angular/material/sort';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Provider, TemplateRef } from '@angular/core';
+import { Params } from '@angular/router';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i3 from '@angular/material/table';
+import { MatTableDataSource } from '@angular/material/table';
+import * as i8 from '@angular/material/menu';
+import { MatMenuPanel } from '@angular/material/menu';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/forms';
+import * as i6 from '@angular/material/checkbox';
+import * as i7 from '@angular/material/icon';
+import * as i9 from '@angular/material/radio';
+import * as i10 from '@angular/material/button';
+
+interface PagedData<T> {
+    items?: T[];
+    pageSize?: number;
+    pageNumber?: number;
+    totalCount?: number;
+    totalPages?: number;
+    hasPreviousPage?: boolean;
+    hasNextPage?: boolean;
+}
+interface OnSort {
+    sortChange: (sort: Sort) => void;
+}
+interface OnPage {
+    pageChange: (page: PageEvent) => void;
+}
+
+declare class EntryTableConfiguration {
+    /** Show paginator, default is true */
+    showPaginator: boolean;
+    /** Show first and last pagination buttons, default is false */
+    showFirstLastButtons: boolean;
+    /** Page size, default 20 */
+    pageSize: number;
+    /** Page size options, default [20, 50, 100] */
+    pageSizeOptions: number[];
+    /** Hide page size options, default is false */
+    hidePageSize: boolean;
+    /** Hide pagination, default is false */
+    noResultsText: string;
+    /** Row focus visible, default is false */
+    rowFocusVisible: boolean;
+    constructor(config?: Partial<EntryTableConfiguration>);
+}
+/** Entry table config injection token
+ * Defaults:
+ * - showPaginator: true
+ * - showFirstLastButtons: false
+ * - pageSize: 20
+ * - pageSizeOptions: [20, 50, 100]
+ * - hidePageSize: false
+ * - noResultsText: 'No results found'
+ * - rowFocusVisible: false
+ */
+declare const ENTRY_TABLE_CONFIGURATION: InjectionToken<EntryTableConfiguration>;
+/** Provide entry table config */
+declare const provideEntryTableConfiguration: (config: Partial<EntryTableConfiguration>) => Provider;
+/** Default percentage multiplier injection token */
+declare const DEFAULT_PERCENTAGE_MULTIPLIER: InjectionToken<number>;
+
+declare const defaultPageSize = 20;
+declare const defaultPageNumber = 1;
+declare class PagedQuery implements OnPage, OnSort {
+    pageNumber: number;
+    pageSize: number;
+    sortBy?: string;
+    sortDirection?: SortDirection;
+    readonly sortChange: (sort: Sort) => void;
+    readonly pageChange: (page: PageEvent) => void;
+    readonly applyRouteChanges: (queryParams: Params) => void;
+    readonly getRouteQueryParams: () => Params;
+    readonly getValueIfNotEmpty: <T>(value: T) => T | undefined;
+}
+
+interface CellTemplate {
+    [key: string]: TemplateRef<unknown>;
+}
+
+interface ColumnSortProperties {
+    id?: string;
+    start?: 'asc' | 'desc';
+    disableClear?: boolean;
+}
+
+declare type ColumnType = 'boolean' | 'number' | 'currency' | 'percent' | 'date' | 'link';
+
+interface ColumnTypeParameter {
+    name?: string;
+    currencyCode?: string;
+    display?: string | boolean;
+    digitsInfo?: string;
+    format?: string;
+    locale?: string;
+    timezone?: string;
+}
+
+interface ColumnDefinition {
+    field: string;
+    header?: string;
+    hide?: boolean;
+    pinned?: 'left' | 'right';
+    width?: string;
+    sortable?: boolean | string;
+    sortProperties?: ColumnSortProperties;
+    type?: ColumnType;
+    typeParameter?: ColumnTypeParameter;
+    cellTemplate?: TemplateRef<unknown> | null;
+    class?: string;
+    customProperties?: {
+        [key: string]: unknown;
+    };
+}
+
+interface ContextMenuItem {
+    id: string;
+    name: string;
+    icon?: string;
+    disabled?: boolean;
+    items?: ContextMenuItem[];
+}
+
+interface RowClassFormatter {
+    [className: string]: (rowData: unknown) => boolean;
+}
+
+interface RowContextMenuFormatter {
+    items: (rowData: unknown) => ContextMenuItem[];
+}
+
+interface RowSelectionFormatter {
+    disabled?: (rowData: unknown) => boolean;
+    hideCheckbox?: (rowData: unknown) => boolean;
+}
+
+declare class EntryTableComponent<T> {
+    private readonly configuration;
+    private readonly elementRef;
+    dataSource: MatTableDataSource<T, _angular_material_paginator.MatPaginator>;
+    readonly selectionColumn = "selection-column";
+    readonly contextMenuColumn = "context-menu-column";
+    readonly columns: _angular_core.InputSignal<ColumnDefinition[]>;
+    readonly displayedColumns: _angular_core.Signal<string[]>;
+    readonly data: _angular_core.InputSignal<T[] | PagedData<T> | null | undefined>;
+    private readonly trueData;
+    readonly total: _angular_core.WritableSignal<number>;
+    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly showPaginator: _angular_core.InputSignal<boolean>;
+    readonly pageDisabled: _angular_core.InputSignal<boolean>;
+    readonly showFirstLastButtons: _angular_core.InputSignal<boolean>;
+    readonly pageIndex: _angular_core.WritableSignal<number>;
+    readonly pageSize: _angular_core.WritableSignal<number>;
+    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
+    readonly hidePageSize: _angular_core.InputSignal<boolean>;
+    readonly paginationTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
+    readonly shouldShowPaginator: _angular_core.Signal<number | false | undefined>;
+    readonly pageChange: _angular_core.OutputEmitterRef<PageEvent>;
+    readonly sortActive: _angular_core.InputSignal<string | undefined>;
+    readonly sortDirection: _angular_core.InputSignal<SortDirection | undefined>;
+    readonly sortDisableClear: _angular_core.InputSignal<boolean>;
+    readonly sortDisabled: _angular_core.InputSignal<boolean>;
+    readonly sortStart: _angular_core.InputSignal<"asc" | "desc">;
+    readonly sortChange: _angular_core.OutputEmitterRef<Sort>;
+    readonly rowHover: _angular_core.InputSignal<boolean>;
+    readonly rowStriped: _angular_core.InputSignal<boolean>;
+    readonly rowFocusVisible: _angular_core.InputSignal<boolean>;
+    readonly rowClick: _angular_core.OutputEmitterRef<T>;
+    readonly multiSelectable: _angular_core.InputSignal<boolean>;
+    readonly rowSelection: _angular_core.WritableSignal<SelectionModel<T>>;
+    readonly rowSelected: _angular_core.InputSignal<T[]>;
+    readonly rowSelectable: _angular_core.InputSignal<boolean>;
+    readonly showSelectAllCheckbox: _angular_core.InputSignal<boolean>;
+    readonly rowSelectionFormatter: _angular_core.InputSignal<RowSelectionFormatter>;
+    readonly rowClassFormatter: _angular_core.InputSignal<RowClassFormatter | undefined>;
+    readonly showContextMenu: _angular_core.InputSignal<boolean>;
+    readonly contextMenuItems: _angular_core.InputSignal<ContextMenuItem[]>;
+    readonly contextMenuTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    readonly rowContextMenuFormatter: _angular_core.InputSignal<RowContextMenuFormatter | undefined>;
+    readonly contextMenuItemSelected: _angular_core.OutputEmitterRef<{
+        itemId: string;
+        rowData: T;
+    }>;
+    readonly noResultText: _angular_core.InputSignal<string>;
+    readonly noResultTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    readonly hasNoResult: _angular_core.Signal<boolean>;
+    readonly headerTemplate: _angular_core.InputSignal<CellTemplate | TemplateRef<unknown> | Record<string, TemplateRef<unknown>> | undefined>;
+    readonly unknownTemplateAsTemplate: (template: unknown) => TemplateRef<unknown>;
+    readonly cellTemplate: _angular_core.InputSignal<CellTemplate | TemplateRef<unknown> | Record<string, TemplateRef<unknown>> | undefined>;
+    constructor();
+    readonly toTemplateIndex: (template: TemplateRef<unknown> | CellTemplate | Record<string, TemplateRef<unknown>>, key: string) => TemplateRef<unknown>;
+    protected readonly isTemplateRef: (value: unknown) => value is TemplateRef<any>;
+    readonly getRowClassList: (rowData: T, index: number) => Record<string, unknown>;
+    readonly getColumnClassList: (columnDefinition: ColumnDefinition) => string;
+    readonly getIndex: (index: number, dataIndex: number) => number;
+    readonly allRowsSelected: () => boolean;
+    readonly toggleSelectAllCheckbox: () => void;
+    readonly toggleRowSelection: (row: T) => void;
+    readonly handlePage: (event: PageEvent) => void;
+    readonly scrollToTop: () => void;
+    readonly convertToKebabCase: (value: string) => string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntryTableComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntryTableComponent<any>, "entry-table", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showPaginator": { "alias": "showPaginator"; "required": false; "isSignal": true; }; "pageDisabled": { "alias": "pageDisabled"; "required": false; "isSignal": true; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "hidePageSize": { "alias": "hidePageSize"; "required": false; "isSignal": true; }; "paginationTemplate": { "alias": "paginationTemplate"; "required": false; "isSignal": true; }; "sortActive": { "alias": "sortActive"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "sortDisableClear": { "alias": "sortDisableClear"; "required": false; "isSignal": true; }; "sortDisabled": { "alias": "sortDisabled"; "required": false; "isSignal": true; }; "sortStart": { "alias": "sortStart"; "required": false; "isSignal": true; }; "rowHover": { "alias": "rowHover"; "required": false; "isSignal": true; }; "rowStriped": { "alias": "rowStriped"; "required": false; "isSignal": true; }; "rowFocusVisible": { "alias": "rowFocusVisible"; "required": false; "isSignal": true; }; "multiSelectable": { "alias": "multiSelectable"; "required": false; "isSignal": true; }; "rowSelected": { "alias": "rowSelected"; "required": false; "isSignal": true; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; "isSignal": true; }; "showSelectAllCheckbox": { "alias": "showSelectAllCheckbox"; "required": false; "isSignal": true; }; "rowSelectionFormatter": { "alias": "rowSelectionFormatter"; "required": false; "isSignal": true; }; "rowClassFormatter": { "alias": "rowClassFormatter"; "required": false; "isSignal": true; }; "showContextMenu": { "alias": "showContextMenu"; "required": false; "isSignal": true; }; "contextMenuItems": { "alias": "contextMenuItems"; "required": false; "isSignal": true; }; "contextMenuTemplate": { "alias": "contextMenuTemplate"; "required": false; "isSignal": true; }; "rowContextMenuFormatter": { "alias": "rowContextMenuFormatter"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; "noResultTemplate": { "alias": "noResultTemplate"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "sortChange": "sortChange"; "rowClick": "rowClick"; "contextMenuItemSelected": "contextMenuItemSelected"; }, never, never, true, never>;
+}
+
+declare class EntryCellComponent<T> {
+    readonly rowData: _angular_core.InputSignal<T>;
+    readonly columnDefinition: _angular_core.InputSignal<ColumnDefinition>;
+    readonly value: _angular_core.Signal<T>;
+    readonly printableValue: _angular_core.Signal<string>;
+    protected readonly getCellValue: (rowData: T, columnDefinition: ColumnDefinition) => T;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntryCellComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntryCellComponent<any>, "entry-cell", never, { "rowData": { "alias": "rowData"; "required": true; "isSignal": true; }; "columnDefinition": { "alias": "columnDefinition"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class EntryCellContextMenuComponent {
+    readonly items: _angular_core.InputSignal<ContextMenuItem[]>;
+    readonly rowMenuFormatter: _angular_core.InputSignal<RowContextMenuFormatter | undefined>;
+    readonly rowData: _angular_core.InputSignal<unknown>;
+    readonly triggerIcon: _angular_core.InputSignal<string>;
+    readonly isSubMenu: _angular_core.InputSignal<boolean>;
+    readonly selected: _angular_core.OutputEmitterRef<string>;
+    readonly menuItems: _angular_core.Signal<ContextMenuItem[]>;
+    readonly menu: _angular_core.Signal<MatMenuPanel<any> | undefined>;
+    readonly subMenu: _angular_core.Signal<EntryCellContextMenuComponent | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntryCellContextMenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntryCellContextMenuComponent, "entry-cell-context-menu", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "rowMenuFormatter": { "alias": "rowMenuFormatter"; "required": false; "isSignal": true; }; "rowData": { "alias": "rowData"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "isSubMenu": { "alias": "isSubMenu"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, never, never, true, never>;
+}
+
+declare class EntryCellFormattedValueComponent {
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    readonly type: _angular_core.InputSignal<string | undefined>;
+    readonly typeParameter: _angular_core.InputSignal<(ColumnTypeParameter & {
+        multiplier?: number;
+    }) | undefined>;
+    readonly defaultPercentageMultiplier: number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntryCellFormattedValueComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntryCellFormattedValueComponent, "entry-cell-formatted-value", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "typeParameter": { "alias": "typeParameter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class EntryTableModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntryTableModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<EntryTableModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.MatTableModule, typeof i4.MatSortModule, typeof _angular_material_paginator.MatPaginatorModule, typeof i6.MatCheckboxModule, typeof i7.MatIconModule, typeof i8.MatMenuModule, typeof i9.MatRadioModule, typeof i10.MatButtonModule, typeof EntryTableComponent, typeof EntryCellComponent, typeof EntryCellContextMenuComponent, typeof EntryCellFormattedValueComponent], [typeof EntryTableComponent, typeof EntryCellComponent, typeof EntryCellContextMenuComponent, typeof EntryCellFormattedValueComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<EntryTableModule>;
+}
+
+export { DEFAULT_PERCENTAGE_MULTIPLIER, ENTRY_TABLE_CONFIGURATION, EntryCellComponent, EntryCellContextMenuComponent, EntryCellFormattedValueComponent, EntryTableComponent, EntryTableConfiguration, EntryTableModule, PagedQuery, defaultPageNumber, defaultPageSize, provideEntryTableConfiguration };
+export type { CellTemplate, ColumnDefinition, ColumnSortProperties, ColumnType, ColumnTypeParameter, ContextMenuItem, OnPage, OnSort, PagedData, RowClassFormatter, RowContextMenuFormatter, RowSelectionFormatter };