DataGridPremiumAPI
React DataGridPremium 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
示範
匯入
import { DataGridPremium } from '@mui/x-data-grid-premium/DataGridPremium';
// or
import { DataGridPremium } from '@mui/x-data-grid-premium';
閱讀關於最小化套件大小的指南,以瞭解它們之間的差異。
格線上可用的彙總函式。
類型:object
預設值:GRID_AGGREGATION_FUNCTIONS
設定格線的彙總模型。
類型:object
用於產生彙總值的列。如果為 filtered
,則彙總值僅使用目前通過篩選程序的列產生。如果為 all
,則彙總值使用所有列產生。
類型:'all'
| 'filtered'
預設值:"filtered"
允許格線操作的 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
,則啟用儲存格選取模式。
類型:bool
預設值:false
設定格線的儲存格選取模型。
類型:object
如果為 true
,Data Grid 將顯示一個額外欄位,其中包含用於選取列的核取方塊。
類型:bool
預設值:false
如果為 true
,「全選」標頭核取方塊僅選取目前頁面上的列。與 checkboxSelection
組合使用。僅在啟用分頁時有效。
類型:bool
預設值:false
複製到剪貼簿時,用於分隔儲存格值的字元。
類型:string
預設值:'\t'
在視窗之前/之後渲染的欄區域(像素為單位)
類型:number
預設值:150
設定 Data Grid 中欄組標頭的高度(像素為單位)。如果未設定,則繼承 columnHeaderHeight
值。
類型:number
設定 Data Grid 中欄標頭的高度(像素為單位)。
類型:number
預設值:56
如果大於 0,列子節點將展開到此深度。如果等於 -1,所有列子節點都將展開。
類型:number
預設值:0
設定 Data Grid 的密度。
類型:'comfortable'
| 'compact'
| 'standard'
預設值:"standard"
要顯示詳細資訊面板的列 ID。
類型:Array<number
| string>
如果為 true
,則停用彙總。
類型:bool
預設值:false
如果為 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
,則停用密度選取器。
類型:bool
預設值:false
如果為 true
,則不使用 eval()
進行效能最佳化。
類型:bool
預設值:false
如果為 true
,則停用使用多個欄進行篩選。
類型:bool
預設值:false
如果為 true
,則停用使用多個欄進行排序。
類型:bool
預設值:false
如果為 true
,則停用使用 Ctrl/CMD 或 Shift 鍵進行多重選取。除非啟用 checkboxSelection
,否則 MIT DataGrid 將忽略此屬性。
類型:bool
預設值:false (`!props.checkboxSelection` 用於 MIT Data Grid)
如果為 true
,則停用列分組。
類型:bool
預設值:false
如果為 true
,則停用點擊列或儲存格時的選取。
類型:bool
預設值:false
如果為 true
,則停用虛擬化。
類型:bool
預設值:false
控制是否使用儲存格或列編輯。
類型:'cell'
| 'row'
預設值:"cell"
如果事先不知道實際列數,但有估計值可用,請使用此屬性。如果某些列有子節點(例如在樹狀資料中),則此數字表示頂層列的數量。僅適用於 paginationMode="server"
且 rowCount="-1"
時
類型:number
不穩定的功能,可能會引入重大變更。對於每個功能,如果未明確將旗標設定為 true
,則該功能將完全停用,並且屬性或方法呼叫均無效。
類型:{ ariaV8?: bool, 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 }
決定彙總值的位置。
類型:func
預設值:(groupNode) => groupNode == null ? 'footer' : 'inline'
function(groupNode: GridGroupNode) => GridAggregationPosition | null
groupNode
目前的群組。
傳回: 彙總值的位置(如果為 null
,則群組未彙總)。
在儲存格上動態套用 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",則根據內容計算列高度。
傳回給定 GridRowModel 的 ID。確保此屬性的參考穩定,以避免效能影響。可以通過在元件外部定義屬性或通過記憶化來完成。
類型:func
允許指定列之間間距的函式。
類型:func
function(params: GridRowSpacingParams) => GridRowSpacing
params
具有 GridRowSpacingParams 中的所有屬性。
傳回: 列間距值。
決定樹狀資料中列的路徑。例如,路徑為 ["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"
DataGridPremium 的初始狀態。其中的資料在初始化時設定在狀態中,但不受控制。如果 initialState
中的其中一個資料也受到控制,則控制狀態優先。
類型:object
在渲染儲存格時觸發的回呼,如果儲存格可編輯,則傳回 true。
類型:func
決定群組在建立後是否應展開。此屬性優先於 defaultGroupingExpansionDepth
屬性。
類型:func
function(node: GridGroupNode) => boolean
node
要測試的群組節點。
傳回: 一個布林值,指示群組是否已展開。
決定是否可以選取列。
類型:func
如果 true
,在欄重新排序動作中,於放開滑鼠按鈕前將滑鼠指標移出網格外,將不會導致欄位跳回其原始位置。
類型:bool
預設值:false
如果 true
,選取模型將保留不存在的已選取列。當使用伺服器端分頁且在變更頁面時需要保留列選取時非常有用。
類型:bool
預設值:false
如果 true
,則會顯示載入覆蓋層。
類型:bool
預設值:false
在實作 Logger 介面的元件中傳遞自訂記錄器。
Type:{ debug: func, error: func, info: func, warn: func }
Default:console
允許傳遞記錄層級或 false 以關閉記錄。
Type:'debug'
| 'error'
| 'info'
| 'warn'
| false
Default:"error" ("warn" in dev mode)
當列分組模型變更時觸發的回呼。
類型:func
function(model: GridAggregationModel, details: GridCallbackDetails) => void
model
彙總的欄位。details
此回呼的其他詳細資訊。
在剪貼簿貼上操作開始之前觸發的回呼。使用它來確認或取消貼上操作。
類型:func
function(params: object) => void
params
傳遞給回呼的參數。
當任何儲存格被點擊時觸發的回呼。
類型: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
導致此 prop 被呼叫的事件。
當儲存格進入檢視模式時觸發的回呼。
類型:func
function(params: GridCellParams, event: MuiEvent) => void
params
具有 GridCellParams 中的所有屬性。event
導致此 prop 被呼叫的事件。
當儲存格元素發生 keydown 事件時觸發的回呼。
類型:func
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
params
具有 GridCellParams 中的所有屬性。event
事件物件。details
此回呼的其他詳細資訊。
當 cellModesModel
prop 變更時觸發的回呼。
類型:func
function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void
cellModesModel
物件,包含哪些儲存格處於「編輯」模式。details
此回呼的其他詳細資訊。
當一個或多個儲存格的選取狀態變更時觸發的回呼。
類型:func
function(cellSelectionModel: GridCellSelectionModel, details: GridCallbackDetails) => void
cellSelectionModel
形狀為 GridCellSelectionModel 的物件,包含選取的儲存格。details
此回呼的其他詳細資訊。
當資料複製到剪貼簿時呼叫的回呼。
類型:func
function(data: string) => void
data
複製到剪貼簿的資料。
當剪貼簿貼上操作結束時觸發的回呼。
類型:func
當剪貼簿貼上操作開始時觸發的回呼。
類型:func
當欄標題元素發生點擊事件時觸發的回呼。
類型: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
此回呼的其他詳細資訊。
當 Excel 匯出狀態變更時觸發的回呼。
類型:func
function(inProgress: string) => void
inProgress
指示任務是否正在進行中。
當 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
擲回的錯誤。
當資料網格調整大小時觸發的回呼。
類型: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
導致此 prop 被呼叫的事件。
當列進入檢視模式時觸發的回呼。
類型:func
function(params: GridRowParams, event: MuiEvent) => void
params
具有 GridRowParams 中的所有屬性。event
導致此 prop 被呼叫的事件。
當列分組模型變更時觸發的回呼。
類型:func
function(model: GridRowGroupingModel, details: GridCallbackDetails) => void
model
用作分組條件的欄位。details
此回呼的其他詳細資訊。
當 rowModesModel
prop 變更時觸發的回呼。
類型: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
關於資料網格分頁狀態的額外資訊。僅適用於 paginationMode="server"
。
Type:{ hasNextPage?: bool }
分頁可以在伺服器端或用戶端處理。如果您想在用戶端處理分頁,請將其設定為 'client'。如果您想在伺服器端處理分頁,請將其設定為 'server'。
類型:'client'
| 'server'
預設值:"client"
類型為 GridPaginationModel 的分頁模型,指的是目前的 page
和 pageSize
。
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
其他參數。
返回: 用於更新列的最終值。
如果 true
,則在每次排序或篩選後,頁面會設定為 0。此 prop 將在下一個主要版本中移除,而重設頁面將成為預設行為。
類型:bool
預設值:false
調整網格大小的毫秒延遲節流閥。
類型:number
Default:60
在檢視區之前/之後呈現的列區域(以像素為單位)
類型:number
預設值:150
設定列總數,如果它與值 rows
prop 的長度不同。如果某些列有子項(例如在樹狀資料中),則此數字代表頂層列的數量。僅適用於 paginationMode="server"
,當 paginationMode="client"
時會被忽略。
類型:number
如果 single
,所有分組的欄位都會在同一個網格欄位中表示。如果 multiple
,每個分組的欄位都會在其自己的網格欄位中表示。
Type:'multiple'
| 'single'
Default:'single'
設定網格的列分組模型。
Type:Array<string>
設定資料網格中列的高度(以像素為單位)。
類型:number
Default:52
控制列的模式。
類型:object
在測量列高度後,等待重新計算列位置的毫秒延遲。當使用動態列高度時,將其設定為較低的值可能很有用,但在顯示大量列時可能會降低效能。
類型:number
Default:166
如果 true
,則啟用列的重新排序。
類型:bool
預設值:false
類型為 GridRowsProp 的列集合。
類型:Array<object>
Default:[]
如果 false
,則停用列選取模式。
類型:bool
Default:true
設定資料網格的列選取模型。
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"
覆寫資料網格內部捲軸的高度/寬度。
類型:number
設定在網格檢視區底部呼叫 onRowsScrollEnd 的區域(以 px
為單位)。
類型:number
Default:80
如果 true
,則儲存格之間會顯示垂直邊框。
類型:bool
預設值:false
如果 true
,則欄標題項目之間會顯示垂直邊框。
類型:bool
預設值:false
可覆寫的元件 props,動態傳遞至呈現時的元件。
類型:object
排序可以在伺服器端或用戶端處理。如果您想在用戶端處理排序,請將其設定為 'client'。如果您想在伺服器端處理排序,請將其設定為 'server'。
類型:'client'
| 'server'
預設值:"client"
排序序列的順序。
Type:Array<'asc'
| 'desc'>
Default:['asc', 'desc', null]
設定資料網格的排序模型。
Type:Array<{ field: string, sort?: 'asc'
| 'desc' }>
此函式用於將貼上的文字分割成列和儲存格。
類型:func
function(text: string) => void
text
從剪貼簿貼上的文字。
如果為正數,資料網格將節流來自 apiRef.current.updateRows
和 apiRef.current.setRows
的更新。如果您有高更新率,但不希望在每次個別更新時執行篩選/排序或呈現等繁重工作,這會很有用。
類型:number
預設值:0
如果 true
,則列將根據 getTreeDataPath
prop 收集到樹狀結構中。
類型:bool
預設值:false
啟用 unstable_listView
prop 時呈現的欄位定義。
Type:{ align?: 'center'
| 'left'
| 'right', cellClassName?: func
| string, display?: 'flex'
| 'text', field: string, renderCell?: func }
如果 true
,則以清單檢視顯示資料。與 unstable_listColumn
結合使用。
類型:bool
如果 true
,資料網格將自動跨越具有相同值的列的儲存格。
類型:bool
預設值:false
如果 true
,當 getRowHeight
設定為 () => 'auto'
時,資料網格會啟用欄位虛擬化。預設情況下,當啟用動態列高度以正確測量列高度時,欄位虛擬化會停用。對於具有大量欄位的資料集,這可能會導致效能問題。啟用此 prop 的缺點是列高度將根據目前呈現的儲存格估算,這可能會在水平滾動時導致列高度變更。
類型:bool
預設值:false
ref
轉發到根元素。在網格視窗底部呈現的頁尾元件。
預設元件: GridFooter
在頁尾中呈現的列計數元件
預設元件: GridRowCount
在「網格欄」面板中用於管理欄的元件。
類別名稱: .MuiDataGridPremium-columnsManagement
預設元件: GridColumnsManagement
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時,它們會套用至元件的插槽。
套用至 type="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
樣式套用至儲存格元素,如果該元素位於儲存格選取範圍的右邊緣。
Rule name:cell--rangeRight
樣式套用至儲存格元素,如果該元素位於儲存格選取範圍的頂端邊緣。
Rule name:cell--rangeTop
樣式套用至儲存格元素,如果該元素位於儲存格選取範圍內。
Rule name:cell--selectionMode
樣式套用至儲存格元素,如果 align="center"
。
Rule name:cell--textCenter
樣式套用至儲存格元素,如果 align="left"
。
Rule name:cell--textLeft
樣式套用至儲存格元素,如果 align="right"
。
Rule name:cell--textRight
樣式套用至儲存格,如果 showColumnVerticalBorder={true}
。
Rule name:cell--withLeftBorder
樣式套用至儲存格,如果 showColumnVerticalBorder={true}
。
Rule name:cell--withRightBorder
樣式套用至儲存格核取方塊元素。
Rule name:cellCheckbox
樣式套用至空白儲存格元素。
Rule name:cellEmpty
樣式套用至骨架儲存格元素。
Rule name:cellSkeleton
樣式套用至選取核取方塊元素。
Rule name:checkboxInput
樣式套用至欄標題元素。
Rule name:columnHeader
樣式套用至欄標題,如果 headerAlign="center"
。
Rule name:columnHeader--alignCenter
樣式套用至欄標題,如果 headerAlign="left"
。
Rule name:columnHeader--alignLeft
樣式套用至欄標題,如果 headerAlign="right"
。
Rule name:columnHeader--alignRight
樣式套用至浮動欄標題元素,當其被拖曳時。
Rule name:columnHeader--dragging
樣式套用至空白欄群組標題儲存格。
Rule name:columnHeader--emptyGroup
樣式套用至欄群組標題儲存格,如果非空白。
Rule name:columnHeader--filledGroup
樣式套用至欄標題,如果該欄已套用篩選器。
Rule name:columnHeader--filtered
樣式套用至最後一個欄標題元素。
Rule name:columnHeader--last
樣式套用至欄標題,如果其正在被拖曳。
Rule name:columnHeader--moving
樣式套用至欄標題,如果該欄的類型為 number
。
Rule name:columnHeader--numeric
Rule name:columnHeader--pinnedLeft
Rule name:columnHeader--pinnedRight
樣式套用至欄標題,如果該欄可排序。
Rule name:columnHeader--sortable
樣式套用至欄標題,如果該欄已排序。
Rule name:columnHeader--sorted
Rule name:columnHeader--withLeftBorder
樣式套用至欄標題,如果 showColumnVerticalBorder={true}
。
Rule name:columnHeader--withRightBorder
樣式套用至標題核取方塊儲存格元素。
Rule name:columnHeaderCheckbox
樣式套用至欄標題的可拖曳容器元素。
Rule name:columnHeaderDraggableContainer
樣式套用至欄標題的標題元素;
Rule name:columnHeaderTitle
樣式套用至欄標題的標題容器元素。
Rule name:columnHeaderTitleContainer
樣式套用至欄標題的標題,按鈕除外。
Rule name: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
套用至底部釘選列容器的樣式。
規則名稱:pinnedRows--bottom
套用至頂部釘選列容器的樣式。
規則名稱:pinnedRows--top
套用至釘選列渲染區域的樣式。
規則名稱:pinnedRowsRenderZone
套用至根元素的樣式。
規則名稱:root
如果密度為「comfortable」,則套用至根元素的樣式。
規則名稱:root--densityComfortable
如果密度為「compact」,則套用至根元素的樣式。
規則名稱:root--densityCompact
如果密度為「standard」(預設),則套用至根元素的樣式。
規則名稱:root--densityStandard
當停用使用者選取時,套用至根元素的樣式。
規則名稱:root--disableUserSelection
如果列的詳細資訊面板為開啟狀態,則套用至該列的樣式。
規則名稱:row--detailPanelExpanded
當拖曳浮動的特殊列重新排序儲存格元素時,套用至該元素的樣式。
規則名稱:row--dragging
如果列具有動態列高度,則套用至該列的樣式。
規則名稱:row--dynamicHeight
如果列為可編輯,則套用至列元素的樣式。
規則名稱:row--editable
如果列處於編輯模式,則套用至列元素的樣式。
規則名稱:row--editing
在網格的每個頁面上,套用至第一個可見列元素的樣式。
規則名稱:row--firstVisible
在網格的每個頁面上,套用至最後一個可見列元素的樣式。
規則名稱:row--lastVisible
套用至頁尾列計數元素,以顯示總列數。僅在停用分頁時有效。
規則名稱:rowCount
套用至列重新排序儲存格的根元素樣式
規則名稱:rowReorderCell
當允許拖曳時,套用至列重新排序儲存格根元素的樣式
規則名稱:rowReorderCell--draggable
套用至列重新排序儲存格容器元素的樣式。
規則名稱:rowReorderCellContainer
套用至特殊列重新排序儲存格內列的可拖曳預留位置元素樣式。
規則名稱:rowReorderCellPlaceholder
套用至骨架列元素的樣式。
規則名稱:rowSkeleton
套用至兩個滾動區域元素的樣式。
規則名稱:scrollArea
套用至左側滾動區域元素的樣式。
規則名稱:scrollArea--left
套用至右側滾動區域元素的樣式。
規則名稱:scrollArea--right
套用至滾動條的樣式。
規則名稱:scrollbar
套用至水平滾動條的樣式。
規則名稱:scrollbar--horizontal
套用至水平滾動條的樣式。
規則名稱:scrollbar--vertical
套用至頁尾選取列計數元素的樣式。
規則名稱:selectedRowCount
套用至排序圖示元素的樣式。
規則名稱:sortIcon
套用至工具列容器元素的樣式。
規則名稱:toolbarContainer
套用至工具列篩選器清單元素的樣式。
規則名稱:toolbarFilterList
套用至樹狀資料分組欄的根元素樣式。
規則名稱:treeDataGroupingCell
套用至樹狀資料分組儲存格的切換按鈕樣式。
規則名稱:treeDataGroupingCellToggle
套用至虛擬化容器的樣式。
規則名稱:virtualScroller
套用至虛擬化內容的樣式。
規則名稱:virtualScrollerContent
當虛擬化內容的高度大於虛擬化容器時,套用至虛擬化內容的樣式。
規則名稱:virtualScrollerContent--overflowed
套用至虛擬化渲染區域的樣式。
規則名稱:virtualScrollerRenderZone
套用至具有邊框的儲存格、欄標題和其他元素。僅設定邊框顏色。
規則名稱:withBorderColor
如果 showColumnVerticalBorder={true}
,則套用至網格的樣式。
規則名稱:withVerticalBorder
您可以使用下列自訂選項之一覆寫元件的樣式
- 使用全域類別名稱。
- 在自訂主題中使用規則名稱作為元件的
styleOverrides
屬性的一部分。
原始碼
如果您在本頁中找不到資訊,請考慮查看元件的實作以取得更多詳細資訊。