数据表格 - 自定义列

创建自定义列类型。

您可以通过简单地展开必要的属性来扩展内置列类型，创建您自己的列类型。

下面的演示定义了一个新的列类型：usdPrice，它扩展了原生的 number 列类型。

const usdPrice: GridColTypeDef = {
  type: 'number',
  width: 130,
  valueFormatter: (value) => valueFormatter.format(Number(value)),
  cellClassName: 'font-tabular-nums',
};

<DataGrid
  columns={[
    { field: 'status', width: 130 },
    { field: 'subTotal', ...usdPrice },
    { field: 'total', ...usdPrice },
  ]}
  rows={rows}
/>

<DataGrid
  columns={[
    { field: 'status', width: 130 },
    { field: 'subTotal', ...usdPrice },
    { field: 'total', ...usdPrice },
  ]}
  rows={rows}
/>

按 Enter 开始编辑

迷你图

迷你图表可以作为数据趋势的概览非常有用。

在下面的演示中，我们使用 GridColTypeDef 接口创建了一个自定义列类型，并在 renderCell 属性中使用了来自 @mui/x-charts 包的 Sparkline 组件。

<DataGrid rows={rows} columns={columns} />

<DataGrid rows={rows} columns={columns} />

按 Enter 开始编辑

日期选择器

默认情况下，数据表格对 date 和 dateTime 列的编辑使用原生浏览器输入。

虽然 Data Grid 尚不支持开箱即用的 MUI X 日期/时间选择器，但通过创建自定义编辑组件和自定义筛选运算符，可以很容易地集成它们。

下面的示例对 date 和 dateTime 列类型都使用了 @mui/x-date-pickers

完整示例

下面的演示展示了我们演示中最常用的自定义列渲染器。

<DataGrid rows={rows} columns={columns} />

<DataGrid rows={rows} columns={columns} />

按 Enter 开始编辑

数据表格 - 自定义列

迷你图

日期选择器

完整示例

API