PropertySelection

import { PropertySelection } from 'cx/ui';

PropertySelection tracks selection state using a boolean property on each record. When an item is selected, its selected property (or custom field) is set to true.

When to Use

Checkbox-based selection where each row has a checkbox
When selection state should be saved with the data
When you need to easily filter or count selected items
Scatter graphs and other charts with selectable points

Example

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

interface PageModel {
  items: Item[];
  $record: Item;
}

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

	Name
	Apple
	Banana
	Cherry
	Date

Store content

{
  "items": [
    {
      "id": 1,
      "name": "Apple",
      "selected": false
    },
    {
      "id": 2,
      "name": "Banana",
      "selected": true
    },
    {
      "id": 3,
      "name": "Cherry",
      "selected": false
    },
    {
      "id": 4,
      "name": "Date",
      "selected": false
    }
  ]
}

Configuration

Property	Type	Default	Description
`selectedField`	`string`	`"selected"`	Field name on each record that stores the selection state
`multiple`	`boolean`	`false`	Enable multiple selection
`toggle`	`boolean`	`false`	Enable toggle mode (clicking selected item deselects it)