CellValue

显示记录指定字段单元格的 UI 样式，目前已经支持所有类型字段。

参数

Name	Type	Description
props	Object	-
props.recordId?	string	行记录 ID
props.fieldId	string	列字段 ID
props.cellValue?	unknown	符合类字段对应的格式化数据，可能是多个单元格并集、差集
props.className?	string	样式类
props.style?	CSSProperties	行内样式
props.cellClassName?	string	子元素样式类
props.cellStyle?	CSSProperties	子元素行内样式

返回值

null | Element

示例

方法一

通过 recordId、fieldId 渲染 CellValue UI，比如 foucs 单元的渲染单元格显示的 UI：

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

export const CellValueUI = () => {
  const activeCell = useActiveCell();
  if (!activeCell) {
    return <p>无激活的单元格</p>
  }
 const { recordId, fieldId } = activeCell;
  return (
    <CellValue
      className="wrapperClass"
      cellClassName="cellClass"
      recordId={recordId}
      fieldId={fieldId}
    />
  )
}

方法二

通过 cellValue、fieldId 渲染 CellValue UI，比如对同列多个单元格数据进行合并或差集计算，返回 cellValue 格式的数据：

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

export const CellValueUI = ({ cellValue }) => {
  const activeCell = useActiveCell();
  if (!activeCell) {
    return <p>无激活的单元格</p>
  }
 const { fieldId } = activeCell;
  return (
    <CellValue
      className="wrapperClass"
      cellClassName="cellClass"
      cellValue={cellValue}
      fieldId={fieldId}
    />
  )
}