--- title: "Material Design Theme | Docs" description: "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." url: https://www.zinggrid.com/docs/integrations/css-&-design-systems/material-design --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/integrations/css-&-design-systems/material-design.md mode: provenance representation: markdown origin_response_id: 8dfe87ee58daa3eed49f19c149f1a84b version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.726Z version_nonce: 5d1278820f57f84c0acc47395a18ef17 generated_at_utc: 2026-10-24T01:41:37.709Z response_nonce: 46929ba464b886116322bd82298955ba ``` # Create Material Design Data Tables with ZingGrid Quickly add data tables to your application with ZingGrid’s Material Design theme. [Example code](https://app.zingsoft.com/demos/embed/UO741RJS) ## 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! ## Using the theme 1. Include ZingGrid in your site along with Material Design Lite CSS and JS. ```html