TCB Table Component

The CmsTableComponent is a powerful Angular component designed to work with the CMS CRUD package. It provides functionality for displaying tabular data with support for custom templates, actions, sorting, and integration with a data service (CmsService<T>). It also supports dynamic configuration and event handling for row and cell actions.

How to use the component in your app :

1. import the component :

import {CmsTableComponent} from '@tradinos/cms-frontend-entity';

2. selector for component , like it :

<lib-cms-table>
</lib-cms-table>

Features

• Dynamic Templates: Custom templates for cells and rows can be injected using the templates input.

• Event Emitters: Handles sorting, row actions, and cell actions via dedicated methods.

• Integration with CmsService: Automatically fetches and updates data, providing a seamless CRUD experience.

• Action Visibility: Dynamically calculates and displays actions based on data and configuration.

Inputs

Input	Type	Description	Required
templates	{ [key: string]: TemplateRef<any> }	A dictionary of custom templates for rendering specific parts of the table.	Yes
emptyDataTemplate	TemplateRef<any>	Custom template to display when no data is available.	No

CmsTableComponent

The CmsTableComponent is a powerful Angular component designed to work with the CMS CRUD package. It provides functionality for displaying tabular data with support for custom templates, actions, sorting, and integration with a data service (CmsService<T>). It also supports dynamic configuration and event handling for row and cell actions.

Features

1. Dynamic Data Handling:

   • Listens to updates from the CmsService and dynamically adjusts the table's content and actions.

2. Customizable Templates:

   • Allows injecting custom templates for cells, rows, or headers using the templates input.

3. Action Visibility:

   • Dynamically determines and toggles the visibility of actions based on the data.

4. Sorting:

   • Handles sorting logic for columns and integrates with server-side or client-side sorting mechanisms.

5. Action Events:

   • Emits events for both row-level and cell-level actions, enabling interaction handling.

Inputs

Input	Type	Description	Required	Default Value
templates	{ [key: string]: TemplateRef<any> }	A dictionary of custom templates for rendering specific parts of the table.	No	{}
emptyDataTemplate	TemplateRef<any>	Custom template to display when no data is available.	No

Methods

1. customSort(event: SortEvent): void

• Description: Handles sorting logic for table columns and updates the filter configuration in the CmsService.

• Parameters:

  • event: Contains sorting information (field and order).

Example

cmsTable.customSort({ field: 'name', order: -1 }); // Sorts the table by the "name" column in descending order.

1. emitCellAction(key: string, item: T): void

   • Description: Emits a cell-specific action event via the CmsService.

   • Parameters:

     • key: Identifier for the action (e.g., "edit" or "delete").

     • item: The data row associated with the action.

Example

cmsTable.emitCellAction('edit', selectedItem); // Emits an "edit" action for the selected item.

1. emitRowAction(key: any, item: T): void

   • Description: Emits a row-specific action event via the CmsService.

   • Parameters:

     • key: Identifier for the action (e.g., "view" or "delete").

     • item: The data row associated with the action.

Example

cmsTable.emitRowAction('delete', selectedItem); // Emits a "delete" action for the selected item.