CODEWITHSUNDEEP
reactjsmaterial-ui
JWiley
JWiley

Reputation: 3209

mui-datatables hide column headers

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?

Upvotes: 9

Views: 18274

Answers (7)

Kyle The Wizard
Kyle The Wizard

Reputation: 704

If also using a noRowsOverlay

You must use a combination of the previous answers...

I use the empty rows template to display an icon when the grid is empty...if you only put columnHeader => null in the slots this displaces the icon so I also had to remove column header AND height:

        <DataGrid
            ...
            columnHeaderHeight={0}
            slots={{ columnHeaders: () => null }}
        />

Upvotes: 0

F&#225;bio Miranda
F&#225;bio Miranda

Reputation: 546

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

Example:

<DataGridPro
  columnHeaderHeight={0}

Upvotes: 4

Gimnath
Gimnath

Reputation: 1070

Alternatively you can set columnHeaderHeight to 0

Upvotes: 0

lehanh
lehanh

Reputation: 585

in latest version 5.17.9

<DataGrid
   components={{
     Header: () => null,
   }}
/>

Upvotes: 1

Ashish Yadav
Ashish Yadav

Reputation: 2008

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,
  }}
/>

Upvotes: 11

raphox
raphox

Reputation: 119

MUI Version 5.2.3

import { DataGrid as MuiDataGrid } from "@mui/x-data-grid";

const DataGrid = styled(MuiDataGrid)(({ theme }) => ({
  "& .MuiDataGrid-columnHeaders": { display: "none" },
  "& .MuiDataGrid-virtualScroller": { marginTop: "0!important" },
}));

export default function DataTable() {
  return (
    <div style={{ width: "100%" }}>
      <DataGrid autoHeight rows={rows} columns={columns} />
    </div>
  );

Upvotes: 2

Nadia Chibrikova
Nadia Chibrikova

Reputation: 5036

customHeadRender function is used to customise header, to remove it entirely you can return null from it: options:{customHeadRender: ()=>null}

Upvotes: 2

Related Questions