var grid = new tui.Grid({
el: $('#grid'),
scrollX: false,
scrollY: false,
rowHeaders: ['checkbox'],
columns: [
{
title: 'Name',
name: 'name'
},
{
title: 'Artist',
name: 'artist'
},
{
title: 'Type',
name: 'type'
},
{
title: 'Release',
name: 'release'
},
{
title: 'Genre',
name: 'genre'
}
]
});
var gridData = [
{
name: 'Beautiful Lies',
artist: 'Birdy',
release: '2016.03.26',
type: 'Deluxe',
genre: 'Pop'
},
{
name: 'X',
artist: 'Ed Sheeran',
release: '2014.06.24',
type: 'Deluxe',
genre: 'Pop',
_extraData: {
rowState: 'DISABLED' // A current row is disabled
}
},
{
name: 'Moves Like Jagger',
release: '2011.08.08',
artist: 'Maroon5',
type: 'Single',
genre: 'Pop,Rock',
_extraData: {
rowState: 'DISABLED_CHECK' // A checkbox is disabled only
}
},
{
name: 'A Head Full Of Dreams',
artist: 'Coldplay',
release: '2015.12.04',
type: 'Deluxe',
genre: 'Rock',
_extraData: {
rowState: 'CHECKED', // A checkbox is already checked while rendering
className: { // Add class name on a row
row: ['red']
}
}
},
{
name: '19',
artist: 'Adele',
release: '2008.01.27',
type: 'EP',
genre: 'Pop,R&B',
_extraData: {
rowSpan: { // Merge rows
artist: 3,
genre: 2
}
}
},
{
name: '21',
artist: 'Adele',
release: '2011.01.21',
type: 'Deluxe',
genre: 'Pop,R&B'
},
{
name: '25',
artist: 'Adele',
release: '2015.11.20',
type: 'EP',
genre: 'Pop',
_extraData: {
className: { // Add class name on each columns
column: {
type: ['blue'],
genre: ['blue']
}
}
}
}
];
grid.setData(gridData);