Provided cell editors

The grid ships nine built-in editors, selected via editorType on the column definition. Each editor renders inside the cell while editing and falls back to the default text render (or your cell snippet) when the cell is read-only.

Text editor - editorType: 'text'

<input type="text">. Accepts any string. On commit the raw value is stored.

{ field: 'firstName', header: 'First name', editorType: 'text' }

Number editor - editorType: 'number'

<input type="number"> with browser-native increment buttons. Non-numeric input is rejected at commit (parseEditorValue returns null and the cell stays at its previous value).

{ field: 'age', header: 'Age', editorType: 'number' }

// often paired with a display format:
{
  field: 'salary', header: 'Salary',
  editorType: 'number',
  format: { type: 'currency', currency: 'USD', options: { maximumFractionDigits: 0 } },
}

Date editor - editorType: 'date'

<input type="date">. The value is stored as ISO YYYY-MM-DD.

{
  field: 'joinedAt', header: 'Joined',
  editorType: 'date',
  format: { type: 'date', pattern: 'y-m-d' },
}

Datetime editor - editorType: 'datetime'

<input type="datetime-local">. The value is stored as ISO 8601 with a Z suffix.

{
  field: 'updatedAt', header: 'Updated',
  editorType: 'datetime',
  format: { type: 'datetime', pattern: 'medium' },
}

Checkbox editor - editorType: 'checkbox'

A themed button that toggles between true and false. Renders centred in the cell.

{ field: 'active', header: 'Active', editorType: 'checkbox' }

List editor - editorType: 'list'

Single-select dropdown. Accepts an array of strings/numbers or { value, label, color } objects. Set editorMultiple: true for a multi-select.

{
  field: 'priority', header: 'Priority',
  editorType: 'list',
  editorOptions: ['low', 'med', 'high', 'urgent'],
}

// labelled options:
{
  field: 'status', header: 'Status',
  editorType: 'list',
  editorOptions: [
    { value: 'open',        label: 'Open' },
    { value: 'in_progress', label: 'In progress' },
    { value: 'done',        label: 'Done' },
  ],
}

Chips editor - editorType: 'chips'

Removable-token picker for multi-select. The value is always an array.

{
  field: 'tags', header: 'Tags',
  editorType: 'chips',
  editorOptions: ['frontend', 'backend', 'design', 'infra', 'docs'],
}

Color editor - editorType: 'color'

Native HTML color picker. The cell stores a #rrggbb string. Clicking the cell opens the OS color overlay; the value commits as soon as the overlay closes (no need to blur the cell first).

{ field: 'brandColor', header: 'Brand', editorType: 'color' }

Complete example

A minimal grid where each row has its own swatch. The custom cell snippet shows the colour next to the hex value while not editing; the editor takes over on double-click.

<script lang="ts">
  import {
    SvGrid,
    tableFeatures,
    rowSortingFeature,
    renderSnippet,
    type ColumnDef,
  } from 'sv-grid-community'

  type Brand = { id: string; name: string; color: string }

  let rows = $state<Brand[]>([
    { id: 'b1', name: 'Acme',     color: '#6366f1' },
    { id: 'b2', name: 'Helios',   color: '#10b981' },
    { id: 'b3', name: 'Crescent', color: '#f59e0b' },
  ])

  const features = tableFeatures({ rowSortingFeature })

  const columns: ColumnDef<typeof features, Brand>[] = [
    { field: 'name',  header: 'Brand', editorType: 'text',  width: 200 },
    {
      field: 'color', header: 'Color',
      editorType: 'color',
      width: 180,
      cell: (ctx) => renderSnippet(Swatch, { row: ctx.row.original }),
    },
  ]
</script>

{#snippet Swatch(props: { row: Brand })}
  <span style="display: inline-flex; align-items: center; gap: 8px;">
    <span style="width: 18px; height: 18px; border-radius: 4px; background: {props.row.color}; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);"></span>
    <code style="font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;">{props.row.color}</code>
  </span>
{/snippet}

<SvGrid
  data={rows}
  columns={columns}
  features={features}
  enableInlineEditing={true}
  enableCellSelection={true}
  containerHeight="100%"
/>

Theme tokens

The color editor inherits the grid's editor chrome. There are no extra tokens; the swatch fills the cell so the clickable area is the whole cell, not the OS default 25 × 13 swatch.

Rating editor - editorType: 'rating'

A row of 5 clickable stars plus a clear button. The cell stores an integer 0-5. Clicking a star commits immediately - no blur required.

{ field: 'csat', header: 'CSAT', editorType: 'rating' }

Complete example

<script lang="ts">
  import {
    SvGrid,
    tableFeatures,
    rowSortingFeature,
    renderSnippet,
    type ColumnDef,
  } from 'sv-grid-community'

  type Review = { id: string; product: string; rating: number }

  let rows = $state<Review[]>([
    { id: 'r1', product: 'Aurora keyboard',  rating: 5 },
    { id: 'r2', product: 'Helios monitor',   rating: 4 },
    { id: 'r3', product: 'Crescent mouse',   rating: 2 },
  ])

  const features = tableFeatures({ rowSortingFeature })

  const columns: ColumnDef<typeof features, Review>[] = [
    { field: 'product', header: 'Product', editorType: 'text', width: 220 },
    {
      field: 'rating', header: 'Rating',
      editorType: 'rating',
      width: 160,
      cell: (ctx) => renderSnippet(Stars, { row: ctx.row.original }),
    },
  ]
</script>

{#snippet Stars(props: { row: Review })}
  <span aria-label={`${props.row.rating} of 5`}>
    {#each [1, 2, 3, 4, 5] as n (n)}
      <span style="color: {props.row.rating >= n ? '#f59e0b' : '#cbd5e1'}; font-size: 16px;">★</span>
    {/each}
  </span>
{/snippet}

<SvGrid
  data={rows}
  columns={columns}
  features={features}
  enableInlineEditing={true}
  enableCellSelection={true}
  containerHeight="100%"
/>

Theme tokens

The rating editor reads three optional CSS custom properties so the star colors can match your design system:

Override per theme:

[data-theme='dark'] {
  --sg-rating-empty: #475569;
  --sg-rating-on:    #fbbf24;
}

Disabling an editor on a per-cell basis

editable accepts a callback. Return false to lock the cell - the editor never opens, even if you double-click. This composes with all the editor types above.

{
  field: 'salary', header: 'Salary',
  editorType: 'number',
  // Only admins can edit salaries.
  editable: (ctx) => currentUser.role === 'admin',
}

For declarative when-style rules across many columns, see the Conditional form schema recipe.

See also

• Cell data types
• Parsing values
• Validation
• Demo 80 - Cell types showcase - every editor in one enterprise grid
• Demo 66 - Custom cell editors - feature-health board using color, rating, and mood