Smart Table Component

The Smart Table component is an Angular component designed for creating dynamic and feature-rich tables. It supports various functionalities such as pagination, sorting, filtering, row selection, and column resizing. This README provides an overview of the component, its configuration options, and usage.

Table of Contents

• Installation
• Usage
• Configuration
• Features
• Example
  • Handling Events
  • Customize the UI
• Conclusion

Installation

To use the Smart Table component in your Angular project, follow these steps:

1. Copy the smart-table directory into your project.
2. Import the SmartTableComponent in your module.
3. Add the <cwa-smart-table> tag to your template.

Usage

Basic Usage

<cwa-smart-table
  [tableConfig]="yourTableConfigObject"
  [tableHeaders]="yourTableHeadersArray"
  [tableBody]="yourTableBodyArray"
></cwa-smart-table>

Handling Events

The Smart Table component emits events for search and column sorting. You can handle these events in your component: (handleSearch): Emits when a column search is triggered. (handleColSort): Emits when a column sorting is triggered.

<cwa-smart-table
  [tableConfig]="yourTableConfigObject"
  [tableHeaders]="yourTableHeadersArray"
  [tableBody]="yourTableBodyArray"
  (handleSearch)="yourSearchFunction($event)"
  (handleColSort)="yourSortFunction($event)"
></cwa-smart-table>

Configuration

The Smart Table component supports a range of configuration options. Below is an example of the configuration object:

yourTableConfigObject = {
  pagination: true,
  sorting: true,
  filtering: true,
  rowSelection: true,
  customClass: "",
  offlineSearch: true,
  offlineSort: true,
  resizable: true,
  customStyle: {},
};

• pagination: Enable or disable pagination.
• sorting: Enable or disable column sorting.
• filtering: Enable or disable column filtering.
• rowSelection: Enable or disable row selection.
• customClass: Additional CSS class for styling.
• offlineSearch: Perform search offline or trigger a search event.
• offlineSort: Perform sorting offline or trigger a sorting event.
• resizable: Enable or disable column resizing.
• customStyle: Custom styles applied to the table.

Features

• Dynamic Configuration: Easily configure the table's behavior using the tableConfig object.
• Column Control: Show or hide columns dynamically based on the display property in tableHeaders.
• Search and Sort: Perform search and sort operations either offline or trigger events for server-side processing.
• Resizing: Allow users to resize columns dynamically.

Conclusion

The Smart Table component is a powerful tool for creating interactive and feature-rich tables in your Angular applications. By leveraging its configuration options and handling events, you can tailor the table to meet the specific needs of your application.

Feel free to explore additional features, such as row selection, and integrate the component seamlessly into your projects. If you have any questions or need further assistance, refer to the Smart Table Documentation or reach out to the community for support. Happy coding!