<div id="grid"></div>
const newData = [{
        id: '10012',
        city: 'Seoul',
        country: 'South Korea'
    },
    {
        id: '10013',
        city: 'Tokyo',
        country: 'Japan'
    },
    {
        id: '10014',
        city: 'London',
        country: 'England'
    },
    {
        id: '10015',
        city: 'Ljubljana',
        country: 'Slovenia'
    },
    {
        id: '10016',
        city: 'Reykjavik',
        country: 'Iceland'
    }
];
const Grid = tui.Grid;
const instance = new Grid({
    el: document.getElementById('grid'), // Container element
    scrollX: true,
    scrollY: false,
    contextMenu: [],
    columns: [{
            header: 'ID',
            name: 'id',
        },
        {
            header: 'CITY',
            name: 'city',
            editor: 'text'
        },
        {
            header: 'COUNTRY',
            name: 'country'
        }
    ],

});
instance.resetData(newData); // Call API of instance's public method
Grid.applyTheme('striped'); // Call API of static method

External CSS

  1. https://uicdn.toast.com/grid/latest/tui-grid.css

External JavaScript

  1. https://uicdn.toast.com/grid/latest/tui-grid.js