BasMaterial UI logo
Notifications

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>