mui-datatables hide column headers

Question

Using the materialui-datatables package, is there a way to toggle the column headers? I see examples for overriding the custom styling but can't find an option in the site api.

Examples are here in a sandbox.

My current table looks like this:

const columns = [
        {
            name: "Question",
            label: "",
            options: {
                someOptionToToggle: true
            },
        }, 
        {
            name: "Answer",
            label: ""        
        }
    ]; 
 const options = {
        filter: false,
        responsive: "scroll",
        download: false,
        sort: false,
        selectableRows: false,
        print: false,
        viewColumns: false,
        searchOpen: true,
        searchText: searchText,
        search: false,
        customSearchRender: () => null
    }; 
<MUIDataTable
      title={""}
      data={faqData}
      columns={columns}
      options={options}
/>

It would seem that the option label option would provide this if set to blank, but the header name remains. I've tried various other attributes in the column options, is this possible?

Answer 1

As of now, with latest MUI version you can make use of the slots/slotsProps to customize the DataGrid.

The component/componentProps is now deprecated.

More information: https://mui.com/x/react-data-grid/components/#overriding-components

The slots props allows you to customize the column header where you can return null to hide it.

Example:

<DataGrid
  slots={{
    columnHeaders: () => null,
  }}
/>

Answer 2

Use columnHeaderHeight https://mui.com/x/api/data-grid/data-grid/#DataGrid-prop-columnHeaderHeight

Example:

<DataGridPro
  columnHeaderHeight={0}