Headers

Customize Headers using headerOptions

In the ColumnOptions interface, the below properties are available to customize the header.

• headerText
• headerOptions

Below is the list of properties available in the HeaderOptions interface.

export interface HeaderOptions {
  columnGroupText?: string;
  columnGroupTooltip?: string;
  columnGroupLabelFunction?: (column: ColumnOptions) => string;
  columnGroupRenderer?: (props: RendererProps) => unknown;
  headerRenderer?: (props: RendererProps) => unknown;
  headerTooltip?: string;
  headerLabelFunction?: (column: ColumnOptions) => string;
}

The documentation for the above properties can be found here

Additionally, you can also customize the header row height using the headerRowHeight property in the GridOptions interface. The documentation for the above property can be found here

The headerTooltop property can be used to add a tooltip to the header. The headerLabelFunction property can be used to customize the header text in scenarios where the header text needs to be customized based on the column definition. The headerRenderer property can be used to render a custom component in the header. The below example shows a custom component being rendered in the header. These are all demonstrated in the below example.

Live Editor

function App (){ const columns = [ { ...createColumn("employeeId", "string", "Id"), headerText: "ID with tooltip", headerOptions: { headerTooltip: "This is a long description of the ID column", }, }, { ...createColumn("firstName", "string", "First Name"), headerOptions: { headerRenderer: ({node}) => <div><i>{node.columnPosition.column.headerText}</i></div>, }, }, { ...createColumn("lastName", "string", "Last Name"), headerOptions: { headerLabelFunction: (column) => `Custom header label function: ${column.headerText}`, } }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns }} /> ); }

function App  (){
  const columns = [
    {
      ...createColumn("employeeId", "string", "Id"),
      headerText: "ID with tooltip",
      headerOptions: {
        headerTooltip: "This is a long description of the ID column",
      },
    },
    {
      ...createColumn("firstName", "string", "First Name"),
      headerOptions: {
        headerRenderer: ({node}) => <div><i>{node.columnPosition.column.headerText}</i></div>,
      },
    },
      {
      ...createColumn("lastName", "string", "Last Name"),
      headerOptions: {
        headerLabelFunction: (column) => `Custom header label function: ${column.headerText}`,
      }
    },
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns
      }}
    />
  );
}

Result

Loading...

Specifying the headerTooltip renders a small tooltip icon in the header. On hovering over the tooltip icon, the tooltip is displayed. This icon can be customized using css as shown below.

.ezgrid-dg-info-cell::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="7" fill="gray" /><text x="8" y="13" text-anchor="middle" fill="white">i</text></svg>');
    color: #333;
    margin-right: 3px;
    margin-top: 3px;
}

In the above example, the tooltip icon is replaced with a circle with the letter 'i' in it. You can use any svg icon in place of the circle. We recommend having a separate css file that is imported after the grid css file. This will ensure that the css rules are applied after the default css rules.

Grouping Headers

For grids that have grouping enabled, the headerOptions can be used to customize the group header as well.

The grouping mechanism works by defining a children property in the column definition. The children property is an array of ColumnOptions. The children property can be nested to create a hierarchy of columns. The below example shows a grid with 4 columns, where the last column is a group header with 4 children columns.

Live Editor

function App(){ const columns = [ { ...createColumn("address.street1", "string", "Line 1"), headerOptions: { columnGroupText: "Address"}, children: [ {...createColumn("address.city", "string", "City")}, {...createColumn("address.state", "string", "State")}, {...createColumn("address.country", "string", "Country")}, ], }, createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App(){
  const columns = [
    {
      ...createColumn("address.street1", "string", "Line 1"),
      headerOptions: { columnGroupText: "Address"},
      children: [
        {...createColumn("address.city", "string", "City")},
        {...createColumn("address.state", "string", "State")},
        {...createColumn("address.country", "string", "Country")},
      ],
    },
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

In the above example, the group header is customized using the columnGroupText property. The group header can also be customized using the columnGroupRenderer property. The columnGroupRenderer property can be used to render a custom component in the group header.

Live Editor

function App(){ const columns = [ { ...createColumn("address.street1", "string", "Line 1"), headerOptions: { columnGroupRenderer: ({node}) => <div><i>{node.columnPosition.column.headerText}</i></div>, }, children: [ {...createColumn("address.city", "string", "City")}, {...createColumn("address.state", "string", "State")}, {...createColumn("address.country", "string", "Country")}, ], }, createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App(){
  const columns = [
    {
      ...createColumn("address.street1", "string", "Line 1"),
      headerOptions: {
        columnGroupRenderer: ({node}) => <div><i>{node.columnPosition.column.headerText}</i></div>,
      },
      children: [
        {...createColumn("address.city", "string", "City")},
        {...createColumn("address.state", "string", "State")},
        {...createColumn("address.country", "string", "Country")},
      ],
    },
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

The above example shows a custom component being rendered in the group header. Finally, the columnGroupLabelFunction property can be used to customize the group header text in scenarios where the group header text needs to be customized based on the column definition.

Live Editor

function App(){ const columns = [ { ...createColumn("address.street1", "string", "Line 1"), headerOptions: { columnGroupLabelFunction: (column) => `Custom group header label function: ${column.headerText}`, }, children: [ {...createColumn("address.city", "string", "City")}, {...createColumn("address.state", "string", "State")}, {...createColumn("address.country", "string", "Country")}, ], }, createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App(){
  const columns = [
    {
      ...createColumn("address.street1", "string", "Line 1"),
      headerOptions: {
        columnGroupLabelFunction: (column) => `Custom group header label function: ${column.headerText}`,
      },
      children: [
        {...createColumn("address.city", "string", "City")},
        {...createColumn("address.state", "string", "State")},
        {...createColumn("address.country", "string", "Country")},
      ],
    },
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

See it in action

There is an example of complex header renderers here

Finally, just like all other cells, header cells can be customized using cellStyleFunction and rowStyleFunction. The below example shows a grid with a custom header style.

Live Editor

function App(){ const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), { ...createColumn("address.street1", "string", "Line 1"), headerOptions: { columnGroupLabelFunction: (column) => `Custom group header label function: ${column.headerText}`, }, children: [ {...createColumn("address.city", "string", "City")}, {...createColumn("address.state", "string", "State")}, {...createColumn("address.country", "string", "Country")}, ], }, ]; return <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId" }, columns, cellStyleFunction: (node/*:VirtualTreeNode*/) => { //style the header, footer, filter, and group headers outside the body if ((node.rowPosition && (node.rowPosition.uniqueIdentifier === RowType.Header || node.rowPosition.uniqueIdentifier === RowType.Footer || node.rowPosition.uniqueIdentifier === RowType.Filter)) || (node.classNames.indexOf("group-header-cell") || 0) > 0) { return { background: "#6666FF" }; } }, }}> </ReactDataGrid> }

function App(){
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    {
      ...createColumn("address.street1", "string", "Line 1"),
      headerOptions: {
        columnGroupLabelFunction: (column) => `Custom group header label function: ${column.headerText}`,
      },
      children: [
        {...createColumn("address.city", "string", "City")},
        {...createColumn("address.state", "string", "State")},
        {...createColumn("address.country", "string", "Country")},
      ],
    },
  ];
  return <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
            useField: "employeeId"
        },
        columns,
        cellStyleFunction: (node/*:VirtualTreeNode*/) => {
            //style the header, footer, filter, and group headers outside the body
            if ((node.rowPosition && (node.rowPosition.uniqueIdentifier ===  RowType.Header
                || node.rowPosition.uniqueIdentifier ===  RowType.Footer
                || node.rowPosition.uniqueIdentifier ===  RowType.Filter))
                || (node.classNames.indexOf("group-header-cell") || 0) > 0) {
                return { background: "#6666FF" };
            }
        },
    }}>
  </ReactDataGrid>
  }

Result

Loading...

Additional Examples

There is an example of complex cell formatting here and here

Finally, you can always customize the grid using css. You can use the css classes to customize the grid. The css classes are listed below.

.ezgrid-dg-body-group-header,
.ezgrid-dg-left-locked-body-group-header,
.ezgrid-dg-right-locked-body-group-header {
    background-color: #f5f5f5;
    height: 100%;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    font-weight: 500;
    justify-content: flex-start;
    padding-left: 10px;
    gap: 5px;
}

.ezgrid-dg-header-cell {
    white-space: normal;
    padding: 0 10px
}

.ezgrid-dg-header .ezgrid-dg-row,
.ezgrid-dg-left-locked-header .ezgrid-dg-row,
.ezgrid-dg-right-locked-header .ezgrid-dg-row {
    border-top: 1px solid #ccc
}

The four corners of the header cells are used to render triggers for the following actions.

• Top left corner: Sort. This is enabled by default. To disable it, set the enableSort property of the column to false.
• Top right corner: Move. This is enabled by default. To disable it, set the enableMove property of the column to false.
• Bottom left corner: Column Menu. This is enabled by default. To disable it, set the enableColumnMenu property of the column to false.
• Bottom right corner: Resize column. This is enabled by default. To disable it, set the enableResize property of the column to false.

The above actions can be customized using the following css classes.

.ezgrid-dg-header-sort-asc,
.ezgrid-dg-header-sort-desc {
    border: solid 5px transparent;
    margin-left: 2px
}

.ezgrid-dg-header-sort-asc {
    border-bottom: solid 8px #999;
    border-top-width: 0
}

.ezgrid-dg-header-sort-desc {
    border-top: solid 9px #999;
    border-bottom-width: 0
}

.ezgrid-dg-header-sort-index {
    padding-left: 1px;
    font-size: smaller
}

.ezgrid-dg-header-multi-sort {
    cursor: pointer
}

.ezgrid-dg-header-multi-sort::after {
    content: "▲";
    position: absolute;
    font-size: x-small;
    color: #ccc;
    top: 2px;
    cursor: pointer;
    left: 5px
}

.ezgrid-dg-header-drag {
    cursor: move
}

.ezgrid-dg-header-drag::after {
    content: "✥";
    font-size: larger;
    position: absolute;
    color: #ccc;
    top: 0;
    cursor: move;
    right: 5px
}

.ezgrid-dg-header-resize {
    cursor: col-resize
}

.ezgrid-dg-header-resize::after {
    content: "↔";
    position: absolute;
    color: #ccc;
    bottom: 0;
    cursor: col-resize;
    right: 7px
}

.ezgrid-dg-header-hamburger {
    width: 20px;
    height: 20px;
    background-image: radial-gradient(circle, #ccc 2px, transparent 2px);
    background-size: 100% 33.33%;
    position: absolute;
    left: 3px;
    bottom: -3px;
    transform: rotate(90deg);
    cursor: pointer
}

As mentioned earlier, please make your css customizations in a separate css file and import it in your application after the grid css. This will ensure that your customizations are not overwritten when you upgrade to a newer version of the grid.