Themes

Create Material Design Data Tables with ZingGrid

Quickly add data tables to your application with ZingGrid’s Material Design theme.

Applies styles instantly

Our Material Design Theme allows users to instantly use the Material Design Lite frameworks's styling by applying the same classes that you are familiar to.

Heading 1

Heading 2

Heading 3

Uses Material Design Lite components

ZingGrid allows for custom column and cell types which enable you to add HTML inside of each cell - including bootstrap components and styles!

Pagination

We've incorporated the Material Design specification's data table design into our components, including pagination

Alerts

We've utilizied the Snackbar to alert actions, selections, CRUD operations, and many informational messages.

Icons

Utilize Bootstrap's SVG icons directly in the grid.

Filtering

The custom contextual filter bar allow users to filter through data and easily see what the context is.

Progress Bars

Integrate bootstrap components directly, including progress bars, using custom column types

Dialogs

Material Design Dialogs allow confirmations and decisions to be displayed as an overlay on the grid.

Use the Material Design theme with ease

Our Material Design theme allows users to instantly use the Material Design Lite's components and styling by applying the same classes that you are familiar to.

1. Include ZingGrid in your site along with Material Design Lite CSS and JS.

              <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
              <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
              <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
            

2. Include the ZingGrid markup on your page and set the theme to 'mdl'. And that's it!

              <zing-grid 
              id="myFirstGrid" 
              theme="mdl" 
              caption="Users" 
              data='[
                {
                  "first": "Mark",
                  "last": "Otto",
                  "username": "@ZTfer",
                  "category": "primary",
                  "progress": "12"
                },
                {
                  "first": "Jacob",
                  "last": "Thorton",
                  "username": "@jacobthorton",
                  "category": "secondary",
                  "progress": "62"
                },
                {
                  "first": "Duncan",
                  "last": "Mattheson",
                  "username": "@dmattheson",
                  "category": "danger",
                  "progress": "84"
                }
              ]'
            ></zing-grid>
            

Ready to get started?