Avatar Sizing
<table id="tree-table-1" class="table table-hover table-bordered mm-bg-white tree">
<thead class="bg-white">
<tr>
<th>Demo 1</th>
</tr>
</thead>
<tbody>
<tr data-id="1" data-parent="0" data-level="1">
<td data-column="name">Data 1</td>
</tr>
<tr data-id="2" data-parent="1" data-level="2">
<td data-column="name">Data 1.1</td>
</tr>
<tr data-id="3" data-parent="2" data-level="3">
<td data-column="name">Data 1.2</td>
</tr>
<tr data-id="4" data-parent="3" data-level="4">
<td data-column="name">Data 1.3</td>
</tr>
<tr data-id="6" data-parent="0" data-level="1">
<td data-column="name">Data 2</td>
</tr>
<tr data-id="7" data-parent="6" data-level="2">
<td data-column="name">Data 2.1</td>
</tr>
<tr data-id="8" data-parent="7" data-level="3">
<td data-column="name">Data 2.2</td>
</tr>
<tr data-id="9" data-parent="8" data-level="4">
<td data-column="name">Data 2.3</td>
</tr>
<tr data-id="10" data-parent="0" data-level="1">
<td data-column="name">Data 3</td>
</tr>
<tr data-id="11" data-parent="10" data-level="2">
<td data-column="name">Data 3.1</td>
</tr>
<tr data-id="12" data-parent="11" data-level="3">
<td data-column="name">Data 3.2</td>
</tr>
<tr data-id="13" data-parent="12" data-level="4">
<td data-column="name">Data 3.3</td>
</tr>
<tr data-id="14" data-parent="0" data-level="1">
<td data-column="name">Data 4</td>
</tr>
<tr data-id="15" data-parent="14" data-level="2">
<td data-column="name">Data 4.1</td>
</tr>
<tr data-id="16" data-parent="15" data-level="3">
<td data-column="name">Data 4.2</td>
</tr>
<tr data-id="17" data-parent="16" data-level="4">
<td data-column="name">Data 4.3</td>
</tr>
</tbody>
</table>
| Demo 1 |
|---|
| Data 1 |
| Data 1.1 |
| Data 1.2 |
| Data 1.3 |
| Data 2 |
| Data 2.1 |
| Data 2.2 |
| Data 2.3 |
| Data 3 |
| Data 3.1 |
| Data 3.2 |
| Data 3.3 |
| Data 4 |
| Data 4.1 |
| Data 4.2 |
| Data 4.3 |
Table Treeview
<table id="tree-table-2" class="table table-hover table-bordered mm-bg-dark tree">
<thead class="bg-dark">
<tr>
<th>Demo 2</th>
</tr>
</thead>
<tbody>
<tr data-id="1" data-parent="0" data-level="1">
<td data-column="name">Data 1</td>
</tr>
<tr data-id="2" data-parent="1" data-level="2">
<td data-column="name">Data 1.1</td>
</tr>
<tr data-id="3" data-parent="2" data-level="3">
<td data-column="name">Data 1.2</td>
</tr>
<tr data-id="4" data-parent="3" data-level="4">
<td data-column="name">Data 1.3</td>
</tr>
<tr data-id="6" data-parent="0" data-level="1">
<td data-column="name">Data 2</td>
</tr>
<tr data-id="7" data-parent="6" data-level="2">
<td data-column="name">Data 2.1</td>
</tr>
<tr data-id="8" data-parent="7" data-level="3">
<td data-column="name">Data 2.2</td>
</tr>
<tr data-id="9" data-parent="8" data-level="4">
<td data-column="name">Data 2.3</td>
</tr>
<tr data-id="10" data-parent="0" data-level="1">
<td data-column="name">Data 3</td>
</tr>
<tr data-id="11" data-parent="10" data-level="2">
<td data-column="name">Data 3.1</td>
</tr>
<tr data-id="12" data-parent="11" data-level="3">
<td data-column="name">Data 3.2</td>
</tr>
<tr data-id="13" data-parent="12" data-level="4">
<td data-column="name">Data 3.3</td>
</tr>
<tr data-id="14" data-parent="0" data-level="1">
<td data-column="name">Data 4</td>
</tr>
<tr data-id="15" data-parent="14" data-level="2">
<td data-column="name">Data 4.1</td>
</tr>
<tr data-id="16" data-parent="15" data-level="3">
<td data-column="name">Data 4.2</td>
</tr>
<tr data-id="17" data-parent="16" data-level="4">
<td data-column="name">Data 4.3</td>
</tr>
</tbody>
</table>
| Demo 2 |
|---|
| Data 1 |
| Data 1.1 |
| Data 1.2 |
| Data 1.3 |
| Data 2 |
| Data 2.1 |
| Data 2.2 |
| Data 2.3 |
| Data 3 |
| Data 3.1 |
| Data 3.2 |
| Data 3.3 |
| Data 4 |
| Data 4.1 |
| Data 4.2 |
| Data 4.3 |
Tree view
<table id="tree-table-3" class="table table-hover table-bordered mm-bg-primary tree">
<thead class="bg-primary">
<tr>
<th>Demo 3</th>
</tr>
</thead>
<tbody>
<tr data-id="1" data-parent="0" data-level="1">
<td data-column="name">Data 1</td>
</tr>
<tr data-id="2" data-parent="1" data-level="2">
<td data-column="name">Data 1.1</td>
</tr>
<tr data-id="3" data-parent="2" data-level="3">
<td data-column="name">Data 1.2</td>
</tr>
<tr data-id="4" data-parent="3" data-level="4">
<td data-column="name">Data 1.3</td>
</tr>
<tr data-id="6" data-parent="0" data-level="1">
<td data-column="name">Data 2</td>
</tr>
<tr data-id="7" data-parent="6" data-level="2">
<td data-column="name">Data 2.1</td>
</tr>
<tr data-id="8" data-parent="7" data-level="3">
<td data-column="name">Data 2.2</td>
</tr>
<tr data-id="9" data-parent="8" data-level="4">
<td data-column="name">Data 2.3</td>
</tr>
<tr data-id="10" data-parent="0" data-level="1">
<td data-column="name">Data 3</td>
</tr>
<tr data-id="11" data-parent="10" data-level="2">
<td data-column="name">Data 3.1</td>
</tr>
<tr data-id="12" data-parent="11" data-level="3">
<td data-column="name">Data 3.2</td>
</tr>
<tr data-id="13" data-parent="12" data-level="4">
<td data-column="name">Data 3.3</td>
</tr>
<tr data-id="14" data-parent="0" data-level="1">
<td data-column="name">Data 4</td>
</tr>
<tr data-id="15" data-parent="14" data-level="2">
<td data-column="name">Data 4.1</td>
</tr>
<tr data-id="16" data-parent="15" data-level="3">
<td data-column="name">Data 4.2</td>
</tr>
<tr data-id="17" data-parent="16" data-level="4">
<td data-column="name">Data 4.3</td>
</tr>
</tbody>
</table>
| Demo 3 |
|---|
| Data 1 |
| Data 1.1 |
| Data 1.2 |
| Data 1.3 |
| Data 2 |
| Data 2.1 |
| Data 2.2 |
| Data 2.3 |
| Data 3 |
| Data 3.1 |
| Data 3.2 |
| Data 3.3 |
| Data 4 |
| Data 4.1 |
| Data 4.2 |
| Data 4.3 |
Avatar Sizing
<table id="tree-table-4" class="table table-hover table-bordered mm-bg-success tree">
<thead class="bg-success">
<tr>
<th>Demo 4</th>
</tr>
</thead>
<tbody>
<tr data-id="1" data-parent="0" data-level="1">
<td data-column="name">Data 1</td>
</tr>
<tr data-id="2" data-parent="1" data-level="2">
<td data-column="name">Data 1.1</td>
</tr>
<tr data-id="3" data-parent="2" data-level="3">
<td data-column="name">Data 1.2</td>
</tr>
<tr data-id="4" data-parent="3" data-level="4">
<td data-column="name">Data 1.3</td>
</tr>
<tr data-id="6" data-parent="0" data-level="1">
<td data-column="name">Data 2</td>
</tr>
<tr data-id="7" data-parent="6" data-level="2">
<td data-column="name">Data 2.1</td>
</tr>
<tr data-id="8" data-parent="7" data-level="3">
<td data-column="name">Data 2.2</td>
</tr>
<tr data-id="9" data-parent="8" data-level="4">
<td data-column="name">Data 2.3</td>
</tr>
<tr data-id="10" data-parent="0" data-level="1">
<td data-column="name">Data 3</td>
</tr>
<tr data-id="11" data-parent="10" data-level="2">
<td data-column="name">Data 3.1</td>
</tr>
<tr data-id="12" data-parent="11" data-level="3">
<td data-column="name">Data 3.2</td>
</tr>
<tr data-id="13" data-parent="12" data-level="4">
<td data-column="name">Data 3.3</td>
</tr>
<tr data-id="14" data-parent="0" data-level="1">
<td data-column="name">Data 4</td>
</tr>
<tr data-id="15" data-parent="14" data-level="2">
<td data-column="name">Data 4.1</td>
</tr>
<tr data-id="16" data-parent="15" data-level="3">
<td data-column="name">Data 4.2</td>
</tr>
<tr data-id="17" data-parent="16" data-level="4">
<td data-column="name">Data 4.3</td>
</tr>
</tbody>
</table>
| Demo 4 |
|---|
| Data 1 |
| Data 1.1 |
| Data 1.2 |
| Data 1.3 |
| Data 2 |
| Data 2.1 |
| Data 2.2 |
| Data 2.3 |
| Data 3 |
| Data 3.1 |
| Data 3.2 |
| Data 3.3 |
| Data 4 |
| Data 4.1 |
| Data 4.2 |
| Data 4.3 |