themes.md

Themes 👨‍🎨

TOAST UI Grid uses the applyTheme() method to set styles for the entire Grid and easily customize the Grid however the user sees fit.

Using Built-In Presets

TOAST UI Grid has three built in presets: default, striped, and clean. All of this can be achieved by typing in one simple line of code!

import Grid from 'tui-grid';

Grid.applyTheme('default');

If the snippet above is not present in your code, the default preset will be applied.

The default theme looks something like this.

The striped preset will add stripes to your table.

Grid.applyTheme('striped');

Below is an example of a Grid with striped theme.

If you are searching for simpler and more basic look, use the clean preset.

Grid.applyTheme('clean');

The Grid below is the result of using the clean theme.

Customizing Themes

If you have a unique style that you want to implement, you can customize additional options to extend the preset themes.

The second argument of the applyTheme() method is an object with extensible options for the theme. For example, if you were to implement a striped preset with different colors for the header area and even numbered rows, you can do so with the following.

Grid.applyTheme('striped', {
  cell: {
    header: {
      background: '#eef'
    },
    evenRow: {
      background: '#fee'
    }
  }
});

Once your run your code, your Grid should look something like the image below.

The following is an example of a customized default preset, and configurable options can be applied to both default as well as to clean.

With the code below, you can compare for yourself how the default and clean presets have changed.

Grid.applyTheme('default', {
  cell: {
    normal: {
      background: '#fff',
      border: '#e0e0e0',
      showVerticalBorder: false,
      showHorizontalBorder: true
    },
    header: {
      background: '#fff',
      border: '#e0e0e0'
    },
    selectedHeader: {
      background: '#e0e0e0'
    }
  }
});

All options are documented in greater detail in API Documentation under section Grid.applyTheme().

Example

Here is a sandbox where you can try different preset themes and customizable options on an example Grid.