Tables

Simple Table

  
     ]]>

Selectable

  
   

   {{selected | json}}
  ]]>

      class TableDemo implements OnInit {

         tableData:[ITableItem] = [
         {material:'Acrylic (Transparent)', quantity:25, unitPrice:2.90, selected:true},
         {material:'Plywood (Birch)', quantity:50, unitPrice:1.25, selected:false},
         {material:'Laminate (Gold on Blue)', quantity:10, unitPrice:2.35, selected:false}
      ];

         selected:Array = new Array();

         public tableModel = new MdlDefaultTableModel([
            {key:'material', name:'Material', sortable:true},
            {key:'quantity', name:'Quantity', sortable:true, numeric:true},
            {key:'unitPrice', name:'Unit price', numeric:true}
         ]);

         ngOnInit(){
            this.tableModel.addAll(this.tableData);
            this.selected = this.tableData.filter( data => data.selected);
         }

         selectionChanged($event){
            this.selected = $event.value;
         }

      }
   
]]>

The mdl-table component is usually designed to show a small amount of structured data. One version with a special row to select all or some items. You need to provide a IMdlTableModel or you can use the MdlDefaultTableModel