title: how to make a table with multiple selection and generic, using Titem in blazor?
body: <p>I want to make a <code>table component</code>, using Titem that is reusable with multiple selection, I managed to do the multiple selection but I can't make the <code>component reusable</code>, any advice?
  I have a reusable table that I made by viewing this direct example from microsoft <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/components/templated-components?view=aspnetcore-5.0" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/aspnet/core/blazor/components/templated-components?view=aspnetcore-5.0</a>
  this is my code:</p>
  <pre><code>@page &quot;/multiple&quot;
  
  &lt;div class=&quot;table-responsive&quot;&gt;
  
      &lt;table class=&quot;table table-sm table-bordered table-hover&quot;&gt;
          &lt;thead class=&quot;thead-dark&quot;&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Age&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              @if (valueList != null)
              {
                  int count = valueList.Count;
                  for (var i = 0; i &lt; count; i++)
                  {
                      int current = i; // don't use loop variable in binding
                      var values = valueList[current];
  
                      &lt;tr class=&quot;@values.Class&quot; @onclick=&quot;((e) =&gt; SelectItems(current, true))&quot;&gt;
                          &lt;td&gt;@values.Name&lt;/td&gt;
                          &lt;td&gt;@values.Age&lt;/td&gt;
                      &lt;/tr&gt;
                  }
              }
          &lt;/tbody&gt;
          &lt;tfoot&gt;
  
          &lt;/tfoot&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-info&quot; @onclick=&quot;showSelected&quot;&gt;Click&lt;/button&gt;
  
  &lt;hr /&gt;
  @if (events != null)
  {
      &lt;ul&gt;
          @foreach (var evt in events)
          {
              &lt;li&gt;@evt&lt;/li&gt;
          }
      &lt;/ul&gt;
  }
  
  @code
  {
      //Declare various lists and classes.
      private List&lt;Value&gt; valueList;
      private List&lt;string&gt; events = new List&lt;string&gt;();
  
      class Value
      {
          public string Name { get; set; }
          public string Age { get; set; }
          public string Class { get; set; }
      }
  
      //OnInitialized function to instantiated the valueList.
      protected override void OnInitialized()
      {
          valueList = new List&lt;Value&gt;();
          valueList.Add(new Value()
          {
              Name = &quot;James&quot;,
              Age = &quot;38&quot;
          });
          valueList.Add(new Value()
          {
              Name = &quot;John&quot;,
              Age = &quot;32&quot;
          });
      }
  
      //Function to set selected class on tr. Can multi-select or single via Toggle bool.
      void SelectItems(int index, bool toggle)
      {
          var item = valueList[index];
  
          //If toggle then allow multiple to be selected. If class already selected then clear.
          if (toggle)
          {
              if (item.Class == &quot;selected&quot;)
              {
                  item.Class = &quot;&quot;;
              }
              else
              {
                  item.Class = &quot;selected&quot;;
              }
          }
          else
          {
              foreach (var value in valueList)
              {
                  value.Class = &quot;&quot;;
              }
              // set the value
              item.Class = &quot;selected&quot;;
          }
      }
  
      //Function to show the selected items.
      void showSelected()
      {
          events.Clear();
          foreach (var value in valueList)
          {
              if (value.Class.Contains(&quot;selected&quot;))
              {
                  events.Add($&quot;'{value.Name}' selected. With value: '{value.Age}'&quot;);
              };
          }
      }
  }
  </code></pre>
  <p>this table is already a reusable component how can I make it multiple selectable:</p>
  <pre><code> &lt;table class=&quot;@TableClass&quot;&gt;
          &lt;thead class=&quot;@TheadClass&quot;&gt;
              &lt;tr&gt;
                  @Cabecera
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              @foreach (var item in ItemList)
              {
                  &lt;tr&gt;@Filas(item)&lt;/tr&gt;
              }
          &lt;/tbody&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
                  @Pie
              &lt;/tr&gt;
          &lt;/tfoot&gt;
      &lt;/table&gt;
  
  @code{
  
    [Parameter] public string ClassTable { get; set; }
    [Parameter] public string ClassThead { get; set; }
    [Parameter] public RenderFragment Cabecera { get; set; }
    [Parameter] public RenderFragment Pie { get; set; }
    [Parameter] public RenderFragment&lt;TItem&gt; Filas { get; set; }
    [Parameter] public IEnumerable&lt;TItem&gt; Items { get; set; }      
    IEnumerable&lt;TItem&gt; ItemList { get; set; }
  
    protected override async Task OnInitializedAsync()
     {
        ItemList = Items;
     }
  }
  </code></pre>