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.

Full Datagrid demo

Selected users: No user selected.

User ID
3030SheridanAug 26, 2018Vileplume
41547MarcellaSep 12, 2017Krabby
13805KaitlinMar 28, 2014Tentacruel
39551DebbyApr 15, 2016Grimer
15994BradMar 8, 2014Parasect
26058KaitlinSep 25, 2016Seel
35904BradAug 14, 2016Pinsir
85139LottieMay 16, 2018Zubat
46500RhonaJul 8, 2018Dodrio
45460NelsonOct 30, 2016Tangela
1 - 10 of 103 users
  • 1
  • ...

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.