自定义数据网格

Toolpad Studio 的构建旨在将可扩展性作为一等公民。

默认行为

默认情况下，您可以将任何 JSON 数据连接到 Toolpad Studio 数据网格，它将尝试猜测每列的类型并适当显示

自定义单元格渲染

但是，如果默认的列选项不足，Toolpad Studio 允许您使用自定义组件自定义数据网格，利用 MUI X Data Grid 的强大功能。

创建自定义组件

假设我们只想在 <Chip> 中显示订单 ID 的前八个字符，并在悬停时在 <Tooltip> 中显示完整文本。

我们将创建一个自定义组件来实现此目的。

在数据网格内渲染的自定义组件接收一个 params 对象作为 prop，其中包含以下值

value : 特定单元格的值
row: 整行的值
field: 该特定列的字段名称

使用 value prop，您可以创建如下所示的自定义组件

import * as React from 'react';
import Chip from '@mui/material/Chip';
import Tooltip from '@mui/material/Tooltip';
import { createComponent } from '@toolpad/studio/browser';

export interface OrderIdChipProps {
  value: string;
}

function OrderIdChip({ value }: OrderIdChipProps) {
  return (
    <Tooltip title={value}>
      <Chip label={value.slice(0, 7)} />
    </Tooltip>
  );
}

export default createComponent(OrderIdChip, {
  argTypes: {
    value: {
      type: 'string',
      default: '',
    },
  },
});

OrderIdChip 组件应在保存时出现在我们的组件库中

在数据网格中配置自定义组件

选择数据网格，然后在 inspector 中选择 columns 属性

选择 Order ID 并将其类型更改为 codeComponent

在自定义组件的选择菜单中选择 OrderIdChip 列

就是这样！我们获得了所需的功能