Blazorize Material DataGrid: Vertical grid lines are not visible. And also tell me how to left align DataGrid Caption/Column Header

[shakeeluetian]

a) How to show DataGrid vertical Bordered/Grid lines although I have made Bordered="true"
<DataGrid TItem="CompanyModel" Class="my-data-grid" Data="@companies" ShowPager="true" Editable="true" EditMode="DataGridEditMode.Popup" Striped="true" FixedHeader="false" CustomFilter="@OnCustomFilter" Style="font-size: 0.85rem;padding:0px;" Bordered="true" Responsive="true" Narrow="true" PageSize="10">

b) How to align DataGrid Column Heading/Caption
i have used HeaderTextAlignment="TextAlignment.Left" in <DataGridColumn> but not aligned

[stsrki]

That is the expected behavior for tables in both Material and Bootstrap. When Responsive="true" (class="table-responsive") is applied it will remove vertical borders. My guess is it's because in the responsive mode you would scroll horizontally and it should look weird with the borders. You can see the exact same appearance on their own documentation:

• https://getbootstrap.com/docs/4.6/content/tables/#responsive-tables
• https://djibe.github.io/material/docs/4.6/content/tables/#responsive-tables

[shakeeluetian]

[shakeeluetian]

I am using DataGrid and for grid lines CSS is border: 0.01px solid lightgray'

[shakeeluetian]

But then why Header is not Left aligned??
<DataGridColumn HeaderTextAlignment="TextAlignment.Left" Width="23%" TItem="CompanyModel" Field="@nameof(CompanyModel.CompanyID)" Caption="Company" Editable="true" Sortable="true" />

[shakeeluetian]

.my-data-grid tr td {
padding: 0.1rem; //This was the culprit. Thanks
border: 0.01px solid lightgray;
}

[shakeeluetian]

Thanks a lot @stsrki for prompt response