实现css DataTable

时间:2017-04-02 17:43:24

标签: angular material-design materialize

我正在使用materialize css进行Angular 2的简单演示。 我想知道是否可以使用materialize来设计一个正确的数据表,就像我在这里找到http://danielnagy.me/md-data-table/一样 如果是,请建议我或任何可以帮助我的链接。

这是我的简单代码

    <div class="row">
       <div class="col l8">
  <div class="card z-depth-1">
     <div class="card-content">
        <span class="card-title">{{tableTitle}}</span><br/><br/>
        <table class="centered bordered responsive-table">
           <thead>
              <tr>
                 <th>#</th>
                 <th>Name</th>
                 <th>Age</th>
                 <th>Address</th>
                 <th>Designation</th>
                 <th>Department</th>
                 <th>Salary</th>                   
              </tr>
           </thead>
           <tbody>
              <tr *ngFor="let item of empData;let i=index">
                 <td>{{i+1}}</td>
                 <td>{{item.Name}}</td>
                 <td>{{item.Age}}</td>
                 <td>{{item.Address}}</td>
                 <td>{{item.Designation}}</td>
                 <td>{{item.Department}}</td>
                 <td>{{item.Salary}}</td>
              </tr>
           </tbody>
        </table>
     </div>
  </div>

1 个答案:

答案 0 :(得分:0)

您可以继续使用Tera Data共价。你可以在这里查看。 https://teradata.github.io/covalent/#/components/data-table

我已经检查了这个,这非常简单,只需要按照几个步骤进行整合。