Table Template
New

The NVTableTemplate component is used to display a list of structured information. Each line represent an item in the list, and a cell represent a property/piece of information of this item.

Responsive

Responsive define if the table need to get a vertical display when on small screen (<640px).

In order to accomplish the table heading for each line on small screen, we need to add on each cell a data-table-heading attributes.

TypeDefault Value
booleanfalse
Firstname Lastname Email ZipCode
John Smith john.smith@gmail.com 1000
Jean Moulin jean.moulin@gmail.com 1200
Bart Simpson bart.simpson@gmail.com 1180 
<NVTableTemplate Responsive TableItems="@_persons" Context="item">
  <NVTableHead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
    <th>ZipCode</th>
  </NVTableHead>
  <NVTableRow>
    <td data-table-heading="Firstname">@item.Firstname</td>
    <td data-table-heading="Lastname">@item.Lastname</td>
    <td data-table-heading="Email">@item.Email</td>
    <td data-table-heading="ZipCode">@item.ZipCode</td>
  </NVTableRow>
</NVTableTemplate>

...

@code {

  List<Person> _persons = new List<Person>
  {
    new Person {Firstname = "John", Lastname = "Smith", Email = "john.smith@gmail.com", ZipCode = "1000"},
    new Person {Firstname = "Jean", Lastname = "Moulin", Email = "jean.moulin@gmail.com", ZipCode = "1200"},
    new Person {Firstname = "Bart", Lastname = "Simpson", Email = "bart.simpson@gmail.com", ZipCode = "1180"},    
  };

  private class Person
  {
    public string Firstname { get; set; }
    public string Lastname { get; set; }
    public string Email { get; set; }
    public string ZipCode { get; set; }
  }

}

Striped

Striped define if the table need to display a alternate color for each line of the table.

TypeDefault Value
booleanfalse
Firstname Lastname Email ZipCode
John Smith john.smith@gmail.com 1000
Jean Moulin jean.moulin@gmail.com 1200
Bart Simpson bart.simpson@gmail.com 1180 
<NVTableTemplate Striped TableItems="@_persons" Context="item">
  <NVTableHead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
    <th>ZipCode</th>
  </NVTableHead>
  <NVTableRow>
    <td>@item.Firstname</td>
    <td>@item.Lastname</td>
    <td>@item.Email</td>
    <td>@item.ZipCode</td>
  </NVTableRow>
</NVTableTemplate>

...

@code {

  List<Person> _persons = new List<Person>
  {
    new Person {Firstname = "John", Lastname = "Smith", Email = "john.smith@gmail.com", ZipCode = "1000"},
    new Person {Firstname = "Jean", Lastname = "Moulin", Email = "jean.moulin@gmail.com", ZipCode = "1200"},
    new Person {Firstname = "Bart", Lastname = "Simpson", Email = "bart.simpson@gmail.com", ZipCode = "1180"},    
  };

  private class Person
  {
    public string Firstname { get; set; }
    public string Lastname { get; set; }
    public string Email { get; set; }
    public string ZipCode { get; set; }
  }

}

NVTableHead

RenderFragment used to put heading line and heading cell in the table.

TypeDefault Value
RenderFragmentnull
Firstname Lastname Email ZipCode 
<NVTableTemplate TableItems="@_persons" Context="item">
  <NVTableHead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
    <th>ZipCode</th>
  </NVTableHead>
</NVTableTemplate>

...

@code {

  List<Person> _persons = new List<Person>
  {
    new Person {Firstname = "John", Lastname = "Smith", Email = "john.smith@gmail.com", ZipCode = "1000"},
    new Person {Firstname = "Jean", Lastname = "Moulin", Email = "jean.moulin@gmail.com", ZipCode = "1200"},
    new Person {Firstname = "Bart", Lastname = "Simpson", Email = "bart.simpson@gmail.com", ZipCode = "1180"},    
  };

  private class Person
  {
    public string Firstname { get; set; }
    public string Lastname { get; set; }
    public string Email { get; set; }
    public string ZipCode { get; set; }
  }

}

TableItems

Data used for the row rendering.

TypeDefault Value
List<TItem>List<TItem> (mandatory)
Firstname Lastname Email ZipCode
John Smith john.smith@gmail.com 1000
Jean Moulin jean.moulin@gmail.com 1200
Bart Simpson bart.simpson@gmail.com 1180 
<NVTableTemplate Striped TableItems="@_persons" Context="item">
  <NVTableHead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      <th>ZipCode</th>
    </tr>
  </NVTableHead>
  <NVTableRow>
    <td>@item.Firstname</td>
    <td>@item.Lastname</td>
    <td>@item.Email</td>
    <td>@item.ZipCode</td>
  </NVTableRow>
</NVTableTemplate>

...

@code {

  List<Person> _persons = new List<Person>
  {
    new Person {Firstname = "John", Lastname = "Smith", Email = "john.smith@gmail.com", ZipCode = "1000"},
    new Person {Firstname = "Jean", Lastname = "Moulin", Email = "jean.moulin@gmail.com", ZipCode = "1200"},
    new Person {Firstname = "Bart", Lastname = "Simpson", Email = "bart.simpson@gmail.com", ZipCode = "1180"},    
  };

  private class Person
  {
    public string Firstname { get; set; }
    public string Lastname { get; set; }
    public string Email { get; set; }
    public string ZipCode { get; set; }
  }

}

NVTableRow

RenderFragment used to put body line and body cell in the table.

TypeDefault Value
RenderFragment<TItem>null
John Smith john.smith@gmail.com 1000
Jean Moulin jean.moulin@gmail.com 1200
Bart Simpson bart.simpson@gmail.com 1180 
<NVTableTemplate TableItems="@_persons" Context="item">
  <NVTableRow>
    <td>@item.Firstname</td>
    <td>@item.Lastname</td>
    <td>@item.Email</td>
    <td>@item.ZipCode</td>
  </NVTableRow>
</NVTableTemplate>

...

@code {

  List<Person> _persons = new List<Person>
  {
    new Person {Firstname = "John", Lastname = "Smith", Email = "john.smith@gmail.com", ZipCode = "1000"},
    new Person {Firstname = "Jean", Lastname = "Moulin", Email = "jean.moulin@gmail.com", ZipCode = "1200"},
    new Person {Firstname = "Bart", Lastname = "Simpson", Email = "bart.simpson@gmail.com", ZipCode = "1180"},    
  };

  private class Person
  {
    public string Firstname { get; set; }
    public string Lastname { get; set; }
    public string Email { get; set; }
    public string ZipCode { get; set; }
  }

}
On this page