0

Im working with angular material to make a web application. I have a md-list that has 7 columns. I want to display a header in each of the columns to designate its respected value. I have the headers but am having issues formatting them properly. I found this answer here, which suggests using   or   to insert spaces in html.

I have a hard time accepting that putting this many spaces is the proper way to do this. Any suggestions as to formatting each of the row headers above their respective columns?

Many thanks in advance.

What I have tried: 

        <div layout="column">
            <md-content class="md-padding" layout-padding>
              <div class="md-list-column-headers" layout="row" flex="100">
                <h4><strong> User: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4>
                <h4><strong> Title: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4>
                <h4><strong> Description: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4>
                <h4><strong> Rating: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4>
                <h4><strong> Course: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4>
                <h4><strong> Date: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4>
              </div>
              <md-list flex >
                <md-list-item class="md-2-line"  ng-href="{{item.url}}" target="_blank" ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
                  <div class="md-list-item-text" layout="column" flex="5">
                    <h4>{{$index + 1}}</h4>
                  </div>
                  <div class="md-list-item-text" layout="column" flex="10">
                    <span></span>
                    <h4>name</h4>
                    <md-divider></md-divider>
                  </div>
                  <div class="md-list-item-text" layout="column" flex="20">
                    <h4>{{item.title}}</h4>
                    <md-divider></md-divider>
                  </div>
                  <div class="md-list-item-text" layout="column" flex="10">
                    <h4>{{item.description}}</h4>
                    <md-divider></md-divider>
                  </div>
                  <div class="md-list-item-text" layout="column" flex="10">
                    <h4>{{item.description}}</h4>
                    <md-divider></md-divider>
                  </div>
                  <div class="md-list-item-text" layout="column" flex="5">
                    <h4>{{item.score}}</h4>
                    <md-divider></md-divider>
                  </div>
                  <div class="md-list-item-text" layout="column" flex="10">
                    <h4>{{item.course}}</h4>
                    <md-divider></md-divider>
                  </div>
                  <div class="md-list-item-text" layout="column" flex="15">
                    <h4>{{item.timestamp}}</h4>
                    <md-divider></md-divider>
                  </div>
                </md-list-item>
              </md-list>
            </md-content>
          </div>

format column headers

User11
  • 27
  • 1
  • 1
  • 11

2 Answers2

0

Try including table header as a list item, using layout="row".

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
Ajay B
  • 23
  • 8
0

Put the same flex values on the header columns as you did on each row's column. But, really, rather than try to turn an md-list into a table, you'd be far better off using a component designed for the job. I've been plagued with performance issues in IE and md-list was one of the culprits. Try something like this: https://github.com/daniel-nagy/md-data-table

Or just google for angular material table for more options.

adam0101
  • 29,096
  • 21
  • 96
  • 174