title: How to display data in a reusable Table component in Blazor
body: <p>I'm trying to create a reusable MasterTable component in Blazor.</p>
  <p>So far, I've defined the MasterTable as</p>
  <pre><code>@using AntDesign
  @using MyNamespace.Blazor.ViewModels
  
  @typeparam TItem
  
  &lt;Table TItem=&quot;TItem&quot; DataSource=&quot;@Data&quot;&gt;
      @{
          foreach (var col in Columns)
          {
              &lt;Column Title=&quot;@col.Label&quot; @bind-Field=&quot;@col.Key&quot; /&gt;
          }
      }
  &lt;/Table&gt;
  
  @code
  {
  
      private List&lt;TItem&gt; _data;
      [Parameter]
      public List&lt;TItem&gt; Data
      {
          get =&gt; _data;
          set =&gt; _data = value ?? new List&lt;TItem&gt;();
      }
  
      [Parameter]
      public TableColumnViewModel[] Columns { get; set; }
  }
  </code></pre>
  <p>where TableColumnViewModel is defined simply as</p>
  <pre><code>public class TableColumnViewModel
  {         
    public string Key { get; set; }
    public string Label { get; set; }
  }
  </code></pre>
  <p>I would like to create an instance of the MasterTable in a page for Daily Tasks but so far I'm only able to get it to display like this:</p>
  <p><a href="https://i.stack.imgur.com/2rcxZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2rcxZ.png" alt="enter image description here" /></a></p>
  <p>My attempt to implement MasterTable is as follows:</p>
  <pre><code>@page &quot;/Tasks/Daily&quot;;
  @using MyNamespace.Blazor.Services;
  @using MyNamespace.Blazor.ViewModels;
  @using MyNamespace.Api.Client.Model;
  
  @inject ITasksService _tasksService;
  
  &lt;h1&gt;Daily Tasks&lt;/h1&gt;
  
  &lt;MasterTable TItem=&quot;TaskStatus&quot; Data=&quot;_tasks&quot; Columns=&quot;cols&quot;&gt;
  &lt;/MasterTable&gt;
  
  @code {
      private List&lt;TaskStatus&gt; _tasks = new List&lt;TaskStatus&gt;();
      protected override async Task OnInitializedAsync()
      {
          _tasks = await _tasksService.GetTaskStatusAsync();
      }
      
      TableColumnViewModel[] cols = 
      {
          new TableColumnViewModel
          {
              Key = &quot;id&quot;,
              Label = &quot;ID&quot;
          },
          new TableColumnViewModel
          {
              Key = &quot;description&quot;,
              Label = &quot;ID&quot;
          },
          new c
          {
              Key = &quot;type&quot;,
              Label = &quot;Type&quot;
          }
      };
  }
  </code></pre>
  <p>With TaskStatus defined as</p>
  <pre><code>public class TaskStatus
  {
     
      public TaskStatus(int taskStatusId = default(int), string statusDescription = default(string))
      {
          this.TaskStatusId = taskStatusId;
          this.StatusDescription = statusDescription;
      }
     
      public int TaskStatusId { get; set; }  
      public string StatusDescription { get; set; }
  }
  </code></pre>
  <p>What do I need to do to get the MasterTable template to display the list of TaskStatus objects instead of the keys from TableColumnViewModel?</p>
  <p>To be clear - instead of just using the  component without wrapping it, the issue is that I want to isolate the CSS in the context of the 3rd party component, so that <em>only</em> the necessary CSS is loaded.</p>