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 - disableColumnMenu