'Mui Data Grid - How can I add a Summary row on each page of the grid as a last row which can scroll with other rows

I want to add a summary row to the MUI DataGrid component. I am getting the total from my API response. I want to display this summary row on each page of the grid. It should be the last row and should scroll with other rows.

Like the below screen shot: enter image description here

Is there any way to achieve this. Really struggling to get this feature. Thank you in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source