Simple expandable table with Blazor

Question

I want to create a simple expandable table in Blazor WebAssembly. I added some HTML code like the following:


  
    
      #
      User
      Date
      Status
      Reason
    
  
  
    
      183
      John Doe
      11-7-2014
      Approved
      Lorem Ipsum is simply dummy text
    
    
      
        
          Lorem Ipsum is simply dummy text

The row with details is always collpased also if I click on it. Is there a simple way to implement it without using external component? If no, what component do you recommend?

An example of what I mean with "Expandable table" is here.

user_5000776 · Answer

With Bootstrap, the built in jQuery/JavaScript code is not going to work out-of-the-box like traditional MVC pages do.

If you want to expand/collapse rows, you've got two options with Blazor.

Invoke the Bootstrap jQuery/JavaScript by injecting IJSRuntime onto the page and calling InvokeAsync().
Write your own expand/collapse component and wrap each row in it - something like

// CollapsibleTableRow.


   @if(_show)
   {
       @ChildContent
   }



@code 
{
    [Parameter] public RenderFragment ChildContent { get; set; }
    private bool _show { get; set; } = false;
    
    private void Toggle()
    {
        _show = !_show;
    }
}

Use


         @foreach(var item in items)
         {
             
                 
         }
    
    @item.Thing
                 @item.Thing2

user_10787774 · Answer

I came up with a solution based on the default "WeatherForecast" that comes from the Blazor Server template. The basic idea is to put a flag in the model that is used to represent table data.

WeatherForecast.cs

public class WeatherForecast
{
    public DateTime Date { get; set; }

    public int TemperatureC { get; set; }

    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

    public string Summary { get; set; }

    //new fields added below
    public bool IsRowExpanded { get; set; } = false;

    public string ExpandableContent { get; set; } = "Lorem Ipsum";
}

FetchData.razor


        @foreach (var forecast in forecasts)
        {
            
            if (forecast.IsRowExpanded)
            {
                @forecast.ExpandableContent
            }
        }
    
    
        
            Date
            Temp. (C)
            Temp. (F)
            Summary
        
    
    
                @forecast.Date.ToShortDateString()
                @forecast.TemperatureC
                @forecast.TemperatureF
                @forecast.Summary

When you click on a row (for example the 2nd row) it will look like this:

user_3433178 · Answer

Updated answer. I added a little class to make it easier. The magic is in what I call a "state carrier variable," which lets you make the open state a property of the Person class instead of adding a separate list to track which rows are opened or not. It took some time to type it, so please remember to mark it "Answered" if you like it.

@page "/collapse"


        @foreach (Person person in People)
        {
            
            @if (person.opened)
            {
                
            }
        }
    
    
        
            #
            User
            Date
            Status
            Reason
        
    
    
                @person.id
                @person.name
                @person.birthday.ToString("dddd MMMM d, yyyy")
                @(person.approved ? "Approved" : "Denied")
                @person.reason
            

                    
                        
                            Lorem Ipsum is simply dummy text
                        
                    
                


@code {
    class Person
    {
        public int id;
        public string name;
        public DateTime birthday;
        public bool approved;
        public string info;
        public string reason;
        public bool opened;  // I call this a state carrier, because it's not really data.

        public Person(int ID, string Name, DateTime Birthday, bool Approved, string Reason) {
            id = ID; name = Name; birthday = Birthday; approved = Approved; reason = Reason;
        }
    }
    List People = new List();

    protected override void OnInitialized()
    {
        People.Add(new Person(183, "John Doe", new DateTime(2014, 7, 11), true, "Good worker."));
        People.Add(new Person(184, "Benjamin", new DateTime(1999, 9, 9), false, "Types too much."));
        People.Add(new Person(1, "Jesus", new DateTime(1, 1, 1), true, "Really nice guy."));
    }
}

user_14707519 · Answer

The pattern I've opted for in places where I've needed to do this is to use generics and wrap around the underlying datatype to add UI specific functionality.

The definition of the generic class looks like this.

public class ExpandableItem
{
    private readonly T _item;
    private bool _expanded;
    public ExpandableItem(T item)
    {
        _item = item;
    }

    public T Item { get => _item; }

    public bool IsExpanded{ get; set; }
}

The initialization then looks something like this:

List> People = new();

protected override void OnInitialized()
{
    People.Add(ExpandableItem(new Person(183, "John Doe", new DateTime(2014, 7, 11), true, "Good worker.")));
}

This results in the binding looking a little like this:

@foreach (ExpandableItem item in People)
{
    var person = item.Item;
    
        @person.id
        @person.name
    
    @if (item.IsExpanded)
    {
        
            
                Lorem Ipsum is simply dummy text
            
         
     }
}

Doing it this way was the best method I could come up with for ensuring the DTO objects coming down from an API endpoint stayed clean of UI state properties. I found it also ensured consistency between pages, because the requirement to have selectable / expandable rows is common across a number of underlying types.

user_18729267 · Answer


    



   
      
   


private void ToggleDetails(string eventId)
{
   if (_eventIds.Contains(eventId))
      _eventIds.Remove(eventId);
   else
     _eventIds.Add(eventId);
}

Simple expandable table with Blazor

5 Answers