experiment_id: web-retrieval-v1
fixture_id: /docs/integrations/css-&-design-systems/material-design
mode: provenance
representation: html
origin_response_id: aa2b583f38b270a31f97bb76ece24713
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.725Z
version_nonce: 59383854758fe248f74d1f1b2fb67e69
generated_at_utc: 2026-11-13T02:53:34.167Z
response_nonce: 5f76cf863989ef7b84a394ab281a14f3
Docs Version 1

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 framework styling by applying the same classes that you are familiar with.

Feature Description
Pagination We've incorporated the Material Design specification's data table design into our components, including pagination.
Alerts We've utilized the Snackbar to alert actions, selections, CRUD operations, and informational messages.
Filtering The custom contextual filter bar allows 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.

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

Top

Using the theme

  1. Include ZingGrid in your site along with Material Design Lite CSS and JS.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"><script>
  1. Include the ZingGrid markup on your page and set the theme to 'mdl'. The starter theme can be located here. 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? Get Material Design Theme

Top

[integrations: material design]