Grid with Row Editing

<Grid
    records-bind="$page.records"
    lockColumnWidths
    cached
    row={{
        style: {
            background: {expr: "!!{$record.$editing} ? 'lightsteelblue' : null"}
        },
        valid: { bind: '$record.valid' }
    }}
    columns={[
        {
            header: "Name",
            field: "fullName",
            sortable: true,
            items: <cx>
                <TextField
                    value-bind="$record.fullName"
                    viewMode-expr="!{$record.$editing}"
                    style="width: 100%"
                    autoFocus
                    required
                />
            </cx>
        },
        {
            header: "Continent",
            field: "continent",
            sortable: true,
            items: <cx>
                <TextField
                    value-bind="$record.continent"
                    viewMode-expr="!{$record.$editing}"
                    style="width: 100%"
                    required
                />
            </cx>
        },
        {
            header: "Browser",
            field: "browser",
            sortable: true,
            items: <cx>
                <TextField
                    value-bind="$record.browser"
                    viewMode-expr="!{$record.$editing}"
                    style="width: 100%"
                    required
                />
            </cx>
        },
        {
            header: "OS",
            field: "os",
            sortable: true,
            items: <cx>
                <TextField
                    value-bind="$record.os"
                    viewMode-expr="!{$record.$editing}"
                    style="width: 100%"
                    required
                />
            </cx>
        },
        {
            header: "Visits",
            field: "visits",
            sortable: true,
            align: "right",
            items: <cx>
                <NumberField
                    value-bind="$record.visits"
                    viewMode-expr="!{$record.$editing}"
                    style="width: 100%"
                    inputStyle="text-align: right"
                    required
                />
            </cx>
        }, {
            header: 'Actions',
            style: "width: 150px",
            align:"center",
            items: <cx>
                <Button mod="hollow" onClick="editRow" visible-expr="!{$record.$editing}">Edit</Button>
                <Button mod="hollow" onClick="deleteRow" visible-expr="!{$record.$editing}" confirm="Are you sure?">Delete</Button>
                <Button mod="primary" onClick="saveRow" disabled-expr="!{$record.valid}" visible-expr="!!{$record.$editing}">Save</Button>
                <Button mod="hollow" onClick="cancelRowEditing" visible-expr="!!{$record.$editing}">Cancel</Button>
            </cx>
        }
    ]}
/>
<p>
    <Button onClick="addRow">Add</Button>
</p>