KeySelection

import { KeySelection } from 'cx/ui';

KeySelection stores selected keys separately from the data. Only the key values are stored, not the entire objects. This is similar to how select controls work and is ideal when you need selection to survive data changes.

When to Use

Selection must survive after records are updated (keys remain stable while object references change)
Grid or List with selection synced to other components (e.g., master-detail views)
When you need to persist selection independently of the data

Example

 <div controller={PageController} class="flex flex-col gap-4">
  <Grid
    records={m.items}
    selection={{
      type: KeySelection,
      keyField: "id",
      bind: m.selection,
      multiple: true,
    }}
    columns={[{ header: "Name", field: "name" }]}
  />
  <div class="p-3 bg-muted rounded text-sm">
    <strong>Store content</strong>
    <pre
      class="mt-2"
      text={(data) => JSON.stringify({ selection: data.selection }, null, 2)}
    />
  </div>
</div> 
 class PageController extends Controller<PageModel> {
  onInit() {
    this.store.init(m.items, [
      { id: 1, name: "Apple" },
      { id: 2, name: "Banana" },
      { id: 3, name: "Cherry" },
      { id: 4, name: "Date" },
    ]);
    this.store.init(m.selection, [2]);
  }
} 
 interface Item {
  id: number;
  name: string;
}

interface PageModel {
  items: Item[];
  selection: number[];
}

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

Name
Apple
Banana
Cherry
Date

Store content

{
  "selection": [
    2
  ]
}

Configuration

Property	Type	Default	Description
`keyField`	`string`	—	Field on each record used as the unique key
`bind` / `selection`	`Prop<any>`	—	Binding for the selected key(s)
`storage`	`string`	`"array"`	Storage format: `array` or `hash`
`multiple`	`boolean`	`false`	Enable multiple selection
`toggle`	`boolean`	`false`	Enable toggle mode (clicking selected item deselects it)