Using Tailwind with ZingGrid

Quickly add data tables to your Tailwind application with ZingGrid.

Usage

1. Include ZingGrid in your site along with Tailwind CSS and JS.

<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Note: Per Tailwind documentation, it is recommended to install Tailwind using NPM rather than through using the CDN. The CDN link does not allow you to use all of Tailwind's features.

2. Include the ZingGrid markup on your page, and add Tailwind classes as desired!

<zing-grid class="text-gray-700"
    sort
    zebra>
    <zg-caption class="text-2xl bg-gray-200 text-gray-900 font-semibold leading-tight">Tailwind Styled Grid</zg-caption>
    <zg-head class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider"></zg-head>
    <zg-data data='[
      { "first": "Maria", "last": "John", "number": 123 },
      { "first": "David", "last": "Smith", "number": 456 },
      { "first": "Felicity", "last": "Snow", "number": 789 }
      ]'>
    </zg-data>
    <zg-source class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">SOURCE: zinggrid.com</zg-source>
  </zing-grid>

3. Add any additional CSS styling using ZingGrid's CSS variables

zing-grid {
  --theme-color-primary: #1f2937; /* gray-800 */
  --theme-color-secondary: #1f2937; /* gray-800 */
  --zg-input-background: #e5e7eb; /*gray-200*/
  --zg-control-bar-background: #e5e7eb;  /*gray-200*/
  --zg-head-cell-background: #f3f4f6; /*gray-100*/
  --zg-button-background_hover: #1f2937; /* gray-800 */
  --zg-caption-button-background_hover: #1f2937; /* gray-800 */
}