Data Table Collapsible problem

Questions
1

hi all,

i have been having a problem on data tables when data comes from a post or get app.request

the labels do not show on mobile view but works well on browser view

here are my files

template page

<div class="navbar">

  <div class="navbar-inner sliding">

      <div class="left">

          <a href="#" class="link back">

            <i class="icon icon-back"></i>

            <span class="ios-only">Back</span>

          </a>

        </div>

    <div class="title">Sample Page </div>

    <div class="right">

      <button class="col button button-fill popup-open" data-popup=".popup-daterange">Change Date Range</button>

    </div>

  </div>

  <div class="subnavbar">

      <!-- Searchbar with auto init -->

      <form  data-search-container=".search-content-list" data-search-item="tr" data-search-in=".label-cell" class="searchbar searchbar-init">

        <div class="searchbar-inner">

          <div class="searchbar-input-wrap">

            <input type="search" placeholder="Search">

            <i class="searchbar-icon"></i>

            <span class="input-clear-button"></span>

          </div>

          <span class="searchbar-disable-button if-not-aurora">Cancel</span>

        </div>

      </form>

    </div>

     <!-- Searchbar backdrop -->

     <div class="searchbar-backdrop"></div>

</div>

<div class="page-content  infinite-scroll-content"  data-infinite-distance="8" @infinite="loadmore">

 

  <div class=" data-table data-table-collapsible data-table-init">

    <table style="table-layout: fixed;  width: 100%;"> 

    <thead>

  

      <tr>

        <th class="item-title label-cell">id</th>

        <th class="item-title label-cell">title</th>

        <th class="item-title label-cell">repeat </th>

        <th class="item-title label-cell">description </th>

        

      </tr>

    </thead>

    <tbody class="search-content-list searchbar-found links-list">

        {{#each products}}

      <tr class='clickable-row' data-href='#' onclick="">

          <td class="label-cell truncate " style="font-size: smaller">{{id}}</td>

          <td class="label-cell truncate " style="font-size: smaller">{{title}}</td>

          <td class="label-cell truncate " style="font-size: smaller">{{title}}</td>

          <td class="label-cell  truncate " style="font-size: smaller">{{description}}</td>  

      </tr>

      {{/each}}

      </tbody>

    </table>

  </div>

  {{#if @root.hasMoreItems}}

  <div class="preloader infinite-scroll-preloader"></div> 

  {{/if}}

  <!-- Nothing found message -->  

  <div class=" searchbar-not-found">

              

    <tr>

        <td class="label-cell" colspan='3' style="text-align: center; "> No records found</td>

        

    </tr>



  </div>

</div>

<div class="popup popup-daterange" id="my-daterange-screen">

  <div class="view">

    <div class="page">

      <div class="page-content daterange-screen-content">

          

        <div class="login-screen-title">Change Dates</div>

        <form class="list" id="my-daterange-form">

                             

            <div class="block block-strong row">

                

                <div class="item-content item-input">

                    

                  <div class="item-inner">

                    <div class="item-title item-label">Cut off range </div>

                    <div class="">

                      <input type="text" name="cutoff-range" placeholder="Select date range" readonly="readonly" size="21"  id = "cutoff-range" required >

                    </div>

                  </div>

                  

                </div>

              </div>    

                            

            <div class="list">

                <div class="block block-strong row">

                    <div class="col"><a href="#" class="col button button-fill applyrange-button">Apply</a> </div>

                    <div class="col"><a href="#" class="col button button-fill popup-close">Cancel</a></div>

                  </div>

                               

            </div>

          </form>

          

      </div>

    </div>

  </div>

</div>

json data

[

    {

      "id": "1",

      "title": "Apple iPhone 8",

      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis."

    },

    {

      "id": "2",

      "title": "Apple iPhone 8 Plus",

      "description": "Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!"

    },

    {

      "id": "3",

      "title": "Apple iPhone X",

      "description": "Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum."

    }

  ]

this problem only occurs for fetched data from server. but if json is defined in the app.js this does not occur

this is only a sample page

what i really do is i am fetching data from mysql and render using $setState

please help

thanks