Inline Edit

Grid supports arbitrary content inside cells, allowing form fields to be always visible for immediate editing.

 <Grid
  controller={PageController}
  records={m.records}
  columns={[
    {
      header: "Name",
      field: "fullName",
      sortable: true,
      children: <TextField value={m.$record.fullName} style="width: 100%" />,
      pad: false,
      class: "p-1!",
    },
    {
      header: "Phone",
      field: "phone",
      children: <TextField value={m.$record.phone} style="width: 100%" />,
      pad: false,
      class: "p-1!",
    },
    {
      header: "City",
      field: "city",
      sortable: true,
      children: <TextField value={m.$record.city} style="width: 100%" />,
      pad: false,
      class: "p-1!",
    },
    {
      header: "Notified",
      field: "notified",
      sortable: true,
      align: "center",
      pad: false,
      children: <Checkbox value={m.$record.notified} />,
      class: "p-1!",
    },
  ]}
  recordAlias={m.$record}
/> 
 class PageController extends Controller {
  onInit() {
    this.store.set(m.records, [
      {
        id: 1,
        fullName: "Alice Johnson",
        phone: "555-0101",
        city: "New York",
        notified: true,
      },
      {
        id: 2,
        fullName: "Bob Smith",
        phone: "555-0102",
        city: "Los Angeles",
        notified: false,
      },
      {
        id: 3,
        fullName: "Carol White",
        phone: "555-0103",
        city: "Chicago",
        notified: true,
      },
      {
        id: 4,
        fullName: "David Brown",
        phone: "555-0104",
        city: "Houston",
        notified: false,
      },
      {
        id: 5,
        fullName: "Eva Green",
        phone: "555-0105",
        city: "Phoenix",
        notified: true,
      },
    ]);
  }
} 
 interface Person {
  id: number;
  fullName: string;
  phone: string;
  city: string;
  notified: boolean;
}

interface PageModel {
  records: Person[];
  $record: Person;
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { Controller } from "cx/ui";
import { Checkbox, Grid, TextField } from "cx/widgets"; 

All fields are editable directly in the grid without clicking to activate editing.

Using children Property

Use the children property on columns to embed widgets directly in cells:

<Grid
  records={m.records}
  columns={[
    {
      header: "Name",
      field: "fullName",
      sortable: true,
      children: <TextField value={m.$record.fullName} style="width: 100%" />,
    },
    {
      header: "Notified",
      field: "notified",
      align: "center",
      pad: false,
      children: <Checkbox value={m.$record.notified} />,
    },
  ]}
  recordAlias={m.$record}
/>

Styling Tips

Use style="width: 100%" on text fields to fill the cell
Use pad: false on columns with checkboxes for better alignment
Use align: "center" for checkbox columns

When to Use

Inline editing is useful when:

Users need to edit multiple records quickly
The grid is the primary editing interface
Changes should be immediately visible

For large datasets, consider Cell Editing for better performance.

Name	Phone	City	Notified