Is it possible to create a table from md-list and md-list-item?

Question

I don't want to use angular-material-data-table for this, since it is a different library.

The following does not work:

<md-list>
  <md-list-item class="md-2-line" ng-repeat="item in todos">
     <div class="md-list-item-text" layout="row">
       <div layout="column">{{item.title}}</div>
       <div layout="column">{{item.description}}</p=div>
     </div>
  </md-list-item>
</md-list>

Answer 1

You can simply use layout-align attribute with span element to get the desired result.

Here is the code.

<md-list style="background-color:red">
  <md-list-item class="md-2-line">
    <div class="md-list-item-text" layout="row" layout-align="start center">
      <span flex="10">Title</span>
      <span flex="5"></span>
      <span flex="30">Dessciption</span>
    </div>
  </md-list-item>
  <md-list-item class="md-2-line" ng-repeat="item in todos">
    <div class="md-list-item-text" layout="row" layout-align="start center">
      <span flex="10">{{item.title}}</span>
      <span flex="5"></span>
      <span flex="30">{{item.description}}</span>
    </div>
  </md-list-item>
</md-list>

Working Example. http://codepen.io/next1/pen/oLWpPG