Docs

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]