Treetable
TreeTable - Bootstrap 5 & Material Design plugin
The Treetable component can render your data with a simple HTML. You simply create a HTML markup for your table nested within a div tag with a "treetable" class - you can customize your table later by adding data-mdb-attributes to the wrapper.
Note: Read the API tab to find all available options and advanced customization
Basic example
Create default Treetable by appending a table
element into a
div
with a .treetable
class. Adding
data-depth
attribute to a row element indicates it is another nest.
Each deeper nest's depth should be incremented by one.
Name | Size | Type |
---|---|---|
Personal | 15mb | Folder |
index | 5mb | html |
index | 5mb | html |
my-cat | 0mb | webp |
Documents | 350mb | Folder |
Bill | 200mb | |
Newspapers mentions | 50mb | |
Ebooks | 100mb | zip |
Songs | 30mb | Folder |
Ode to JS | 10mb | mp3 |
One more style | 10mb | mp3 |
Bjork-Its-Oh-So-Quiet | 10mb | mp3 |
Images | 1,5gb | Folder |
Album-cover | 500mb | jpeg |
Naruto-background | 500mb | png |
Sasuke-background | 500mb | webp |
TreeTable - API
Usage
Via data attributes
Use data-depth
attribute to indicate the level of nesting. For
example, if a row with an attribute of data-depth="2"
is inserted
after data-depth="1"
row, it will be nested within the attribute
with lower value
.
Via JavaScript
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
Methods
Name | Description | Example |
---|---|---|
collapseAll
|
Collapses all nests |
treetableInstance.collapseAll()
|
expandAll
|
Expands all nests |
treetableInstance.expandAll()
|
dispose
|
Removes the component's instance |
treetableInstance.dispose()
|
getInstance
|
Static method which allows you to get the treetable instance associated to a DOM element. |
Treetable.getInstance(treeTable)
|
Events
Name | Description |
---|---|
collapse.mdb.treetable
|
This event fires when a user collapses a nest. You can access the
collapsed data inside a listener's handler with
firstRows and nestedRows
fields.
|
expand.mdb.treetable
|
This event fires when a user expands a nest. You can access the
collapsed data inside a listener's handler with
firstRows and nestedRows
fields.
|
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component: