跳到內容

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';

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

Props

必填

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

類型:Array<object>


格線上可用的彙總函式。

類型: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


覆寫或擴展應用於元件的樣式。

請參閱下方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,則停用在標頭分隔符號上按兩下以自動調整欄寬的功能。

類型: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

簽名:
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"


DataGridPremium 的初始狀態。其中的資料在初始化時設定在狀態中,但不受控制。如果 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


設定資料網格的地區文字。您可以在 GitHub 儲存庫的 原始碼中找到所有支援的翻譯鍵。

類型:object


在實作 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)


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

類型:string


當列分組模型變更時觸發的回呼。

類型: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 的分頁模型,指的是目前的 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 其他參數。

返回: 用於更新列的最終值。


如果 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


可覆寫的元件。

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

類型: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 從剪貼簿貼上的文字。

系統 prop,允許定義系統覆寫以及其他 CSS 樣式。

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

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


如果為正數,資料網格將節流來自 apiRef.current.updateRowsapiRef.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 轉發到根元素。

Slots

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

預設元件: GridHeaderFilterCell


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

預設元件: GridHeaderFilterMenu


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

預設元件: Chip


為每個儲存格呈現的元件。

類別名稱: .MuiDataGridPremium-cell

預設元件: GridCell


為每個骨架儲存格呈現的元件。

預設元件: GridSkeletonCell


在每個欄標題中呈現的篩選圖示元件。

預設元件: GridColumnHeaderFilterIconButton


在每個欄標題中呈現的排序圖示元件。

預設元件: GridColumnHeaderSortIcon


點擊欄標題中 3 個點的「kebab」圖示所呈現的欄選單元件。

預設元件: GridColumnMenu


負責呈現欄標題的元件。

類別名稱: .MuiDataGridPremium-columnHeaders

預設元件: GridColumnHeaders


負責呈現詳細資訊面板的元件。

類別名稱: .MuiDataGridPremium-detailPanels

預設元件: GridDetailPanels


在網格視窗底部呈現的頁尾元件。

預設元件: GridFooter


在頁尾中呈現的列計數元件

預設元件: GridRowCount


在標頭元件內部呈現的工具列元件。

預設元件: null


當網格處於載入狀態時呈現的載入覆蓋層元件。

預設元件: GridLoadingOverlay


當網格在篩選後沒有結果時呈現的無結果覆蓋層元件。

預設元件: GridNoResultsOverlay


當網格沒有列時呈現的無列覆蓋層元件。

預設元件: GridNoRowsOverlay


預設在網格頁尾中呈現的分頁元件。

預設元件: Pagination


點擊篩選按鈕時呈現的篩選面板元件。

預設元件: GridFilterPanel


點擊欄按鈕時呈現的 GridColumns 面板元件。

預設元件: GridColumnsPanel


在「網格欄」面板中用於管理欄的元件。

類別名稱: .MuiDataGridPremium-columnsManagement

預設元件: GridColumnsManagement


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

類別名稱: .MuiDataGridPremium-panel

預設元件: GridPanel


為每個列呈現的元件。

類別名稱: .MuiDataGridPremium-row

預設元件: GridRow


在網格中用於標頭和儲存格的自訂 Badge 元件。

預設元件: Badge


在網格中用於標頭和儲存格的自訂 Checkbox 元件。

預設元件: Checkbox


在網格中使用的自訂 Divider 元件。

預設元件: Divider


在網格中使用的自訂 InputAdornment 元件。

預設元件: InputAdornment


在網格中使用的自訂 TextField 元件。

預設元件: TextField


在網格中使用的自訂 FormControl 元件。

預設元件: FormControl


在網格中使用的自訂 Select 元件。

預設元件: Select


在網格中使用的自訂 Button 元件。

預設元件: Button


在網格中使用的自訂 IconButton 元件。

預設元件: IconButton


在網格中使用的自訂 Tooltip 元件。

預設元件: Tooltip


在網格中使用的自訂 Popper 元件。

預設元件: Popper


在網格中使用的自訂 InputLabel 元件。

預設元件: InputLabel


在網格中使用的自訂 SelectOption 元件。

預設元件: MenuItem


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

預設元件: GridCheckIcon


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

預設元件: GridCloseIcon


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

預設元件: GridTripleDotsVerticalIcon


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

預設元件: GridFilterListIcon


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

預設元件: GridFilterAltIcon


在欄選單選取器索引標籤上顯示的圖示。

預設元件: GridColumnIcon


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

預設元件: GridColumnUnsortedIcon


在以遞增順序排序時於欄標題標題側邊顯示的圖示。

預設元件: GridArrowUpwardIcon


在以遞減順序排序時於欄標題標題側邊顯示的圖示。

預設元件: GridArrowDownwardIcon


在兩個欄標題之間顯示的圖示,可讓您調整欄標題大小。

預設元件: GridSeparatorIcon


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

預設元件: GridViewHeadlineIcon


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

預設元件: GridTableRowsIcon


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

預設元件: GridViewStreamIcon


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

預設元件: GridSaveAltIcon


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

預設元件: GridMoreVertIcon


當子項目摺疊時在樹狀資料切換欄上顯示的圖示

預設元件: GridKeyboardArrowRight


當子項目展開時在樹狀資料切換欄上顯示的圖示

預設元件: GridExpandMoreIcon


當子項目摺疊時在群組化欄上顯示的圖示

預設元件: GridKeyboardArrowRight


當子項目展開時在群組化欄上顯示的圖示

預設元件: GridExpandMoreIcon


在摺疊時於詳細資訊面板切換欄上顯示的圖示。

預設元件: GridAddIcon


在展開時於詳細資訊面板切換欄上顯示的圖示。

預設元件: GridRemoveIcon


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

預設元件: GridAddIcon


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

預設元件: GridDeleteIcon


用於從篩選面板刪除所有作用中篩選器的圖示。

預設元件: GridDeleteForeverIcon


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

預設元件: GridDragIcon


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

預設元件: GridSearchIcon


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

預設元件: GridCloseIcon


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

預設元件: GridVisibilityOffIcon


在欄選單中顯示以進行遞增排序的圖示

預設元件: GridArrowUpwardIcon


在欄選單中顯示以進行遞減排序的圖示

預設元件: GridArrowDownwardIcon


在欄選單中顯示以進行篩選的圖示

預設元件: GridFilterAltIcon


在欄選單中顯示以顯示所有欄的圖示

預設元件: GridViewColumnIcon


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

預設元件: GridClearIcon


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

預設元件: GridLoadIcon


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

預設元件: GridDragIcon


在欄選單中顯示以進行向左釘選的圖示

預設元件: GridPushPinLeftIcon


在欄選單中顯示以進行向右釘選的圖示

預設元件: GridPushPinRightIcon


在欄選單中顯示以進行取消群組化的圖示

預設元件: GridWorkspacesIcon


在欄選單中顯示以進行群組化的圖示

預設元件: GridGroupWorkIcon


在欄選單中顯示以進行彙總的圖示

預設元件: GridFunctionsIcon


CSS 類別

這些類別名稱對於使用 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



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

原始碼

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