[DataGrid] [Material] Issue with DetailRowTemplate in Editable DataGrid

[MitchellNZ]

Describe the bug
I'm using Material Design UI and I have setup an editable DataGrid that also has a DetailRowTemplate.

The issue I get is that when the row is selected and the DetailRowTemplate is added, an extra empty is being added.
The backing control for this (_DataGridDetailRow.razor) has the following code which is causing me a problem:

if ( location == "end" && ParentDataGrid.Editable ) { <TableRowCell> </TableRowCell> }

This seemed to work fine when I was using Bootstrap, but now I'm using Material, it is causing the whole table to be push inwards (please see screenshots below).

To Reproduce
Steps to reproduce the behavior:

1. Use Material Design
2. Create an editable DataGrid with a DetailRowTemplate
3. Select a row to expand the data grid detail row
4. See the issue

Expected behavior
I think this was added to make Bootstrap look as intended, but it seems to be breaking Material.

Screenshots
Before selection:

After selection:

[stsrki]

Hi @MitchellNZ, sorry for not answering before. It seems this is a bug indeed.

In the meantime you can try to use an updated version of material from https://github.com/djibe/material. The guy who maintain it is almost done but I think it's already safe to use.

[MitchellNZ]

@stsrki No worries.

Thanks for the workaround suggestion.
However, I tried importing the CSS from that library and it makes my UI look very different to the official Daemonite material library.
Is this going to be what you use in the next release?

Also, it doesn't fix the issue, unfortunately!
But I'm in no rush for a workaround.

Edit:
After further reading I see this is actually an updated version of Material, which explains the change in look!

[stsrki]

Yes I plan to use this one after it's finished. Unfortunately the original Daemonite material is not actively maintained and as far as I know there is no better alternative.