Hide some columns on mobile with Blazorise DataGrid

Question

What is a proper syntax for hiding certain columns on small screens?

I tried using:

HeaderCellClass="d-none d-sm-block"
CellClass="@((_) => "d-none d-sm-block")"

which seemed to work BUT it resutled in some buggy UI

as you can see, columns Ident and Main Author have some kind of "ghost border line"

Answer 1

I was able to do this using a combination of the BlazorSize library and the Blazorise Displayable column attribute:

<DataGridColumn TItem="Year" Field="@nameof(Year.YearDesc)" Displayable="@IsMediumUpMedia" Caption="Year"></DataGridColumn>

Where 'IsMediumUpMedia' is one of the variables available that is true on medium or higher view ports.

Answer 2

Try instead "d-sm-block" -> "d-sm-table-cell"