CellValue

Display the UI style for recording the cells of the specified field, all types of fields are now supported.

Parameters

Name	Type	Description
props	Object	-
props.recordId?	string	The recordId from which to render a cell.
props.fieldId	string	The fieldId from which to render a cell.
props.cellValue?	unknown	The cell value to render. Either record or cellValue must be provided to the CellValue. If both are provided, record will be used.
props.className?	string	Additional class names to apply to the cell renderer container, separated by spaces.
props.style?	CSSProperties	Additional styles to apply to the cell renderer container.
props.cellClassName?	string	Additional class names to apply to the cell itself, separated by spaces.
props.cellStyle?	CSSProperties	Additional styles to apply to the cell itself.

Returns

null | Element

Example

Method 1

Use recordId,fieldId render CellValue UI, Rendering CellValue UI by recordId, fieldId, e.g. focus cell's rendering cell display UI.

import React from 'react';
import { useActiveCell, CellValue } from '@apitable/widget-sdk';

export const CellValueUI = () => {
  const activeCell = useActiveCell();
  if (!activeCell) {
    return <p>Cells without activation</p>
  }
 const { recordId, fieldId } = activeCell;
  return (
    <CellValue
      className="wrapperClass"
      cellClassName="cellClass"
      recordId={recordId}
      fieldId={fieldId}
    />
  )
}

Method 2

Render CellValue UI by cellValue, fieldId, e.g. merge or difference set calculation for multiple cells data in the same column, return data in cellValue format.

import React from 'react';
import { useActiveCell, CellValue } from '@apitable/widget-sdk';

export const CellValueUI = ({ cellValue }) => {
  const activeCell = useActiveCell();
  if (!activeCell) {
    return <p>Cells without activation</p>
  }
 const { fieldId } = activeCell;
  return (
    <CellValue
      className="wrapperClass"
      cellClassName="cellClass"
      cellValue={cellValue}
      fieldId={fieldId}
    />
  )
}