Table Demo | <uif-table>

In order for this demo to work you must first build the library in debug mode.

This markup:

<uif-table>
    <uif-table-head>
        <uif-table-row>
            <uif-table-row-select></uif-table-row-select>
            <uif-table-header>File name</uif-table-header>
            <uif-table-header>Location</uif-table-header>
            <uif-table-header>Modified</uif-table-header>
            <uif-table-header>Type</uif-table-header>
        </uif-table-row>
    </uif-table-head>
    <uif-table-body>
        <uif-table-row ng-repeat="f in files" uif-selected="{{f.isSelected}}">
            <uif-table-row-select></uif-table-row-select>
            <uif-table-cell>{{f.fileName}}</uif-table-cell>
            <uif-table-cell>{{f.location}}</uif-table-cell>
            <uif-table-cell>{{f.modified | date}}</uif-table-cell>
            <uif-table-cell>{{f.type}}</uif-table-cell>
        </uif-table-row>
    </uif-table-body>
</uif-table>

Renders this:
File name Location Modified Type {{f.fileName}} {{f.location}} {{f.modified | date}} {{f.type}}

Marking rows as selected

Rows can be marked as selected using the uif-selected attribute on the <uif-table-row> directive.

Sorting table

The uif-table directive supports sorting. To enable sorting you need to complete the following steps:

  1. To each header cell, which you would like to allow users to sort the table with, add the uif-order-by attribute and specify the name of the property used to sort, eg. <uif-table-header uif-order-by="fileName">File name</uif-table-header> will sort the table using the data from the fileName property.
  2. In the ng-repeat directive used to rendered table rows add the table.orderBy and !table.orderAsc ( please not the exclamation mark (!) prepending the table.orderAsc property) properties, eg. <uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc">

This markup:

<uif-table>
    <uif-table-head>
        <uif-table-row>
            <uif-table-row-select></uif-table-row-select>
            <uif-table-header uif-order-by="fileName">File name</uif-table-header>
            <uif-table-header>Location</uif-table-header>
            <uif-table-header uif-order-by="modified">Modified</uif-table-header>
            <uif-table-header uif-order-by="type">Type</uif-table-header>
            <uif-table-header uif-order-by="size">Size</uif-table-header>
        </uif-table-row>
    </uif-table-head>
    <uif-table-body>
        <uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-selected="{{f.isSelected}}">
            <uif-table-row-select></uif-table-row-select>
            <uif-table-cell>{{f.fileName}}</uif-table-cell>
            <uif-table-cell>{{f.location}}</uif-table-cell>
            <uif-table-cell>{{f.modified | date}}</uif-table-cell>
            <uif-table-cell>{{f.type}}</uif-table-cell>
            <uif-table-cell>{{f.size}}</uif-table-cell>
        </uif-table-row>
    </uif-table-body>
</uif-table>

Renders this (please note that sorting hasn't been enabled for the Location column):
File name Location Modified Type Size {{f.fileName}} {{f.location}} {{f.modified | date}} {{f.type}} {{f.size}}

Selecting rows

The uif-table directive supports three different modes for selecting table rows:

The row selection mode is set using the uif-row-select-mode attribute on the uif-table directive, eg. <uif-table uif-row-select-mode="multiple">

The retrieval for selected rows is set using the uif-selected-items attribute on the uif-table directive, eg. <uif-table uif-selected-items="selectedFiles">
The attribute is optional and isn't necessary as attribute on the table directive

Data items corresponding to the selected rows can be retrieved using the table.selectedItems property.

Please note that the ability to select rows works independent of the ability to mark rows as selected using the uif-selected attribute on the uif-table-row directive. Even if you choose to not to allow users to select rows in the table, you can still render some rows as selected.

Selecting rows disabled (<uif-table uif-row-select-mode="none">)

This markup:

<uif-table uif-row-select-mode="none" uif-selected-items="selectedFiles">
    <uif-table-head>
        <uif-table-row>
            <uif-table-row-select></uif-table-row-select>
            <uif-table-header uif-order-by="fileName">File name</uif-table-header>
            <uif-table-header>Location</uif-table-header>
            <uif-table-header uif-order-by="modified">Modified</uif-table-header>
            <uif-table-header uif-order-by="type">Type</uif-table-header>
            <uif-table-header uif-order-by="size">Size</uif-table-header>
        </uif-table-row>
    </uif-table-head>
    <uif-table-body>
        <uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}}">
            <uif-table-row-select></uif-table-row-select>
            <uif-table-cell>{{f.fileName}}</uif-table-cell>
            <uif-table-cell>{{f.location}}</uif-table-cell>
            <uif-table-cell>{{f.modified | date}}</uif-table-cell>
            <uif-table-cell>{{f.type}}</uif-table-cell>
            <uif-table-cell>{{f.size}}</uif-table-cell>
        </uif-table-row>
    </uif-table-body>
</uif-table>

Renders this (selecting rows disabled, one row marked as selected):
File name Location Modified Type Size {{f.fileName}} {{f.location}} {{f.modified | date}} {{f.type}} {{f.size}}

The following files are selected:
{{f.fileName}},

Selecting single row (<uif-table uif-row-select-mode="single">)

This markup:

<uif-table uif-row-select-mode="single" uif-selected-items="selectedFiles">
    <uif-table-head>
        <uif-table-row>
            <uif-table-row-select></uif-table-row-select>
            <uif-table-header uif-order-by="fileName">File name</uif-table-header>
            <uif-table-header>Location</uif-table-header>
            <uif-table-header uif-order-by="modified">Modified</uif-table-header>
            <uif-table-header uif-order-by="type">Type</uif-table-header>
            <uif-table-header uif-order-by="size">Size</uif-table-header>
        </uif-table-row>
    </uif-table-head>
    <uif-table-body>
        <uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}}">
            <uif-table-row-select></uif-table-row-select>
            <uif-table-cell>{{f.fileName}}</uif-table-cell>
            <uif-table-cell>{{f.location}}</uif-table-cell>
            <uif-table-cell>{{f.modified | date}}</uif-table-cell>
            <uif-table-cell>{{f.type}}</uif-table-cell>
            <uif-table-cell>{{f.size}}</uif-table-cell>
        </uif-table-row>
    </uif-table-body>
</uif-table>

Renders this (selecting single row enabled, one row marked as selected):
File name Location Modified Type Size {{f.fileName}} {{f.location}} {{f.modified | date}} {{f.type}} {{f.size}}

The following files are selected:
{{f.fileName}},

Selecting multiple rows (<uif-table uif-row-select-mode="multiple">)

When allowing to select multiple rows it is possible to toggle selection of all rows using the table row selector ( ) in the header row. If not all rows are selected, clicking the table row selector will select all rows. If all rows are selected, clicking it will deselect all rows.

This markup:

    <uif-table uif-row-select-mode="multiple" uif-selected-items="selectedFiles">
        <uif-table-head>
            <uif-table-row>
                <uif-table-row-select></uif-table-row-select>
                <uif-table-header uif-order-by="fileName">File name</uif-table-header>
                <uif-table-header>Location</uif-table-header>
                <uif-table-header uif-order-by="modified">Modified</uif-table-header>
                <uif-table-header uif-order-by="type">Type</uif-table-header>
                <uif-table-header uif-order-by="size">Size</uif-table-header>
            </uif-table-row>
        </uif-table-head>
        <uif-table-body>
            <uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}}">
                <uif-table-row-select></uif-table-row-select>
                <uif-table-cell>{{f.fileName}}</uif-table-cell>
                <uif-table-cell>{{f.location}}</uif-table-cell>
                <uif-table-cell>{{f.modified | date}}</uif-table-cell>
                <uif-table-cell>{{f.type}}</uif-table-cell>
                <uif-table-cell>{{f.size}}</uif-table-cell>
            </uif-table-row>
        </uif-table-body>
    </uif-table>

Renders this (selecting multiple rows enabled, one row marked as selected):
File name Location Modified Type Size {{f.fileName}} {{f.location}} {{f.modified | date}} {{f.type}} {{f.size}}

The following files are selected:
{{f.fileName}},

Fixed table rendering

This markup:

    <uif-table uif-table-type="fixed" uif-selected-items="selectedFiles">
        <uif-table-head>
            <uif-table-row>
                <uif-table-row-select></uif-table-row-select>
                <uif-table-header uif-order-by="fileName">File name</uif-table-header>
                <uif-table-header>Location</uif-table-header>
                <uif-table-header uif-order-by="modified">Modified</uif-table-header>
                <uif-table-header uif-order-by="type">Type</uif-table-header>
                <uif-table-header uif-order-by="size">Size</uif-table-header>
            </uif-table-row>
        </uif-table-head>
        <uif-table-body>
            <uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}}">
                <uif-table-row-select></uif-table-row-select>
                <uif-table-cell>{{f.fileName}}</uif-table-cell>
                <uif-table-cell>{{f.location}}</uif-table-cell>
                <uif-table-cell>{{f.modified | date}}</uif-table-cell>
                <uif-table-cell>{{f.type}}</uif-table-cell>
                <uif-table-cell>{{f.size}}</uif-table-cell>
            </uif-table-row>
        </uif-table-body>
    </uif-table>

Renders this (selecting multiple rows enabled, one row marked as selected):
File name Location Modified Type Size {{f.fileName}} {{f.location}} {{f.modified | date}} {{f.type}} {{f.size}}

The following files are selected:
{{f.fileName}},