title: Dynamic Material Design Lite Selectable Data Table
body: <p>I'm using Material Design lite and the selectable data tables. I'm trying to place the table rows in using javascript after getting the information from firebase.</p>
  
  <p>I'm wanting to use the selectable rows as shown in the documentation (<a href="https://getmdl.io/components/index.html#tables-section" rel="nofollow noreferrer">https://getmdl.io/components/index.html#tables-section</a>) but when I place the rows using javascript, I don't get the checkboxes in the body of the table. </p>
  
  <p>My HTML</p>
  
  <pre><code>&lt;div class="mdl-card mdl-shadow--2dp full-width login-activity-card"&gt;
      &lt;table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable full-width"&gt;
          &lt;thead&gt;
               &lt;tr&gt;
                  &lt;th class="mdl-data-table__cell--non-numeric"&gt;Login Time&lt;/th&gt;
                  &lt;th class="mdl-data-table__cell--non-numeric"&gt;Login Date&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;&lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Javascript</p>
  
  <pre><code>$(".login-activity-card .mdl-data-table tbody").html(
      '&lt;tr&gt;'+
         '&lt;td class="mdl-data-table__cell--non-numeric"&gt;1:53 PM&lt;/td&gt;'+
         '&lt;td class="mdl-data-table__cell--non-numeric"&gt;Aug 05, 2017&lt;/td&gt;'+
      '&lt;/tr&gt;'
  )
  </code></pre>
  
  <p>I get the checkbox in the header but not on the rows.</p>
  
  <p><a href="https://i.stack.imgur.com/eweZw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eweZw.png" alt="enter image description here"></a></p>
  
  <p>I've seen on the GitHub repository that this was deprecated in 2015, yet it's still in the documentation today? It gave direction to use the Wiki but I didn't find anything in there. </p>
  
  <p>Is this just completely impossible or am I missing something?</p>