FluentDataGrid with Dynamic Columns and resizing

[NickHirras]

I'm building a page with dynamic columns. My original design (with static columns) had resizable columns on the table, which worked great. However, introducing dynamic columns introduces rendering bugs. (I get stray / weird content rendered as the columns are resized or toggled on/off. Or the resizing gets in a weird state and stops working).

I have disabled the resizable columns, but I'm left with a table who's columns stay in their previously rendered size when I'm hiding columns.

Is there any way to trigger the DataGrid to recalculate column widths after I show/hide columns?

My default view:

After hiding some columns (notice the first overflowing column is still too small to show all contents)

Basically I would like to trigger some re-render so the table displays with the now-visible columns consuming the full available table width.

[NickHirras]

I might have a workable solution. Not for the resizable columns scenario, but for fixed columns.

I created a Dictionary mapping a ColumnName -> an object containing a Width string, and Visible boolean.

  private class ColumnDefinition
  {
    public ColumnDefinition(string width, bool visible)
    {
      Width = width;
      Visible = visible;
    }

    public string Width = "1fr";
    public bool Visible = true;
  }

  private IDictionary<string, ColumnDefinition> ColumnVisibility { get; } = new Dictionary<string, ColumnDefinition>
  {
    { "DisputeCaseId", new ColumnDefinition("2fr", true) },
    { "DisputeSource", new ColumnDefinition("0.8fr", true) },
    { "CaseCreatedDate", new ColumnDefinition("1fr", true) },
    { "ClientName", new ColumnDefinition("0.8fr", true) },
    { "MerchantName", new ColumnDefinition("1fr", false) },
    { "DisputedAmount", new ColumnDefinition("1fr", true) },
    { "CardLastFour", new ColumnDefinition("0.5fr", true) },
    { "CardBrand", new ColumnDefinition("1fr", true) },
    { "ReferenceNumber", new ColumnDefinition("1.2fr", true) },
    { "EncompassCompanyNumber", new ColumnDefinition("1fr", false) },
    { "LastEvent", new ColumnDefinition("1fr", true) }
  };

Then I've pointed GridTemplateColumns to an accessor that returns a string containing the width definitions of the "visible" columns. (It will return something like "1fr 0.8fr 1fr 0.5fr 1fr 1fr"... for example).

private string DisputeCaseGridTemplateColumns => string.Join(" ", ColumnVisibility.Where(x => x.Value.Visible).Select(x => x.Value.Width));

This way, whenever I check/uncheck a column, the table re-renders and uses the correct set of widths for the GridTemplateColumns. So far seems to work great.

I would like to be able to use Resizable columns here though, if anyone can suggest a fix for that.

[Trapulo]

I have a very simple use case with similar problem.
Basically a FluentDataGrid with some columns. When I select a row, I hide all columns but one (basically it is a master-child pattern). The problem is that the resulting grid has the resulting column not 100% large, and the grid is reserving space for hidden columns.

I solved with this workaround

<PropertyColumn Title="Nome" Property="@(c => c!.Name)"  Width="@((SelectedItem != null) ? "100%" : "")">

but this may be fixed better...