Cell and column components

Overview

The cell and column components provide a flexible, template-driven approach to configuring Grid Pro columns and cell renderers.

GridProCell component

Description

The GridProCell component is used to define custom cell renderers within a GridProColumn. It implements the AG Grid ICellRendererComp interface, allowing for dynamic cell rendering.

Properties

Property examples are shown using Genesis syntax bindings, and closing tags omitted.

Property	Type	Description	Example
renderer	ICellRendererFunc	Defines the cell rendering function. Can be a custom rendering function or a reference to a predefined renderer.	<grid-pro-cell :renderer="${(x) => x.customRenderer}">
rendererParams	ICellRendererParams	Provides parameters for the cell renderer. Configures how the cell should be rendered based on the grid context.	<grid-pro-cell :rendererParams="${(x) => x.customRendererParams}">

info

You can get the types ICellRendererFunc and ICellRendererParams from the "@ag-grid-community/core" package;

GridProColumn component

Description

The GridProColumn component represents a column definition for the Grid Pro.

Properties

Property	Type	Description	Example
slottedAgCell	HTMLElement[]	Tracks slotted cell elements	<grid-pro-column :slottedAgCell="${(x) => x.slottedElements}">
definition	ColDef	Stores the column definition configuration. Initialized as an empty object.	<grid-pro-column :definition="${(x) = x.columnDefiniton}">

info

You can get the type ColDef from the "@ag-grid-community/core" package;

Best practice

• Use GridProCell to define custom cell renderers with dynamic rendering logic.
• Leverage the definition property of GridProColumn to configure column-specific settings.

Usage example

import { ColDef } from '@ag-grid-community/core';

const customColDefs: ColDef[] = [
  {
    headerName: 'Action',
    cellRenderer: 'action',
    width: 200,
    pinned: 'right',
    cellRendererParams: {
      actionName: 'View',
      appearance: 'primary',
      actionClick: (rowData) => console.log('View Data', rowData),
    },
  },
];

Genesis

Simple example

@customElement({
  name: 'my-element',
  template: html`
    <rapid-grid-pro>
      <grid-pro-column :definition="${(x) => x.colDefs[0]}">
        <grid-pro-cell
          :renderer="${(x) => x.colDefs[0].cellRenderer}"
          :rendererParams="${(x) => x.colDefs[0].cellRendererParams}"
        ></grid-pro-cell>
      </grid-pro-column>
    </rapid-grid-pro>
  `,
})
export class MyElement extends GenesisElement {
    @observable colDefs: ColDef[] = customColDefs; // refer to above example
}

Loop example

@customElement({
  name: 'my-element',
  template: html`
    <rapid-grid-pro>
      ${repeat(
        (x) => x.colDefs,
        html`
          <grid-pro-column :definition="${(x) => x}">
            ${when(
              (x) => x.cellRenderer,
              html`
                <grid-pro-cell
                  :renderer="${(x) => x.cellRenderer}"
                  :rendererParams="${(x) => x.cellRendererParams}"
                ></grid-pro-cell>
              `,
            )}
          </grid-pro-column>
        `,
      )}
    </rapid-grid-pro>
  `,
})
export class MyElement extends GenesisElement {
    @observable colDefs: ColDef[] = customColDefs; // refer to above example
}

React

Simple example

export function MyElement() {
  const colDefs: ColDef[] = customColDefs; // refer to above example
  return (
    <rapid-grid-pro>
      <grid-pro-column definition={colDefs[0]}>
        <grid-pro-cell
          renderer={colDefs[0].cellRenderer}
          rendererParams={colDefs[0].cellRendererParams}
        />
      </grid-pro-column>
    </rapid-grid-pro>
  );
};

Loop example

export function MyElement() {
  const colDefs: ColDef[] = customColDefs; // refer to above example
  return (
    <rapid-grid-pro>
      {colDefs.map((colDef, index) => (
        <grid-pro-column definition={colDef} key={index}>
          {colDef.cellRenderer ? (
            <grid-pro-cell
              renderer={colDef.cellRenderer}
              rendererParams={colDef.cellRendererParams}
            />
          ) : null}
        </grid-pro-column>
      ))}
    </rapid-grid-pro>
  );
};

Angular

Simple example

@Component({
  selector: 'app-my-element',
  template: `
    <rapid-grid-pro>
      <grid-pro-column [definition]="customColDefs[0]">
        <grid-pro-cell
          [renderer]="customColDefs[0].cellRenderer"
          [rendererParams]="customColDefs[0].cellRendererParams">
        </grid-pro-cell>
      </grid-pro-column>
    </rapid-grid-pro>
  `
})
export class MyElementComponent {
  colDefs: ColDef[] = customColDefs; // refer to above example
}

Loop example

@Component({
  selector: 'app-my-element',
  template: `
    <rapid-grid-pro>
      <grid-pro-column
        *ngFor="let colDef of colDefs"
        [definition]="colDef">
        <grid-pro-cell
          *ngIf="colDef.cellRenderer"
          [renderer]="colDef.cellRenderer"
          [rendererParams]="colDef.cellRendererParams">
        </grid-pro-cell>
      </grid-pro-column>
    </rapid-grid-pro>
  `
})
export class MyElementComponent {
  colDefs: ColDef[] = customColDefs; // refer to above example
}

Performance considerations

• Custom renderers should be lightweight to maintain grid performance.
• Use observable properties to enable reactive updates.