JavaScript Data Grid

Cell 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.

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: