# TCB Base Table Component

The <mark style="color:red;">**`CmsBaseTableComponent`**</mark> 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 : &#x20;

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

2. The selector for component, like it : &#x20;

```markup
<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** |
| ----------------------------------------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------- |
| <mark style="color:orange;">**`data`**</mark>               | `T[]`                                 | The data array to display in the table.                                                                                                                                                        | Yes          | `[]`        |
| <mark style="color:orange;">**`templates`**</mark>          | `{ [key: string]: TemplateRef<any> }` | A set of custom templates for rendering specific parts of the table.                                                                                                                           | No           | `{}`        |
| <mark style="color:orange;">**`tableConfiguration`**</mark> | `BaseTableConfiguration<T>`           | [The configuration object defining the table's columns, actions, and behaviors.](https://tradinos.gitbook.io/tradinos-code-base-docs/configurations/crud-configuration#basetableconfiguration) | Yes          | -           |
| <mark style="color:orange;">**`actionsVisibility`**</mark>  | `boolean`                             | Controls the visibility of actions in the table.                                                                                                                                               | No           | `true`      |
| <mark style="color:orange;">**`selection`**</mark>          | `T[] \| null`                         | Tracks the currently selected rows.                                                                                                                                                            | Yes          | null        |
| <mark style="color:orange;">**`actions`**</mark>            | `BaseCRUDActions`                     | [A set of CRUD actions to display in the table (e.g., create, delete).](https://tradinos.gitbook.io/tradinos-code-base-docs/configurations/crud-configuration#basecrudactions)                 | No           | -           |
| <mark style="color:orange;">**`emptyDataTemplate`**</mark>  | `TemplateRef<any>`                    | Custom template to display when the `data` array is empty.                                                                                                                                     | No           | -           |

#### **Outputs**

<table data-header-hidden><thead><tr><th width="201"></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Output</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td><mark style="color:green;"><strong><code>selectAllChange</code></strong></mark></td><td><code>EventEmitter&#x3C;TableSelectAllChangeEvent></code></td><td>Emits when the "select all" checkbox is toggled.</td></tr><tr><td><mark style="color:green;"><strong><code>selectionChange</code></strong></mark></td><td><code>EventEmitter&#x3C;T[]></code></td><td>Emits the current selection whenever rows are selected or deselected.</td></tr><tr><td><mark style="color:green;"><strong><code>sortFunction</code></strong></mark></td><td><code>EventEmitter&#x3C;SortEvent></code></td><td>Emits a sorting event containing the column and direction.</td></tr><tr><td><mark style="color:green;"><strong><code>cellAction</code></strong></mark></td><td><code>EventEmitter&#x3C;{ key: string; item: T }></code></td><td>Emits when a cell-specific action is triggered.</td></tr><tr><td><mark style="color:green;"><strong><code>rowAction</code></strong></mark></td><td><code>EventEmitter&#x3C;{ key: string; item: T }></code></td><td>Emits when a row-specific action (e.g., view, delete) is triggered.</td></tr></tbody></table>

**For example**

{% code title="html" %}

```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>
```

{% endcode %}

```typescript
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: 'john.doe@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' },
  ];

  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.