Cell Data

Defines the data model for a cell

This is the default data model for a cell. It contains everything related to the cell value, formatting and data validation.

export type CellData = {
  /**
   * The value the user entered in the cell. e.g, 1234 , 'Hello' , or =NOW() Note: Dates, Times and DateTimes are represented as doubles in serial number format.
   * errorValue: Captures data validation errors
   */
  userEnteredValue?: ExtendedValue;
  /**
   * The effective value of the cell. For cells with formulas, this is the calculated value. For cells with literals, this is the same as the userEnteredValue. This field is read-only.
   *
   * errorValue: Capture errors from formula calculation
   */
  effectiveValue?: ExtendedValue;
  /**
   * The formatted value of the cell. This is the value as it's shown to the user. This field is read-only.
   */
  formattedValue?: string;
  /**
   * Text format runs
   */
  textFormatRuns?: TextFormatRun[];
  /**
   * Hyperlink URL
   */
  hyperlink?: string;
  /**
   * Validation applied to a cell
   */
  dataValidation?: DataValidationRule;
  /**
   * Image url
   */
  imageUrl?: string;
  /**
   * Cell meta style
   */
  metaType?: "people";
  /**
   * The format the user entered for the cell. When writing, the new format will be merged with the existing format.
   */
  userEnteredFormat?: CellFormat;
  /**
   * The effective format being used by the cell. This includes the results of applying any conditional formatting and, if the cell contains a formula, the computed number format. If the effective format is the default format, effective format will not be written. This field is read-only.
   */
  effectiveFormat?: CellFormat;
};

You can define your own CellData which extends from the source.

CellData is the source of truth of a cell. Spreadsheet does not mutate cellData. Cells are rendered based on properties of a cell

effectiveValue and userEnteredValue

Effective value is derived based on the value entered by user. ie: If user enters "1000" in a cell, Spreadsheet detects the type of the value and classifies it as numberValue

If user enters `=SUM(4,4), effectiveValue is set when we get the results back from calculator, which is a numberValue in this case.

Internally effectiveValue is used for calculations and userEnteredValue is used for cell editing

effectiveFormat and userEnteredFormat

effectiveFormat is derived from userEnteredFormat. All user modified changes to a cell format is stored in userEnteredFormat and it is subsequently merged with effectiveFormat. CanvasGrid reads only effectiveFormat to display a cell.

Using your own CellData object

CanvasGrid accepts your own custom CellData object which extends from the core CellData

import { SpreadsheetProvider, CanvasGrid, CellData } from "@rowsncolumns/spreadsheet";

export type MyCustomCellData = CellData & {
  highlight: true
}

const App = () => {
  return (
    <SpreadsheetProvider>
      <CanvasGrid<MyCustomCellData>
        rowCount={1000}
        columnCount={1000}
        sheetId={1}
        tokenizer={tokenizer}
      />
    </SpreadsheetProvider>
  );
};