How to display a table with AUI look and feel in Confluence On-Demand

Xavier Arques October 4, 2015

I'm developing a Confluence Cloud plugin that returns a dynamic HTML table.

Thanks to Styling add-ons with Atlassian UI recommendation, I tried to render the following HTML table provided as an example in AUI Tables :

<body class="aui-page-fixed">
        <table class="aui">
            <thead>
                <tr>
                    <th id="name">Name</th>
                    <th id="type">Type</th>
                    <th id="order">Order</th>
                    <th id="action">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td headers="name">Default</td>
                    <td headers="type">Internal Directory</td>
                    <td class="order" headers="order">
                        <ul class="menu">
                            <li>
                                <a class="down" href="#">Down</a>
                            </li>
                        </ul>
                    </td>
                    <td class="action" headers="action">
                        <ul class="menu">
                            <li>
                                <a href="#">An Action</a>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td headers="name">Corporate LDAP</td>
                    <td headers="type">Microsoft Active Directory</td>
                    <td class="order" headers="order">
                        <ul class="menu">
                            <li>
                                <a class="up" href="#">Up</a>
                            </li>
                            <li>
                                <a class="down" href="#">Down</a>
                            </li>
                        </ul>
                    </td>
                    <td class="action" headers="action">
                        <ul class="menu">
                            <li>
                                <a href="#">An Action</a>
                            </li>
                            <li>
                                <a href="#">Another Action</a>
                            </li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>

But the look and feel is not the same as default table rendering

 

The source code is available here: https://bitbucket.org/seuqra/test-atlassian-connect-with-aui-rendering

What should I do to get the right look and feel ?

Thanks

Xavier

 

 

1 answer

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

0 votes
wadey
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
October 5, 2015

HI Xavier, I cloned and stood up your add-on and then embedded an AUI-table in a test page. The rendering looks like this which seems like AUI to me:

Test page - Demonstration Space - Confluence 2015-10-05 17-52-48.jpg

What are you seeing that's off? 

Thanks! -nick wade
Head of Ecosystem 

Xavier Arques October 7, 2015

Nick, Sine last week, I cannot attached any screenshot in answers.atlassian.com. It says "HTTP error" when trying to upload my image. Anyway, I would like to display the exact same table look and feel as in Confluence (with vertical lines between columns). I tried to add confluenceTable, confluenceTd, confluenceTh classes in the HTML code, but it doesn't work. If I declare my macro static (by changing dynamicContentMacros to staticContentMacros), then the look and feel is correct (confluencexxx classes are automatically added in the resulting HTML code)

wadey
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
October 7, 2015

Hey Xavier - thanks. Yes AUI table is not the same thing as a Confluence table at the current time. Confluence has it's own table styles, and before you ask I'm not sure if that will align with AUI table at some point in the future. I'm not sure of the answer but will ask a Confluence ecosystem colleague if they can help.

TAGS
AUG Leaders

Atlassian Community Events