Svelte Data Grid Cell Template

RevoGrid provide a way to render native components inside of cells.

WARNING

If you are aiming for the faster render we are recommending to stick with native VNode render.

TIP

Check ColumnDataSchemaModel for mode information about input types.

Use Template(Component) from @revolist/svelte-datagrid to render a Svelte component inside a cellTemplate.

TIP

Template(Component) is explicit by design. Native RevoGrid templates like cellTemplate(h, props) are still supported, and compiled Svelte components are also functions at runtime, so raw cellTemplate: Component is not auto-detected.

Basic Setup

<script lang="ts">
  import {
    RevoGrid,
    Template,
    type ColumnRegular,
  } from '@revolist/svelte-datagrid';
  import OperationCell from './svelte.cell.template.svelte';

  const source = [
    { name: 'Order 1', status: 'Pending', operation: 'Review' },
    { name: 'Order 2', status: 'Done', operation: 'Archive' },
  ];

  const columns: ColumnRegular[] = [
    { prop: 'name', name: 'Name' },
    { prop: 'status', name: 'Status' },
    {
      prop: 'operation',
      name: 'Operation',
      cellTemplate: Template(OperationCell),
    },
  ];
</script>

<RevoGrid {source} {columns} />

Cell Component

<script lang="ts">
  import type { SvelteCellProps } from '@revolist/svelte-datagrid';

  let { value, rowIndex }: SvelteCellProps = $props();
</script>

<button type="button">
  Row {rowIndex}: {value}
</button>

The Svelte component receives flat cell props such as value, model, prop, rowIndex, colIndex, column, data, providers, and addition.

Why Use Custom Cell Rendering?

RevoGrid’s native cell rendering enables you to:

• Embed Components: Render complex or interactive UI elements inside grid cells, such as buttons, images, input fields, or custom widgets.
• Dynamic Content: Customize each cell’s content based on the data it represents, such as formatting or conditional rendering.
• Interactivity: Make cells interactive with event listeners and component lifecycle methods, improving the overall user experience.