Table
New

The Table 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 
<NVTable Responsive>
  <NVTableHead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
    <th>ZipCode</th>
  </NVTableHead>
  <NVTableBody>
    <tr>
      <td data-table-heading="Firstname">John</td>
      <td data-table-heading="Lastname">Smith</td>
      <td data-table-heading="Email" class="text-gray-800">john.smith@gmail.com</td>
      <td data-table-heading="ZipCode">1000</td>
    </tr>
    <tr>
      <td data-table-heading="Firstname">Jean</td>
      <td data-table-heading="Lastname">Moulin</td>
      <td data-table-heading="Email" class="text-gray-800">jean.moulin@gmail.com</td>
      <td data-table-heading="ZipCode">1200</td>
    </tr>
    <tr>
      <td data-table-heading="Firstname">Bart</td>
      <td data-table-heading="Lastname">Simpson</td>
      <td data-table-heading="Email" class="text-gray-800">bart.simpson@gmail.com</td>
      <td data-table-heading="ZipCode">1180</td>
    </tr>
  </NVTableBody>
</NVTable>

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 
<NVTable Striped>
  <NVTableHead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
    <th>ZipCode</th>
  </NVTableHead>
  <NVTableBody>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td class="text-gray-800">john.smith@gmail.com</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>Jean</td>
      <td>Moulin</td>
      <td class="text-gray-800">jean.moulin@gmail.com</td>
      <td>1200</td>
    </tr>
    <tr>
      <td>Bart</td>
      <td>Simpson</td>
      <td class="text-gray-800">bart.simpson@gmail.com</td>
      <td>1180</td>
    </tr>
  </NVTableBody>
</NVTable>

NVTableBody

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

TypeDefault Value
RenderFragmentnull
John Smith john.smith@gmail.com 1000
Jean Moulin jean.moulin@gmail.com 1200
Bart Simpson bart.simpson@gmail.com 1180 
<NVTable>
  <NVTableBody>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td class="text-gray-800">john.smith@gmail.com</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>Jean</td>
      <td>Moulin</td>
      <td class="text-gray-800">jean.moulin@gmail.com</td>
      <td>1200</td>
    </tr>
    <tr>
      <td>Bart</td>
      <td>Simpson</td>
      <td class="text-gray-800">bart.simpson@gmail.com</td>
      <td>1180</td>
    </tr>
  </NVTableBody>
</NVTable>

NVTableHead

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

TypeDefault Value
RenderFragmentnull
Firstname Lastname Email ZipCode 
<NVTable>
  <NVTableHead>    
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
    <th>ZipCode</th>
  </NVTableHead>
</NVTable>
On this page