DataGridのヘッダーから「…(テンテンテン)」や上矢印のメニューをなくす方法。

はじめに

DataGridのヘッダーから「…(テンテンテン)」や上矢印のメニューをなくす方法を記します。
このテンテンテンは、Kebab Menu (ケバブメニュー）と呼ぶそうです。

環境

@mui/x-data-grid”: “6.19.4”

方法

disableColumnMenuをtrueに、
sortableをfalseとすることで、上記、ケバブメニューやクリック要素を消せます。

const columns: GridColDef[] = [
 { 
  field: 'id',
  headerName: 'ID', 
  width: 70, 
  disableColumnMenu:true,
  sortable: false,
 }
]

参考文献

DataGrid API