Vue Data Grid

Cell Components

vue logo

Custom HTML / DOM inside Cells is achieved using Cell Components. Create Custom Cell Components to have any HTML markup in a cell. The grid comes with some Provided Cell Components for common grid tasks.

The example below shows adding images, hyperlinks, and buttons to a cell using Custom Cell Components.

Custom Components

With Vue 2 and Vue 3 you can access the params object via this.params in the usual methods (lifecycle hooks, methods etc), and with Vue 3's setup via props.params.

  // ...
  beforeMount() {
    this.cellValue = this.params.value;
  }
  // ...

The params (interface ICellRendererParams) passed to the Cell Component are as follows: