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