Cell Editing

<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>
            }
        ]
    }
/>