資料格線 - 自訂欄位

建立自訂欄位類型。

您可以擴展內建欄位類型，只需展開必要的屬性即可。

以下示範定義了一個新的欄位類型：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 套件的走勢圖元件。

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

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

按下 Enter 鍵開始編輯

日期選擇器

預設情況下，資料格線會使用原生瀏覽器輸入來編輯 date 和 dateTime 欄位。

雖然 MUI X 日期/時間選擇器尚未開箱即用 Data Grid 支援，但透過建立自訂編輯組件和自訂篩選運算子，可以輕鬆整合它們。

以下範例針對 date 和 dateTime 欄位類型皆使用 @mui/x-date-pickers

完整範例

以下示範顯示了我們示範中最常見的自訂欄位渲染器。

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

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

按下 Enter 鍵開始編輯

資料格線 - 自訂欄位

走勢圖

日期選擇器

完整範例

API