資料格 - 列選取

列選取功能允許使用者選取並醒目提示單列或多列，以便對其執行操作。

單列選取

單列選取功能預設為 MIT 資料格元件啟用。您可以透過點擊列來選取列，或使用鍵盤快捷鍵。若要取消選取列，請按住 Ctrl (Cmd on MacOS) 鍵並點擊該列。

多列選取

在 Data Grid Pro 和 Data Grid Premium 元件上，您可以透過兩種方式選取多列

• 若要選取多個獨立的列，請在選取列時按住 Ctrl (Cmd on MacOS) 鍵。
• 若要選取一系列列，請在選取列時按住 Shift 鍵。
• 若要停用多列選取，請使用 disableMultipleRowSelection={true}。

停用點擊時的列選取

您可能在儲存格中有互動式內容，並且需要停用點擊時的列選取。在這種情況下，請使用 disableRowSelectionOnClick 屬性。

停用特定列的選取

使用 isRowSelectable 屬性來指示列是否可以被選取。它會使用 GridRowParams 物件呼叫，並且應該傳回布林值。如果未指定，則所有列都可選取。

在下面的示範中，只有數量超過 50,000 的列可以被選取

篩選後的列選取

預設情況下，當列被篩選時，不符合篩選條件的列的選取會被清除。若要即使在這些列不可見時仍保持選取狀態，請設定 keepNonExistentRowsSelected 屬性。

受控列選取

使用 rowSelectionModel 屬性來控制選取。每次此屬性變更時，都會使用新的選取值呼叫 onRowSelectionModelChange 回呼。

核取方塊選取

若要啟用核取方塊選取，請設定 checkboxSelection={true}。

自訂核取方塊欄

如果您使用 GRID_CHECKBOX_SELECTION_FIELD 欄位為資料格提供自訂核取方塊欄，則資料格將不會新增自己的核取方塊欄。

我們強烈建議您使用 GRID_CHECKBOX_SELECTION_COL_DEF 變數，而不是重新定義所有自訂屬性。

在下面的示範中，核取方塊欄已移至右側，並且其寬度已增加至 100 像素。

自訂不確定狀態核取方塊行為

當在不確定狀態下點擊父核取方塊 (例如「全選」核取方塊) 時，將會取消選取已選取的列。您可以使用 indeterminateCheckboxAction 屬性來自訂此行為。

可見列選取

預設情況下，當您點擊「全選」核取方塊時，資料格中的所有列都會被選取。如果您想要變更此行為，並且僅選取目前在頁面上可見的列，則可以使用 checkboxSelectionVisibleOnly 屬性。

搭配伺服器端分頁使用

將受控選取與 paginationMode="server" 搭配使用可能會導致在頁面變更時遺失選取的列。發生這種情況的原因是資料格會與 rows 屬性交叉檢查，並且僅使用現有的列 ID 呼叫 onRowSelectionModelChange。根據您的伺服器端實作，當頁面變更且 rows 屬性的新值不包含先前選取的列時，資料格將會使用空值呼叫 onRowSelectionModelChange。若要防止這種情況發生，請啟用 keepNonExistentRowsSelected 屬性，即使列不存在也保持選取狀態。

<DataGrid keepNonExistentRowsSelected />

透過使用此方法，點擊「全選」核取方塊可能仍會保留某些列處於選取狀態。清理選取模型取決於您，請使用 rowSelectionModel 屬性。以下示範展示了此屬性的實際運作方式

apiRef

資料格公開了一組方法，可使用命令式 apiRef 啟用所有這些功能。若要瞭解更多關於如何使用它的資訊，請查看 API 物件 章節。

API

• DataGrid
• DataGridPro
• DataGridPremium