Table header sort breaks if cell has formatting before turning on "Sortable Headers"

[TwitchBlade]

Wappler Version : 3.7.2
Operating System : Mac OS 10.15.6
Server Model: PHP
Database Type: MySQL
Hosting Type: Custom Hosting (AMPPS)

Expected behavior

What do you think should happen?

Sorting should work when turning on Sortable Headers of a Table whether the cell text or inner text has formatting or not.

Actual behavior

What actually happens?

If a table cell text or inner text has formatting before Sortable Headers is turned on that cell won’t sort due to javascript errors caused by incorrect syntax in the cell header’s dynamic attributes and dynamic events.

If you add the formatting after Sortable Headers is turned on, it works fine.

How to reproduce

• Detail a step by step guide to reproduce the issue
• A screenshot or short video indicating the problem
• A copy of your code would help. Include: JS, HTML.
• Test your steps on a clean page to see if you still have an issue

1. Create a table using the bootstrap 4 table generator.

2. Add formatting to a cell or cells.
   

   
   

3. Turn on “Sortable Headers” for the table.

4. Click on the header to sort the column(s) with the formatting and it won’t do anything.

5. View the errors in Wappler.
   

   

6. When you edit the Dynamic Attributes they don’t appear to be escaped properly.
   

   

7. If you try to edit the Dynamic Event you get another error which I assume is due to it not being escaped properly as well.
   

   

8. If you do an append like vehicle_year+’ ‘+vehicle_make+’ '+vehicle_model before turning on Sortable Headers, it will cause errors as well.

9. You can turn off Sortable Headers, remove all formatting from the cells, turn on Sortable Headers and then put back the formatting on the cells and it works properly.

[Teodor]

Hello,
Have you applied the formatting inside the table generator?

[TwitchBlade]

@Teodor thank you for the reply. I applied it to the cell in the App Structure. I hadn’t noticed you could do it in the table generator. I will try that. Thank you.

[Teodor]

@TwitchBlade

I hadn’t noticed you could do it in the table generator.

You can but it won’t work that’s why i asked.
So what actually happened there? You first generated the table without sortable headers, then added your formatting and then you decided to add the sortable headers?

[TwitchBlade]

You first generated the table without sortable headers, then added your formatting and then you decided to add the sortable headers?

That is correct. I generated the table, put more elements on the page, formatted a date cell, time cell and some other formatting. Then I turned on Sortable Headers and any of the cells with formatting would not sort. Then I saw the errors and escape issues in the screenshots I posted.

If I turn off Sortable Headers, remove all the formatting, turn Sortable Headers back on then reapply the formatting, it works. I’m going to have to do this now cause when you asked if I tried from the table generator I went and tried before you replied that it won’t work haha. Seems to have screwed up the sortable headers again.

At least this workaround works but it’s a little tedious if you want to change the table structure.

[Teodor]

We will check how this can be improved.
@George

[George]

weird I tried to replicate this but couldn’t … generated table, added afterwards cell formatting to a cell and called the table generator again and reapply it - everything stays as it should.

Where did you exactly apply the cell formatting? Could you share a screenshot and maybe a short video of the whole process?

[George]

Never mind I see the problem - the header sort code contains indeed invalid formatted expression for sorting …

[George]

will be fixed in the next update

[TwitchBlade]

Thank you George. This is yet another example of why I chose Wappler over another solution because I saw how active you and the team were on this forum before I purchased. Fantastic support from you guys and the community.

[Teodor]

Fixed in Wappler 3.7.3