跳到內容

DataGridProAPI

React DataGridPro 組件的 API 參考文件。瞭解此匯出模組的屬性、CSS 和其他 API。

示範

匯入

import { DataGridPro } from '@mui/x-data-grid-pro/DataGridPro';
// or
import { DataGridPro } from '@mui/x-data-grid-pro';
// or
import { DataGridPro } from '@mui/x-data-grid-premium';

閱讀這篇關於最小化套件大小的指南,以瞭解它們之間的差異。

屬性

必填

類型為 GridColDef[] 的欄位集合。

類型:Array<object>


允許格線操作的 ref 物件。可以使用 useGridApiRef() 實例化。

類型:{ current: object }


Data Grid 的標籤。

類型:string


包含 Data Grid 標籤的元素的 ID。

類型:string


已棄用

如果為 true,Data Grid 高度會是動態的,並根據 Data Grid 中的列數而定。

類型:bool

預設值:false


如果為 true,則會根據容器大小和最大列數計算 pageSize,以避免呈現垂直捲軸。

類型:bool

預設值:false


如果為 true,則在資料格線掛載後自動調整欄寬。

類型:bool

預設值:false


使用者啟動自動調整大小的選項。

類型:{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }


控制儲存格的模式。

類型:object


如果為 true,Data Grid 將顯示一個額外的欄,其中包含用於選取列的核取方塊。

類型:bool

預設值:false


如果為 true,「全選」標頭核取方塊僅選取目前頁面上的列。需與 checkboxSelection 搭配使用。僅在啟用分頁時有效。

類型:bool

預設值:false


覆寫或擴展套用至組件的樣式。

請參閱下方 CSS 類別 API 以瞭解更多詳細資訊。

類型:object


複製到剪貼簿時,用於分隔儲存格值的字元。

類型:string

預設值:'\t'


在視窗之前/之後呈現的欄區域(像素)。

類型:number

預設值:150


設定 Data Grid 中欄組標頭的高度(像素)。如果未設定,則繼承 columnHeaderHeight 值。

類型:number


設定 Data Grid 中欄標頭的高度(像素)。

類型:number

預設值:56


設定 Data Grid 的欄可見性模型。如果已定義,Data Grid 將忽略 GridColDef 中的 hide 屬性。

類型:object


如果大於 0,列子項目將展開至此深度。如果等於 -1,所有列子項目都將展開。

類型:number

預設值:0


設定 Data Grid 的密度。

類型:'comfortable'
| 'compact'
| 'standard'

預設值:"standard"


要顯示詳細資訊面板的列 ID。

類型:Array<number
| string>


如果為 true,則停用在標頭分隔符號上按兩下以自動調整欄寬的功能。

類型:bool

預設值:false


如果為 true,使用 treeData 屬性分組列時,篩選將僅套用至最上層列。

類型:bool

預設值:false


如果為 true,使用 treeData 屬性分組列時,排序將僅套用至最上層列。

類型:bool

預設值:false


如果為 true,則停用欄篩選器。

類型:bool

預設值:false


如果為 true,則停用欄選單。

類型:bool

預設值:false


如果為 true,則停用欄釘選。

類型:bool

預設值:false


如果為 true,則停用重新排序欄。

類型:bool

預設值:false


如果為 true,則停用調整欄寬。

類型:bool

預設值:false


如果為 true,則停用隱藏/顯示欄。

類型:bool

預設值:false


如果為 true,則停用欄排序功能。

類型:bool

預設值:false


如果為 true,則停用密度選取器。

類型:bool

預設值:false


如果為 true,則不使用 eval() 進行效能最佳化。

類型:bool

預設值:false


如果為 true,則停用使用多個欄進行篩選。

類型:bool

預設值:false


如果為 true,則停用使用多個欄進行排序。

類型:bool

預設值:false


如果為 true,則停用使用 Ctrl/CMD 或 Shift 鍵進行多重選取。除非啟用 checkboxSelection,否則 MIT DataGrid 將忽略此屬性。

類型:bool

預設值:false (`!props.checkboxSelection` for MIT Data Grid)


如果為 true,則停用點擊列或儲存格時的選取。

類型:bool

預設值:false


如果為 true,則停用虛擬化。

類型:bool

預設值:false


控制是否使用儲存格或列編輯。

類型:'cell'
| 'row'

預設值:"cell"


如果事先不知道實際的 rowCount,但有可用的估計值,請使用此屬性。如果某些列有子項目(例如在樹狀資料中),則此數字代表最上層列的數量。僅適用於 paginationMode="server"rowCount="-1"

類型:number


不穩定的功能,可能會引入重大變更。對於每個功能,如果未明確將旗標設定為 true,則該功能將完全停用,且任何屬性/方法呼叫都不會產生任何效果。

類型:{ warnIfFocusStateIsNotSynced?: bool }


在觸發篩選之前,按鍵後等待的毫秒延遲。

類型:number

預設值:150


篩選可以在伺服器端或用戶端處理。如果您想在伺服器端處理篩選,請將其設定為 'server'。

類型:'client'
| 'server'

預設值:"client"


設定 Data Grid 的篩選模型。

類型:{ items: Array<{ field: string, id?: number
| string, operator: string, value?: any }>, logicOperator?: 'and'
| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and'
| 'or', quickFilterValues?: array }


在儲存格上動態套用 CSS 類別的函式。

類型:func

簽名:
function(params: GridCellParams) => string

傳回值: 要套用至儲存格的 CSS 類別。


傳回要在列詳細資訊中呈現的元素的函式。

類型:func

簽名:
function(params: GridRowParams) => React.JSX.Element

傳回值: 列詳細資訊元素。


傳回列詳細資訊面板高度的函式。

類型:func

預設值:"() => 500"

簽名:
function(params: GridRowParams) => number | string

傳回值: 高度(像素)或 "auto" 以使用內容高度。


傳回列估計高度的函式。僅在使用動態列高時有效。測量列高後,此值將被捨棄。

類型:func

簽名:
function(params: GridRowHeightParams) => number | null
  • params 具有來自 GridRowHeightParams 的所有屬性。

傳回值: 估計的列高值。如果為 nullundefined,則會套用基於密度的預設列高。


在列上動態套用 CSS 類別的函式。

類型:func

簽名:
function(params: GridRowClassNameParams) => string

傳回值: 要套用至列的 CSS 類別。


設定每列列高的函式。

類型:func

簽名:
function(params: GridRowHeightParams) => GridRowHeightReturnValue
  • params 具有來自 GridRowHeightParams 的所有屬性。

傳回值: 列高值。如果為 nullundefined,則會套用預設列高。如果為 "auto",則列高將根據內容計算。


傳回給定 GridRowModel 的 ID。確保此屬性的參考是穩定的,以避免效能影響。可以透過在組件外部定義屬性或記憶化屬性來完成。

類型:func


允許指定列之間間距的函式。

類型:func

簽名:
function(params: GridRowSpacingParams) => GridRowSpacing

傳回值: 列間距值。


判斷樹狀資料中列的路徑。例如,路徑為 ["A", "B"] 的列是路徑為 ["A"] 的列的子項目。請注意,所有路徑都必須至少包含一個元素。

類型:func

簽名:
function(row: R) => Array
  • row 我們要從中取得路徑的列。

傳回值: 列的路徑。


樹狀資料使用的分組欄。

類型:func
| object


覆寫標頭篩選器的高度。

類型:number


如果為 true,則啟用標頭篩選器功能。

類型:bool

預設值:false


如果為 true,則隱藏頁尾組件。

類型:bool

預設值:false


如果為 true,則隱藏頁尾中的分頁組件。

類型:bool

預設值:false


如果為 true,則隱藏頁尾中的列數。如果啟用分頁,則無效。

類型:bool

預設值:false


如果為 true,則隱藏頁尾中選取的列數。

類型:bool

預設值:false


如果為 true,則在篩選或快速篩選時忽略變音符號(重音符號)。例如,當篩選值為 cafe 時,café 列將會可見。

類型:bool

預設值:false


如果為 true,Data Grid 在匯出為 CSV 或複製到剪貼簿時,將不會使用 valueFormatter。如果提供物件,您可以選擇忽略 CSV 匯出或剪貼簿匯出的 valueFormatter

類型:{ clipboardExport?: bool, csvExport?: bool }
| bool

預設值:false


已棄用

如果為 select,則不確定狀態的群組標頭核取方塊(例如「全選」核取方塊)將選取其下的所有列。如果為 deselect,則會取消選取其下的所有列。僅在啟用 checkboxSelection 時有效。

類型:'deselect'
| 'select'

預設值:"deselect"


DataGridPro 的初始狀態。其中的資料將在初始化時設定在狀態中,但不會受到控制。如果 initialState 中的其中一個資料也受到控制,則控制狀態優先。

類型:object


在呈現儲存格時觸發的回呼,如果儲存格可編輯,則傳回 true。

類型:func

簽名:
function(params: GridCellParams) => boolean

傳回值: 布林值,指示儲存格是否可編輯。


判斷群組建立後是否應展開。此屬性的優先順序高於 defaultGroupingExpansionDepth 屬性。

類型:func

簽名:
function(node: GridGroupNode) => boolean
  • node 要測試的群組節點。

傳回值: 布林值,指示群組是否展開。


判斷列是否可選取。

類型:func

簽名:
function(params: GridRowParams) => boolean

傳回值: 布林值,指示列是否可選取。


如果為 true,在欄重新排序動作中,在放開滑鼠按鈕之前將滑鼠指標移到格線外部,將不會導致欄跳回其原始位置。

類型:bool

預設值:false


如果為 true,選取模型將保留不存在的選取列。在使用伺服器端分頁時非常有用,並且在變更頁面時需要保留列選取項目。

類型:bool

預設值:false


如果為 true,則會顯示載入覆蓋層。

類型:bool

預設值:false


設定 Data Grid 的地區設定文字。您可以在 GitHub 儲存庫的 來源中找到所有支援的翻譯鍵。

類型:object


在實作 Logger 介面的組件中傳遞自訂記錄器。

類型:{ debug: func, error: func, info: func, warn: func }

預設值:console


允許傳遞記錄層級,或傳遞 false 以關閉記錄。

類型:'debug'
| 'error'
| 'info'
| 'warn'
| false

預設值:"error" ("warn" in dev mode)


內容安全策略的內嵌樣式的 Nonce。

類型:string


在點擊任何儲存格時觸發的回呼。

類型:func

簽名:
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 具有來自 GridCellParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當雙擊事件來自儲存格元素時觸發的回呼。

類型:func

簽名:
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 具有來自 GridCellParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當儲存格切換為編輯模式時觸發的回呼。

類型:func

簽名:
function(params: GridCellParams, event: MuiEvent) => void
  • params 具有來自 GridCellParams 的所有屬性。
  • event 導致呼叫此屬性的事件。

當儲存格切換為檢視模式時觸發的回呼。

類型:func

簽名:
function(params: GridCellParams, event: MuiEvent) => void
  • params 具有來自 GridCellParams 的所有屬性。
  • event 導致呼叫此屬性的事件。

當按鍵事件來自儲存格元素時觸發的回呼。

類型:func

簽名:
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 具有來自 GridCellParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

cellModesModel 屬性變更時觸發的回呼。

類型:func

簽名:
function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void
  • cellModesModel 物件,包含哪些儲存格處於「編輯」模式。
  • details 此回呼的其他詳細資訊。

當資料複製到剪貼簿時呼叫的回呼。

類型:func

簽名:
function(data: string) => void
  • data 複製到剪貼簿的資料。

當點擊事件來自欄標頭元素時觸發的回呼。

類型:func

簽名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 具有來自 GridColumnHeaderParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當 contextmenu 事件來自欄標頭元素時觸發的回呼。

類型:func

簽名:
function(params: GridColumnHeaderParams, event: MuiEvent) => void
  • params 具有來自 GridColumnHeaderParams 的所有屬性。
  • event 事件物件。

當雙擊事件來自欄標頭元素時觸發的回呼。

類型:func

簽名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 具有來自 GridColumnHeaderParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當滑鼠進入事件來自欄標頭元素時觸發的回呼。

類型:func

簽名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 具有來自 GridColumnHeaderParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當滑鼠離開事件來自欄標頭元素時觸發的回呼。

類型:func

簽名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 具有來自 GridColumnHeaderParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當滑鼠移出事件來自欄標頭元素時觸發的回呼。

類型:func

簽名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 具有來自 GridColumnHeaderParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當滑鼠懸停事件來自欄標頭元素時觸發的回呼。

類型:func

簽名:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 具有來自 GridColumnHeaderParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當欄位重新排序時觸發的回呼函式。

類型:func

簽名:
function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridColumnOrderChangeParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當欄位正在調整大小時觸發的回呼函式。

類型:func

簽名:
function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 GridColumnResizeParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當欄位可見性模型變更時觸發的回呼函式。

類型:func

簽名:
function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void
  • model 新的模型。
  • details 此回呼的其他詳細資訊。

當欄位寬度變更時觸發的回呼函式。

類型:func

簽名:
function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 GridColumnResizeParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當密度變更時觸發的回呼函式。

類型:func

簽名:
function(density: GridDensity) => void
  • density 新的密度值。

當列的詳細資訊面板被開啟或關閉時觸發的回呼函式。

類型:func

簽名:
function(ids: Array, details: GridCallbackDetails) => void
  • ids 具有開啟詳細資訊面板的列 ID。
  • details 此回呼的其他詳細資訊。

當 rowCount 被設定且下一批虛擬化列被渲染時觸發的回呼函式。

類型:func

簽名:
function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridFetchRowsParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

在篩選器套用之前,當篩選模型變更時觸發的回呼函式。

類型:func

簽名:
function(model: GridFilterModel, details: GridCallbackDetails) => void
  • model 包含 GridFilterModel 的所有屬性。
  • details 此回呼的其他詳細資訊。

當選單關閉時觸發的回呼函式。

類型:func

簽名:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridMenuParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當選單開啟時觸發的回呼函式。

類型:func

簽名:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridMenuParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當分頁中繼資料變更時觸發的回呼函式。

類型:func

簽名:
function(paginationMeta: GridPaginationMeta) => void
  • paginationMeta 已更新的分頁中繼資料。

當分頁模型變更時觸發的回呼函式。

類型:func

簽名:
function(model: GridPaginationModel, details: GridCallbackDetails) => void
  • model 已更新的分頁模型。
  • details 此回呼的其他詳細資訊。

當釘選欄位變更時觸發的回呼函式。

類型:func

簽名:
function(pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails) => void
  • pinnedColumns 已變更的釘選欄位。
  • details 此回呼的其他詳細資訊。

當偏好設定面板關閉時觸發的回呼函式。

類型:func

簽名:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridPreferencePanelParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當偏好設定面板開啟時觸發的回呼函式。

類型:func

簽名:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridPreferencePanelParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

processRowUpdate 拋出錯誤或拒絕時呼叫的回呼函式。

類型:func

簽名:
function(error: any) => void
  • error 拋出的錯誤。

當 Data Grid 調整大小時觸發的回呼函式。

類型:func

簽名:
function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • containerSize 包含 ElementSize 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當列被點擊時觸發的回呼函式。如果點擊目標是由內建欄位新增的互動式元素,則不會呼叫此函式。

類型:func

簽名:
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 具有來自 GridRowParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當列計數變更時觸發的回呼函式。

類型:func

簽名:
function(count: number) => void
  • count 已更新的列計數。

當雙擊事件來自列容器元素時觸發的回呼函式。

類型:func

簽名:
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params 包含 RowParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當列進入編輯模式時觸發的回呼函式。

類型:func

簽名:
function(params: GridRowParams, event: MuiEvent) => void
  • params 具有來自 GridRowParams 的所有屬性。
  • event 導致呼叫此屬性的事件。

當列進入檢視模式時觸發的回呼函式。

類型:func

簽名:
function(params: GridRowParams, event: MuiEvent) => void
  • params 具有來自 GridRowParams 的所有屬性。
  • event 導致呼叫此屬性的事件。

rowModesModel 屬性變更時觸發的回呼函式。

類型:func

簽名:
function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void
  • rowModesModel 物件,包含哪些列處於「編輯」模式。
  • details 此回呼的其他詳細資訊。

當列正在重新排序時觸發的回呼函式。

類型:func

簽名:
function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridRowOrderChangeParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

當一或多列的選取狀態變更時觸發的回呼函式。

類型:func

簽名:
function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void
  • rowSelectionModel 包含所有列 ID GridSelectionModel。
  • details 此回呼的其他詳細資訊。

當滾動到網格視窗底部時觸發的回呼函式。

類型:func

簽名:
function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params 包含 GridRowScrollEndParams 的所有屬性。
  • event 事件物件。
  • details 此回呼的其他詳細資訊。

在欄位排序之前,當排序模型變更時觸發的回呼函式。

類型:func

簽名:
function(model: GridSortModel, details: GridCallbackDetails) => void
  • model 包含 GridSortModel 的所有屬性。
  • details 此回呼的其他詳細資訊。

使用元件 UI 動態選取 pageSize。

Type:Array<number
| { label: string, value: number }>

Default:[25, 50, 100]


若為 true,則啟用分頁功能。

類型:bool

預設值:false


關於 Data Grid 分頁狀態的額外資訊。僅適用於 paginationMode="server"

Type:{ hasNextPage?: bool }


分頁可以在伺服器端或用戶端處理。如果您想在用戶端處理分頁,請設定為 'client'。如果您想在伺服器端處理分頁,請設定為 'server'。

類型:'client'
| 'server'

預設值:"client"


GridPaginationModel 類型的分頁模型,指向目前的 pagepageSize

Type:{ page: number, pageSize: number }


要釘選到左側或右側顯示的欄位。

類型:object


要釘選在頂部或底部的列資料。

Type:{ bottom?: Array<object>, top?: Array<object> }


在列和儲存格編輯中,使用新值更新列之前呼叫的回呼函式。

類型:func

簽名:
function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise| R
  • newRow 具有新值的列物件。
  • oldRow 具有舊值的列物件。
  • params 額外參數。

Returns: 要更新列的最終值。


若為 true,則每次排序或篩選後,頁面會設定為 0。此屬性將在下一個主要版本中移除,並且重設頁面將成為預設行為。

類型:bool

預設值:false


調整網格大小的毫秒延遲時間。

類型:number

Default:60


在視窗之前/之後渲染的列區域,以像素為單位

類型:number

預設值:150


設定列總數,如果它與 rows 屬性的值長度不同。如果某些列有子項(例如在樹狀資料中),則此數字代表頂層列的數量。僅適用於 paginationMode="server",當 paginationMode="client" 時會被忽略。

類型:number


設定 Data Grid 中列的高度,以像素為單位。

類型:number

Default:52


控制列的模式。

類型:object


已棄用

在測量列高度後,重新計算列位置之前要等待的毫秒延遲時間。當使用動態列高度時,將其設定為較低的值可能很有用,但在顯示大量列時可能會降低效能。

類型:number

Default:166


若為 true,則啟用列的重新排序。

類型:bool

預設值:false


GridRowsProp 類型的列集合。

類型:Array<object>

Default:[]


若為 false,則停用列選取模式。

類型:bool

Default:true


設定 Data Grid 的列選取模型。

Type:Array<number
| string>
| number
| string


rowSelectionPropagation.descendants 設定為 true 時。 - 選取父項會自動選取其所有已篩選的子項。 - 取消選取父列會自動取消選取其所有已篩選的子項。
rowSelectionPropagation.parents 設定為 true 時 - 選取父項的所有已篩選子項會自動選取父項。 - 取消選取已選取父項的子項會自動取消選取父項。
僅適用於用戶端上的樹狀資料和列分組。

Type:{ descendants?: bool, parents?: bool }

Default:{ parents: false, descendants: false }


載入列可以在伺服器端或用戶端處理。如果您想啟用無限載入,請設定為 'client'。如果您想啟用延遲載入,請設定為 'server'。 * @default "client"

類型:'client'
| 'server'


設定由 getRowSpacing 新增的列之間隔的類型。

Type:'border'
| 'margin'

Default:"margin"


覆寫 Data Grid 內部捲軸的高度/寬度。

類型:number


設定 px 為單位的區域,在網格視窗的底部,當滾動到此區域時會呼叫 onRowsScrollEnd。

類型:number

Default:80


若為 true,則儲存格之間將顯示垂直邊框。

類型:bool

預設值:false


若為 true,則欄位標題項目之間將顯示垂直邊框。

類型:bool

預設值:false


可覆寫的元件屬性,在渲染時動態傳遞到元件。

類型:object


可覆寫的元件。

請參閱下方的 Slots API 以取得更多詳細資訊。

類型:object


排序可以在伺服器端或用戶端處理。如果您想在用戶端處理排序,請設定為 'client'。如果您想在伺服器端處理排序,請設定為 'server'。

類型:'client'
| 'server'

預設值:"client"


排序順序的順序。

Type:Array<'asc'
| 'desc'>

Default:['asc', 'desc', null]


設定 Data Grid 的排序模型。

Type:Array<{ field: string, sort?: 'asc'
| 'desc' }>


系統屬性,允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 `sx` 頁面 以取得更多詳細資訊。

Type:Array<func
| object
| bool>
| func
| object


如果為正數,Data Grid 將節流來自 apiRef.current.updateRowsapiRef.current.setRows 的更新。如果您有很高的更新率,但不希望在每個個別更新上執行繁重的工作,例如篩選/排序或渲染,這會很有用。

類型:number

預設值:0


若為 true,則列將根據 getTreeDataPath 屬性收集在樹狀結構中。

類型:bool

預設值:false


當啟用 unstable_listView 屬性時,渲染的欄位定義。

Type:{ align?: 'center'
| 'left'
| 'right', cellClassName?: func
| string, display?: 'flex'
| 'text', field: string, renderCell?: func }


若為 true,則以列表視圖顯示資料。與 unstable_listColumn 結合使用。

類型:bool


若為 true,則 Data Grid 將自動跨越具有相同值的列的儲存格。

類型:bool

預設值:false


若為 true,當 getRowHeight 設定為 () => 'auto' 時,Data Grid 會啟用欄位虛擬化。預設情況下,當啟用動態列高度以正確測量列高度時,會停用欄位虛擬化。對於具有大量欄位的資料集,這可能會導致效能問題。啟用此屬性的缺點是列高度將根據目前渲染的儲存格進行估計,這可能會在水平滾動時導致列高度變更。

類型:bool

預設值:false


ref 被轉發到根元素。

Slots

負責在標題篩選列中顯示選單裝飾的元件

Default component: GridHeaderFilterCell


負責在標題篩選列中顯示選單的元件

Default component: GridHeaderFilterMenu


網格中使用的自訂 Chip 元件。

Default component: Chip


為每個儲存格渲染的元件。

Class name: .MuiDataGridPro-cell

Default component: GridCell


為每個骨架儲存格渲染的元件。

Default component: GridSkeletonCell


在每個欄位標題中渲染的篩選圖示元件。

Default component: GridColumnHeaderFilterIconButton


在每個欄位標題中渲染的排序圖示元件。

Default component: GridColumnHeaderSortIcon


點擊欄位標題中的 3 個點「烤肉串」圖示所渲染的欄位選單元件。

Default component: GridColumnMenu


負責渲染欄位標題的元件。

Class name: .MuiDataGridPro-columnHeaders

Default component: GridColumnHeaders


負責渲染詳細資訊面板的元件。

Class name: .MuiDataGridPro-detailPanels

Default component: GridDetailPanels


在網格視窗底部渲染的頁尾元件。

Default component: GridFooter


在頁尾中渲染的列計數元件

Default component: GridRowCount


在 Header 元件內部渲染的工具列元件。

Default component: null


當網格處於載入狀態時渲染的載入覆蓋元件。

Default component: GridLoadingOverlay


當網格在篩選後沒有結果時渲染的無結果覆蓋元件。

Default component: GridNoResultsOverlay


當網格沒有列時渲染的無列覆蓋元件。

Default component: GridNoRowsOverlay


預設情況下在網格頁尾中渲染的分頁元件。

Default component: Pagination


點擊篩選按鈕時渲染的篩選面板元件。

預設元件: GridFilterPanel


點擊 columns 按鈕時渲染的 GridColumns 面板元件。

預設元件: GridColumnsPanel


用於 Grid Columns 面板內管理 columns 的元件。

類別名稱: .MuiDataGridPro-columnsManagement

預設元件: GridColumnsManagement


包裝篩選器和 columns 面板的面板元件。

類別名稱: .MuiDataGridPro-panel

預設元件: GridPanel


為每個 row 渲染的元件。

類別名稱: .MuiDataGridPro-row

預設元件: GridRow


用於 grid 中 header 和 cells 的自訂 Badge 元件。

預設元件: Badge


用於 grid 中 header 和 cells 的自訂 Checkbox 元件。

預設元件: Checkbox


用於 grid 的自訂 Divider 元件。

預設元件: Divider


用於 grid 的自訂 InputAdornment 元件。

預設元件: InputAdornment


用於 grid 的自訂 TextField 元件。

預設元件: TextField


用於 grid 的自訂 FormControl 元件。

預設元件: FormControl


用於 grid 的自訂 Select 元件。

預設元件: Select


用於 grid 的自訂 Button 元件。

預設元件: Button


用於 grid 的自訂 IconButton 元件。

預設元件: IconButton


用於 grid 的自訂 Tooltip 元件。

預設元件: Tooltip


用於 grid 的自訂 Popper 元件。

預設元件: Popper


用於 grid 的自訂 InputLabel 元件。

預設元件: InputLabel


用於 grid 的自訂 SelectOption 元件。

預設元件: MenuItem


顯示在布林值儲存格上,以表示 true 值的圖示。

預設元件: GridCheckIcon


顯示在布林值儲存格上,以表示 false 值的圖示。

預設元件: GridCloseIcon


顯示在欄標題標題側邊的圖示,以顯示篩選器輸入元件。

預設元件: GridTripleDotsVerticalIcon


預設顯示在工具列中開啟篩選器按鈕上的圖示。

預設元件: GridFilterListIcon


顯示在欄標題選單上,以顯示該欄已套用篩選器的圖示。

預設元件: GridFilterAltIcon


顯示在欄選單選擇器標籤上的圖示。

預設元件: GridColumnIcon


未排序時顯示在欄標題標題側邊的圖示。

預設元件: GridColumnUnsortedIcon


以升序排序時顯示在欄標題標題側邊的圖示。

預設元件: GridArrowUpwardIcon


以降序排序時顯示在欄標題標題側邊的圖示。

預設元件: GridArrowDownwardIcon


顯示在兩個欄標題之間,允許調整欄標題大小的圖示。

預設元件: GridSeparatorIcon


顯示在工具列中 compact 密度選項上的圖示。

預設元件: GridViewHeadlineIcon


顯示在工具列中 standard 密度選項上的圖示。

預設元件: GridTableRowsIcon


顯示在工具列中「comfortable」密度選項上的圖示。

預設元件: GridViewStreamIcon


預設顯示在工具列中開啟匯出按鈕上的圖示。

預設元件: GridSaveAltIcon


顯示在 actions 欄類型上以開啟選單的圖示。

預設元件: GridMoreVertIcon


當 children 為 collapsed 時,顯示在 tree data 切換欄上的圖示

預設元件: GridKeyboardArrowRight


當 children 為 expanded 時,顯示在 tree data 切換欄上的圖示

預設元件: GridExpandMoreIcon


當 children 為 collapsed 時,顯示在 grouping 欄上的圖示

預設元件: GridKeyboardArrowRight


當 children 為 expanded 時,顯示在 grouping 欄上的圖示

預設元件: GridExpandMoreIcon


當 collapsed 時,顯示在 detail panel 切換欄上的圖示。

預設元件: GridAddIcon


當 expanded 時,顯示在 detail panel 切換欄上的圖示。

預設元件: GridRemoveIcon


從篩選器面板刪除篩選器的圖示。

預設元件: GridAddIcon


從篩選器面板刪除篩選器的圖示。

預設元件: GridDeleteIcon


從篩選器面板刪除所有活動篩選器的圖示。

預設元件: GridDeleteForeverIcon


顯示在 reorder 欄類型上以重新排序 row 的圖示。

預設元件: GridDragIcon


顯示在快速篩選器輸入框上的圖示。

預設元件: GridSearchIcon


顯示在快速篩選器重設輸入框上的圖示。

預設元件: GridCloseIcon


在欄選單中顯示以隱藏欄的圖示

預設元件: GridVisibilityOffIcon


在欄選單中顯示用於升序排序的圖示

預設元件: GridArrowUpwardIcon


在欄選單中顯示用於降序排序的圖示

預設元件: GridArrowDownwardIcon


在欄選單中顯示用於篩選器的圖示

預設元件: GridFilterAltIcon


在欄選單中顯示用於顯示所有欄的圖示

預設元件: GridViewColumnIcon


在欄選單中顯示用於清除值的圖示

預設元件: GridClearIcon


在處理中時顯示在輸入框上的圖示。

預設元件: GridLoadIcon


顯示在欄重新排序按鈕上的圖示。

預設元件: GridDragIcon


在欄選單中顯示用於向左釘選的圖示

預設元件: GridPushPinLeftIcon


在欄選單中顯示用於向右釘選的圖示

預設元件: GridPushPinRightIcon


CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時,它們會套用至元件的 slots。

樣式套用至類型為「actions」的儲存格的根元素。

規則名稱:actionsCell


當聚合時,樣式套用至欄標題的根元素。

規則名稱:aggregationColumnHeader


當聚合且 headerAlign="center" 時,樣式套用至標題的根元素。

規則名稱:aggregationColumnHeader--alignCenter


當聚合且 headerAlign="left" 時,樣式套用至標題的根元素。

規則名稱:aggregationColumnHeader--alignLeft


當聚合且 headerAlign="right" 時,樣式套用至標題的根元素。

規則名稱:aggregationColumnHeader--alignRight


當聚合時,樣式套用至欄標題中聚合標籤。

規則名稱:aggregationColumnHeaderLabel


如果 autoHeight={true},則樣式套用至根元素。

規則名稱:autoHeight


在自動調整大小時,樣式套用至根元素。

規則名稱:autosizing


樣式套用至布林值儲存格的圖示。

規則名稱:booleanCell


如果儲存格為可編輯,則樣式套用至儲存格元素。

規則名稱:cell--editable


如果儲存格處於編輯模式,則樣式套用至儲存格元素。

規則名稱:cell--editing


在彈性顯示模式下,樣式套用至儲存格元素。

規則名稱:cell--flex


如果儲存格釘選至左側,則樣式套用至儲存格元素。

規則名稱:cell--pinnedLeft


如果儲存格釘選至右側,則樣式套用至儲存格元素。

規則名稱:cell--pinnedRight


如果儲存格位於儲存格選取範圍的底部邊緣,則樣式會套用至儲存格元素。

規則名稱:cell--rangeBottom


如果儲存格位於儲存格選取範圍的左側邊緣,則樣式會套用至儲存格元素。

規則名稱:cell--rangeLeft


如果儲存格位於儲存格選取範圍的右側邊緣,則樣式會套用至儲存格元素。

規則名稱:cell--rangeRight


如果儲存格位於儲存格選取範圍的頂部邊緣,則樣式會套用至儲存格元素。

規則名稱:cell--rangeTop


如果儲存格在儲存格選取範圍內,則樣式會套用至儲存格元素。

規則名稱:cell--selectionMode


如果 align="center",則樣式套用至儲存格元素。

規則名稱:cell--textCenter


如果 align="left",則樣式套用至儲存格元素。

規則名稱:cell--textLeft


如果 align="right",則樣式套用至儲存格元素。

規則名稱:cell--textRight


如果 showColumnVerticalBorder={true},則樣式會套用至儲存格。

規則名稱:cell--withLeftBorder


如果 showColumnVerticalBorder={true},則樣式會套用至儲存格。

規則名稱:cell--withRightBorder


樣式套用至儲存格核取方塊元素。

規則名稱:cellCheckbox


樣式套用至空的儲存格元素。

規則名稱:cellEmpty


樣式套用至骨架儲存格元素。

規則名稱:cellSkeleton


樣式套用至選取核取方塊元素。

規則名稱:checkboxInput


樣式套用至欄標題元素。

規則名稱:columnHeader


如果 headerAlign="center",則樣式套用至欄標題。

規則名稱:columnHeader--alignCenter


如果 headerAlign="left",則樣式套用至欄標題。

規則名稱:columnHeader--alignLeft


如果 headerAlign="right",則樣式套用至欄標題。

規則名稱:columnHeader--alignRight


當浮動欄標題元素被拖曳時,樣式會套用至該元素。

規則名稱:columnHeader--dragging


樣式套用至空的欄群組標題儲存格。

規則名稱:columnHeader--emptyGroup


如果欄群組標題儲存格不為空,則樣式會套用至該儲存格。

規則名稱:columnHeader--filledGroup


如果欄已套用篩選器,則樣式套用至欄標題。

規則名稱:columnHeader--filtered


樣式套用至最後一個欄標題元素。

規則名稱:columnHeader--last


如果欄標題正在被拖曳,則樣式會套用至該欄標題。

規則名稱:columnHeader--moving


如果欄的類型為 number,則樣式套用至欄標題。

規則名稱:columnHeader--numeric


規則名稱:columnHeader--pinnedLeft


規則名稱:columnHeader--pinnedRight


如果欄可排序,則樣式套用至欄標題。

規則名稱:columnHeader--sortable


如果欄已排序,則樣式套用至欄標題。

規則名稱:columnHeader--sorted


規則名稱:columnHeader--withLeftBorder


如果 showColumnVerticalBorder={true},則樣式會套用至欄標題。

規則名稱:columnHeader--withRightBorder


樣式套用至標題核取方塊儲存格元素。

規則名稱:columnHeaderCheckbox


樣式套用至欄標題的可拖曳容器元素。

規則名稱:columnHeaderDraggableContainer


樣式套用至欄標題的標題元素。

規則名稱:columnHeaderTitle


樣式套用至欄標題的標題容器元素。

規則名稱:columnHeaderTitleContainer


樣式套用至欄標題的標題,但不包含按鈕。

規則名稱:columnHeaderTitleContainerContent


套用至欄標題分隔線元素的樣式。

Rule name:columnSeparator


若欄可調整大小,則套用至欄標題分隔線的樣式。

Rule name:columnSeparator--resizable


若欄正在調整大小,則套用至欄標題分隔線的樣式。

Rule name:columnSeparator--resizing


若側邊為 "left",則套用至欄標題分隔線的樣式。

Rule name:columnSeparator--sideLeft


若側邊為 "right",則套用至欄標題分隔線的樣式。

Rule name:columnSeparator--sideRight


套用至欄管理頁尾元素的樣式。

Rule name:columnsManagementFooter


套用至欄管理頁首元素的樣式。

Rule name:columnsManagementHeader


套用至欄管理列元素的樣式。

Rule name:columnsManagementRow


套用至欄管理搜尋輸入元素的樣式。

Rule name:columnsManagementSearchInput


套用至底部容器的樣式。

Rule name:container--bottom


套用至頂部容器的樣式。

Rule name:container--top


套用至詳細資訊面板元素的樣式。

Rule name:detailPanel


套用至詳細資訊面板切換儲存格元素的樣式。

Rule name:detailPanelToggleCell


若詳細資訊面板為展開狀態,則套用至詳細資訊面板切換儲存格元素的樣式。

Rule name:detailPanelToggleCell--expanded


套用至布林值編輯元件的根元素樣式。

Rule name:editBooleanCell


套用至輸入元件的根元素樣式。

Rule name:editInputCell


套用至篩選表單元件的根元素樣式。

Rule name:filterForm


套用至篩選表單元件的欄輸入框樣式。

Rule name:filterFormColumnInput


套用至篩選表單元件的刪除圖示樣式。

Rule name:filterFormDeleteIcon


套用至篩選表單元件的連結運算子輸入框樣式。

Rule name:filterFormLogicOperatorInput


套用至篩選表單元件的運算子輸入框樣式。

Rule name:filterFormOperatorInput


套用至篩選表單元件的值輸入框樣式。

Rule name:filterFormValueInput


套用至篩選圖示元素的樣式。

Rule name:filterIcon


套用至頁尾列中儲存格的根元素樣式。

Rule name:footerCell


套用至頁尾容器元素的樣式。

Rule name:footerContainer


套用至分組條件儲存格的根元素樣式

Rule name:groupingCriteriaCell


套用至分組條件儲存格的切換按鈕樣式

Rule name:groupingCriteriaCellToggle


套用至欄標題篩選列的樣式。

Rule name:headerFilterRow


套用至欄標題圖示容器的樣式。

Rule name:iconButtonContainer


套用至欄標題分隔線圖示元素的樣式。

Rule name:iconSeparator


套用至主要容器元素的樣式。

Rule name:main


當主要容器元素具有右側釘選欄時,套用至主要容器元素的樣式。

Rule name:main--hasPinnedRight


套用至選單元素的樣式。

Rule name:menu


套用至選單圖示元素的樣式。

Rule name:menuIcon


套用至選單圖示按鈕元素的樣式。

Rule name:menuIconButton


套用至選單列表元素的樣式。

Rule name:menuList


若選單為開啟狀態,則套用至選單圖示元素的樣式。

Rule name:menuOpen


套用至覆蓋層元素的樣式。

Rule name:overlay


套用至覆蓋層外包裝元素的樣式。

Rule name:overlayWrapper


套用至覆蓋層內部外包裝元素的樣式。

Rule name:overlayWrapperInner


套用至面板內容元素的樣式。

Rule name:panelContent


套用至面板頁尾元素的樣式。

Rule name:panelFooter


套用至面板頁首元素的樣式。

Rule name:panelHeader


套用至面板外包裝元素的樣式。

Rule name:panelWrapper


套用至紙張元素的樣式。

Rule name:paper


套用至釘選欄的樣式。

Rule name:pinnedColumns


套用至釘選列容器的樣式。

Rule name:pinnedRows


套用至底部釘選列容器的樣式。

Rule name:pinnedRows--bottom


套用至頂部釘選列容器的樣式。

Rule name:pinnedRows--top


套用至釘選列渲染區域的樣式。

Rule name:pinnedRowsRenderZone


套用至根元素的樣式。

Rule name:root


若密度為 "comfortable",則套用至根元素的樣式。

Rule name:root--densityComfortable


若密度為 "compact",則套用至根元素的樣式。

Rule name:root--densityCompact


若密度為 "standard" (預設值),則套用至根元素的樣式。

Rule name:root--densityStandard


當停用使用者選取時,套用至根元素的樣式。

Rule name:root--disableUserSelection


若列的詳細資訊面板為開啟狀態,則套用至該列的樣式。

Rule name:row--detailPanelExpanded


當特殊列重新排序儲存格被拖曳時,套用至浮動特殊列重新排序儲存格元素的樣式。

Rule name:row--dragging


若列具有動態列高,則套用至該列的樣式。

Rule name:row--dynamicHeight


若列為可編輯狀態,則套用至列元素的樣式。

Rule name:row--editable


若列處於編輯模式,則套用至列元素的樣式。

Rule name:row--editing


套用至網格每頁上第一個可見列元素的樣式。

Rule name:row--firstVisible


套用至網格每頁上最後一個可見列元素的樣式。

Rule name:row--lastVisible


套用至頁尾列計數元素以顯示總列數的樣式。僅在停用分頁時有效。

Rule name:rowCount


套用至列重新排序儲存格的根元素樣式

Rule name:rowReorderCell


當允許拖曳時,套用至列重新排序儲存格的根元素樣式

Rule name:rowReorderCell--draggable


套用至列重新排序儲存格容器元素的樣式。

Rule name:rowReorderCellContainer


套用至特殊列重新排序儲存格內,列的可拖曳佔位符元素的樣式。

Rule name:rowReorderCellPlaceholder


套用至骨架列元素的樣式。

Rule name:rowSkeleton


套用至兩個滾動區域元素的樣式。

Rule name:scrollArea


套用至左側滾動區域元素的樣式。

Rule name:scrollArea--left


套用至右側滾動區域元素的樣式。

Rule name:scrollArea--right


套用至滾動條的樣式。

Rule name:scrollbar


套用至水平滾動條的樣式。

Rule name:scrollbar--horizontal


套用至水平滾動條的樣式。

Rule name:scrollbar--vertical


套用至頁尾選取列計數元素的樣式。

Rule name:selectedRowCount


套用至排序圖示元素的樣式。

Rule name:sortIcon


套用至工具列容器元素的樣式。

Rule name:toolbarContainer


套用至工具列篩選列表元素的樣式。

Rule name:toolbarFilterList


套用至樹狀資料分組欄的根元素樣式。

Rule name:treeDataGroupingCell


套用至樹狀資料分組儲存格的切換按鈕樣式。

Rule name:treeDataGroupingCellToggle


套用至虛擬化容器的樣式。

Rule name:virtualScroller


套用至虛擬化內容的樣式。

Rule name:virtualScrollerContent


當虛擬化內容的高度大於虛擬化容器時,套用至虛擬化內容的樣式。

Rule name:virtualScrollerContent--overflowed


套用至虛擬化渲染區域的樣式。

Rule name:virtualScrollerRenderZone


套用至具有邊框的儲存格、欄標題和其他元素的樣式。僅設定邊框顏色。

Rule name:withBorderColor


showColumnVerticalBorder={true},則套用至網格的樣式。

Rule name:withVerticalBorder



您可以使用下列自訂選項之一覆寫元件的樣式

原始碼

如果您在此頁面中找不到資訊,請考慮查看元件的實作以取得更多詳細資訊。