OOTB Table component with sort, filter, and column search options.

[akhilraj]

Hi,

Are there any OOTB table components with sort, filter, and column search options?

Or suggest how we can achieve it?

[Anil_Chennapragada · Accepted solution]

Hi @akhilraj ,

I don't think there is any OOTB table component with the given requirements and you might have to end up creating a custom one. Please refer to the below link which has a video explaining custom table component implementation with some additional features

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-table-component/m-p...

Thanks,

Anil 

[ManviSharma]

Hi ,

 OOTB table components in AEM with functionalities such as sort, filter, and column search are not specifically listed as a comprehensive component with all these capabilities combined. However, there are ways to achieve them by leveraging existing components and custom development:

 

1. Data Table Component:

   • While not explicitly mentioned in the documentation as having sort, filter, and search out of the box, the Data Table component can be customized to include these features. AEM's flexibility allows developers to extend components to meet specific requirements.
     
     

2. Filters and Sorting in Adobe Products:

   • Adobe Experience League provides documentation on how filters and sorting are implemented in various contexts, such as Customer Journey Analytics, which can be adapted for AEM implementations.
   • For example, the Commerce Intelligence User Guide describes how to use filters to limit data in reports, which can be conceptually applied to data tables in AEM

[AmitVishwakarma]

AEM doesn’t have an OOTB table component with sort, filter, and column search, but you can achieve it by:

Using AEM Core Table Component as a base (simple table structure).
Adding JavaScript libraries like DataTables.js for sorting, filtering, and search functionality.

Example:

$(document).ready(function() {
$('#example').DataTable();
});

Optionally, implement server-side processing to handle large data sets efficiently.
You can extend the Core Table component and integrate these libraries to get the features you need!

[chaudharynick]

Hi @akhilraj 

You need to integrate the third party table library which provides that functionality and target the table class globally to enable the table with sort functionality.

Or you can use style system to add a custom CSS class and only those tables will have the logic coming from the table JS library