Cell Editing

To setup cell editing set the cellEditable flag on the grid and specify editor widget configurations for all editable columns. If some of the cells should not be editable, disable editing using the editable property. Use the onCellEdited callback to react on changes, e.g. update the record in the database. For grids with many records it is recommended to use buffering for optimal performance.

#	Name	Continent	Browser	OS	Visits
0	Florencio Ryan	Asia	Firefox	iOS	73
1	Jarrett Thompson	Asia	Firefox	Android	37
2	Keyon Wilderman	Africa	Firefox	Android	58
3	Arthur Okuneva	Asia	Firefox	Mac OS	59
4	Willow Bednar	Asia	Firefox	Ubuntu	95
5	Jerald Konopelski	North America	Internet Explorer	Ubuntu	69
6	Nat Bruen	Antarctica	Chrome	Android	41
7	Grady Hermiston	Asia	Opera	Ubuntu	8
8	Daphne Thompson	South America	Chrome	Ubuntu	67
9	Jane Wiza	Africa	Chrome	iOS	79
10	Leon Roob	South America	Firefox	Android	60
11	Minerva Thompson	Asia	Firefox	Android	47
12	Meagan Strosin	Australia	Firefox	Windows	13
13	Tara Von	North America	Safari	Android	12
14	Sylvester Rutherford	Asia	Opera	Ubuntu	63
15	Aileen Predovic	Antarctica	Internet Explorer	Android	78
16	Jeffrey Brekke	Asia	Firefox	Android	23
17	Michale Bergstrom	Australia	Edge	Ubuntu	48
18	Evan Tromp	North America	Opera	Mac OS	55
19	Omari Jacobs	Africa	Firefox	Android	53
20	Sarai Feest	Australia	Safari	Windows	94
21	Chris Metz	Australia	Safari	Mac OS	23
22	Berniece Dickinson	Asia	Chrome	Android	20
23	Sheila Harris	North America	Opera	Windows	35
24	General Altenwerth	Asia	Firefox	Android	4
25	Lilly Kilback	Australia	Safari	Mac OS	18
26	Guadalupe Mohr	Africa	Chrome	Mac OS	25
27	Patience Larson	Australia	Internet Explorer	Mac OS	15
28	Terrance Greenfelder	Australia	Internet Explorer	Ubuntu	77
29	Andres Erdman	Europe	Opera	iOS	25
30	Kale Heidenreich	South America	Firefox	Mac OS	42
31	Emie Schroeder	Europe	Opera	Ubuntu	51
32	Bonnie Hoppe	South America	Opera	Mac OS	37
33	Abner Hermiston	South America	Firefox	Ubuntu	90
34	Louisa Klocko	Africa	Firefox	Windows	41
35	Alden Greenfelder	Antarctica	Firefox	Windows	51
36	Kamryn Nader	Africa	Opera	Android	68
37	Kay Hintz	Antarctica	Chrome	Windows	84
38	Eveline Heathcote	Africa	Safari	Mac OS	99
39	Heaven Abshire	Australia	Edge	Android	74
40	Laurie Nitzsche	Africa	Opera	Mac OS	69
41	Kristian Lindgren	Australia	Internet Explorer	Android	75
42	Beryl Goodwin	North America	Opera	Android	3
43	Domingo Lubowitz	South America	Edge	Ubuntu	86
44	Margie Gerhold	Africa	Internet Explorer	Ubuntu	44
45	Granville Thompson	Africa	Safari	Ubuntu	76
46	Haskell Schinner	Antarctica	Opera	Ubuntu	17
47	Nils McClure	Africa	Safari	Android	93
48	Manley Ruecker	Europe	Edge	Mac OS	27
49	Fernando Bahringer	Africa	Chrome	Android	70
50	Anastasia Flatley	North America	Edge	Mac OS	25
51	Ernestina Swift	South America	Internet Explorer	iOS	88
52	Mya McClure	Antarctica	Opera	Ubuntu	24
53	Pierce Grant	North America	Firefox	Mac OS	84
54	Garrick Welch	Africa	Edge	Mac OS	32
55	Jayson Gaylord	Europe	Edge	Mac OS	51
56	Jalen Kemmer	Asia	Internet Explorer	Ubuntu	32
57	Frederic Bashirian	Australia	Firefox	Windows	86
58	Jody McKenzie	North America	Chrome	Mac OS	69
59	Jedediah Ferry	Asia	Edge	Ubuntu	7

Index

<Grid
    cellEditable
    onCellEdited={(change, record) => {
        console.log(change, record);
    }}
    records-bind="$page.records"
    scrollable
    buffered
    style="height: 600px;"
    lockColumnWidths
    cached
    columns={
        [
            {header: "#", field: "index", sortable: true, value: {bind: "$index"}},
            {
                header: "Name",
                field: "fullName",
                sortable: true,
                editor: <cx>
                    <TextField
                        value-bind="$record.fullName"
                        style="position: absolute; width: 100%; height: 100%; top: 0;"
                        required
                        visited
                    />
                </cx>
            },
            {
                header: "Continent", field: "continent", sortable: true,
                editor: <cx>
                    <Select
                        value-bind="$record.continent"
                        style="position: absolute; width: 100%; height: 100%; top: 0;"
                        required
                    >
                        <option value="Africa">Africa</option>
                        <option value="Antarctica">Antarctica</option>
                        <option value="Asia">Asia</option>
                        <option value="Australia">Australia</option>
                        <option value="Europe">Europe</option>
                        <option value="North America">North America</option>
                        <option value="South America">South America</option>
                    </Select>
                </cx>
            },
            {
                header: "Browser", field: "browser", sortable: true,
                editor: <cx>
                    <LookupField
                        value-bind="$record.browser"
                        style="position: absolute; width: 100%; height: 100%; top: 0;"
                        required
                        autoOpen
                        options={[
                            { id: "Opera", text: "Opera" },
                            { id: "Safari", text: "Safari" },
                            { id: "Chrome", text: "Chrome" },
                            { id: "Firefox", text: "Firefox" },
                            { id: "Edge", text: "Edge" },
                            { id: "Internet Explorer", text: "Internet Explorer" }
                        ]}
                    />
                </cx>
            },
            {
                header: "OS", field: "os", sortable: true,
                editor: <cx>
                    <LookupField
                        value-bind="$record.os"
                        style="position: absolute; width: 100%; height: 100%; top: 0;"
                        required
                        autoOpen
                        options={[
                            { id: "Mac OS", text: "Mac OS" },
                            { id: "iOS", text: "iOS" },
                            { id: "Android", text: "Android" },
                            { id: "Windows", text: "Windows" },
                            { id: "Ubuntu", text: "Ubuntu" },
                        ]}
                    />
                </cx>
            },
            {
                header: "Visits",
                field: "visits",
                sortable: true,
                align: "right",
                editor: <cx>
                    <NumberField
                        value-bind="$record.visits"
                        style="position: absolute; width: 100%; height: 100%; top: 0;"
                        required
                        visited
                        inputStyle="text-align: right"
                    />
                </cx>
            }
        ]
    }
/>

Copied!Cx Fiddle

Documentation

Cell Editing