Table
Display sets of raw data. They usually appear in desktop enterprise products.
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 class="bas-ui-data-table z-depth-1">
<thead>
<tr>
<th class="bas-ui-data-table-cell-non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bas-ui-data-table-cell-non-numeric bas-ui-data-table-cell-truncate">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="bas-ui-data-table-cell-non-numeric bas-ui-data-table-cell-truncate">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="bas-ui-data-table-cell-non-numeric bas-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 bas-ui-data-table-js bas-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 class="bas-ui-data-table bas-ui-data-table-js bas-ui-with-checkbox z-depth-1">
<thead>
<tr>
<th>
<input type="checkbox" class="bas-ui-input filled-in" id="checkbox-all" />
<label for="checkbox-all"></label>
</th>
<th class="bas-ui-data-table-cell-non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="bas-ui-input filled-in" id="checkbox-1" />
<label for="checkbox-1"></label>
</td>
<td class="bas-ui-data-table-cell-non-numeric bas-ui-data-table-cell-truncate">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td>
<input type="checkbox" class="bas-ui-input filled-in" id="checkbox-2" />
<label for="checkbox-2"></label>
</td>
<td class="bas-ui-data-table-cell-non-numeric bas-ui-data-table-cell-truncate">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td>
<input type="checkbox" class="bas-ui-input filled-in" id="checkbox-3" />
<label for="checkbox-3"></label>
</td>
<td class="bas-ui-data-table-cell-non-numeric bas-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 .bas-ui-striped
Material | Quantity | Unit price |
---|---|---|
Acrylic (Transparent) | 25 | $2.90 |
Plywood (Birch) | 50 | $1.25 |
Laminate (Gold on Blue) | 10 | $2.35 |
<table class="bas-ui-data-table bas-ui-striped z-depth-1">
...
</table>
Hoverable
For hoverable table mode. We have than add .bas-ui-hoverable
Material | Quantity | Unit price |
---|---|---|
Acrylic (Transparent) | 25 | $2.90 |
Plywood (Birch) | 50 | $1.25 |
Laminate (Gold on Blue) | 10 | $2.35 |
<table class="bas-ui-data-table bas-ui-hoverable z-depth-1">
...
</table>
Centered
For centered table mode. We have than add .bas-ui-centered
Material | Quantity | Unit price |
---|---|---|
Acrylic (Transparent) | 25 | $2.90 |
Plywood (Birch) | 50 | $1.25 |
Laminate (Gold on Blue) | 10 | $2.35 |
<table class="bas-ui-data-table bas-ui-centered z-depth-1">
...
</table>