ダイナミックマテリアルデザインライト選択可能なデータテーブル

マテリアルデザインライトと選択可能なデータテーブルを使用しています。私はfirebaseから情報を取得した後にjavascriptを使ってテーブルの行を配置しようとしています。ダイナミックマテリアルデザインライト選択可能なデータテーブル

ドキュメント（https://getmdl.io/components/index.html#tables-section）に示されているように選択可能な行を使用したいと思いますが、JavaScriptを使用して行を配置すると、表の本体にチェックボックスが表示されません。

マイHTML

<div class="mdl-card mdl-shadow--2dp full-width login-activity-card"> 
    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable full-width"> 
     <thead> 
      <tr> 
       <th class="mdl-data-table__cell--non-numeric">Login Time</th> 
       <th class="mdl-data-table__cell--non-numeric">Login Date</th> 
      </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
</div>

私のJavascriptの

$(".login-activity-card .mdl-data-table tbody").html(
    '<tr>'+ 
     '<td class="mdl-data-table__cell--non-numeric">1:53 PM</td>'+ 
     '<td class="mdl-data-table__cell--non-numeric">Aug 05, 2017</td>'+ 
    '</tr>' 
)

私はヘッダーではなく、行の上にあるチェックボックスを取得します。