Creating dynamic data tables in framework7 using Wappler

How do I make these tables: https://framework7.io/docs/data-table.html with data taken from the server using Wappler?

Perhaps someone knows a different way to implement tables with dynamic data in fw7?

I would be grateful for any advice.

Integration of fw7 in Wappler in this part is still weak. I searched for a long time, but I didn’t find how to create a table using the visual tools of Wappler.

But if you refer to the code, the table setup will be simple. The approach is similar to how you configure any dynamic data elements using app connect:

  1. Insert the html table structure to the desired location on the page.
  2. Insert a repeater with the data source into the table body.
  3. Insert data from the corresponding field into each cell.

Code example:

<div class="data-table">
    <table>
        <thead>
           <tr>
               <th class="">column1</th>
               <th class="">column2</th>
               <th class="">column3</th>
           </tr>
        </thead>
        <tbody dmx-repeat:repeat2="serverconnect1.data.allusers">
           <tr>
              <td class="" dmx-text="userlogin">cell1</td>
              <td class="" dmx-text="username">cell2</td>
              <td class="" dmx-text="namerole">cell3</td>
           </tr>
         </tbody>
     </table>
 </div>

Result:

1 Like