CSS-in-JS

You can use any CSS-in-JS frameworks with Grid.js. In this example, we are using Emotion to style our Grid.js instance.

note

“CSS-in-JS” refers to a pattern where CSS is composed using JavaScript instead of defined in external files.

Import your favorite CSS-in-JS tool first:

import { css } from '@emotion/css';

And then use the className config to connect them together:

Live Editor


const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  search: true,
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444'],
    ['Eoin', 'eo3n@yahoo.com',   '(05) 10 878 5554'],
    ['Nisen', 'nis900@gmail.com',   '313 333 1923']
  ],
  className: {
    container: css`
      * {
        font-family: 'Tahoma';
      }
    `,
    table: css`
      tr:hover td {
        background-color: rgba(0, 0, 0, 0.1);
      }
    `,
    th: css`
      text-align: center;
      &:hover {
        background-color: #999;
        color: #fff;
      }
    `,
    td: css`
      color: #999;
      &:hover {
        color: #000;
      }
    `
  }
});


const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  search: true,
  data: [
    ['John', '[email protected]', '(353) 01 222 3333'],
    ['Mark', '[email protected]',   '(01) 22 888 4444'],
    ['Eoin', '[email protected]',   '(05) 10 878 5554'],
    ['Nisen', '[email protected]',   '313 333 1923']
  ],
  className: {
    container: css`
      * {
        font-family: 'Tahoma';
      }
    `,
    table: css`
      tr:hover td {
        background-color: rgba(0, 0, 0, 0.1);
      }
    `,
    th: css`
      text-align: center;
      &:hover {
        background-color: #999;
        color: #fff;
      }
    `,
    td: css`
      color: #999;
      &:hover {
        color: #000;
      }
    `
  }
});

Result

info

See className config for more details.