@eternalcodestudio/primeng-table 19.0.0 → 19.0.2

package/lib/interfaces/table-button.interface.d.ts

@@ -1,29 +1,76 @@
 /**
- * Interface representing the configuration for action buttons in a PrimeNG table.
+ * Interface representing a table action button, applicable for both header and row buttons.
  */
 export interface ITableButton {
     /**
-     * Gets or sets the icon to be displayed on the button.
-     * The value should be a string representing the PrimeIcons class name.
+     * Optional. The icon to display on the button.
+     * Should be a valid icon name from PrimeNG, Material Icons, Font Awesome, or similar libraries.
      */
     icon?: string;
+    /**
+     * Optional. The position of the icon relative to the button label.
+     * Defaults to "left". Possible values are:
+     * - "left"
+     * - "right"
+     * - "top"
+     * - "bottom"
+     */
+    iconPos?: string;
+    /**
+     * Optional. The text label displayed on the button.
+     */
     label?: string;
     /**
-     * Gets or sets the color style class to be applied to the button.
-     * The value should be a string representing a CSS class for styling the button.
+     * Optional. If true, the button will be round. Defaults to false.
+     */
+    rounded?: boolean;
+    /**
+     * Optional. If true, adds a shadow to indicate elevation. Defaults to false.
+     */
+    raised?: boolean;
+    /**
+     * Optional. Specifies the variant of the button.
+     * Can be null (default), "text", or "outlined".
+     */
+    variant?: string;
+    /**
+     * Optional. The CSS class to apply for button styling.
+     * Example: "p-button-success" or "custom-class".
      */
     color?: string;
     /**
-     * Gets or sets the condition for displaying the button.
-     * It is a function that takes row data as input and returns a boolean indicating
-     * whether the button should be displayed for that row.
+     * Optional. Additional inline CSS styles for the button.
+     */
+    style?: string;
+    /**
+     * Optional. Function that determines whether the button should be visible for a given row.
+     * @param rowData The row data object. Null for header buttons.
+     * @returns True if the button should be visible; false otherwise.
+     */
+    visibleCondition?: (rowData: any) => boolean;
+    /**
+     * Optional. Function that determines whether the button should be displayed for a given row.
+     *
+     * Ignored if `visibleCondition` returns false.
+     * @param rowData The row data object. Null for header buttons.
+     * @returns True if the button should be enabled; false otherwise.
      */
-    condition?: (rowData: any) => boolean;
+    enabledCondition?: (rowData: any) => boolean;
     /**
-     * Represents the action to be executed when the button is clicked.
-     * This function takes the row data of the clicked row as input and performs
-     * specific actions based on that data.
+     * Optional. Controls behavior when `enabledCondition` returns false.
+     * - If `true`, the button will be hidden when the 'enabledCondition' is not met.
+     * - If `false` or `undefined`, the button will remain visible but disabled if 'enabledCondition' is not met.
+     *
+     * Ignored if `visibleCondition` returns false.
+     */
+    conditionFailHide?: boolean;
+    /**
+     * Optional. The action to execute when the button is clicked.
+     * @param rowData The row data object of the clicked row. Null for header buttons.
      */
     action?: (rowData: any) => void;
+    /**
+     * Optional. Tooltip text to display when the user hovers over the button.
+     */
     tooltip?: string;
 }

package/lib/interfaces/table-configuration.interface.d.ts

@@ -5,4 +5,5 @@ export interface ITableConfiguration {
     dateFormat: string;
     dateTimezone: string;
     dateCulture: string;
+    maxViews: number;
 }

package/lib/interfaces/table-options.interface.d.ts

@@ -0,0 +1,433 @@
+import { TableViewSaveMode } from "../enums";
+import { IColumnMetadata, IPredefinedFilter, ITableButton } from "../interfaces";
+/** Configuration options for ECS Primeng table */
+export interface ITableOptions {
+    /**
+     * Controls whether the table is active.
+     *
+     * - When `true`, the table will fetch configuration, columns, and data on init.
+     * - When `false`, the table will **not** automatically fetch or update data, even after initialization.
+     *   Use this if you want to apply filters, column changes, or other manipulations
+     *   without triggering automatic updates.
+     *
+     * @default true
+     */
+    isActive?: boolean;
+    /**
+     * Endpoint URL to fetch the table configuration.
+     *
+     * The configuration is fetched **once** when the table is initialized and is expected to return
+     * an `ITableConfiguration` object from the API. This includes data such as column definitions,
+     * the timezone to use, and other settings.
+     *
+     * If set to `undefined` or if `isActive` is `false`, the table will **not** fetch configuration automatically.
+     *
+     * @default undefined
+     */
+    urlTableConfiguration?: string;
+    /**
+     * Endpoint URL to fetch the table data.
+     *
+     * This endpoint is called **whenever the user filters, changes pages, or sorts** the table.
+     * It is expected to return an `ITablePagedResponse` object containing the paginated data.
+     *
+     * If set to `undefined` or if `isActive` is `false`, the table will **not** fetch or update data automatically.
+     *
+     * @default undefined
+     */
+    urlTableData?: string;
+    /**
+     * The array of data to be displayed in the table.
+     *
+     * Each item should represent a row and match the table's column structure.
+     *
+     * @default []
+     */
+    data?: any[];
+    /**
+     * Configurations related to options that are at the header of the table.
+     */
+    header?: {
+        /**
+         * A collection of `ITableButton` to be shown in the table header.
+         *
+         * @default []
+         */
+        buttons?: ITableButton[];
+        /**
+         * When set to `false`, the **clear sorts** button will be hidden.
+         *
+         * @default true
+         */
+        clearSortsEnabled?: boolean;
+        /**
+         * Allows customization of the **clear sorts** button icon. You may use any other icons from PrimeNG or third-party providers such as Material Icons or Font Awesome.
+         *
+         * @default "pi pi-sort-alt-slash"
+         */
+        clearSortsIcon?: string;
+        /**
+         * When set to `false`, the **clear filters** button will be hidden.
+         *
+         * @default true
+         */
+        clearFiltersEnabled?: boolean;
+        /**
+         * Allows customization of the **clear filters** button icon. Other icons from PrimeNG or third-party libraries (e.g., Material Icons, Font Awesome) may also be used.
+         *
+         * @default "pi pi-filter-slash"
+         */
+        clearFiltersIcon?: string;
+    };
+    /**
+     * Configurations related to the columns of the table.
+     */
+    columns?: {
+        /**
+         * Enables or disables the column selector feature.
+         *
+         * When `true`, a button is displayed in the top-left corner of the table.
+         * Clicking this button opens a modal that allows users to:
+         * - Show or hide columns.
+         * - Adjust the cell overflow behavior for each column.
+         * - Change the horizontal and vertical alignment of cells per column.
+         *
+         * When `false`, the button to open the column's selector modal will not be available.
+         *
+         * @default true
+         */
+        selectorEnabled?: boolean;
+        /**
+         * Can be used to specifiy a different icon to be used by the column selector.
+         * You can replace it with any icon from PrimeNG or other libraries such as Font Awesome or Material Icons.
+         *
+         * @default "pi pi-pen-to-square"
+         */
+        selectorIcon?: string;
+        /**
+         * The combination of non-selectable columns and user-selected columns
+         * that must be displayed in the table.
+         *
+         * @default []
+         */
+        shown?: IColumnMetadata[];
+    };
+    /**
+     * Configurations related to the rows of the table.
+     */
+    rows?: {
+        /**
+         * Function to dynamically assign CSS classes to a row.
+         *
+         * Receives the `rowData` object for the current row and returns:
+         * - A string with a single CSS class name
+         * - An array of class names
+         * - A Set of class names
+         * - An object with class keys and truthy/falsy values
+         *
+         * The returned classes are applied to the row in addition to any global or default styles.
+         * Useful for changing appearance of a row based on column values.
+         *
+         * Example:
+         * ```ts
+         * class: (rowData) => {
+         *   const classes = [];
+         *   if (rowData.status === "Unemployed") classes.push("unemployedRow");
+         *   return classes;
+         * }
+         * ```
+         */
+        class?: (rowData: any) => string | string[] | Set<string> | {
+            [klass: string]: any;
+        };
+        /**
+         * Function to dynamically assign inline styles to a row.
+         *
+         * Receives the `rowData` object for the current row and returns an object
+         * with CSS properties to apply inline. This allows dynamic styling based
+         * on the row's content or values.
+         *
+         * If not provided, no dynamic styles are applied.
+         *
+         * Example:
+         * ```ts
+         * style: (rowData) => {
+         *   if (rowData.status === "Full-time") {
+         *     return { fontWeight: "bold", fontStyle: "italic" };
+         *   }
+         *   return {};
+         * }
+         * ```
+         */
+        style?: (rowData: any) => {
+            [klass: string]: any;
+        };
+        /**
+         * Configurations related to the action column for the rows.
+         */
+        action?: {
+            /**
+             * A collection of `ITableButton` to be shown by this column to perform actions over rows. At least one button needs to be enable the row actions column.
+             *
+             * @default []
+             */
+            buttons?: ITableButton[];
+            /**
+             * The header label for the row actions column.
+             *
+             * @default "Actions"
+             */
+            header?: string;
+            /**
+             * If `true`, the column will appear on the right side of the table. Otherwise, it will appear on the left.
+             *
+             * @default true
+             */
+            alignmentRight?: boolean;
+            /**
+             * The fixed column width in pixels.
+             *
+             * @default 150
+             */
+            width?: number;
+            /**
+             * If `true`, the column remains visible when horizontally scrolling the table.
+             *
+             * @default true
+             */
+            frozen?: boolean;
+            /**
+             * If `true`, users can resize the column.
+             *
+             * @default false
+             */
+            resizable?: boolean;
+        };
+        /**
+         * Configurations related to the row checkbox selector.
+         */
+        checkboxSelector?: {
+            /**
+             * If `true`, a new column with checkboxes will be displayed. Users can select or unselect rows using these checkboxes. Additionally an option to filter by this column will be enabled.
+             *
+             * @default false
+             */
+            enabled?: boolean;
+            /**
+             * The header label for the checkbox selection column.
+             *
+             * @default "Selected"
+             */
+            header?: string;
+            /**
+             * If `true`, the column will appear on the right side of the table. Otherwise, it will appear on the left.
+             *
+             * @default false
+             */
+            alignmentRight?: boolean;
+            /**
+             * The fixed column width in pixels.
+             *
+             * @default 150
+             */
+            width?: number;
+            /**
+             * If `true`, the column remains visible when horizontally scrolling the table.
+             *
+             * @default true
+             */
+            frozen?: boolean;
+            /**
+             * If `true`, users can resize the column.
+             *
+             * @default false
+             */
+            resizable?: boolean;
+            /**
+             * Function that determines whether the checkbox should be enabled or not.
+             * @param rowData The row data object.
+             * @returns True if the checkbox should be enabled; false otherwise.
+             *
+             * @default undefined
+             */
+            enabledCondition?: (rowData: any) => boolean;
+        };
+        /**
+         * Configurations related to the single row selector.
+         */
+        singleSelector?: {
+            /**
+             * If set to `true`, users can click a row to select it. You can then subscribe to selection events to execute custom actions.
+             *
+             * @default false
+             */
+            enabled?: boolean;
+            /**
+             * When `true`, users must hold **CTRL** and click on a selected row to unselect it. When `false`, users can unselect a row simply by clicking it again.
+             *
+             * On mobile devices (phones or tablets), the **CTRL** key configuration is ignored. Users can unselect a previously selected row by simply clicking it, as mobile devices do not have a **CTRL** key.
+             *
+             * @default true
+             */
+            metakey?: boolean;
+        };
+    };
+    /** Configurations related to the vertical scroll of the table. */
+    verticalScroll?: {
+        /**
+         * Automatically adjust the table's height to fit its container.
+         *
+         * When set to `true`, the table will calculate the maximum height dynamically
+         * so that it exactly fits its container. This takes precedence over the `height` property.
+         *
+         * Ignored if a `cssFormula` has been provided.
+         *
+         * @default true
+         */
+        fitToContainer?: boolean;
+        /**
+         * Fixed vertical height for the table when `fitToContainer` is `false`.
+         *
+         * - If a `cssFormula` has been provided, this property is ignored.
+         * - If `fitToContainer` from `verticalScroll` is `true`, this property is ignored.
+         * - If set to a value `<= 0`, this is ignored.
+         *
+         * Use this property to enable vertical scrolling with a fixed height when you do not want
+         * the table to dynamically fit its container.
+         *
+         * @default 0
+         */
+        height?: number;
+        /**
+         * A CSS string used to define the table's vertical height.
+         *
+         * Can be a fixed value (e.g., `"500px"`) or a CSS formula (e.g., `"calc(100vh - 200px)"`).
+         * When provided, this value **overrides** both `fitToContainer` and `height`.
+         *
+         * @default undefined
+         */
+        cssFormula?: string;
+    };
+    /** Configurations related to the global filter functionality of the table. */
+    globalFilter?: {
+        /**
+         * Enables or disables the global filter input.
+         *
+         * When set to `true`, users can search across all table columns using the global search bar.
+         * When `false`, the global search input will not be rendered.
+         *
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * Maximum number of characters allowed in the global filter input.
+         *
+         * Use this to limit the length of search queries and prevent excessively long input.
+         *
+         * @default 20
+         */
+        maxLength?: number;
+    };
+    /**
+     * Predefined filters for table columns.
+     *
+     * Restricts filter options to a known set of values for a column.
+     * Suitable for columns with a limited number of distinct values.
+     * Supports plain text, tags, icons, and images. Works with `list` data types.
+     *
+     * @default {}
+     */
+    predefinedFilters?: {
+        [key: string]: IPredefinedFilter[];
+    };
+    /**
+     * Configurations related to saved table views.
+     */
+    views?: {
+        /**
+         * Determines how the table views are saved.
+         *
+         * - `TableViewSaveMode.None`: Do not save any views.
+         * - `TableViewSaveMode.SessionStorage`: Save views in the browser session storage (cleared when the tab/window closes).
+         * - `TableViewSaveMode.LocalStorage`: Save views in the browser local storage (persistent across sessions).
+         * - `TableViewSaveMode.DatabaseStorage`: Save views directly in the database via the backend API. If you are using this method you will need to specify also the `urlGet`and `urlSave`
+         *
+         * This allows users to keep their custom column orders, filters, sorting, and other table settings
+         * according to the selected storage option.
+         *
+         * @default TableViewSaveMode.None
+         */
+        saveMode?: TableViewSaveMode;
+        /**
+         * Key used to identify the table when saving and retrieving its views.
+         *
+         * Each table should have a unique `saveKey` so that its saved views (filters, column order, sorting, etc.)
+         * do not conflict with other tables.
+         *
+         * If set to `undefined`, the table will not save or load any views.
+         *
+         * @default undefined
+         */
+        saveKey?: string;
+        /**
+         * Endpoint URL to fetch saved views from the database.
+         *
+         * Only used if `saveMode` is `TableViewSaveMode.databaseStorage`.
+         * The `saveKey` is sent to identify the correct table views.
+         *
+         * @default undefined
+         */
+        urlGet?: string;
+        /**
+         * Endpoint URL to save table views to the database.
+         *
+         * Only used if `saveMode` is `TableViewSaveMode.databaseStorage`.
+         * The `saveKey` is sent to identify the correct table views.
+         *
+         * @default undefined
+         */
+        urlSave?: string;
+    };
+    /**
+     * Configurations for exporting the table data to Excel.
+     */
+    excelReport?: {
+        /**
+        * Endpoint URL of the API to perform the Excel export.
+        *
+        * When set, the table will send a request to this endpoint including the properties
+        * specified by the user, such as selected columns, filters, and sort order, to generate
+        * the export.
+        *
+        * If set to `undefined`, Excel export functionality will be disabled.
+        *
+        * @default undefined
+        */
+        url?: string;
+        /**
+         * Default title shown in the Excel export modal when preparing the export.
+         *
+         * If the string is empty (after trimming) **and** `titleAllowUserEdit` is `false`,
+         * the export button will be disabled.
+         *
+         * @default "Report"
+         */
+        defaultTitle?: string;
+        /**
+         * Determines whether the user can edit the title of the Excel file in the export modal.
+         *
+         * - If `true`, the user can modify the title before exporting.
+         * - If `false`, the title is fixed to `defaultTitle`.
+         *
+         * @default true
+         */
+        titleAllowUserEdit?: boolean;
+    };
+    /**
+     * Defines the number of seconds the user must hold the mouse button on a cell before its content is copied to the clipboard. Set to a value <= 0 to turn off this feature entirely
+     *
+     * @default 0.5
+     */
+    copyToClipboardTime?: number;
+}
+export declare const DEFAULT_TABLE_OPTIONS: ITableOptions;

package/lib/interfaces/table-paged-response.interface.d.ts

@@ -1,13 +1,6 @@
-/**
- * Interface representing the return structure for PrimeNG post requests when gathering data to represent in a table.
- */
 export interface ITablePagedResponse {
-    /** The current page number.*/
     page: number;
-    /** Total number of records available from filter.*/
     totalRecords: number;
-    /** Total number of records available (without filters).*/
     totalRecordsNotFiltered: number;
-    /** Dynamic data representing the response content of data for the table.*/
     data: any;
 }

package/lib/interfaces/table-query-request.interface.d.ts

@@ -1,18 +1,9 @@
-/**
- * Interface representing the request structure for PrimeNG post requests.
- */
 export interface ITableQueryRequest {
-    /** Gets or sets the current page number.*/
     page: number;
-    /** Gets or sets the number of items to display per page.*/
     pageSize: number;
-    /** Gets or sets a list of sorting configurations for the table.*/
     sort?: any;
-    /** Gets or sets a dictionary containing filter configurations for each column.*/
     filter: any;
-    /** Gets or sets a global filter string applied to all columns.*/
     globalFilter?: string | null;
-    /** Gets or sets a list of columns to be included in the response.*/
     columns?: string[];
     dateFormat: string;
     dateTimezone: string;

package/lib/services/http.service.d.ts

@@ -1,9 +1,34 @@
 import { HttpHeaders, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
+/**
+ * Abstract service for handling HTTP requests for **ECS Primeng table**.
+ *
+ * Provides a consistent interface for making GET and POST requests to the backend.
+ * Implementations must define how requests are executed, including error handling,
+ * headers, and response processing.
+ */
 export declare abstract class ECSPrimengTableHttpService {
-    abstract handleHttpGetRequest<T>(servicePoint: string, httpOptions?: HttpHeaders | null, showSpinner?: boolean, customErrorHandler?: ((error: any) => Observable<any>) | null, showAPIError?: boolean, responseType?: 'json' | 'blob'): Observable<HttpResponse<T>>;
-    abstract handleHttpPostRequest<T>(servicePoint: string, data: any, httpOptions?: HttpHeaders | null, showSpinner?: boolean, customErrorHandler?: ((error: any) => Observable<any>) | null, showAPIError?: boolean, responseType?: 'json' | 'blob'): Observable<HttpResponse<T>>;
+    /**
+     * Performs a GET request to the specified service endpoint.
+     *
+     * @template T The expected response type.
+     * @param servicePoint The endpoint URL or path for the GET request.
+     * @param responseType Optional. The type of response expected, either `'json'` (default) or `'blob'`.
+     * @returns An Observable of `HttpResponse<T>`, containing the full HTTP response.
+     */
+    abstract handleHttpGetRequest<T>(servicePoint: string, responseType?: 'json' | 'blob'): Observable<HttpResponse<T>>;
+    /**
+     * Performs a POST request to the specified service endpoint.
+     *
+     * @template T The expected response type.
+     * @param servicePoint The endpoint URL or path for the POST request.
+     * @param data The payload to send in the POST request body.
+     * @param httpOptions Optional HTTP headers to include in the request.
+     * @param responseType Optional. The type of response expected, either `'json'` (default) or `'blob'`.
+     * @returns An Observable of `HttpResponse<T>`, containing the full HTTP response.
+     */
+    abstract handleHttpPostRequest<T>(servicePoint: string, data: any, httpOptions?: HttpHeaders | null, responseType?: 'json' | 'blob'): Observable<HttpResponse<T>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ECSPrimengTableHttpService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ECSPrimengTableHttpService>;
 }

package/lib/services/notification.service.d.ts

@@ -1,6 +1,22 @@
 import * as i0 from "@angular/core";
+/**
+ * Abstract service for handling notifications in **ECS Primeng table**.
+ *
+ * Provides a consistent interface for displaying and clearing toast notifications.
+ * Implementations must define how the notifications are managed.
+ */
 export declare abstract class ECSPrimengTableNotificationService {
-    abstract showToast(severity: string, title: string, message: string, duration?: number, keepToast?: boolean, closable?: boolean, clearPrevious?: boolean): void;
+    /**
+     * Displays a toast notification.
+     *
+     * @param severity The severity level of the notification (e.g., 'success', 'info', 'warn', 'error').
+     * @param title The title of the toast message.
+     * @param message The detailed message of the toast.
+     */
+    abstract showToast(severity: string, title: string, message: string): void;
+    /**
+     * Clears all currently displayed toast notifications.
+     */
     abstract clearToasts(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ECSPrimengTableNotificationService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ECSPrimengTableNotificationService>;

package/lib/utils/create-table-options.d.ts

@@ -0,0 +1,5 @@
+import { ITableOptions } from '../interfaces';
+/**
+ * Create table options based on defaults, with optional overrides.
+ */
+export declare function createTableOptions(overrides?: Partial<ITableOptions>): ITableOptions;

package/lib/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./create-table-options";
 export * from "./data-align-horizontal-as-text";
 export * from "./data-align-vertical-as-text";
 export * from "./data-type-as-text";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eternalcodestudio/primeng-table",
-  "version": "19.0.0",
+  "version": "19.0.2",
   "description": "ECS reusable Angular PrimeNG table component with advanced server-side filters. Designed to offload filtering logic to any backend API.",
   "author": "ECS (Eternal CODE Studio)",
   "license": "MIT",
@@ -16,8 +16,9 @@
   "peerDependencies": {
     "@angular/common": ">=19.0.0",
     "@angular/core": ">=19.0.0",
+    "@angular/animations": ">=19.0.0",
     "primeng": ">=19.0.0",
-    "primeicons": ">=6.0.0"
+    "primeicons": ">=7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -28,10 +29,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/AIO1/PrimeNGTableReusableComponent"
+    "url": "git+https://github.com/AIO1/ECSPrimengTable.git"
   },
   "bugs": {
-    "url": "https://github.com/AIO1/PrimeNGTableReusableComponent/issues"
+    "url": "https://github.com/AIO1/ECSPrimengTable/issues"
   },
   "homepage": "https://eternalcodestudio.com/",
   "sideEffects": false,

package/public-api.d.ts

@@ -3,3 +3,4 @@ export * from './lib/components/ecs-primeng-table/ecs-primeng-table.service';
 export * from './lib/enums';
 export * from './lib/interfaces';
 export * from './lib/services';
+export * from "./lib/utils/create-table-options";