[Fixed] HTML Template Table Builder

[hello2]

I have a project making extensive use of Custom HTML. Would love to use this old ‘Table Component’ to present tabulated data.

However, when I clone and run the example usage app it is placing all the table data into the first cell/column. See attached image

I cannot see why it is doing this as the code looks to make sense i.e. "<td anvil-slot-repeat='cell'></td>" elements. The component is making use of the HtmlTemplate class. There is limited documentation https://anvil.works/docs/api/anvil#HtmlTemplate I have come across on this class. Therefore, unable to determine if this class still works in the same way as it did back when this component was created.

Has anyone used this component lately, and could shed light on issue arising?

Linked post:

Building a rich table as a custom component

[stucork]

It looks like this is a bug - we’ll get that fixed and report back

[stucork]

This should now be fixed

[hello2]

Hi @stucork , thanks for the prompt fix - greatly appreciate your time and effort.

However, I can see the fix has been implemented when I run the clone of ‘Table Component’ or apply it as a dependency in my apps. But, I’m failing to replicate the component build into my app. What exactly have you changed, so that I can apply to my app. See an extract of my app build below : -

Login

[stucork]

The change was an internal one so there is nothing for you to apply.

[hello2]

Noted. So, are you saying I can only use the Table component as a dependency app and cannot recreate it in my apps?
Because the internal changes are not affecting my version of the Table component albeit the exact same code except for the use of self._data_iter.__next__() as per requirement for Python 3; and addition of self._columns = [] in the __init__()

[hello2]

I’m also utlising Bootstrap 5.3.1 - Could that be an issue?

[stucork]

No it’s your html

<div class="careers-page-table">
    <div class="anvil-role-table-responsive">
        <table class="anvil-role-table">
            <thead>
                <tr>
                    <th anvil-slot-repeat="heading" scope="col"></th>
                </tr>
            </thead>
            <tbody anvil-slot="row"></tbody>
        </table>
    </div>
    <div anvil-slot="pagination"></div>
</div>

Notice How I don’t have the <tr> slots in the tbody
And you need to make the the HtmlTemplate behave like a table row

.anvil-role-table > tbody > .anvil-container {
    display: table-row;
}
.anvil-role-table > tbody > .anvil-container > td {
    vertical-align: inherit;
}

[hello2]

Awesome Once again thank you for looking into this straight way.
Really appreciate it - Now able to code away into the sunset merrily!!

[hello2]

Hi @stucork . The Table Builder component you fixed is working and looking great on my custom HTML templates.

However, is it possible to add a property to never mobile wrap the table contents as is on the Data Grid component

Currently the the table header and row cells are being wrapped in a mobile resolution. See attached image