Skip to main content Skip to navigation Skip to search

Datagrid

Angular Components

ClrDatagrid

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[clrDgLoading] input true, false false When this is true the datagrid will have an overlay that blocks user interaction and shows a <clr-spinner> that indicates activity associated with retrieving data from a server.
(clrDgRefresh) output n/a none The state object reflecting the page metadata (to, from size & current) and current sorting and filters applied to the data models.
[(clrDgSelected)] two-way n/a none An array of all datagrid items that are selected.
[(clrDgSingleSelected)] two-way n/a none The single item selected for a datagrid.
[clrDgSingleSelectionAriaLabel] input n/a Single selection header aria-label for the single select column header.
[clrDgSingleActionableAriaLabel] input n/a Single actionable header aria-label for the single action column header.
[clrDetailExpandableAriaLabel] input n/a Toggle more row content aria-label for the expandable row column header.
[clrDgPreserveSelection] input n/a false Preserve datagrid selections after filtering has occurred on the dataset.

Methods

dataChanged():void

Re-trigger the computation of displayed items manually. (cell width and datagrid height)

allSelected():boolean

Determine if all displayed items are selected. (getter)

allSelected(value: boolean):void

Select/deselect all currently displayed items. (setter)

  • Name Type Description
    value boolean True will select all items.

resize():void

Re-render the datagrid content.

ClrDatagridActionBar

Use this component to project buttons with functionality that operate on multiple items at once. There are no Bindings or methods for this class.

Selector & Basic Usage

ClrDatagridActionOverflow

Declare this component inside of the clr-dg-row element. It is used to project row specific actions that operate on a single row item.

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[(clrDgActionOverflowOpen)] two-way true, false false Two way binding for the open/close state of an action overflow menu.

ClrDatagridColumn

Selector & Basic Usage

The ClrDgatagridColumn is used to project column header content, declare the property on the model that relates to a column and declare filters, sorting as well as if it can be hidden by the user.

Bindings

Binding Type Options Default Description
[clrDgColType] input 'string' OR 'number' string Specify the built in filter type for a column.
[clrDgField] input n/a n/a The object property name that will be used for sorting and filtering in Datagrids that implement the *clrDgItem iterator.
[clrDgSortBy] input ClrDatagridComparatorInterface n/a A custom comparator supplied by the consuming application.
[(clrDgSortOrder)] two-way UNSORTED (0), ASC (1), DESC (-1) UNSORTED (0) Sets or updates the sorted state of a column.
[(clrFilterValue)] two-way any no filter applied Sets or updates the filtered state of a column.
(clrDgColumnResize) output n/a n/a Output that emits the width (in px) after a column has been re-sized.

ClrDatagridFilter

Declares the filter component to be applied on the container (clr-dg-column) element. This is only needed when creating and applying custom filters to a column.

Selector & Basic Usage

Inline View
Encapsulated View

Bindings

Binding Type Options Default Description
[clrDgFilter] input n/a 0 Bind a custom filter that implements the ClrDatagridFilterInterface<T> to a column.
[(clrDgFilterOpen)] two-way true, false false Two way binding for the open state of a column filter.

Methods

active():boolean

Indication for the active state of a column filter.

ClrDatagridRow

Selector & Basic Usage

Bindings

ClrDatagridCell

This class is used to project cell content into. Content can be simple textual content or complex DOM structure.

Selector & Basic Usage

ClrDgFooter

This class contains a layout for the following features: non-interactive icon that appears when rows are selected, a toggle button for the hide/show control when one or more columns are hideable and a slot for the pagination component. Any other projected content will be displayed in the description slot.

Selector & Basic Usage

ClrDatagridPagination

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[clrDgPageInputDisabled] input true, false false Turn on/off the users ability to interact with pagination controls.
[clrDgPageSize] input positive integers 0 (no pagination) Set the number of items per page.
[clrDgTotalItems] input positive integers 0 Set the total number if items in the data set.
[clrDgLastPage] input positive integers 1 Set the last page (e.g for back navigation in the browser).
[(clrDgPage)] two-way positive integers 1 Two way binding for the current page in the dataset.

ClrDatagridPageSize

Child component of pagination. Used to set the page size for pagination calculations.

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[clrPageSizeOptions] input number[] clrDgPageSize Populates the user options for changing the page size.

ClrDatagridPlaceholder

Content projected into this component appears only when the datagrid is empty.

Selector & Basic Usage

ClrDatagridDetail

Use this to project the details view when a row has master/detail enabled.

Selector & Basic Usage

Angular Directives

ClrDatagridHideableColumn

This is a structural directive that seperates on the column it is declared on. When at least one column is hidable the datagrid displays UI controls to hide and show the columns that have this directive declared. Note: it accepts the { hidden: boolean } object when presetting the hidden or shown state.

Selector & Basic Usage

Note, the object passed to the directive was a design decision to make it explicit what was being set. This separates the declaration of the feature from the (hidden) state of the feature.

Bindings

Binding Type Options Default Description
[clrDgHideableColumn] input { hidden: true }, { hidden: false } { hidden: false } Declares the column as hidable and optionally sets the initial hidden state.
[(clrDgHidden)] two-way true, false false An alternative, two way binding for setting the hidden state or responding to changes when hidden state is emitted.

ClrDatagridItems

For datagrids that can supply all of the items on page load there is a structural directive that lets us handle all of the data processing needed for filters, sorting and pagination. The TrackByFunction is optional.

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[clrDgItems] input [Items] n/a Structural directive that accepts a list of Items<T> for the datagrid to operate over.
[TrackByFunction] input TrackByFunction<T> n/a Optional trackby function (similar to *ngFor: trackBy).

ClrIfDetail

Structural directive that creates the detail view after a user activates it with the row button. Use it on the clr-dg-detail element and use the let keyword to declare a template variable for it.

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[(clrIfDetail)] two-way Item<T> n/a Structural directive used to pass the item to the ClrDatagridDetail component.

Interfaces

ClrDatagridStateInterface

The meta information about the datagrid model that is passed to the server in order to get a slice of the data. It contains a page object for paging state, a filters array with the filter object and a object that describes how the data gets sorted.

Basic Usage

Bindings

Property Type Description
page?.from? number The (optional) starting page number for the slice of data.
page?.to? number The (optional) ending page number for the slice of data.
page?.current? number The page number for the current slice of model data.
sort?.by string | ClrDatagridComparatorInterface<T> DESC (-1), ASC (1), None (0) or a custom comparator used for sorting.
sort?.reverse boolean The opposite of the sorting applies to the models
filters any[] An array of filters that implements ClrDatagridFilterInterface<T> that are applied to the data passed to the datagrid

ClrDatagridComparatorInterface

An interfaced used when creating a custom comparator. Use it to implement custom sorting for a columns. It must implement the compare method described below.

Methods

Property Type Description
compare(a: T, b: T) The comparator function that sorts Item models.
ClrDatagridComparatorInterface Notes

(T)ype is the type that describes a row of data for the items in the datagrid. It should handle undefined cases for both arguments along with the cases where a is sorted before b and b is sorted before a. When none of those cases applies it should return 0 (e.g the unsorted case).