數據網格 - 儲存格選取
讓使用者選取個別儲存格或儲存格範圍。
啟用儲存格選取
預設情況下，「數據網格」讓使用者選取個別列。使用 Data Grid Premium，您可以套用 cellSelection 屬性，讓使用者選取個別儲存格或儲存格範圍。
<DataGridPremium cellSelection />
選取儲存格
套用 cellSelection 屬性後，使用者可以點擊儲存格來選取單一儲存格，或是在儲存格處於焦點時按下 Shift+Space。按住 Cmd 鍵 (或 Windows 上的 Ctrl 鍵) 並點擊儲存格，即可選取多個儲存格。按住 Cmd 鍵 (或 Windows 上的 Ctrl 鍵) 並點擊已選取的儲存格，即可取消選取。
若要選取儲存格範圍，使用者可以
- 點擊儲存格，將滑鼠拖曳到附近的儲存格上，然後放開。
- 點擊一個儲存格，然後按住 Shift 鍵並點擊另一個儲存格。如果點擊第三個儲存格，則選取範圍將從最後點擊的儲存格重新開始。
- 使用方向鍵將焦點放在儲存格上，然後按住 Shift 鍵並導航到另一個儲存格—如果放開 Shift 鍵並再次按下，則選取範圍將從最後聚焦的儲存格重新開始。
試試看以下示範中選取儲存格的各種操作—您可以切換列選取功能的開關，看看這兩個選取功能如何並行運作。
按下 Enter 鍵開始編輯
控制儲存格選取
您可以使用 cellSelectionModel 屬性來控制選取哪些儲存格。此屬性接受一個物件，其鍵對應於包含選取儲存格的列 ID。每個鍵的值本身也是一個物件，該物件具有作為鍵的欄位和作為其選取狀態的布林值。您可以將其設定為 true 以選取儲存格，或設定為 false 以取消選取。從物件中移除欄位也會取消選取儲存格。
// Selects the cell with field=name from row with id=1
<DataGridPremium cellSelectionModel={{ 1: { name: true } }} />
// Unselects the cell with field=name from row with id=1
<DataGridPremium cellSelectionModel={{ 1: { name: false } }} />
建立新的選取範圍時，會使用更新的模型呼叫傳遞給 onCellSelectionModelChange 屬性的回呼。使用此值來更新目前的模型。
以下示範顯示如何組合這些屬性來建立類似 Excel 的公式欄位—嘗試一次更新多個儲存格，方法是選取它們並在頂端的欄位中輸入新值。
自訂範圍樣式
當多個選取的儲存格形成任何大小的連續範圍時，以下類別名稱會套用至範圍邊緣的儲存格
MuiDataGrid-cell--rangeTop：套用至範圍第一列中的所有儲存格MuiDataGrid-cell--rangeBottom：套用至範圍最後一列中的所有儲存格MuiDataGrid-cell--rangeLeft：套用至範圍第一欄中的所有儲存格MuiDataGrid-cell--rangeRight：套用至範圍最後一欄中的所有儲存格
您可以使用這些類別來建立 CSS 選取器，以鎖定每個範圍的特定角落—例如，以下示範在範圍外圍新增了邊框。
按下 Enter 鍵開始編輯
簽章
getCellSelectionModel: () => GridCellSelectionModel簽章
getSelectedCellsAsArray: () => GridCellCoordinates[]簽章
selectCellRange: (start: GridCellCoordinates, end: GridCellCoordinates, keepOtherSelected?: boolean) => void