var grid = new tui.Grid({
        el: $('#grid'),
        headerHeight: 40,
        displayRowCount: 15,
        minimumColumnWidth: 100,
        rowHeight: 35,
        columnModelList: [
            {
                columnName: '_button',
                width: 30
            },
            {
                title: 'ID',
                columnName: 'c1',
                align: 'center',
                editOption: {
                    beforeContent: 'FE',
                    type: 'text'
                }
            },
            {
                title: 'Name',
                defaultValue: 2,
                columnName: 'c2',
                align: 'center',
                editOption: {
                    type: 'text',
                }
            },
            {
                title: 'Score',
                columnName: 'c3',
                align: 'center',
                editOption: {
                    type: 'text',
                    afterContent: ' Point',
                }
            }
        ]
    });
    var rowList = [];
    (function() {
        _.times(20, function(number) {
            rowList.push({
                c1: String(Math.random()).substring(2, 10),
                c3: Math.round(Math.random() * 10000)
            });
        })
    })();
    rowList[0].c2 = 'Mustafa Cosme';
    rowList[1].c2 = 'Gunnar Fausto';
    rowList[2].c2 = 'Junior Morgan';
    rowList[3].c2 = 'Tódor Ingo';
    rowList[4].c2 = 'Zezé Obadiah';
    rowList[5].c2 = 'Alfwin Damir';
    rowList[6].c2 = 'Feroz Fredrik';
    rowList[7].c2 = 'Archer Beniamino';
    rowList[8].c2 = 'Dado Shaul';
    rowList[9].c2 = 'Svetoslav Eder';
    rowList[10].c2 = 'Lauri Gligor';
    rowList[11].c2 = 'Ruben Bèr';
    rowList[12].c2 = 'Vicenç Hadrien';
    rowList[13].c2 = 'Borna Rochus';
    rowList[14].c2 = 'Kristijonas Tate';
    rowList[15].c2 = 'Georg Ormazd';
    rowList[16].c2 = 'Kumara Archimedes';
    rowList[17].c2 = 'Hershel Radomil';
    rowList[18].c2 = 'Toma Levan';
    rowList[19].c2 = 'Njord Thoko';
    grid.setRowList(rowList);
    grid.disableRow(6);
    var currentPresetName = 'default';
    $('.btn-theme').click(function() {
        var preset = $(this).data('preset');
        currentPresetName = preset;
        tui.Grid.applyTheme(preset);
    });
    $('.btn-custom').click(function() {
        var options = eval('(' + $('#custom-text').val() + ')');
        tui.Grid.applyTheme(currentPresetName, options);
    });

    <div id="grid"></div>
    <div id="theme">
        <div class="preset">
            <h4>Preset</h4>
            <button class="btn-theme" data-preset="default">default</button>
            <button class="btn-theme" data-preset="striped">striped</button>
            <button class="btn-theme" data-preset="clean">clean</button>
        </div>
        <div class="custom">
            <h4>Custom options</h4>
            <p><textarea id="custom-text">
{
    grid: {
        background: '#fff',
        border: '#ccc',
        text: '#444'
    },
    selection: {
        background: '#4daaf9',
        border: '#004082'
    },
    toolbar: {
        border: '#ccc',
        background: '#fff'
    },
    scrollbar: {
        background: '#f5f5f5',
        thumb: '#d9d9d9',
        active: '#c1c1c1'
    },
    cell: {
        normal: {
            background: '#fbfbfb',
            border: '#e0e0e0'
        },
        head: {
            background: '#eee',
            border: '#ccc'
        },
        editable: {
            background: '#fbfbfb'
        },
        selectedHead: {
            background: '#d8d8d8'
        },
        focused: {
            border: '#418ed4'
        },
        disabled: {
            text: '#b0b0b0'
        },
        evenRow: {
            background: '#fbfbfb'
        },
        currentRow: {
            background: '#e0ffe0'
        }
    }
}
        </textarea></p>
            <p><button class="btn-custom">Apply</button></p>
        </div>
    </div>