TCB Base Table Component

The CmsBaseTableComponent is a reusable table component for Angular applications. It provides rich features like dynamic data rendering, customizable templates, row and cell actions, selection management, and event emitters for handling interactions like sorting, row selection, and custom actions.

How to use the component in your app :

1. Import the component :

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

1. The selector for component, like it :

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

Features

1. Dynamic Data Rendering: Displays a list of data (data input) in a customizable table layout.

2. Customizable Templates: Supports injecting custom templates for cells, headers, and empty states.

3. Row and Cell Actions: Allows actions to be performed at both the row and cell levels.

4. Selection Management: Enables row selection with support for multi-select and "select all."

5. Sorting: Emits sorting events for server-side or client-side sorting.

6. Event Emitters: Provides hooks to handle user interactions like selection, sorting, and actions.

7. Visibility Control: Supports toggling the visibility of actions dynamically.

Inputs

Input	Type	Description	Required	Default
data	T[]	The data array to display in the table.	Yes	[]
templates	{ [key: string]: TemplateRef<any> }	A set of custom templates for rendering specific parts of the table.	No	{}
tableConfiguration	BaseTableConfiguration<T>	The configuration object defining the table's columns, actions, and behaviors.	Yes	-
actionsVisibility	boolean	Controls the visibility of actions in the table.	No	true
selection	T[] | null	Tracks the currently selected rows.	Yes	null
actions	BaseCRUDActions	A set of CRUD actions to display in the table (e.g., create, delete).	No	-
emptyDataTemplate	TemplateRef<any>	Custom template to display when the data array is empty.	No	-

Outputs

Output	Type	Description
selectAllChange	EventEmitter<TableSelectAllChangeEvent>	Emits when the "select all" checkbox is toggled.
selectionChange	EventEmitter<T[]>	Emits the current selection whenever rows are selected or deselected.
sortFunction	EventEmitter<SortEvent>	Emits a sorting event containing the column and direction.
cellAction	EventEmitter<{ key: string; item: T }>	Emits when a cell-specific action is triggered.
rowAction	EventEmitter<{ key: string; item: T }>	Emits when a row-specific action (e.g., view, delete) is triggered.

For example

html

<cms-base-table
  [data]="users"
  [tableConfiguration]="userTableConfig"
  [templates]="customTemplates"
  [actionsVisibility]="true"
  [selection]="selectedUsers"
  [actions]="userActions"
  (selectAllChange)="onSelectAll($event)"
  (selectionChange)="onSelectionChange($event)"
></cms-base-table>

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-table',
  templateUrl: './user-table.component.html',
})
export class UserTableComponent {
  users = [
    { id: 1, name: 'John Doe', email: '[e-mail]' },
    { id: 2, name: 'Jane Smith', email: '[e-mail]' },
  ];

  userTableConfig = {
    dataKey: 'id',
    columns: [
      { title: 'ID', key: 'id' },
      { title: 'Name', key: 'name' },
      { title: 'Email', key: 'email', sortKey: 'email' },
    ],
  };

  customTemplates = {
    nameColumn: `<ng-template #nameColumn let-item>{{ item.name }}</ng-template>`,
  };

  selectedUsers: any[] = [];
  userActions = {
    delete: () => true,
    edit: () => true,
  };

  onSelectAll(event: any): void {
    //add your logic
  }

  onSelectionChange(event: any): void {
    //add your logic
  }

}

Methods

visibleActionsCount(actions: BaseTableColumnAction[]): number

• Description: Counts the number of visible actions for a given row or cell.

• Logic:

  • Filters out actions where visible is false or the visibleFn function evaluates to false.

  • Returns the count of visible actions.

• Use Case: Dynamically determine if action buttons should be displayed or hidden.