CODEWITHSUNDEEP
htmlhtml-tableblazor
Flippowitsch
Flippowitsch

Reputation: 545

How can I hide a column of a <table> if a condition is met?

I have a <table> with several rows and columns. I want to hide the last column, if a specific variable foo in the code behind is -1.
Therefore, I cannot use CSS and the :last-child because in CSS, I do not have access to foo.
I tried to style the last column of a <colgroup> with <col style="@(foo == -1d ? "visibility: collapse" : "")"> but that did not collapse the entire column but still showed super- and subscripts <sup> and sub.
Of course, I could replace

<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>

with

<tr>
    <td></td>
    <td></td>
    @if (foo != -1)
    {
        <td></td>
    }
</tr>

at every row but I hope, there is a cleaner way.

Upvotes: 0

Views: 2381

Answers (2)

T.Trassoudaine
T.Trassoudaine

Reputation: 1365

You can use the Blazor components for this:

MyLastColumn.razor

@if(Foo != -1){
  <td>@ChildContent</td>
}

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public int Foo { get; set; }
}

And then use it:

<MyLastColumn Foo="@foo">content</MyLastColumn>

Upvotes: 0

Peter B
Peter B

Reputation: 24147

You can use the @if (foo...) check to optionally define a CSS class. Make sure to use a class name that is unique given other CSS that may exist.

@if (foo == -1)
{
  <style type="text/css">
    .sometimesHidden { display: none; }
  </style>
}
...
<tr>
    <td>A</td>
    <td>B</td>
    <td class="sometimesHidden">X</td>
</tr>
<tr>
    <td>C</td>
    <td>D</td>
    <td class="sometimesHidden">Y</td>
</tr>

Note that this will always render the last <td> of every <tr>. You'll need to make sure that those cells (and specifically their content) do not cause errors when rendered.

Or you can use an inline style:

@{
  var tdStyle = foo == -1 ? "display: none;" : "";
}
...
<tr>
    <td>A</td>
    <td>B</td>
    <td style="@(tdStyle)">X</td>
</tr>
<tr>
    <td>C</td>
    <td>D</td>
    <td style="@(tdStyle)">Y</td>
</tr>

Upvotes: 3

Related Questions