Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
98 lines (70 sloc) 2.91 KB

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.

theme_default

The striped preset will add stripes to your table.

Grid.applyTheme('striped');

Below is an example of a Grid with striped theme.

theme_striped

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.

theme_clean

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.

theme_custom

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', {
  grid: {
    border: '#e0e0e0'
  },
  toolbar: {
    border: '#e0e0e0'
  },
  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.

You can’t perform that action at this time.