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';
閱讀這篇關於最小化套件大小的指南,以瞭解它們之間的差異。
使用者啟動自動調整大小的選項。
類型:{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }
如果為 true
,「全選」標頭核取方塊僅選取目前頁面上的列。需與 checkboxSelection
搭配使用。僅在啟用分頁時有效。
類型:bool
預設值:false
如果為 true
,則停用使用 Ctrl/CMD 或 Shift 鍵進行多重選取。除非啟用 checkboxSelection
,否則 MIT DataGrid 將忽略此屬性。
類型:bool
預設值:false (`!props.checkboxSelection` for MIT Data Grid)
如果事先不知道實際的 rowCount,但有可用的估計值,請使用此屬性。如果某些列有子項目(例如在樹狀資料中),則此數字代表最上層列的數量。僅適用於 paginationMode="server"
和 rowCount="-1"
時
類型:number
不穩定的功能,可能會引入重大變更。對於每個功能,如果未明確將旗標設定為 true
,則該功能將完全停用,且任何屬性/方法呼叫都不會產生任何效果。
類型:{ warnIfFocusStateIsNotSynced?: bool }
設定 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
傳回要在列詳細資訊中呈現的元素的函式。
類型:func
傳回列詳細資訊面板高度的函式。
類型:func
預設值:"() => 500"
function(params: GridRowParams) => number | string
params
具有來自 GridRowParams 的所有屬性。
傳回值: 高度(像素)或 "auto" 以使用內容高度。
傳回列估計高度的函式。僅在使用動態列高時有效。測量列高後,此值將被捨棄。
類型:func
function(params: GridRowHeightParams) => number | null
params
具有來自 GridRowHeightParams 的所有屬性。
傳回值: 估計的列高值。如果為 null
或 undefined
,則會套用基於密度的預設列高。
在列上動態套用 CSS 類別的函式。
類型:func
function(params: GridRowClassNameParams) => string
params
具有來自 GridRowClassNameParams 的所有屬性。
傳回值: 要套用至列的 CSS 類別。
設定每列列高的函式。
類型:func
function(params: GridRowHeightParams) => GridRowHeightReturnValue
params
具有來自 GridRowHeightParams 的所有屬性。
傳回值: 列高值。如果為 null
或 undefined
,則會套用預設列高。如果為 "auto",則列高將根據內容計算。
允許指定列之間間距的函式。
類型:func
function(params: GridRowSpacingParams) => GridRowSpacing
params
具有來自 GridRowSpacingParams 的所有屬性。
傳回值: 列間距值。
判斷樹狀資料中列的路徑。例如,路徑為 ["A", "B"] 的列是路徑為 ["A"] 的列的子項目。請注意,所有路徑都必須至少包含一個元素。
類型:func
function(row: R) => Array
row
我們要從中取得路徑的列。
傳回值: 列的路徑。
如果為 true
,則隱藏頁尾組件。
類型:bool
預設值:false
如果為 true
,則隱藏頁尾中的分頁組件。
類型:bool
預設值:false
如果為 true
,則隱藏頁尾中的列數。如果啟用分頁,則無效。
類型:bool
預設值:false
如果為 true
,則隱藏頁尾中選取的列數。
類型: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
判斷群組建立後是否應展開。此屬性的優先順序高於 defaultGroupingExpansionDepth
屬性。
類型:func
function(node: GridGroupNode) => boolean
node
要測試的群組節點。
傳回值: 布林值,指示群組是否展開。
判斷列是否可選取。
類型:func
如果為 true
,在欄重新排序動作中,在放開滑鼠按鈕之前將滑鼠指標移到格線外部,將不會導致欄跳回其原始位置。
類型:bool
預設值:false
如果為 true
,選取模型將保留不存在的選取列。在使用伺服器端分頁時非常有用,並且在變更頁面時需要保留列選取項目。
類型:bool
預設值:false
允許傳遞記錄層級,或傳遞 false 以關閉記錄。
類型:'debug'
| 'error'
| 'info'
| 'warn'
| false
預設值:"error" ("warn" in dev mode)
在點擊任何儲存格時觸發的回呼。
類型: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(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(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(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]
分頁可以在伺服器端或用戶端處理。如果您想在用戶端處理分頁,請設定為 'client'。如果您想在伺服器端處理分頁,請設定為 'server'。
類型:'client'
| 'server'
預設值:"client"
GridPaginationModel 類型的分頁模型,指向目前的 page
和 pageSize
。
Type:{ page: number, pageSize: number }
在列和儲存格編輯中,使用新值更新列之前呼叫的回呼函式。
類型:func
function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise| R
newRow
具有新值的列物件。oldRow
具有舊值的列物件。params
額外參數。
Returns: 要更新列的最終值。
設定列總數,如果它與 rows
屬性的值長度不同。如果某些列有子項(例如在樹狀資料中),則此數字代表頂層列的數量。僅適用於 paginationMode="server"
,當 paginationMode="client"
時會被忽略。
類型:number
在測量列高度後,重新計算列位置之前要等待的毫秒延遲時間。當使用動態列高度時,將其設定為較低的值可能很有用,但在顯示大量列時可能會降低效能。
類型:number
Default:166
當 rowSelectionPropagation.descendants
設定為 true
時。 - 選取父項會自動選取其所有已篩選的子項。 - 取消選取父列會自動取消選取其所有已篩選的子項。
當 rowSelectionPropagation.parents
設定為 true
時 - 選取父項的所有已篩選子項會自動選取父項。 - 取消選取已選取父項的子項會自動取消選取父項。
僅適用於用戶端上的樹狀資料和列分組。
Type:{ descendants?: bool, parents?: bool }
Default:{ parents: false, descendants: false }
載入列可以在伺服器端或用戶端處理。如果您想啟用無限載入,請設定為 'client'。如果您想啟用延遲載入,請設定為 'server'。 * @default "client"
類型:'client'
| 'server'
排序可以在伺服器端或用戶端處理。如果您想在用戶端處理排序,請設定為 'client'。如果您想在伺服器端處理排序,請設定為 'server'。
類型:'client'
| 'server'
預設值:"client"
如果為正數,Data Grid 將節流來自 apiRef.current.updateRows
和 apiRef.current.setRows
的更新。如果您有很高的更新率,但不希望在每個個別更新上執行繁重的工作,例如篩選/排序或渲染,這會很有用。
類型:number
預設值:0
當啟用 unstable_listView
屬性時,渲染的欄位定義。
Type:{ align?: 'center'
| 'left'
| 'right', cellClassName?: func
| string, display?: 'flex'
| 'text', field: string, renderCell?: func }
ref
被轉發到根元素。負責渲染欄位標題的元件。
Class name: .MuiDataGridPro-columnHeaders
Default component: GridColumnHeaders
負責渲染詳細資訊面板的元件。
Class name: .MuiDataGridPro-detailPanels
Default component: GridDetailPanels
在網格視窗底部渲染的頁尾元件。
Default component: GridFooter
在頁尾中渲染的列計數元件
Default component: GridRowCount
用於 Grid Columns 面板內管理 columns 的元件。
類別名稱: .MuiDataGridPro-columnsManagement
預設元件: GridColumnsManagement
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時,它們會套用至元件的 slots。
當聚合且 headerAlign="center"
時,樣式套用至標題的根元素。
規則名稱:aggregationColumnHeader--alignCenter
當聚合且 headerAlign="left"
時,樣式套用至標題的根元素。
規則名稱:aggregationColumnHeader--alignLeft
當聚合且 headerAlign="right"
時,樣式套用至標題的根元素。
規則名稱:aggregationColumnHeader--alignRight
如果 showColumnVerticalBorder={true}
,則樣式會套用至儲存格。
規則名稱:cell--withLeftBorder
如果 showColumnVerticalBorder={true}
,則樣式會套用至儲存格。
規則名稱:cell--withRightBorder
如果 headerAlign="center"
,則樣式套用至欄標題。
規則名稱:columnHeader--alignCenter
如果 headerAlign="right"
,則樣式套用至欄標題。
規則名稱:columnHeader--alignRight
如果 showColumnVerticalBorder={true}
,則樣式會套用至欄標題。
規則名稱:columnHeader--withRightBorder
樣式套用至欄標題的標題,但不包含按鈕。
規則名稱:columnHeaderTitleContainerContent
若欄可調整大小,則套用至欄標題分隔線的樣式。
Rule name:columnSeparator--resizable
若側邊為 "left",則套用至欄標題分隔線的樣式。
Rule name:columnSeparator--sideLeft
若側邊為 "right",則套用至欄標題分隔線的樣式。
Rule name:columnSeparator--sideRight
套用至欄管理頁尾元素的樣式。
Rule name:columnsManagementFooter
若詳細資訊面板為展開狀態,則套用至詳細資訊面板切換儲存格元素的樣式。
Rule name:detailPanelToggleCell--expanded
套用至篩選表單元件的連結運算子輸入框樣式。
Rule name:filterFormLogicOperatorInput
套用至頁尾列中儲存格的根元素樣式。
Rule name:footerCell
套用至頁尾容器元素的樣式。
Rule name:footerContainer
套用至選單元素的樣式。
Rule name:menu
套用至選單圖示元素的樣式。
Rule name:menuIcon
套用至選單圖示按鈕元素的樣式。
Rule name:menuIconButton
套用至選單列表元素的樣式。
Rule name:menuList
若選單為開啟狀態,則套用至選單圖示元素的樣式。
Rule name:menuOpen
套用至面板頁尾元素的樣式。
Rule name:panelFooter
若密度為 "comfortable",則套用至根元素的樣式。
Rule name:root--densityComfortable
若密度為 "standard" (預設值),則套用至根元素的樣式。
Rule name:root--densityStandard
當允許拖曳時,套用至列重新排序儲存格的根元素樣式
Rule name:rowReorderCell--draggable
套用至特殊列重新排序儲存格內,列的可拖曳佔位符元素的樣式。
Rule name:rowReorderCellPlaceholder
當虛擬化內容的高度大於虛擬化容器時,套用至虛擬化內容的樣式。
Rule name:virtualScrollerContent--overflowed
您可以使用下列自訂選項之一覆寫元件的樣式
- 使用全域類別名稱。
- 在自訂主題中使用規則名稱作為元件
styleOverrides
屬性的一部分。
原始碼
如果您在此頁面中找不到資訊,請考慮查看元件的實作以取得更多詳細資訊。