Datagrids are for organizing large volumes of data that users can scan, compare, and perform actions on.

We have 18 datagrid demos. Starting with the basics, each demo shows you one or more of the advanced Datagrid features.

Basic structure

To use our Datagrid, you do not need to pass an array of data or a JSON configuration to a single element. Instead, we leverage a pure declarative API, just like any other Angular component. You write your HTML just as you would for a basic table, with a *ngFor (or *clrDgItems, see Smart iterator) on the rows to iterate over your data.

User ID
Name
Creation date
Favorite color
7455BrynnJul 26, 2015Black
52749NidiaAug 4, 2014Red
27524MarcellaSep 28, 2018Pink
30471JohnsonJul 18, 2014Pink
40075LetishaSep 10, 2018White
32478SheridanDec 30, 2015Blue
15265DorianApr 30, 2016Red
99068NelsonMay 18, 2014Magenta
4510GeorgiaAug 27, 2017Cyan
87219GeorgiaSep 24, 2014Magenta
<clr-datagrid>
    <clr-dg-column>User ID</clr-dg-column>
    <clr-dg-column>Name</clr-dg-column>
    <clr-dg-column>Creation date</clr-dg-column>
    <clr-dg-column>Favorite color</clr-dg-column>

    <clr-dg-row *ngFor="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-cell>{{user.color}}</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer>{{users.length}} users</clr-dg-footer>
</clr-datagrid>

Usage

For Structured Content

Datagrids work best for structured, homogeneous content, where each object has the same attributes. When common attributes are directly aligned in columns, users can quickly scan and compare them.

For data sets with a blend of text, images, and data visualizations, or content with mixed formatting, cards offer a better layout.

For Large Volumes of Data

A datagrid is well-suited for presenting large volumes of data that don’t fit on one page. Users can filter and sort the data according to preference.

For smaller amounts of data (10 to 20 lines), datagrids are a relatively heavy component. Use datagrids if:

  • The data set will grow
  • Users need search, filter, or batch operations

For a smaller volume of data, use a table. Tables are a lighter-weight solution with a static view.