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.

Provided Components

The grid comes with some Cell Components out of the box. These Provided Cell Components cover common some common complex cell rendering requirements.

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: