OOTB support for a table component | Community
Skip to main content
A
aemuser29
June 4, 2022
Solved

OOTB support for a table component

  • June 4, 2022
  • 4 replies
  • 1786 views

Looking to build a table component where in the author could control how many rows/columns/cells they would want. This does not seem to be a core component at this point, is there any OOTB support for such a component or would it have to built as a custom component?

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 SantoshSai

Hi @aemuser29 

There are plenty options you can consider for the same

  • Create custom component and enable table plugin as is it for text component
  • Create custom component, extend to text component and enable plugin.
  • Can use Text component for the same.


How to enable it?
The design appears in the side panel if the user is using static templates. For editable templates we can enable components feature by going to the template editor mode follow below steps

From page properties, click on "Edit Template" option


Which takes to below page and we can add the required components in layout container (Click on second option)

http://<host>:<port>/editor.html/conf/we-retail/settings/wcm/templates/hero-page/structure.html


Note: The edit dialog features in-line editing with limited options with full functionality available in the full-screen edit dialog. Using the design dialog, text formatting options such as headings, special characters, and paragraph styles can be configured for the template for the content author.


Reference: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/text.html#table

Hope that helps!

Regards,
Santosh

4 replies

Ankur_Khare
Community Advisor
Ankur_KhareCommunity Advisor
Community Advisor
June 4, 2022
  • You can use text component and enable table feature through design dialog.
    SantoshSai
    Community Advisor
    SantoshSaiCommunity AdvisorAccepted solution
    Community Advisor
    June 4, 2022

    Hi @aemuser29 

    There are plenty options you can consider for the same

    • Create custom component and enable table plugin as is it for text component
    • Create custom component, extend to text component and enable plugin.
    • Can use Text component for the same.


    How to enable it?
    The design appears in the side panel if the user is using static templates. For editable templates we can enable components feature by going to the template editor mode follow below steps

    From page properties, click on "Edit Template" option


    Which takes to below page and we can add the required components in layout container (Click on second option)

    http://<host>:<port>/editor.html/conf/we-retail/settings/wcm/templates/hero-page/structure.html


    Note: The edit dialog features in-line editing with limited options with full functionality available in the full-screen edit dialog. Using the design dialog, text formatting options such as headings, special characters, and paragraph styles can be configured for the template for the content author.


    Reference: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/text.html#table

    Hope that helps!

    Regards,
    Santosh

    Santosh Sai
      B
      BipinCh1
      Level 3
      June 4, 2022

      Hi  @aemuser29 ,

       

      Adding to the solutions provided by the @santoshsai  , You will get the plain table only with edit text(how to enable configuration is already provided Reference answer)

      Please check out the below link for the table styles configuration for classic UI only for the further customization:- 

      https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/configure-rich-text-editor-plug-ins.html?lang=en

       

      The above limitation of classic UI will add some restriction to the project as mostly we will surely have custom tables designs as per website themes.

       

      So, for custom table theming solutions:

      1. Paste the table html with css directly in the rich text using source edit options or use source edit to add table css classes to exiting table create using the table plugins (becomes tedious for the content authors and will crop up lot of issues due to incorrect authoring)

      2.(Recommended Solutions) Use the custom nested multifield to generate the table as per our custom css theme requirements. Sample reference for nested multifield:  https://levelup.gitconnected.com/aem-how-to-use-nested-multifields-in-your-components-using-a-sling-model-vs-pure-htl-92ff8d036ba1

      (You need to customize and configure your row and column numbers separately for proper table generation).

        Pavan_Kalyan-1
        Pavan_Kalyan-1
        Level 3
        June 4, 2022

        once try this piece of code. adding it to the cq:dialog

         

        <description
        jcr:primaryType="nt:unstructured"
        sling:resourceType="cq/gui/components/authoring/dialog/richtext"
        cq-msm-lockable="./description"
        fieldDescription="Add description of the page"
        fieldLabel="Description"
        name="./description"
        required="true"
        useFixedInlineToolbar="{Boolean}true">
        <rtePlugins jcr:primaryType="nt:unstructured">
        <links jcr:primaryType="nt:unstructured">
        <linkDialogConfig
        jcr:primaryType="nt:unstructured"
        height="{Long}316">
        <linkAttributes jcr:primaryType="cq:WidgetCollection"/>
        </linkDialogConfig>
        </links>
        <format
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <lists
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <justify
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <keys
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <paraformat
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <misctools
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <fullscreen
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <subsuperscript
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <findreplace
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <edit
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <table
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <image
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <spellcheck
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <undo
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <styles
        jcr:primaryType="nt:unstructured"
        features="*">
        <styles jcr:primaryType="cq:WidgetCollection">
        <employee
        jcr:primaryType="nt:unstructured"
        cssName="employee"
        text="Employee Style"/>
        <partner
        jcr:primaryType="nt:unstructured"
        cssName="partner"
        text="Partner Style"/>
        <customer
        jcr:primaryType="nt:unstructured"
        cssName="customer"
        text="Customer Style"/>
        </styles>
        </styles>
        <color-picker
        jcr:primaryType="nt:unstructured"
        features="*"/>
        <highlight-color-picker
        jcr:primaryType="nt:unstructured"
        features="*"/>
        </rtePlugins>
        <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
        <inline
        jcr:primaryType="nt:unstructured"
        toolbar="[format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript,edit#cut,edit#copy,edit#paste-default,edit#paste-plaintext,edit#paste-wordhtml,links#modifylink,links#unlink,findreplace#find,findreplace#replace,undo#undo,undo#redo,justify#justifyleft,justify#justifyright,justify#justifycenter,lists#unordered,lists#ordered,lists#outdent,table#createoredit,table#removetable,lists#indent,misctools#sourceedit,misctools#specialchars,#paraformat,#styles,fullscreen#finish,fontstyles#styles,color-picker#textColorPicker,highlight-color-picker#textHighlightColorPicker]">
        <popovers jcr:primaryType="nt:unstructured">
        <styles
        jcr:primaryType="nt:unstructured"
        items="styles:getStyles:styles-pulldown"
        ref="styles"/>
        <paraformat
        jcr:primaryType="nt:unstructured"
        items="paraformat:getFormats:paraformat-pulldown"
        ref="paraformat"/>
        </popovers>
        </inline>
        <dialogFullScreen
        jcr:primaryType="nt:unstructured"
        toolbar="[format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript,edit#cut,edit#copy,edit#paste-default,edit#paste-plaintext,edit#paste-wordhtml,links#modifylink,links#unlink,findreplace#find,findreplace#replace,undo#undo,undo#redo,justify#justifyleft,justify#justifyright,justify#justifycenter,lists#unordered,lists#ordered,lists#outdent,table#createoredit,table#removetable,lists#indent,misctools#sourceedit,misctools#specialchars,#paraformat,#styles,fullscreen#finish,fontstyles#styles,color-picker#textColorPicker,highlight-color-picker#textHighlightColorPicker]">
        <popovers jcr:primaryType="nt:unstructured">
        <styles
        jcr:primaryType="nt:unstructured"
        items="styles:getStyles:styles-pulldown"
        ref="styles"/>
        <paraformat
        jcr:primaryType="nt:unstructured"
        items="paraformat:getFormats:paraformat-pulldown"
        ref="paraformat"/>
        </popovers>
        </dialogFullScreen>
        </cui>
        </uiSettings>
        </description>

          Terms & ConditionsAccessibility statement

          Loading footer...