Thank you for looking into this! Below is our configuration inside the gridDemo.js file:
export const COLUMNS = [
{
width: 70,
locked: true,
enableHeaderContextMenu: false,
enableCellContextMenu: false,
align: 'center',
type: 'action',
actions: [
{
cls: 'b-sf-utility-copy',
tooltip: 'Copy row',
visible: ({ record }) => record.done,
onClick: ({ record }) => {
console.log(record.done); // eslint-disable-line no-console
},
},
{
cls: 'b-sf-utility-delete',
tooltip: 'Delete row',
visible: ({ record }) => record.done,
onClick: ({ record }) => {
console.log(record.done); // eslint-disable-line no-console
},
},
{
cls: 'b-sf-utility-warning slds-button_icon-warning',
tooltip: 'This is your final warning Jahiel',
visible: ({ record }) => !record.done,
onClick: ({ record }) => {
console.log(record.done); // eslint-disable-line no-console
},
},
{
cls: 'b-sf-utility-error slds-text-color_error',
tooltip: 'Please resolve errors',
visible: ({ record }) => !record.done,
onClick: ({ record }) => {
console.log(record.done); // eslint-disable-line no-console
},
},
],
},
{
type: 'rownumber',
locked: true,
},
{
text: 'Template',
field: 'name',
flex: 1,
type: 'template',
template: ({ record }) => `Hi ${record.data.name}!`,
locked: true,
sum: 'count',
summaryRenderer: ({ sum }) => `Total: ${sum}`,
},
{
text: 'Percent',
field: 'percent',
flex: 1,
type: 'percent',
sum: 'min',
summaryRenderer: ({ sum }) => {
return 'Min: ' + sum;
},
},
{
text: 'City',
field: 'city',
flex: 1,
editor: {
type: 'dropdown',
multiSelect: true,
//Dear Dev:Julianne recommends disabling chipview for multiselect inside Grid cell
chipView: false,
items: [
'Stockholm',
'Moscow',
'Paris',
'Washington',
'San Francisco',
'New York',
'Barcelona',
'Dubai',
],
},
},
{
text: 'Date',
field: 'start',
flex: 1,
type: 'date',
format: 'MMMM Do YYYY',
headerRenderer: ({ column }) =>
`<abbr class="slds-required" title="required">* </abbr> ${column.text}`,
},
{
text: 'Time',
field: 'time',
flex: 1,
type: 'time',
format: 'LT',
},
{
text: 'Link (Readonly)',
field: 'team',
flex: 1,
type: 'template',
editor: false,
template: (data) =>
`<div class="slds-size_1-of-1"><div class="slds-grid slds-grid_align-spread"><div class="slds-col"><a href="//www.bryntum.com" target="_blank">${data.record.data.team}</a></div><div class="slds-col"><i class="slds-button__icon_lock slds-icon-text-default b-sf-utility-lock slds-m-left_x-small"></i></div></div></div>`,
},
{
text: 'Score (Readonly)',
field: 'score',
flex: 1,
type: 'template',
editor: false,
template: (data) =>
`<div class="slds-size_1-of-1"><div class="slds-grid slds-grid_align-end"><div class="slds-col">${data.record.data.score}</div><div class="slds-col"><i class="slds-button__icon_lock slds-icon-text-default b-sf-utility-lock slds-m-left_x-small"></i></div></div></div>`,
},
{
field: 'done',
text: 'Billable (Readonly)',
flex: 1,
type: 'template',
editor: false,
template: ({ value }) => {
return value
? `<i class="slds-button_icon b-sf-utility-check"></i>`
: '';
},
},
{
type: 'rating',
text: 'Rating',
cellCls: 'satisfaction',
max: 5,
field: 'rating',
},
{
type: 'action',
field: 'rating',
actions: [
{
cls: 'b-sf-utility-ban',
tooltip: 'Decrease rating',
onClick: ({ record }) => {
if (record.rating > 1) {
record.rating--;
}
},
},
{
cls: 'b-sf-utility-new',
tooltip: 'Increase rating',
onClick: ({ record }) => {
if (record.rating < 5) {
record.rating++;
}
},
},
],
},
{
text: 'Buttons',
field: 'button',
flex: 1,
align: 'center',
type: 'template',
template: (data) =>
`<button class="slds-button ${data.record.data.button} slds-button_stretch">${data.record.data.button}</button>`,
},
{
align: 'center',
width: 30,
type: 'widget',
widgets: [
{
type: 'button',
tooltip: 'More actions',
cls: 'slds-button slds-button_icon slds-button_icon-x-small slds-button_icon-border-filled',
iconCls: 'slds-m-left_none',
menu: [
{
text: 'Show details',
},
{
text: 'Delete',
},
],
},
],
},
];
export const FIELDS = [
{
name: 'start',
type: 'date',
},
];
export const DATA = [
{
id: 1,
title: 'Row 0',
name: 'Don A Taylor',
firstName: 'Don',
surName: 'Taylor',
city: 'Moscow',
team: 'Paris Tigers',
age: 30,
food: 'Salad',
color: 'Black',
score: 880,
rank: 99,
start: '2019-02-05T21:00:00.000Z',
finish: '2019-02-20T21:00:00.000Z',
time: '2019-12-31T23:10:00.000Z',
percent: 13,
done: false,
rating: 2,
relatedTo: 3,
button: 'slds-button',
},
{
id: 2,
title: 'Row 1',
name: 'John B Adams',
firstName: 'John',
surName: 'Adams',
city: 'Paris',
team: 'Washington Horses',
age: 64,
food: 'Bolognese',
color: 'Orange',
score: 850,
rank: 55,
start: '2019-01-25T21:00:00.000Z',
finish: '2019-02-22T21:00:00.000Z',
time: '2020-01-01T17:00:00.000Z',
percent: 13,
done: false,
rating: 2,
relatedTo: 9,
button: 'slds-button_neutral',
},
{
id: 3,
title: 'Row 2',
name: 'Doug C Jones',
firstName: 'Doug',
surName: 'Jones',
city: 'Stockholm',
team: 'New York Hens',
age: 30,
food: 'Pancake',
color: 'Pink',
score: 330,
rank: 100,
start: '2019-02-07T21:00:00.000Z',
finish: '2019-02-18T21:00:00.000Z',
time: '2019-12-31T23:55:00.000Z',
percent: 85,
done: true,
rating: 3,
relatedTo: 3,
button: 'slds-button_brand',
},
{
id: 4,
title: 'Row 3',
name: 'James D Davis',
firstName: 'James',
surName: 'Davis',
city: 'Barcelona',
team: 'Moscow Lions',
age: 87,
food: 'Pancake',
color: 'Green',
score: 790,
rank: 33,
start: '2019-01-26T21:00:00.000Z',
finish: '2019-02-21T21:00:00.000Z',
time: '2020-01-01T00:55:00.000Z',
percent: 30,
done: true,
rating: 0,
relatedTo: 11,
button: 'slds-button_outline-brand',
},
{
id: 5,
title: 'Row 4',
name: 'Mike E Johnson',
firstName: 'Mike',
surName: 'Johnson',
city: 'Moscow',
team: 'New York Roosters',
age: 14,
food: 'Pancake',
color: 'Green',
score: 780,
rank: 60,
start: '2019-02-04T21:00:00.000Z',
finish: '2019-03-02T21:00:00.000Z',
time: '2020-01-01T19:35:00.000Z',
percent: 26,
done: true,
rating: 2,
relatedTo: 12,
button: 'slds-button_destructive',
},
{
id: 6,
title: 'Row 5',
name: 'Don F Johnson',
firstName: 'Don',
surName: 'Johnson',
city: 'Dubai',
team: 'Paris Tigers',
age: 18,
food: 'Fish n chips',
color: 'Red',
score: 640,
rank: 5,
start: '2019-02-09T21:00:00.000Z',
finish: '2019-02-21T21:00:00.000Z',
time: '2020-01-01T14:40:00.000Z',
percent: 78,
done: true,
rating: 4,
relatedTo: 6,
button: 'slds-button_text-destructive',
},
{
id: 7,
title: 'Row 6',
name: 'Jane G McGregor',
firstName: 'Jane',
surName: 'McGregor',
city: 'Stockholm',
team: 'Moscow Eagles',
age: 78,
food: 'Fish n chips',
color: 'Green',
score: 290,
rank: 3,
start: '2019-01-24T21:00:00.000Z',
finish: '2019-02-04T21:00:00.000Z',
time: '2020-01-01T08:55:00.000Z',
percent: 64,
done: true,
rating: 0,
relatedTo: 12,
button: 'slds-button_success',
},
{
id: 8,
title: 'Row 7',
name: 'Jane H Thomas',
firstName: 'Jane',
surName: 'Thomas',
city: 'New York',
team: 'Paris Cougars',
age: 65,
food: 'Fish n chips',
color: 'Black',
score: 400,
rank: 50,
start: '2019-01-14T21:00:00.000Z',
finish: '2019-02-06T21:00:00.000Z',
time: '2020-01-01T17:00:00.000Z',
percent: 13,
done: false,
rating: 2,
relatedTo: 16,
button: 'slds-button',
},
{
id: 9,
title: 'Row 8',
name: 'Lisa I Anderson',
firstName: 'Lisa',
surName: 'Anderson',
city: 'New York',
team: 'Stockholm Tigers',
age: 14,
food: 'Burger',
color: 'Orange',
score: 890,
rank: 70,
start: '2019-01-24T21:00:00.000Z',
finish: '2019-02-09T21:00:00.000Z',
time: '2020-01-01T08:10:00.000Z',
percent: 30,
done: false,
rating: 3,
relatedTo: 11,
button: 'slds-button_neutral',
},
{
id: 10,
title: 'Row 9',
name: 'Don J Thomas',
firstName: 'Don',
surName: 'Thomas',
city: 'Stockholm',
team: 'Barcelona Cougars',
age: 45,
food: 'Salad',
color: 'Black',
score: 10,
rank: 96,
start: '2019-01-25T21:00:00.000Z',
finish: '2019-02-11T21:00:00.000Z',
time: '2020-01-01T04:30:00.000Z',
percent: 24,
done: false,
rating: 4,
relatedTo: 11,
button: 'slds-button_brand',
},
{
id: 11,
title: 'Row 10',
name: 'Doug K Jackson',
firstName: 'Doug',
surName: 'Jackson',
city: 'Barcelona',
team: 'Moscow Cats',
age: 16,
food: 'Fish n chips',
color: 'Red',
score: 270,
rank: 3,
start: '2019-01-29T21:00:00.000Z',
finish: '2019-02-07T21:00:00.000Z',
time: '2020-01-01T05:15:00.000Z',
percent: 38,
done: true,
rating: 1,
relatedTo: 14,
button: 'slds-button_outline-brand',
},
{
id: 12,
title: 'Row 11',
name: 'James L Ewans',
firstName: 'James',
surName: 'Ewans',
city: 'Moscow',
team: 'Dubai Dogs',
age: 30,
food: 'Salad',
color: 'Black',
score: 140,
rank: 87,
start: '2019-01-25T21:00:00.000Z',
finish: '2019-02-14T21:00:00.000Z',
time: '2020-01-01T02:05:00.000Z',
percent: 64,
done: false,
rating: 1,
relatedTo: 18,
button: 'slds-button_destructive',
},
{
id: 13,
title: 'Row 12',
name: 'Jenny M Brown',
firstName: 'Jenny',
surName: 'Brown',
city: 'Dubai',
team: 'Stockholm Eagles',
age: 56,
food: 'Waffles',
color: 'Orange',
score: 560,
rank: 69,
start: '2019-01-07T21:00:00.000Z',
finish: '2019-01-16T21:00:00.000Z',
time: '2020-01-01T01:20:00.000Z',
percent: 99,
done: true,
rating: 4,
relatedTo: 14,
button: 'slds-button_text-destructive',
},
{
id: 14,
title: 'Row 13',
name: 'Doug N Ewans',
firstName: 'Doug',
surName: 'Ewans',
city: 'Barcelona',
team: 'New York Dogs',
age: 61,
food: 'Pancake',
color: 'Teal',
score: 550,
rank: 34,
start: '2019-01-19T21:00:00.000Z',
finish: '2019-01-30T21:00:00.000Z',
time: '2019-12-31T21:10:00.000Z',
percent: 97,
done: false,
rating: 2,
relatedTo: 20,
button: 'slds-button_success',
},
];