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

Theme πŸ‘¨β€πŸŽ¨

The TOAST UI Grid provides you an easy way to customize the style of the grid. With applyTheme() method, you can easily change entire styles of the grid.

Using Built-in Presets

There are three built-in presets in the TOAST UI Grid - default, striped and clean. To apply one of these presets, you only have to add one line of code to your source code:

import Grid from 'tui-grid';

Grid.applyTheme('default');

If you run the code above or don't apply any preset, the default preset will be applied. It looks like below.

theme_default

Using the striped preset adds zebra-striping to the table.

Grid.applyTheme('striped');

The result will looks like this:

theme_striped

If you want more clean and basic style, use the clean preset.

Grid.applyTheme('clean');

It has a very simple design like below.

theme_clean

Customizing themes

If you want to apply your own styles to the grid, you can extend the preset theme with your own options. The applyTheme() method has a second parameter, which extends the existing theme options. For example, if you want to use striped preset with changing the background colors of head-cells and cells in even rows, you can use the code below.

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

The result will looks like this:

theme_custom

The following example extends the default preset with the custom options. The options are the same with the clean preset. You can see the result by comparing the default and the clean preset in the screenshots above.

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'
    }
  }
});

You can see all available options at the Grid.applyTheme() section of the API page.

Example

You can apply preset themes and customize them with a sample grid here.

You can’t perform that action at this time.