Glide Data Grid
  • 👋Welcome to Glide Data Grid
  • 🚀Extended QuickStart Guide
    • ✏️Editing Data
    • 🖱️Working with selections
    • 🔨Grid Columns
    • 📎Copy and paste support
  • 📒FAQ
  • 📚API
    • DataEditor
      • Required Props
      • Important Props
      • Row Markers
      • Editing
      • Input Interaction
      • Selection Handling
      • Custom Cells
      • Drag and Drop
      • Search
      • Styling
    • DataEditorCore
    • Cells
      • BaseGridCell
      • TextCell
      • BooleanCell
      • NumberCell
      • UriCell
      • ProtectedCell
      • RowIDCell
      • LoadingCell
      • ImageCell
      • MarkdownCell
      • BubbleCell
      • DrilldownCell
    • Common Types
    • DataEditorRef
  • Guides
    • Implementing Custom Cells
Powered by GitBook
On this page
  • customRenderers
  • drawCell
  • drawHeader

Was this helpful?

  1. API
  2. DataEditor

Custom Cells

PreviousSelection HandlingNextDrag and Drop

Last updated 1 year ago

Was this helpful?

interface DataEditorProps {

    // ...other props
    
    customRenderers?: readonly CustomRenderer<any>[];
    drawCell?: DrawCellCallback;
    drawHeader?: DrawHeaderCallback;
 
    // ...other props
    
}

customRenderers

customRenderers?: readonly CustomRenderer<any>[];

Adds custom renderers to the DataEditor. Each renderer provides its own drawing functionality and editor. See for more information.

drawCell

drawCell?: (
    args: {
        ctx: CanvasRenderingContext2D;
        cell: GridCell;
        theme: Theme;
        rect: Rectangle;
        col: number;
        row: number;
        hoverAmount: number;
        hoverX: number | undefined;
        hoverY: number | undefined;
        highlighted: boolean;
        imageLoader: ImageWindowLoader;
    },
    drawContent: () => void
) => void;

The drawCell property enables custom rendering of cells in the Grid. This function is called for each cell during the rendering process and is provided with a comprehensive set of parameters. These parameters include the drawing context (ctx), cell data (cell), theming details (theme), the cell's rectangle (rect), column and row indices (col, row), hover state information (hoverAmount, hoverX, hoverY), a highlight flag (highlighted), and an image loader (imageLoader).

Additionally, drawCell provides a drawContent method, which, when called, immediately draws the default content of the cell onto the canvas. This design offers flexibility in how you render each cell. For instance, you can first draw a custom background, then call drawContent to render the cell's standard contents, and finally add an overlay or additional embellishments. This approach allows for layered rendering, where you can seamlessly integrate custom graphics or styles with the grid's inherent rendering logic.


drawHeader

drawHeader?: (args: {
        ctx: CanvasRenderingContext2D;
        column: GridColumn;
        columnIndex: number;
        theme: Theme;
        rect: Rectangle;
        hoverAmount: number;
        isSelected: boolean;
        isHovered: boolean;
        hasSelectedCell: boolean;
        spriteManager: SpriteManager;
        menuBounds: Rectangle;
    },
    drawContent: () => void
) => void;

drawHeader may be specified to override the rendering of a header. The grid will call this for every header it needs to render. Header rendering is not as well optimized because they do not redraw as often, but very heavy drawing methods can negatively impact horizontal scrolling performance.

📚
Implementing Custom Cells
Implementing Custom Cells