Clarity NG now provides a Datagrid Angular component. It comes with a first set of features, including sorting, filtering, pagination and multi-selection. It supports pre-loaded data as well as server-driven data, where only the currently displayed items are loaded in the browser. We have a list of features we plan to add in future versions, but we welcome any feedback or request to add to that list or change its priorities.
Clarity's Datagrid uses a declarative interface, so you can use it as you would use an HTML table, directly in your templates. Here is a basic example with simple objects:
<clr-datagrid>
<clr-dg-column [clrDgField]="'id'">User ID</clr-dg-column>
<clr-dg-column [clrDgField]="'name'">Name</clr-dg-column>
<clr-dg-column [clrDgField]="'creation'">Creation date</clr-dg-column>
<clr-dg-row *clrDgItems="let user of users">
<clr-dg-cell>{{ user.id }}</clr-dg-cell>
<clr-dg-cell>{{ user.name }}</clr-dg-cell>
<clr-dg-cell>{{ user.creation | date }}</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
{{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }}
of {{ pagination.totalItems }}
<clr-dg-pagination #pagination [clrDgPageSize]="10"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>
We will have full documentation coming soon for more advanced examples.
Clarity UI now depends on Clarity Icons instead of Font Awesome for iconography.
Breaking Change
Dropdowns Toggles now have an updated markup:
<button class="dropdown-toggle btn btn-outline-primary">
Dropdown
<clr-icon shape="caret" class="icon-orient-down"></clr-icon>
</button>
Note: Clarity recommends that you use a button for the toggle. The button can contain either text or an icon.
Deprecation
Use the following markup for using Clarity Icons in Branding, Header Nav and Header Actions:
<header class="header-6">
<div class="branding">
<a href="javascript://" class="nav-link">
<clr-icon shape="vm-bug"></clr-icon>
<span class="title">Project Clarity</span>
</a>
</div>
<div class="header-nav">
<a href="javascript://" class="nav-link nav-icon">
<clr-icon shape="cloud"></clr-icon>
</a>
<a href="javascript://" class="active nav-link nav-icon">
<clr-icon shape="folder"></clr-icon>
</a>
</div>
<form class="search">
<label for="search_input">
<input id="search_input" type="text" placeholder="Search for keywords...">
</label>
</form>
<div class="header-actions">
<div class="dropdown bottom-right">
<button class="dropdown-toggle nav-icon">
<clr-icon shape="user"></clr-icon>
<clr-icon shape="caret" class="icon-orient-down"></clr-icon>
</button>
<div class="dropdown-menu">
<a href="javascript://" class="dropdown-item">About</a>
<a href="javascript://" class="dropdown-item">Preferences</a>
<a href="javascript://" class="dropdown-item">Logout</a>
</div>
</div>
</div>
</header>
The Angular Dropdowns component now uses attribute directives for dropdown toggles and menu items
Breaking Change
clrDropdownToggle
should be used to indicate a dropdown toggle used in the angular
dropdown component
clrDropdownItem
should be used to indicate a dropdown item in the angular dropdown
component
<clr-dropdown [clrMenuPosition]="'bottom-right'">
<button class="btn btn-outline-primary" clrDropdownToggle>
Dropdown
<clr-icon shape="caret" class="icon-orient-down"></clr-icon>
</button>
<div class="dropdown-menu">
<label class="dropdown-header">Dropdown header</label>
<a href="javascript://" clrDropdownItem>Action 1</a>
<a href="javascript://" clrDropdownItem>Action 2</a>
<a href="javascript://" class="disabled" clrDropdownItem>Disabled Action</a>
<div class="dropdown-divider"></div>
<a href="javascript://" clrDropdownItem>Link 1</a>
<a href="javascript://" clrDropdownItem>Link 2</a>
</div>
</clr-dropdown>