### Install Dependencies

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/DEV_DOCS.md

Installs the necessary dependencies for the project. Requires Node.js version 12 or greater.

```bash
npm install
```

--------------------------------

### Full Basic Example Component for angular2-smart-table

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/demo/demo.component.html

Provides a complete example of an Angular component that sets up and displays a basic angular2-smart-table with data. It includes imports, settings, data, and template integration.

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

@Component({
  selector: 'basic-example-data',
  templateUrl: './basic-example-data.component.html',
})
export class BasicExampleDataComponent {

  settings = {
    columns: {
      id: {
        title: 'ID',
        type: 'number',
      },
      name: {
        title: 'Full Name',
      },
      email: {
        title: 'Email',
      },
      age: {
        title: 'Age',
      }
    }
  };

  data = [
    { id: 1, name: 'Leanne Graham', email: 'Sincere@april.biz', age: 31 },
    { id: 2, name: 'Ervin Howell', email: 'Shanna@melissa.tv', age: 45 },
    { id: 3, name: 'Clementine Bauch', email: 'Nathan@yesenia.net', age: 29 },
  ];
}
```

--------------------------------

### Run Demo Application

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/DEV_DOCS.md

Starts the demo application, which includes a live demonstration of the library and its settings documentation. Useful for debugging changes in the library's core.

```bash
npm run start
```

--------------------------------

### Basic Angular Smart Table Configuration

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

Demonstrates a basic setup of Angular Smart Table by defining a settings object with column configurations and providing an array of data. The table automatically includes add, edit, and delete functionalities.

```typescript
import { Component } from '@angular/core';
import { Settings } from 'angular2-smart-table';

@Component({
  selector: 'app-basic-table',
  template: `
    <angular2-smart-table
      [settings]="settings"
      [source]="data">
    </angular2-smart-table>
  `
})
export class BasicTableComponent {
  settings: Settings = {
    columns: {
      id: {
        title: 'ID'
      },
      name: {
        title: 'Full Name'
      },
      username: {
        title: 'User Name'
      },
      email: {
        title: 'Email'
      }
    }
  };

  data = [
    { id: 1, name: 'Leanne Graham', username: 'Bret', email: 'Sincere@april.biz' },
    { id: 2, name: 'Ervin Howell', username: 'Antonette', email: 'Shanna@melissa.tv' },
    { id: 3, name: 'Clementine Bauch', username: 'Samantha', email: 'Nathan@yesenia.net' },
    { id: 4, name: 'Patricia Lebsack', username: 'Karianne', email: 'Julianne.OConner@kory.org' },
    { id: 5, name: 'Chelsey Dietrich', username: 'Kamren', email: 'Lucio_Hettinger@annie.ca' }
  ];
}
```

--------------------------------

### Install angular2-smart-table

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/README.md

Installs the angular2-smart-table npm package. This command adds the package to your project's dependencies in package.json and downloads it to the node_modules folder.

```bash
npm i angular2-smart-table
```

--------------------------------

### Prepare and Store Cell Values as String and Correct Type

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/migration/migration.component.html

This example demonstrates how to use `valuePrepareFunction` to convert values to strings for display and `valueStoreFunction` to convert user input strings back to their original types (e.g., number or null) when editing cells in angular2-smart-table. This prevents type confusion issues.

```javascript
{
  title: 'Age',
  isEditable: true,
  valuePrepareFunction: (x) => x?.toString() ?? '',
  valueStoreFunction: (x: string) => {
    const s = x.trim();
    if (s === '') return null;
    return Number(s);
  }
}
```

--------------------------------

### Angular2-Smart-Table: Pagination Configuration

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

Configures pagination settings for Angular2-Smart-Table, allowing custom per-page options and labels. This example sets the initial page, per-page count, and provides a select dropdown for users to choose the number of items displayed per page. It requires the `angular2-smart-table` library.

```typescript
import { Component } from '@angular/core';
import { Settings } from 'angular2-smart-table';

@Component({
  selector: 'app-pagination',
  template: `
    <angular2-smart-table [settings]="settings" [source]="data"></angular2-smart-table>
  `
})
export class PaginationComponent {
  settings: Settings = {
    pager: {
      display: true,
      page: 1,
      perPage: 5,
      perPageSelect: [5, 10, 25, 50, 100],
      perPageSelectLabel: 'Items per page:'
    },
    columns: {
      id: { title: 'ID' },
      name: { title: 'Name' }
    }
  };

  data = Array.from({ length: 50 }, (_, i) => ({
    id: i + 1,
    name: `User ${i + 1}`
  }));
}
```

--------------------------------

### Get Element Count

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

Returns the total number of elements, considering the current filter.

```APIDOC
## GET /count

### Description
Returns the total number of elements with respect to the current filter. If you want to find the overall total number of elements, use `getAll()` and obtain the length - but keep in mind that this might be a costly operation.

### Method
GET

### Endpoint
/count

### Parameters
none

### Response
#### Success Response (200)
- **count** (integer) - The total number of elements matching the current filter.
```

--------------------------------

### Configure Advanced Filters in Angular

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

Enables advanced filtering capabilities for table columns. Supported filter types include 'text', 'list', 'multiselect', 'checkbox', and 'custom'. A link to an example configuration is provided.

```typescript
filter: {
  type: 'custom', // or 'text', 'list', 'multiselect', 'checkbox'
  // Custom filter configuration details would go here
}
```

--------------------------------

### Get Selected Rows

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

Retrieves an array containing the currently selected rows in the table.

```APIDOC
## GET /selected-rows

### Description
Returns an array of the currently selected elements.

### Method
GET

### Endpoint
/selected-rows

### Parameters
#### Query Parameters
- **silent** (boolean) - Optional - If true, you have to additionally call `refresh` to reflect the changes.

### Response
#### Success Response (200)
- **selectedRows** (array) - An array of the currently selected elements.
```

--------------------------------

### Create Custom Cell Editor in Angular2 Smart Table

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

Explains how to create a custom cell editor component by extending the `DefaultEditor` class. This allows for custom input logic and rendering within table cells. The example shows a custom editor for a link field, allowing users to input both the link text and URL.

```typescript
import { Component, AfterViewInit } from '@angular/core';
import { DefaultEditor, Settings } from 'angular2-smart-table';

@Component({
  template:
    `
    Name: <input [ngClass]="inputClass"
            [value]="name"
            [disabled]="!cell.isEditable()"
            [placeholder]="cell.getTitle()"
            (click)="onClick.emit($event)"
            (change)="name = $any($event.target).value; updateValue()"
            (keydown.enter)="onEdited.emit()"
            (keydown.esc)="onStopEditing.emit()"><br>
    Url: <input [ngClass]="inputClass"
            [value]="url"
            [disabled]="!cell.isEditable()"
            [placeholder]="cell.getTitle()"
            (click)="onClick.emit($event)"
            (change)="url = $any($event.target).value; updateValue()"
            (keydown.enter)="onEdited.emit()"
            (keydown.esc)="onStopEditing.emit()">
  `
})
export class CustomEditorComponent extends DefaultEditor implements AfterViewInit {
  name: string = '';
  url: string = '';

  ngAfterViewInit() {
    // Parse existing value
    const match = this.cell.getValue().match(/<a href="([^"]*)">([^<]*)</a>/);
    if (match) {
      this.url = match[1];
      this.name = match[2];
    }
  }

  updateValue() {
    this.cell.setValue(`<a href='${this.url}'>${this.name}</a>`);
  }
}

// Usage in settings
@Component({
  selector: 'app-custom-editor-example',
  template: `<angular2-smart-table [settings]="settings" [source]="data"></angular2-smart-table>`
})
export class CustomEditorExampleComponent {
  settings: Settings = {
    columns: {
      id: { title: 'ID' },
      link: {
        title: 'Link',
        type: 'html',
        editor: {
          type: 'custom',
          component: CustomEditorComponent
        }
      }
    }
  };

  data = [
    { id: 1, link: '<a href="https://example.com">Example</a>' }
  ];
}
```

--------------------------------

### Angular: Select and Textarea Column Types with CSS

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html

Demonstrates how to utilize select and textarea column types within angular2-smart-table. It also shows how to apply CSS classes to influence the rendering of these cells. This example is useful for creating forms with dropdowns and multi-line text inputs directly within the table.

```typescript
import { Component, OnInit } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';

import {
  SmartTableService,
} from '../../../@core/data/smart-table.service';

@Component({
  selector: 'ngx-advanced-example-types',
  templateUrl: './advanced-example-types.component.html',
  styleUrls: ['./advanced-example-types.component.scss'],
})
export class AdvancedExampleTypesComponent implements OnInit {

  settings = {
    add: {
      addButtonContent: '<i class="nb-plus"></i>',
      createButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },
    columns: {
      id: {
        hide: true,
        title: 'ID',
        type: 'number',
      },
      name: {
        title: 'Full Name',
        type: 'string',
      },
      email: {
        title: 'Email',
        type: 'string',
      },
      username: {
        title: 'User Name',
        type: 'string',
      },
      member: {
        title: 'Member Status',
        filter: {
          type: 'select',
          config: {
            selectText: 'Select status',
            list: [
              {
                value: 'pending',
                title: 'Pending',
              },
              {
                value: 'active',
                title: 'Active',
              },
              {
                value: 'inactive',
                title: 'Inactive',
              },
            ],
          },
        },
        type: 'string',
      },
      age: {
        title: 'Age',
        type: 'number',
      },
      notes: {
        title: 'Notes',
        type: 'textarea',
      },
    },
  };

  source: LocalDataSource;

  constructor(private service: SmartTableService) {
    const data = this.service.getUsers();
    this.source = new LocalDataSource(data);
  }

  onUserRowSelect(event): void {
    // console.log(event);
  }

  onDeleteConfirm(event): void {
    if (event.data) {
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }
}

```

--------------------------------

### Build Project Components

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/DEV_DOCS.md

Builds both the library code and the demo application. This script is essential for preparing the project for testing or release.

```bash
npm run build
```

--------------------------------

### Publish Packages to NPM

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/DEV_DOCS.md

Publishes the framework packages to the NPM registry. This command should be run after all release preparations are complete.

```bash
npm run publish
```

--------------------------------

### Create and Push Git Tag

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/DEV_DOCS.md

Creates a Git tag for the current release version and pushes it to the remote repository. This is crucial for version control and referencing specific releases.

```git
git tag {version}
git push --tags
```

--------------------------------

### Build Library for Release

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/DEV_DOCS.md

Builds the library component of the project, ensuring it compiles correctly before proceeding with the release process.

```bash
npm run build:lib
```

--------------------------------

### Angular2-Smart-Table: Row Class Function

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

Applies dynamic CSS classes to rows in Angular2-Smart-Table based on the row's data, specifically the 'status' field. This allows for visual differentiation of rows. The example defines styles for 'Active', 'Inactive', and 'Pending' statuses. Requires the `angular2-smart-table` library.

```typescript
import { Component } from '@angular/core';
import { Settings, Row } from 'angular2-smart-table';

@Component({
  selector: 'app-row-styling',
  template: `
    <angular2-smart-table [settings]="settings" [source]="data"></angular2-smart-table>
  `,
  styles: [
    `
    ::ng-deep .row-active { background-color: #e8f5e9; }
    ::ng-deep .row-inactive { background-color: #ffebee; }
    ::ng-deep .row-pending { background-color: #fff3e0; }
  `]
})
export class RowStylingComponent {
  settings: Settings = {
    rowClassFunction: (row: Row) => {
      const status = row.getData().status;
      switch (status) {
        case 'Active': return 'row-active';
        case 'Inactive': return 'row-inactive';
        case 'Pending': return 'row-pending';
        default: return '';
      }
    },
    columns: {
      id: { title: 'ID' },
      name: { title: 'Name' },
      status: { title: 'Status' }
    }
  };

  data = [
    { id: 1, name: 'John', status: 'Active' },
    { id: 2, name: 'Jane', status: 'Inactive' },
    { id: 3, name: 'Bob', status: 'Pending' }
  ];
}
```

--------------------------------

### Update Documentation for GitHub Pages

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/DEV_DOCS.md

Updates the project's documentation to be deployed on GitHub Pages. This ensures that the latest changes are reflected in the public documentation.

```bash
npm run docs:gh-pages
```

--------------------------------

### Angular: Custom Button View

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html

Provides an example of how to implement a custom button view in angular2-smart-table. This allows for custom actions or display elements within a table cell, triggered by a button. The implementation typically involves creating a custom component that conforms to the `ViewCell` interface.

```typescript
import { Component, OnInit } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';

import {
  SmartTableService,
} from '../../../@core/data/smart-table.service';

@Component({
  selector: 'ngx-basic-example-button-view',
  templateUrl: './basic-example-button-view.component.html',
  styleUrls: ['./basic-example-button-view.component.scss'],
})
export class BasicExampleButtonViewComponent implements OnInit {

  settings = {
    actions: {
      add: false,
      edit: false,
      delete: false,
    },
    columns: {
      id: {
        title: 'ID',
        type: 'number',
      },
      name: {
        title: 'Full Name',
        type: 'string',
      },
      username: {
        title: 'User Name',
        type: 'string',
      },
      email: {
        title: 'Email',
        type: 'string',
      },
      age: {
        title: 'Age',
        type: 'number',
      },
      actions: {
        title: 'Actions',
        type: 'custom',
        renderComponent: ButtonViewComponent,
        onComponentInitFunction: (instance) => {
          // instance.save.subscribe((value) => {
          //   // doing something with value
          // });
        },
      },
    },
  };

  source: LocalDataSource;

  constructor(private service: SmartTableService) {
    const data = this.service.getUsers();
    this.source = new LocalDataSource(data);
  }

  onUserRowSelect(event): void {
    // console.log(event);
  }

  onDeleteConfirm(event): void {
    if (event.data) {
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }
}

```

```typescript
import { Component, Input, OnInit } from '@angular/core';

import { ViewCell } from 'ng2-smart-table';

@Component({
  selector: 'ngx-button-view',
  template: `
    <button (click)="onClick()" class="btn btn-primary">{{ renderValue }}</button>
  `,
})
export class ButtonViewComponent implements ViewCell, OnInit {
  renderValue: string;

  @Input() value: string | number;
  @Input() rowData: any;

  // public save: EventEmitter<any>;

  ngOnInit() {
    this.renderValue = this.value.toString().toUpperCase();
  }

  onClick(): void {
    // this.save.emit(this.rowData);
    alert(`Row with ID: ${this.rowData.id} was clicked.`);
  }
}

```

--------------------------------

### Create Release Branch

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/DEV_DOCS.md

Creates a new Git branch for a release, following the 'release/{version}' naming convention. Replace {version} with the desired semantic version (e.g., 1.6.0).

```git
git checkout -b release/{version}
```

--------------------------------

### Provide Data for angular2-smart-table

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/demo/demo.component.html

Demonstrates how to provide data to the angular2-smart-table. This involves creating an array of objects in your component, where object keys match the column keys defined in the settings.

```typescript
data = [
  { id: 1, name: 'Leanne Graham', email: 'Sincere@april.biz', age: 31 },
  { id: 2, name: 'Ervin Howell', email: 'Shanna@melissa.tv', age: 45 },
  { id: 3, name: 'Clementine Bauch', email: 'Nathan@yesenia.net', age: 29 },
];
```

--------------------------------

### Server-Side Data Fetching with ServerDataSource

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

Implement server-side data fetching by initializing ServerDataSource with an HTTP client and configuring endpoint and query parameter keys. This allows the table to handle pagination, sorting, and filtering requests automatically.

```typescript
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ServerDataSource, Settings } from 'angular2-smart-table';

@Component({
  selector: 'app-server-source',
  template: `
    <angular2-smart-table [settings]="settings" [source]="source"></angular2-smart-table>
  `
})
export class ServerSourceComponent {
  settings: Settings = {
    columns: {
      id: { title: 'ID' },
      albumId: { title: 'Album' },
      title: { title: 'Title' },
      url: { title: 'Url' }
    },
    filter: {
      debounceTime: 800 // Reduce server requests for slower typing
    }
  };

  source: ServerDataSource;

  constructor(http: HttpClient) {
    this.source = new ServerDataSource(http, {
      endPoint: 'https://jsonplaceholder.typicode.com/photos',
      // Custom query parameter keys
      sortFieldKey: '_sort',
      sortDirKey: '_order',
      pagerPageKey: '_page',
      pagerLimitKey: '_limit',
      filterFieldKey: '#field#_like',
      // Response parsing
      totalKey: 'x-total-count', // Header or body key for total count
      dataKey: '' // Key in response body for data array (empty = root)
    });
  }
}
```

--------------------------------

### Configure Columns for angular2-smart-table

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/demo/demo.component.html

Shows how to define the column configuration for the angular2-smart-table. This involves creating a settings object with column definitions, specifying properties like 'title' and 'key'.

```typescript
settings = {
  columns: {
    id: {
      title: 'ID',
      type: 'number',
    },
    name: {
      title: 'Full Name',
    },
    email: {
      title: 'Email',
    },
    age: {
      title: 'Age',
    }
  }
};
```

--------------------------------

### Configure Table Settings in Component

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/README.md

Shows how to define the 'settings' property in an Angular component to configure the columns for the smart table. Each column can be defined with properties like 'title'.

```typescript
settings: Settings = {
  columns: {
    id: {
      title: 'ID'
    },
    name: {
      title: 'Full Name'
    },
    username: {
      title: 'User Name'
    },
    email: {
      title: 'Email'
    }
  }
};
```

--------------------------------

### Angular2-Smart-Table: Column Value Functions

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

Demonstrates using `valuePrepareFunction` for display transformations and `valueStoreFunction` for storage transformations in Angular2-Smart-Table columns. It also shows a custom `filterFunction` for the status column. This requires the `angular2-smart-table` library.

```typescript
import { Component } from '@angular/core';
import { Settings, Cell } from 'angular2-smart-table';

@Component({
  selector: 'app-value-functions',
  template: `
    <angular2-smart-table [settings]="settings" [source]="data"></angular2-smart-table>
  `
})
export class ValueFunctionsComponent {
  settings: Settings = {
    columns: {
      id: { title: 'ID' },
      price: {
        title: 'Price',
        // Transform value for display
        valuePrepareFunction: (rawValue: number, cell: Cell) => {
          return '$' + rawValue.toFixed(2);
        },
        // Transform edited value for storage
        valueStoreFunction: (displayValue: string, cell: Cell) => {
          return parseFloat(displayValue.replace('$', ''));
        }
      },
      date: {
        title: 'Date',
        valuePrepareFunction: (rawValue: string) => {
          return new Date(rawValue).toLocaleDateString();
        }
      },
      status: {
        title: 'Status',
        // Custom filter function
        filterFunction: (value: string, searchString: string) => {
          return value.toLowerCase().includes(searchString.toLowerCase());
        }
      }
    }
  };

  data = [
    { id: 1, price: 99.99, date: '2024-01-15', status: 'Active' },
    { id: 2, price: 149.50, date: '2024-02-20', status: 'Pending' }
  ];
}
```

--------------------------------

### Confirming Actions with Table Events

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

Handle user confirmations for create, edit, and delete operations by enabling confirm flags in settings and implementing event handlers. These handlers can resolve or reject the action based on user input, providing a confirmation dialog.

```typescript
import { Component } from '@angular/core';
import { LocalDataSource, Settings, CreateConfirmEvent, EditConfirmEvent, DeleteConfirmEvent } from 'angular2-smart-table';

@Component({
  selector: 'app-confirm-actions',
  template: `
    <angular2-smart-table
      [settings]="settings"
      [source]="source"
      (deleteConfirm)="onDeleteConfirm($event)"
      (editConfirm)="onSaveConfirm($event)"
      (createConfirm)="onCreateConfirm($event)">
    </angular2-smart-table>
  `
})
export class ConfirmActionsComponent {
  settings: Settings = {
    delete: {
      confirmDelete: true,
      deleteButtonContent: 'Delete'
    },
    add: {
      confirmCreate: true,
      addButtonContent: 'Add New',
      createButtonContent: 'Create',
      cancelButtonContent: 'Cancel'
    },
    edit: {
      confirmSave: true,
      editButtonContent: 'Edit',
      saveButtonContent: 'Update',
      cancelButtonContent: 'Cancel'
    },
    columns: {
      id: { title: 'ID' },
      name: { title: 'Full Name' },
      email: { title: 'Email' }
    }
  };

  source: LocalDataSource;

  constructor() {
    this.source = new LocalDataSource([
      { id: 1, name: 'Leanne Graham', email: 'Sincere@april.biz' },
      { id: 2, name: 'Ervin Howell', email: 'Shanna@melissa.tv' }
    ]);
  }

  onDeleteConfirm(event: DeleteConfirmEvent) {
    if (window.confirm('Are you sure you want to delete?')) {
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }

  onSaveConfirm(event: EditConfirmEvent) {
    if (window.confirm('Are you sure you want to save?')) {
      // Modify data before saving
      event.newData['name'] += ' (edited)';
      event.confirm.resolve(event.newData);
    } else {
      event.confirm.reject();
    }
  }

  onCreateConfirm(event: CreateConfirmEvent) {
    if (window.confirm('Are you sure you want to create?')) {
      event.newData['id'] = Date.now(); // Generate ID
      event.confirm.resolve(event.newData);
    } else {
      event.confirm.reject();
    }
  }
}
```

--------------------------------

### Empty Data Source

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

Empties the data source.

```APIDOC
## POST /empty

### Description
Empties the data source.

### Method
POST

### Endpoint
/empty

### Parameters
none

### Response
#### Success Response (200)
- **message** (string) - Indicates the data source has been emptied.
```

--------------------------------

### Render Angular2SmartTable in Template

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/README.md

Illustrates how to include the angular2-smart-table component in an Angular component's template, binding the 'settings' property to the component's configuration.

```html
<angular2-smart-table [settings]="settings"></angular2-smart-table>
```

--------------------------------

### Data Binding in Table Template

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/angular2-smart-table/README.md

Demonstrates how to bind both the 'settings' and 'source' (data) properties to the angular2-smart-table component in an Angular template. This displays the provided data within the configured table structure.

```html
<angular2-smart-table [settings]="settings" [source]="data"></angular2-smart-table>
```

--------------------------------

### Custom Cell Rendering with Angular2-Smart-Table

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

Defines a custom component to render cell data in angular2-smart-table. The component must have a static `componentInit` function that receives the cell instance and cell data. This allows for dynamic formatting or display of cell content.

```typescript
import { Component } from '@angular/core';
import { Cell, Settings } from 'angular2-smart-table';

@Component({
  template: `<strong>{{ renderValue }}</strong>`
})
export class CustomRenderComponent {
  renderValue: string = '';

  // Static init function receives component instance and cell
  static componentInit(instance: CustomRenderComponent, cell: Cell) {
    instance.renderValue = cell.getValue().toUpperCase();
  }
}

// Usage in settings
@Component({
  selector: 'app-custom-render-example',
  template: `<angular2-smart-table [settings]="settings" [source]="data"></angular2-smart-table>`
})
export class CustomRenderExampleComponent {
  settings: Settings = {
    columns: {
      id: { title: 'ID' },
      name: {
        title: 'Name',
        type: 'custom',
        renderComponent: CustomRenderComponent,
        componentInitFunction: CustomRenderComponent.componentInit
      }
    }
  };

  data = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Smith' }
  ];
}
```

--------------------------------

### Sorting Configuration Methods for Angular2 Smart Table

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

Methods for managing the sorting behavior of the Angular2 Smart Table. This includes updating existing sort configurations, replacing them entirely, and retrieving the current sort settings.

```typescript
updateSort(conf: any[], doEmit?: boolean): void;
setSort(conf: any[], doEmit?: boolean): void;
getSort(): any[];
```

--------------------------------

### Complete Settings Interface for Angular Smart Table

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

This TypeScript code defines the complete settings interface for angular2-smart-table, detailing all available options for configuring columns, table behavior, actions, pagination, and more. It requires importing 'Settings', 'Row', and 'Cell' from 'angular2-smart-table'.

```typescript
import { Settings, Row, Cell } from 'angular2-smart-table';

const completeSettings: Settings = {
  // Column definitions (required)
  columns: {
    columnKey: {
      title: 'Column Title',
      type: 'text', // 'text' | 'html' | 'custom'
      width: '100px',
      class: 'column-class',
      classHeader: 'header-class',
      classContent: 'content-class',
      hide: false,
      isSortable: true,
      isEditable: true,
      isAddable: true,
      isFilterable: true,
      sortDirection: 'asc', // 'asc' | 'desc' | null
      placeholder: 'Enter value...',

      // Custom rendering
      renderComponent: CustomComponent,
      componentInitFunction: (component, cell) => {},
      valuePrepareFunction: (value, cell) => value,
      valueStoreFunction: (value, cell) => value,

      // Custom sorting/filtering
      compareFunction: (dir, a, b) => dir * (a - b),
      filterFunction: (value, search) => value.includes(search),

      // Editor configuration
      editor: {
        type: 'text', // 'text' | 'textarea' | 'list' | 'checkbox' | 'custom'
        component: CustomEditorComponent,
        config: {
          // For 'list' type:
          list: [{ value: 'val', title: 'Title' }],
          selectText: 'Select...'
        }
      },

      // Filter configuration
      filter: {
        type: 'text', // 'text' | 'list' | 'checkbox' | 'multiselect' | 'custom'
        component: CustomFilterComponent,
        config: {}
      },

      // Sanitizer for HTML content
      sanitizer: {
        bypassHtml: true
      }
    }
  },

  // Table behavior
  mode: 'inline', // 'inline' | 'external'
  selectMode: 'single', // 'single' | 'multi' | 'multi_filtered'
  sortMode: 'multi', // 'single' | 'multi'

  // Visual options
  hideHeader: false,
  hideSubHeader: false,
  resizable: true,
  hideable: true,
  hideTagList: false,
  noDataMessage: 'No data found',

  // Table attributes
  attr: {
    id: 'my-table',
    class: 'table-class'
  },

  // Actions configuration
  actions: {
    columnTitle: 'Actions',
    add: true,
    edit: true,
    delete: true,
    position: 'left', // 'left' | 'right'
    custom: [
      {
        name: 'action-name',
        title: 'Action',
        renderComponent: CustomActionComponent,
        hiddenWhen: (row) => false,
        disabledWhen: (row) => false
      }
    ]
  },

  // Add action settings
  add: {
    addButtonContent: 'Add New',
    createButtonContent: 'Create',
    cancelButtonContent: 'Cancel',
    confirmCreate: true,
    inputClass: 'form-control',
    hiddenWhen: () => false,
    disabledWhen: () => false
  },

  // Edit action settings
  edit: {
    editButtonContent: 'Edit',
    saveButtonContent: 'Save',
    cancelButtonContent: 'Cancel',
    confirmSave: true,
    inputClass: 'form-control',
    hiddenWhen: (row) => false,
    disabledWhen: (row) => false
  },

  // Delete action settings
  delete: {
    deleteButtonContent: 'Delete',
    confirmDelete: true,
    hiddenWhen: (row) => false,
    disabledWhen: (row) => false
  },

  // Expand row settings
  expand: {
    component: ExpandComponent,
    buttonContent: 'Expand',
    hiddenWhen: (row) => false,
    disabledWhen: (row) => false
  },

  // Pagination settings
  pager: {
    display: true,
    page: 1,
    perPage: 10,
    perPageSelect: [10, 25, 50],
    perPageSelectLabel: 'Per Page:'
  },

  // Filter settings
  filter: {
    inputClass: 'form-control',
    debounceTime: 300
  },

  // Row styling
  rowClassFunction: (row: Row) => 'row-class',

  // Default value for new rows
  valueCreateFunction: () => ({ id: Date.now() }),

  // Auto-switch to selected row page
  switchPageToSelectedRowPage: false
};

```

--------------------------------

### Configure Expandable Rows with Custom Components in Angular2 Smart Table

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

Sets up expandable rows where each row can reveal detailed information using a custom Angular component. This allows for rich, dynamic content display within table rows. The 'expand' setting in 'Settings' is used to define the component and its behavior.

```typescript
import { Component, Input } from '@angular/core';
import { Settings, Row } from 'angular2-smart-table';

// Expanded row detail component
@Component({
  selector: 'row-detail',
  template: `
    <div style="padding: 20px; background: #f5f5f5;">
      <h4>Details for {{ rowData?.name }}</h4>
      <table>
        <tr><td>ID:</td><td>{{ rowData?.id }}</td></tr>
        <tr><td>Email:</td><td>{{ rowData?.email }}</td></tr>
        <tr><td>Username:</td><td>{{ rowData?.username }}</td></tr>
      </table>
      <button (click)="doAction()">Custom Action</button>
    </div>
  `
})
export class RowDetailComponent {
  @Input() rowData: any;

  doAction() {
    alert('Action for: ' + this.rowData.name);
  }
}

// Main component with expandable rows
@Component({
  selector: 'app-expandable-rows',
  template: `
    <angular2-smart-table [settings]="settings" [source]="data"></angular2-smart-table>
  `
})
export class ExpandableRowsComponent {
  settings: Settings = {
    expand: {
      component: RowDetailComponent,
      buttonContent: '▶ Expand',
      // Optional: conditional visibility
      hiddenWhen: (row: Row) => row.getData().status === 'hidden',
      disabledWhen: (row: Row) => row.getData().status === 'disabled'
    },
    columns: {
      id: { title: 'ID' },
      name: { title: 'Full Name' },
      username: { title: 'User Name' },
      email: { title: 'Email' }
    }
  };

  data = [
    { id: 1, name: 'Leanne Graham', username: 'Bret', email: 'Sincere@april.biz' },
    { id: 2, name: 'Ervin Howell', username: 'Antonette', email: 'Shanna@melissa.tv' }
  ];
}
```

--------------------------------

### Configure Table Columns in Angular

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

Defines the structure and behavior of columns in the smart table. Each column can have a title, CSS classes, width, visibility, editability, and type (text, html, or custom). Custom renderers and expand components can also be specified.

```typescript
columns: {
  id: {
    title: 'ID',
    isEditable: false,
  },
  name: {
    title: 'Full Name',
  },
  email: {
    title: 'Email',
    type: 'html',
    sanitizer: {
      bypassHtml: true
    }
  },
  status: {
    title: 'Status',
    type: 'custom',
    renderComponent: StatusComponent,
    componentInitFunction: (component, cell) => {
      component.setCell(cell);
    }
  }
}
```

--------------------------------

### Reset Data Source

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

Resets the data source to the first page with empty filter and sort.

```APIDOC
## POST /reset

### Description
Sets the data source to the first page with an empty filter and an empty sort.

### Method
POST

### Endpoint
/reset

### Parameters
none

### Response
#### Success Response (200)
- **message** (string) - Indicates the reset operation was successful.
```

--------------------------------

### Import and Register angular2-smart-table Directives

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/demo/demo.component.html

Demonstrates how to import the necessary directives from angular2-smart-table into your Angular component and register them within your module.

```typescript
import { SmartTableModule } from 'angular2-smart-table';

@NgModule({
  imports: [
    SmartTableModule
  ],
  // ... other module configurations
})
export class YourModule { }
```

--------------------------------

### Import and Register Angular2SmartTableModule

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/README.md

Demonstrates how to import the Angular2SmartTableModule into your Angular module and register it within the imports array. This makes the smart table directives available for use in your components.

```typescript
import { Angular2SmartTableModule } from 'angular2-smart-table';

// ...

@NgModule({
  imports: [
    // ...
    
    Angular2SmartTableModule,
    
    // ...
  ],
  declarations: [ ... ]
})
// ...
```

--------------------------------

### Display Select All and Clear All Buttons

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/angular2-smart-table/src/lib/components/filter/filter-types/multiselect-filter.component.html

This snippet shows how to render 'Select All' and 'Clear All' buttons within the table component. It uses component properties `selectAllButtonText` and `clearAllButtonText` for their labels, allowing for dynamic text configuration.

```html
{{ selectAllButtonText }} {{ clearAllButtonText }}
```

--------------------------------

### Configure Column Filter Types in Angular2 Smart Table

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

Demonstrates how to set up different filter types for table columns, including text input, multiselect dropdowns, list selection, and checkboxes. This allows users to easily filter data based on specific criteria. The configuration is done within the 'settings' object of the angular2-smart-table component.

```typescript
import {
  Component
} from '@angular/core';
import { Settings } from 'angular2-smart-table';

@Component({
  selector: 'app-filters',
  template:
    '<angular2-smart-table [settings]="settings" [source]="data"></angular2-smart-table>'
})
export class FiltersComponent {
  data = [
    { id: 1, name: 'John', department: 'Engineering', status: 'Active', passed: 'Yes' },
    { id: 2, name: 'Jane', department: 'HR', status: 'Inactive', passed: 'No' },
    { id: 3, name: 'Bob', department: 'Engineering', status: 'Active', passed: 'Yes' }
  ];

  settings: Settings = {
    columns: {
      id: {
        title: 'ID',
        // Default text filter with placeholder
        placeholder: 'Search ID...'
      },
      name: {
        title: 'Full Name'
        // Default: text input filter
      },
      department: {
        title: 'Department',
        filter: {
          type: 'multiselect',
          config: {
            list: [
              { value: 'Engineering', title: 'Engineering' },
              { value: 'HR', title: 'Human Resources' },
              { value: 'PM', title: 'Product Management' }
            ],
            selectText: 'Filter by department...',
            separator: ',',
            applyButtonText: 'Apply Filter',
            clearButtonText: 'Clear Filter',
            selectAllButtonText: 'Select All',
            clearAllButtonText: 'Clear All',
            searchPlaceholder: 'Search...',
            maxDisplayedSelections: 2,
            allSelectedText: 'All Departments',
            selectedCountText: '%n selected'
          }
        }
      },
      status: {
        title: 'Status',
        filter: {
          type: 'list',
          config: {
            selectText: 'Show only...',
            list: [
              { value: 'Active', title: 'Active' },
              { value: 'Inactive', title: 'Inactive' }
            ]
          }
        }
      },
      passed: {
        title: 'Passed',
        filter: {
          type: 'checkbox',
          config: {
            true: 'Yes',
            false: 'No',
            resetText: 'Clear'
          }
        }
      }
    }
  };
}
```

--------------------------------

### Angular: Row Expand/Collapse and Column Hide/Show

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html

Demonstrates functionality for expanding and collapsing rows, as well as hiding and showing columns in angular2-smart-table. This is achieved through the table's configuration and potentially custom components or event handlers. It enhances user interaction by allowing dynamic control over the displayed data.

```typescript
import { Component, OnInit } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';

import {
  SmartTableService,
} from '../../../@core/data/smart-table.service';

@Component({
  selector: 'ngx-row-expand-example',
  templateUrl: './row-expand-example.component.html',
  styleUrls: ['./row-expand-example.component.scss'],
})
export class RowExpandExampleComponent implements OnInit {

  settings = {
    rowClassFunction: (row) => {
      if (row.data.age < 20) {
        return 'row-age-below-20';
      }
      return '';
    },
    columns: {
      id: {
        title: 'ID',
        type: 'number',
      },
      name: {
        title: 'Full Name',
        type: 'string',
      },
      username: {
        title: 'User Name',
        type: 'string',
      },
      email: {
        title: 'Email',
        type: 'string',
      },
      age: {
        title: 'Age',
        type: 'number',
      },
    },
  };

  source: LocalDataSource;

  constructor(private service: SmartTableService) {
    const data = this.service.getUsers();
    this.source = new LocalDataSource(data);
  }

  toggleRow(event): boolean {
    // console.log('Toggle row:', event);
    // event.confirm.reject(); // uncomment to reject row expand
    return true;
  }

  onUserRowSelect(event): void {
    // console.log('User row selected:', event);
  }
}

```

--------------------------------

### Import Angular Smart Table Module

Source: https://context7.com/dj-fiorex/angular2-smart-table/llms.txt

Imports the Angular2SmartTableModule into your Angular application's NgModule. This makes the smart table component available for use throughout your application.

```typescript
import { NgModule } from '@angular/core';
import { Angular2SmartTableModule } from 'angular2-smart-table';

@NgModule({
  imports: [
    Angular2SmartTableModule
  ]
})
export class AppModule { }
```

--------------------------------

### Refresh Data Source

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

Refreshes the data in the data source. This method is rarely needed.

```APIDOC
## POST /refresh

### Description
Refreshes data in the data source. In most cases, you won't need this method.

### Method
POST

### Endpoint
/refresh

### Parameters
none

### Response
#### Success Response (200)
- **message** (string) - Indicates the refresh operation was successful.
```

--------------------------------

### Iterate and Display Filtered Options

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/angular2-smart-table/src/lib/components/filter/filter-types/multiselect-filter.component.html

This snippet demonstrates iterating over a collection of `filteredOptions` to display each option's title. It utilizes Angular's `@for` loop for efficient rendering and `track option.value` for performance optimization by tracking changes based on the option's value.

```html
@for (option of filteredOptions; track option.value) { {{ option.title }} }
```

--------------------------------

### Commit Release Branch

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/DEV_DOCS.md

Commits the changes for the release branch with a descriptive message indicating the version.

```git
git commit -m release/{version}
```

--------------------------------

### Selection Management Methods for Angular2 Smart Table

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

Utilities for managing item selection within the Angular2 Smart Table. These methods allow for selecting all items (optionally filtered), checking if all items are selected, and retrieving the currently selected items.

```typescript
selectAllItems(checked: boolean, onlyFiltered?: boolean): void;
isEveryElementSelected(onlyFiltered?: boolean, reportEmptyAsFalse?: boolean): boolean;
getSelectedItems(): Array<any>;
```

--------------------------------

### Filtering Configuration Methods for Angular2 Smart Table

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

These methods enable the configuration and retrieval of filters for the Angular2 Smart Table. You can set multiple filters at once, add a single filter, or retrieve the current filter configuration.

```typescript
setFilter(conf: any[], doEmit?: boolean): void;
addFilter(conf: any, doEmit?: boolean): void;
getFilter(): any[];
```

--------------------------------

### Display Apply and Clear Buttons

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/angular2-smart-table/src/lib/components/filter/filter-types/multiselect-filter.component.html

This snippet renders 'Apply' and 'Clear' buttons, likely used for confirming or resetting selections or filters within the table. It uses component properties `applyButtonText` and `clearButtonText` for customizable button labels.

```html
{{ applyButtonText }} {{ clearButtonText }}
```

--------------------------------

### Data Loading and Manipulation Methods for Angular2 Smart Table

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

These methods allow for the dynamic manipulation of data within the Angular2 Smart Table. They include loading new data, adding, removing, and updating individual items, as well as retrieving specific data subsets.

```typescript
load(data: Array<any>): void;
prepend(element: any): void;
append(element: any): void;
add(element: any): void;
remove(element: any): void;
update(element: any, values: any): void;
find(element: any): any;
getElements(): Array<any>;
getFilteredAndSorted(): Array<any>;
getAll(): Array<any>;
```

--------------------------------

### Pagination Control Methods for Angular2 Smart Table

Source: https://github.com/dj-fiorex/angular2-smart-table/blob/master/projects/demo/src/app/pages/documentation/documentation.component.html

Methods to control the pagination of data within the Angular2 Smart Table. This includes setting the page number and the number of items per page, or just setting the current page.

```typescript
setPaging(page: number, perPage: number, doEmit?: boolean): void;
setPage(page: number, doEmit?: boolean): void;
```