Quick Start

How to modify the cell rendering content

In this section we learn how to quickly modify the cell rendering content by implementing the following function as an example:

When the cell corresponding to the Formula column type reports an error, you want the output to be "❌" so that you can see it more clearly at a glance.

Rendering of Static Cells

Static cells are cells with no interaction events, most cells are in a non-interactive state when viewed and scrolled.

We use Konva shape for static cell drawing, shape we need to manipulate the context for drawing, the following is the core cell rendering tool class, we need to modify the methods related to Formula rendering to adapt to the above requirements:

/**
 * @description Static cell rendering tools
 * FilePath: "apitable/packages/datasheet/src/pc/components/konva_grid/utils/cell_helper.ts"
 */
class CellHelper extends KonvaDrawer {
  renderCellText(renderProps: IRenderProps, ctx?) {
    // ...
    if (cellValue instanceof FormulaBaseError) {
      const iconUrl = emojiUrl('x');
      this.image({
        url: iconUrl,
        x,
        y,
        width: ConfigConstant.CELL_EMOJI_SIZE,
        height: ConfigConstant.CELL_EMOJI_SIZE,
      });
      return DEFAULT_RENDER_DATA;
    }
  }
  
  renderCellFormula(renderProps: IRenderProps, ctx?) {
    const { field, cellValue } = renderProps;
    const isCheckbox = Field.bindModel(field).basicValueType === BasicValueType.Boolean;
    if (isCheckbox && !(cellValue instanceof FormulaBaseError)) {
      return this.renderCellCheckbox(renderProps, ctx);
    }
    return this.renderCellText(renderProps, ctx);
  }
  //... More Functions
}

Rendering of dynamic cells

Dynamic cells, that is, cells with interactive events, after the cell is activated, it has the ability to interact.

The modification process is similar to the above, and the following is part of the code:

// FilePath: "apitable/packages/datasheet/src/pc/components/konva_grid/components/cell/cell_text/cell_text.tsx"
export const CellText: FC<React.PropsWithChildren<ICellProps>> = (props) => {
  // ...
  return (
    <>
      {
        cellValue instanceof FormulaBaseError ? 
          <Image
            width={ConfigConstant.CELL_EMOJI_SIZE}
            height={ConfigConstant.CELL_EMOJI_SIZE}
            x={GRID_CELL_VALUE_PADDING}
            y={7}
          /> :
          // ... Original Logic
      }
    </>
  );
}