How can I add custom attribute to MUI DataGrid Column Header?

I need to add data-test attribute to column header for automated testing of different operations, such as sorting, filtering etc., so that scripts could find where to click.

How it can be done? I would like to keep all the functionality of default headers, just add the attribute.

Thanks!

You can use the renderHeader and pass the attributes you want like below:

        columns={[
          {
            field: "name",
            renderHeader: (params) => (
              <span data-testid="header-test-id"> // Here pass your data-testid
                {"Header with attr "}
              </span>
            )
          }
        ]}