Customizing AEM OOTB Table component

Question

Am trying to implement the following table structure with OOTB Table component.

<table class="class1" cellspacing="0">
     <tbody>
          <tr class="class3">
               <td scope="row">Data Row 1 - Col 1</td>
               <td class="class4">Data Row 1 - Col 2</td>
          </tr>
          <tr class="class2">
               <td scope="row">Data Row 2 - Col 1</td>
               <td class="class5">Data Row 2 - Col 2</td>
           </tr>
     </tbody>
</table>

I could only achieve this structure with almost all possible tries(correct me if i missed anything) with existing component.

<table cellspacing="0">
     <tbody>
          <tr >
               <td scope="row">Data Row 1 - Col 1</td>
               <td >Data Row 1 - Col 2</td>
          </tr>
          <tr >
               <td scope="row">Data Row 2 - Col 1</td>
               <td >Data Row 2 - Col 2</td>
           </tr>
     </tbody>
</table>

This OOTB table component is limiting author only to enter "header", "id", "scope" attributes but not "class" or any other custom attributes.

The queries are as follows:

Is it possible to achieve this scenario?
If yes, could you please share some package or inputs to proceed furthur.
I could see Table component in AEM 6.4 is depricated, is there any other alternative to achieve this author friendly scenario where he can have n*n table creation and authoring at the same time.

Thanking in Advance for all your answers.

Hi Manoj, have you checked Overlays? It allows you to override certain CQ components. or you can just create your own component if its deprecated. — Bagus Tesa

Varun Sharma Varun Sharma · Accepted Answer · 2019-01-02T06:40:59

Yes you can achieve this by modifying the dom elements either using javascript at the front end or using jsoup in the backend.

And table component is deprecated in 6.4 so in order to use it create your own custom component and copy paste the dialogs from the foundation component. Dont use the deprecated component for your site.

Customizing AEM OOTB Table component

1 Answers