How to Remove the "..." (Kebab Menu) and Upward Arrow Menu from the DataGrid Header

Introduction

This explains how to remove the "..." (Kebab Menu) and the upward arrow menu from the DataGrid header.
This "..." icon is commonly referred to as the Kebab Menu.

Environment

• @mui/x-data-grid: 6.19.4

Method

By setting the following:

• disableColumnMenu to true
• sortable to false

you can remove clickable elements such as the kebab menu and the sort icon.

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

References

• DataGrid API - disableColumnMenu