experiment_id: web-retrieval-v1
fixture_id: /docs/integrations/css-&-design-systems/material-design
mode: provenance
representation: html
origin_response_id: e7560d3c4d326935bbd5a4284d223dc8
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.725Z
version_nonce: 59383854758fe248f74d1f1b2fb67e69
generated_at_utc: 2026-10-24T00:48:47.367Z
response_nonce: fdca1542679af02345914b5ae9d80d71
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]