Sortable Tables (AngularJS)

Colors
ID	Name	Hex	User
{{ ::color.id }}	{{ ::color.name }}	`#{{ ::color.hex }}`	{{ ::color.user.name }}

<table class="table--striped" ng-cloak sortable-table default-key="name" default-reverse>
    <caption>Colors</caption>
    <thead>
        <tr>
            <th sortable-header class="shrink" attribute="id">ID</th>
            <th sortable-header class="grow" attribute="name">Name</th>
            <th sortable-header class="shrink" attribute="hex">Hex</th>
            <th sortable-header class="shrink" attribute="user.name">User</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="color in colors | orderBy:sortableKey:sortableReverse">
            <td ng-cloak>{{ ::color.id }}</td>
            <td ng-cloak>{{ ::color.name }}</td>
            <td>
                <code ng-cloak ng-style="{'background': '#' + color.hex}">#{{ ::color.hex }}</code>
            </td>
            <td ng-cloak>{{ ::color.user.name }}</td>
        </tr>
    </tbody>
</table>