Add a display table column when a condition is met

Question

So I have a SQL Server database that stores product information. One of the columns in my products table is DateRetired. The user can search in the front-end for a product via its name and this automatically returns any product matching the searched item which is currently being sold (not retired). The table produced when it is populated does not contain DateRetired column. However when a checkbox is clicked then the user can search an item in the retired products. In this case I would like a new column to be added to the displayed table which will display the retired date. Is this possible?

This is what I have:

@if (foundProducts.Count == 0)
{
    <p><em>Loading...</em></p>
}
else
{
<table class="table table-striped">
    <thead>     
        <tr>  
            <th scope="col">Name</th>
            <th scope="col">Description</th>
            <th scope="col">Additional Information</th>
            <th scope="col">Price</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var system in foundProducts)
    {
        <tr>
            <td>@product.SystemName</td>
            <td>@product.SystemDescription</td>
            <td>@product.AdditionalInformation</td>
            <td>@product.Price</td>


            @if (product.DateRetired != null)
            {
                <thead>     
                <tr>
                <th scope="col">DateRetired</th>
                </tr>
                </thead>
             
                <td>@product.DateRetired</td>     
            }
          
        </tr>
    }
    </tbody>       
</table>

Answer 1

I believe you can achieve what you want if you make two changes to your current code:

1. The show/hide condition. You claim that when a checkbox is clicked then the user can search an item in the retired products. This suggests that the show/hide condition relies on the state of that checkbox.
2. The placement of the header element. If I am not mistaken, you want to show a column for Date Retired in the same table that you already have. If that is the case, you will need to conditionally display the header element (<th>) inside the already existing <thead> element.

If your checkbox is bound to a field named displayDateRetiredColumn, you should be able to display the header element (<th>) and the data element (<td>) conditionally as follows:

<table>
    <thead>     
        <tr>  
            <th scope="col">Name</th>
            <th scope="col">Description</th>
            <th scope="col">Additional Information</th>
            <th scope="col">Price</th>

            @if (displayDateRetiredColumn)
            {
                <th scope="col">Date Retired</th>
            }

        </tr>
    </thead>
    <tbody>
    @foreach (var system in foundProducts)
    {
        <tr>
            <td>@product.SystemName</td>
            <td>@product.SystemDescription</td>
            <td>@product.AdditionalInformation</td>
            <td>@product.Price</td>

            @if (displayDateRetiredColumn)
            {
                <td>@product.DateRetired</td>
            }

        </tr>
    }
    </tbody>       
</table>