JavaScript Data GridCell Components

javascript 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

The interface for the Cell Component is as follows:

interface ICellRendererComp {
   // Optional - props for rendering.
   init?(props: ICellRendererParams): void;

   // Mandatory - Return the DOM element of the component, this is what the grid puts into the cell
   getGui(): HTMLElement;

   // Optional - Gets called once by grid after rendering is finished - if your renderer needs to do any cleanup,
   // do it here
   destroy?(): void;

   // Mandatory - Get the cell to refresh. Return true if the refresh succeeded, otherwise return false.
   // If you return false, the grid will remove the component from the DOM and create
   // a new component in its place with the new values.
   refresh(params: ICellRendererParams): boolean;
}

The Component is provided props containing, amongst other things, the value to be rendered.

class CustomButtonComponent {
    // ...
    init(props) {
        // create the cell
        this.eGui = document.createElement('div');
        this.eGui.innerHTML = props.value;
    }
    // ...
}

The provided props (interface ICellRendererParams) are: