Using Tailwind with ZingGrid
Quickly add data tables to your Tailwind application with ZingGrid.
Usage
- 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.
- 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>
- 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 */
}