Material-table: Drag headers here to group by feature shows blank titles when the column is in render mode

[hamdi-islam]

Describe the bug
"Drag headers here to group by feature" doesn't work properly when the column is in render mode, the titles appear blank.

To Reproduce

{
            title: "Début",
            field: "global_mission_start",
            defaultSort: "desc",
            cellStyle: {
              width: 150,
              maxWidth: 150
            },
            render: rowData =>
              rowData.global_mission_start &&
              rowData.global_mission_start.split("T")[0]
          },
          {
            title: "Fin",
            field: "global_mission_deadline",
            defaultSort: "desc",
            cellStyle: {
              width: 150,
              maxWidth: 150
            },
            render: rowData =>
              rowData.global_mission_deadline
                ? rowData.global_mission_deadline.split("T")[0]
                : ""
          },
{
            title: "Visiteur",
            field: "agent.lastname",
            cellStyle: {
              width: 300,
              maxWidth: 300
            },
            render: rowData => (
              <div>
                <img
                  src={require("../../assets/images/users/client.png")}
                  alt="contact-img"
                  height={36}
                  title="contact-img"
                  className="rounded-circle float-left mr-2"
                />
                <p className="mb-0 font-weight-bold">
                  {rowData.agent && (
                    <Link
                      to={{
                        pathname: `/agents/${
                          rowData.agent ? rowData.agent.username : rowData
                        }`,
                        state: { agent: rowData.agent }
                      }}
                    >
                      {rowData.agent
                        ? rowData.agent.lastname + " " + rowData.agent.firstname
                        : rowData}
                    </Link>
                  )}
                </p>
                <span className="font-13 d-none d-sm-block">
                  {rowData.agent && determineAgentColor(rowData.agent.network)}
                </span>
              </div>
            )
          }

Expected behavior
The title of each group is blanked out

Screenshots
before dragging the header

after dragging the header

Desktop (please complete the following information):

• OS: MAC OS Mojave 10.14.5
• Browser Chrome
• Version 75.0.3770.142 (Official Build) (64-bit)

[victor-accarini]

This is a weird behavior described in #466 and fixed in #872.

When grouping values the render function no longer receives rowData, just the field value agent.lastname

[ammartinwala52]

Also want to add to this bug. If a column value is an empty string and you used it for grouping along with the render function. The code breaks. Please look into this as well.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.