OOTB Table component with sort, filter, and column search options. | Community
Skip to main content
akhilraj
Level 5
February 18, 2025
Solved

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

  • February 18, 2025
  • 4 replies
  • 762 views

Hi,

 

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

Or suggest how we can achieve it?

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anil_Chennapragada

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/448980

 

Thanks,

Anil 

4 replies

Anil_ChennapragadaAccepted solution
Level 4
February 18, 2025

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/448980

 

Thanks,

Anil 

ManviSharma
Adobe Employee
Adobe Employee
February 18, 2025

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
Community Advisor
Community Advisor
February 18, 2025

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
Level 4
February 20, 2025

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