Custom Table Component

[vijay_karthik]

Hi, 

I'm trying to build a table component from scratch as the existing OOTB table is deprecated for  AEM 6.5. 

I wanted to include a component inside a table cell and should be able to edit it. For example, I want to include an image component in the last column of the table, I should be able to add it via dialog and edit it in page.

I got to know that it is not possible with the existing Core Text component table structure as RTE plugins would not allow adding a component inside a cell except text input. 

So, I tried to add custom dialog with multifield inputs and output the table as below.

<table width="100%" cellspacing="0" cellpadding="1" border="1">
<!--/* Get all child resources */-->
<div data-sly-list.rowsMultifield="${resource.getChildren}">
    <div data-sly-test="${rowsMultifield.name == 'rows'}">
        <ul data-sly-list.rows="${rowsMultifield.getChildren}">
                <tr>
                    <!--/* Get all child resources */-->
                    <div data-sly-list.cellMultifield="${rows.getChildren}">

                        <!--/* Keep only the countries multifield and iterate over its children */-->
                        <ul data-sly-test="${cellMultifield.name == 'cells'}"
                            data-sly-list.cell="${cellMultifield.getChildren}">


							<div data-sly-test="${properties.headerRow && (rowsList.index == 0)}">

                                <th>
                                    <sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType='macnicagwi/components/content/text', decorationTagName='div', cssClassName='header-row'}">
                                    </sly>
                                </th>

							</div>

							<div data-sly-test="${properties.headerRow && (rowsList.index != 0) }">

                                <th data-sly-test="${properties.headerColumn && (cellList.index == 0)}">
                                    <sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType='macnicagwi/components/content/text', decorationTagName='div', cssClassName='header-column'}">
                                    </sly>
                                </th>

                                <td data-sly-test="${properties.headerColumn && (cellList.index != 0)}">
                                    <sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType=cell.type, decorationTagName='div'}">
                                    </sly>
                                </td>

								<td data-sly-test="${!properties.headerColumn}">
                                    <sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType=cell.type, decorationTagName='div'}">
                                    </sly>
                            	</td>
							</div>



							<div data-sly-test="${!properties.headerRow}">

                                <th data-sly-test="${properties.headerColumn && (cellList.index == 0)}">
                                    <sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType='macnicagwi/components/content/text', decorationTagName='div', cssClassName='header-column'}">
                                    </sly>
                                </th>
    
    
                                <td data-sly-test="${properties.headerColumn && (cellList.index != 0)}">
                                    <sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType=cell.type, decorationTagName='div'}">
                                    </sly>
                                </td>
    
    
                                <td data-sly-test="${!properties.headerColumn}">
                                    <sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType=cell.type, decorationTagName='div'}">
                                    </sly>
                                </td>

							</div>
                        
                        </ul>
                    </div>
                </tr>
        </ul>
    </div>
</div>
</table>

And this is the dialog

So, the problem is everytime I add a new multifield and click on done, the entire table data is getting refactored to the beginning. All the edited data is getting lost. 

How do I retain the data in case if I add a new row or a cell?

OR, in short,  how to add a component in a table cell ?@

[milind_bachani · Accepted solution]

Hi @vijay_karthik ,

Here is a tutorial to have a table component and also customising it in AEM :
https://www.youtube.com/watch?v=RRqovsPq5Lo

Please refer the same, let us know if you have any further concerns.

Thanks.