[Bug]: Datagrid Width of columns is not working

[danik121]

Blazorise Version

1.5.1

What Blazorise provider are you running on?

FluentUI2

Link to minimal reproduction or a simple code snippet

<DataGrid ShowPager ShowPageSizes TItem="ItemModel" Data="@Items" Filterable="true" Sortable="true" Responsive="true">
   <DataGridColumns>
     <DataGridColumn Width="10px" Field="@nameof(ItemModel.StartDate)" Caption="Date"></DataGridColumn>
     <DataGridColumn Width="10px" Field="@nameof(ItemModel.Note)" Caption="Note"></DataGridColumn>
   </DataGridColumns>
 </DataGrid>

Steps to reproduce

code example

What is expected?

Change to width of columns to specified value

What is actually happening?

the width of columns has not changed

What browsers do you see the problem on?

Chrome

Any additional comments?

No response

[mtbayley]

Also noticing this in my projects

[stsrki]

The Fluent design system has a full-width table, according to Microsoft specifications. Making all the columns have the same width.

Now, I can remove this limitation so that it fixes this "bug" and behaves the same as other CSS providers. The change is pretty simple: remove the width: 100% from the table element. But I'm unsure if I would change it now in the patch or make it an OptIn feature in the future 1.6 release.

Making it an opt-in also means that we would add the same feature to all other providers(Bootstrap, Bulma, etc).

@David-Moreira thoughts?

[David-Moreira]

I'd consider it as a bug, and just fix it to work as expected by Blazorise, unless this feature is actually something we want to consider for some reason.

Do you know specifically what the width: 100% accomplishes?

[stsrki]

Well, it fills the parent container with a full-width table.

With width: 100%

Without width: 100%

[David-Moreira]

Well, it fills the parent container with a full-width table.

With width: 100%

Without width: 100%

Well, I'd take a look at how we do it with the other providers in order to have both a full width table + defined column width as I think that's how Blazorise works currently across the providers?

[stsrki]

Agree.

[stsrki]

Actually, this might be working as expected. I looked up other frameworks, and they behave the same. They all populate the entire width, no matter the column's width. The column width triggers and is applied only when the responsive mode is active—that is when the screen is smaller, and the table shows the horizontal scrollbar.

[David-Moreira]

Now, I can remove this limitation so that it fixes this "bug" and behaves the same as other CSS providers.

So the following sentence is incorrect?

Now, I can remove this limitation so that it fixes this "bug" and behaves the same as other CSS providers.

We do ignore column width in all css providers, if the DataGrid is not responsive. In that case, it is working as expected.

Do you think the following improvement is worth it in anyway?

• If the DataGrid is not responsive
  • Still honor every column's width, and the remaining space will be occupied by columns with no defined width.
  • If the user defines column's width such that it will not fit all the space, then maybe let it be?

It seems like it would be complex without too much advantages, maybe the solution is to just use responsive when we want precisely defined column widths?

[stsrki]

I don't think it is as easy as we might think it is. We could invest some time and add introduce new API in the future version that would remove the width. We might also add some other styles that might help, eg. table-layout: fixed; might also be good in this case.

So, my proposal would be to introduce new API:

• Fixed

But I fear that the name is too similar to FixedColumns API that we already have. Which is used for making column fixed or stick in place.

[David-Moreira]

I don't think it is as easy as we might think it is.

I did not say that .... "It seems like it would be complex without too much advantages"

It does seem quite complex, again, with maybe not too much advantages, I'm not sure...

[stsrki]

It might be better to just document it and mention the limitations, reasons, and ways to make it work.