iui-table

Adding the iui-table directive to your markup:

app.controller('TableController', [function () {
  var that = this;
  that.data = [
    {
      firstName: 'Joe',
      lastName: 'Smith'
    },
    {
      firstName: 'Janet',
      lastName: 'Doe'
    }
  ];
  that.gridColumns = [
    {
      field: 'firstName',
      displayName: 'First Name',
      columnClass: 'table-column-first-name'
    },
    {
      field: 'lastName',
      displayName: 'Last Name'
      //headerCellTemplate: 'templates/url-of-header-template.html'
    }
  ];
  that.sortingOptions = {
    field: 'lastName',
    reverse: false
  };
}]);
<div ng-controller="TableController as table">
  <iui-table 
    display-columns="table.gridColumns" 
    row-data="table.data" 
    hide-table-pager="false" 
    sorting-options="table.sortingOption" 
    table-class="'table-names responsive'" 
    table-caption="'Table of Names'"
    hide-table-caption="false"
    page-size="10"
    server-side-sorting="false"
    empty-row-data-message="There is no data to display."></iui-table>
</div>

Directive Attributes

displayColumns
Array Required - defines the columns in the grid
rowData
Array Required - array of data. Only the fields defined in the displayColumns will show
hideTablePager
Boolean - determines if the pagination at the bottom should show
rowTemplate
String - allows a custom row template to be passed in
sortingOptions
Object - with two properties field: String and reverse: Boolean
tableCaption
String - gives the table a caption
hideTableCaption
Boolean - puts a class of sr-only on the table caption. That way the heading is still visible to screen readers
tableClass
String - passes in class to table. You can chain table classes like 'class1 class2'
pageSize
Counting Number - defaults to 10
serverSideSorting
Boolean - if there is server side sorting set to true
empty-row-data-message
String - a message that displays when there's no data in the table. The default is "There's no data to display in this table."

Table with Pagination

<div ng-controller="TableController2 as table">
  <iui-table 
    display-columns="table.gridColumns" 
    row-data="table.data"></iui-table>
</div>
app.controller('TableController2', [function () {
  var that = this;
  that.gridColumns = [
    {
      field: 'codeName',
      displayName: 'Code Name',
      columnClass: 'code-name-custom-class'
    },
    {
      field: 'agency',
      displayName: 'Agency',
      columnClass: 'agencyCustomClass'
    }
  ];
  that.data = [
    {
      name: 'Maxwell Smart',
      codeName: 'Agent 86',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 99',
      agency: 'CONTROL'
    },
    {
      codeName: 'Mr. Big',
      agency: 'KAOS'
    },
    {
      codeName: 'The Chief',
      agency: 'CONTROL'
    },
    {
      codeName: 'Hymie the Robot',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 8',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 13',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 44',
      agency: 'CONTROL'
    },
    {
      codeName: 'Ludwig Von Siegfried',
      agency: 'KAOS'
    },
    {
      codeName: 'Shtarker',
      agency: 'KAOS'
    },
    {
      codeName: 'The Claw',
      agency: 'KAOS'
    },
    {
      codeName: 'Spinoza',
      agency: 'KAOS'
    },
    {
      codeName: 'Fang',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 1',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 2',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 3',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 4',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 5',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 6',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 7',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 9',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 10',
      agency: 'CONTROL'
    },
    {
      codeName: 'Agent 11',
      agency: 'CONTROL'
    }
  ];
}]);

Foreign Language Support

iui-table includes a number of sr-only labels that are used for accessibility reasons. To customize/change these labels, you can access the iuiTableLabels service. Changing these values will change the labels app wide.

totalItems
Total Items
first
First
previous
Previous
page
Page
next
Next
last
Last
sortBy
Sort By
selected
Selected
selectAll
Select All
unread
Unread
actions
Actions