@eternalcodestudio/primeng-table 20.0.4 → 20.0.5

package/index.d.ts

@@ -201,39 +201,79 @@ interface IColumnMetadata {
     initialWidth: number;
 }
 
+/**
+ * Represents a predefined filter value for a column in **ECS PrimeNG tables**.
+ *
+ * Allows displaying a value as text, tag, icon or image (from URL or blob) with optional styles and colors.
+ */
 interface IPredefinedFilter {
     /**
-     * The value of the PrimeNG icon.
-     */
-    icon?: string;
-    iconURL?: string;
-    iconBlobSourceEndpoint?: string;
-    iconBlobSourceEndpointResponseError?: boolean;
-    /**
-     * The icon as a blob.
+     * The underlying value of the cell. Must match the data returned from the backend for proper filtering and mapping.
+     *
+     * This is also used by the global filter internally.
+     *
+     * **IMPORTANT**: For text and tag representations, it is recommended that `value` matches `name`.
      */
-    iconBlob?: Blob;
+    value: string | number;
     /**
-     * A string representing the name to be shown in the UI.
+     * The text displayed in the frontend for this filter value.
+     *
+     * Used when `displayName` is `true` or when displaying a tag.
      */
     name?: string;
     /**
-     * If the name needs to be shown in the UI
+     * Set to `true` to display the `name` as text in the cell.
      */
     displayName?: boolean;
     /**
-     * The underlying value of the option. The value can be of any type and represents the data managed behind the scenes.
+     * Set to `true` to display the `name` as a tag in the cell.
      */
-    value: any;
+    displayTag?: boolean;
     /**
-     * If the value needs to be displayed with a tag
+     * Optional CSS style object to apply to the tag.
+     *
+     * Example: { background: 'rgb(255,0,0)', color: 'white' }
      */
-    displayTag?: boolean;
     tagStyle?: {
         [key: string]: string;
     };
+    /**
+     * The icon to display for this value.
+     *
+     * Can use icons from PrimeNG, Font Awesome, Material Icons, etc...
+     */
+    icon?: string;
+    /**
+     * Optional color to apply to the icon.
+     *
+     * Example: "red", "#00ff00"
+     */
     iconColor?: string;
+    /**
+     * Optional CSS style string to apply to the icon.
+     *
+     * Example: "font-size: 1.5rem" "margin-right: 0.5rem"
+     */
     iconStyle?: string;
+    /**
+     * The image to display directly from a URL.
+     */
+    imageURL?: string;
+    /**
+     * The image to display from a Blob object.
+     */
+    imageBlob?: Blob;
+    /**
+     * If using a Blob and it is not provided directly, the backend endpoint to fetch the Blob from.
+     */
+    imageBlobSourceEndpoint?: string;
+    /**
+     * @internal
+     * Indicates that fetching the Blob from `imageBlobSourceEndpoint` failed.
+     *
+     * **_Do not modify this property manually._**
+     */
+    imageBlobFetchError?: boolean;
 }
 
 interface ITableConfiguration {
@@ -257,7 +297,7 @@ interface ITableOptions {
      *
      * @default true
      */
-    isActive: boolean;
+    isActive?: boolean;
     /**
      * Endpoint URL to fetch the table configuration.
      *
@@ -265,22 +305,22 @@ interface ITableOptions {
      * an `ITableConfiguration` object from the API. This includes data such as column definitions,
      * the timezone to use, and other settings.
      *
-     * If set to `null` or if `isActive` is `false`, the table will **not** fetch configuration automatically.
+     * If set to `undefined` or if `isActive` is `false`, the table will **not** fetch configuration automatically.
      *
-     * @default null
+     * @default undefined
      */
-    urlTableConfiguration: string | null;
+    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 `null` or if `isActive` is `false`, the table will **not** fetch or update data automatically.
+     * If set to `undefined` or if `isActive` is `false`, the table will **not** fetch or update data automatically.
      *
-     * @default null
+     * @default undefined
      */
-    urlTableData: string | null;
+    urlTableData?: string;
     /**
      * The array of data to be displayed in the table.
      *
@@ -288,18 +328,18 @@ interface ITableOptions {
      *
      * @default []
      */
-    data: any[];
-    header: {
-        buttons: ITableButton[];
-        clearSortsEnabled: boolean;
-        clearSortsIcon: string;
-        clearFiltersEnabled: boolean;
-        clearFiltersIcon: string;
+    data?: any[];
+    header?: {
+        buttons?: ITableButton[];
+        clearSortsEnabled?: boolean;
+        clearSortsIcon?: string;
+        clearFiltersEnabled?: boolean;
+        clearFiltersIcon?: string;
     };
     /**
      * Configurations related to the columns of the table.
      */
-    columns: {
+    columns?: {
         /**
          * Enables or disables the column selector feature.
          *
@@ -313,48 +353,49 @@ interface ITableOptions {
          *
          * @default true
          */
-        selectorEnabled: boolean;
+        selectorEnabled?: boolean;
+        selectorIcon?: string;
         /**
          * The combination of non-selectable columns and user-selected columns
          * that must be displayed in the table.
          *
          * @default []
          */
-        shown: IColumnMetadata[];
+        shown?: IColumnMetadata[];
     };
     /**
      * Configurations related to the rows of the table.
      */
-    rows: {
-        class: (rowData: any) => string | string[] | Set<string> | {
+    rows?: {
+        class?: (rowData: any) => string | string[] | Set<string> | {
             [klass: string]: any;
         };
-        style: (rowData: any) => {
+        style?: (rowData: any) => {
             [klass: string]: any;
         };
-        action: {
-            buttons: ITableButton[];
-            header: string;
-            alignmentRight: boolean;
-            width: number;
-            frozen: boolean;
-            resizable: boolean;
+        action?: {
+            buttons?: ITableButton[];
+            header?: string;
+            alignmentRight?: boolean;
+            width?: number;
+            frozen?: boolean;
+            resizable?: boolean;
         };
-        checkboxSelector: {
-            enabled: boolean;
-            header: string;
-            alignmentRight: boolean;
-            width: number;
-            frozen: boolean;
-            resizable: boolean;
+        checkboxSelector?: {
+            enabled?: boolean;
+            header?: string;
+            alignmentRight?: boolean;
+            width?: number;
+            frozen?: boolean;
+            resizable?: boolean;
         };
-        singleSelector: {
-            enabled: boolean;
-            metakey: boolean;
+        singleSelector?: {
+            enabled?: boolean;
+            metakey?: boolean;
         };
     };
     /** Configurations related to the vertical scroll of the table. */
-    verticalScroll: {
+    verticalScroll?: {
         /**
          * Automatically adjust the table's height to fit its container.
          *
@@ -363,7 +404,7 @@ interface ITableOptions {
          *
          * @default true
          */
-        fitToContainer: boolean;
+        fitToContainer?: boolean;
         /**
          * Fixed vertical height for the table when `fitToContainer` is `false`.
          *
@@ -375,10 +416,10 @@ interface ITableOptions {
          *
          * @default 0
          */
-        height: number;
+        height?: number;
     };
     /** Configurations related to the global search functionality of the table. */
-    globalSearch: {
+    globalSearch?: {
         /**
          * Enables or disables the global search input.
          *
@@ -387,7 +428,7 @@ interface ITableOptions {
          *
          * @default true
          */
-        enabled: boolean;
+        enabled?: boolean;
         /**
          * Maximum number of characters allowed in the global search input.
          *
@@ -395,15 +436,15 @@ interface ITableOptions {
          *
          * @default 20
          */
-        maxLength: number;
+        maxLength?: number;
     };
-    predefinedFilters: {
+    predefinedFilters?: {
         [key: string]: IPredefinedFilter[];
     };
     /**
      * Configurations related to saved table views.
      */
-    views: {
+    views?: {
         /**
          * Determines how the table views are saved.
          *
@@ -417,41 +458,41 @@ interface ITableOptions {
          *
          * @default TableViewSaveMode.None
          */
-        saveMode: TableViewSaveMode;
+        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 `null`, the table will not save or load any views.
+         * If set to `undefined`, the table will not save or load any views.
          *
-         * @default null
+         * @default undefined
          */
-        saveKey: string | null;
+        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 null
+         * @default undefined
          */
-        urlGet: string | null;
+        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 null
+         * @default undefined
          */
-        urlSave: string | null;
+        urlSave?: string;
     };
     /**
      * Configurations for exporting the table data to Excel.
      */
-    excelReport: {
+    excelReport?: {
         /**
         * Endpoint URL of the API to perform the Excel export.
         *
@@ -459,11 +500,11 @@ interface ITableOptions {
         * specified by the user, such as selected columns, filters, and sort order, to generate
         * the export.
         *
-        * If set to `null`, Excel export functionality will be disabled.
+        * If set to `undefined`, Excel export functionality will be disabled.
         *
-        * @default null
+        * @default undefined
         */
-        url: string | null;
+        url?: string;
         /**
          * Default title shown in the Excel export modal when preparing the export.
          *
@@ -472,7 +513,7 @@ interface ITableOptions {
          *
          * @default "Report"
          */
-        defaultTitle: string;
+        defaultTitle?: string;
         /**
          * Determines whether the user can edit the title of the Excel file in the export modal.
          *
@@ -481,9 +522,9 @@ interface ITableOptions {
          *
          * @default true
          */
-        titleAllowUserEdit: boolean;
+        titleAllowUserEdit?: boolean;
     };
-    copyToClipboardTime: number;
+    copyToClipboardTime?: number;
 }
 declare const DEFAULT_TABLE_OPTIONS: ITableOptions;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eternalcodestudio/primeng-table",
-  "version": "20.0.4",
+  "version": "20.0.5",
   "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,6 +16,7 @@
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",
+    "@angular/animations": ">=20.0.0",
     "primeng": ">=20.0.0",
     "primeicons": ">=7.0.0"
   },
@@ -28,7 +29,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/AIO1/ECSPrimengTable"
+    "url": "git+https://github.com/AIO1/ECSPrimengTable.git"
   },
   "bugs": {
     "url": "https://github.com/AIO1/ECSPrimengTable/issues"