feat: new sort, pagination, spinner and checkbox functionality added to table component

[JoelJacobStephen]

Ticket

Closes HFE-418

Description

This PR adds new functionality to the Table UI component.
These include:

1. Ability to have checkboxes in the table component.
2. Ability to select multiple rows or select/deselect all rows
3. Ability to sort the table in ascending or descending order based on the key provided.
4. Ability to show a spinner for loading
5. Pagination support

Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• All the tests have passed

[nivedin]

please look into this comments

[nivedin]

LGTM 💯

[anwarulislam]

LGTM 🚀

[jamesgeorge007]

@JoelJacobStephen, I was wondering if we'd need to include search and pagination logic directly in the HoppSmartTable component. Isn't pagination a well-defined pattern that can be reused and qualify as a candidate to be made a dedicated component? Similarly, for search, can't we use HoppSmartInput at the place of usage?

[JoelJacobStephen]

@JoelJacobStephen, I was wondering if we'd need to include search and pagination logic directly in the HoppSmartTable component. Isn't pagination a well-defined pattern that can be reused and qualify as a candidate to be made a dedicated component? Similarly, for search, can't we use HoppSmartInput at the place of usage?

@jamesgeorge007 Search and pagination logic aren't implemented into the Table component. Only the UI is provided and events are emitted when the related UI elements are being used. The search and pagination logic will be handled by the parent component using the smart table by handling the events that are triggered from the UI component. I also went through few popular UI libraries and they have given support for pagination and search UI elements within their table component.

I will replace the input element with HoppSmartInput. Thanks for the catch!!

[jamesgeorge007]

@JoelJacobStephen, I was wondering if we'd need to include search and pagination logic directly in the HoppSmartTable component. Isn't pagination a well-defined pattern that can be reused and qualify as a candidate to be made a dedicated component? Similarly, for search, can't we use HoppSmartInput at the place of usage?

@jamesgeorge007 Search and pagination logic aren't implemented into the Table component. Only the UI is provided and events are emitted when the related UI elements are being used. The search and pagination logic will be handled by the parent component using the smart table by handling the events that are triggered from the UI component. I also went through few popular UI libraries and they have given support for pagination and search UI elements within their table component.

I will replace the input element with HoppSmartInput. Thanks for the catch!!

Discussed separately, the search element will be removed in the same PR, and moving the pagination element out into a separate component to be done in a later iteration.

[jamesgeorge007]

Preview

Screen.Recording.2024-03-01.at.4.25.26.PM.mov