Home WebriQ App Bar
Tool Bar
Webriq logo

© WebriQ

Free & Open Source (MIT)
Notifications
View All

Table

Basic

Basic table for organize data

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 


table.table.eq-ui-data-table.z-depth-1
  thead
    tr
      th.eq-ui-data-table-cell-non-numeric Material
      th Quantity
      th Unit price
  tbody
    tr
      td.eq-ui-data-table-cell-non-numeric.eq-ui-data-table-cell-truncate Acrylic (Transparent)
      td 25
      td $2.90
    tr
      td.eq-ui-data-table-cell-non-numeric.eq-ui-data-table-cell-truncate Plywood (Birch)
      td 50
      td $1.25
    tr
      td.eq-ui-data-table-cell-non-numeric.eq-ui-data-table-cell-truncate Laminate (Gold on Blue)
      td 10
      td $2.35


<table class="table eq-ui-data-table z-depth-1">
    <thead>
    <tr>
        <th class="eq-ui-data-table-cell-non-numeric">Material</th>
        <th>Quantity</th>
        <th>Unit price</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Acrylic (Transparent)</td>
        <td>25</td>
        <td>$2.90</td>
    </tr>
    <tr>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Plywood (Birch)</td>
        <td>50</td>
        <td>$1.25</td>
    </tr>
    <tr>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>$2.35</td>
    </tr>
    </tbody>
</table>

With Checkbox

For checkbox table mode. We have than add eq-ui-data-table-js eq-ui-with-checkbox

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 


table.table.eq-ui-data-table.eq-ui-with-checkbox.z-depth-1
  thead
    tr
      th
        input#checkbox-all.eq-ui-input.filled-in(type='checkbox')
        label(for='checkbox-all')
      th.eq-ui-data-table-cell-non-numeric Material
      th Quantity
      th Unit price
  tbody
    tr
      td
        input#checkbox-1.eq-ui-input.filled-in(type='checkbox')
        label(for='checkbox-1')
      td.eq-ui-data-table-cell-non-numeric.eq-ui-data-table-cell-truncate Acrylic (Transparent)
      td 25
      td $2.90
    tr
      td
        input#checkbox-2.eq-ui-input.filled-in(type='checkbox')
        label(for='checkbox-2')
      td.eq-ui-data-table-cell-non-numeric.eq-ui-data-table-cell-truncate Plywood (Birch)
      td 50
      td $1.25
    tr
      td
        input#checkbox-3.eq-ui-input.filled-in(type='checkbox')
        label(for='checkbox-3')
      td.eq-ui-data-table-cell-non-numeric.eq-ui-data-table-cell-truncate Laminate (Gold on Blue)
      td 10
      td $2.35


<table class="table eq-ui-data-table eq-ui-with-checkbox z-depth-1">
    <thead>
    <tr>
        <th>
            <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-all" />
            <label for="checkbox-all"></label>
        </th>
        <th class="eq-ui-data-table-cell-non-numeric">Material</th>
        <th>Quantity</th>
        <th>Unit price</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>
            <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-1" />
            <label for="checkbox-1"></label>
        </td>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Acrylic (Transparent)</td>
        <td>25</td>
        <td>$2.90</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-2" />
            <label for="checkbox-2"></label>
        </td>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Plywood (Birch)</td>
        <td>50</td>
        <td>$1.25</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-3" />
            <label for="checkbox-3"></label>
        </td>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>$2.35</td>
    </tr>
    </tbody>
</table>

Striped

For striped table mode. We have than add .eq-ui-striped

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 


table.table.eq-ui-data-table.eq-ui-striped.z-depth-1


<table class="table eq-ui-data-table eq-ui-striped z-depth-1">
</table>

Hoverable

For hoverable table mode. We have than add .eq-ui-hoverable

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 


table.table.eq-ui-data-table.eq-ui-hoverable.z-depth-1


<table class="table eq-ui-data-table eq-ui-hoverable z-depth-1">
</table>

Centered

For centered table mode. We have than add .eq-ui-centered

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 


table.table.eq-ui-data-table.eq-ui-centered.z-depth-1


<table class="table eq-ui-data-table eq-ui-centered z-depth-1">
</table>