Treetable

TreeTable - Bootstrap 5 & Material Design plugin

Responsive Treetable built with the latest Bootstrap 5.

Note: Read the API tab to find all available options and advanced customization

Basic example

Create default Treetable by using MDBTreeTable component and adding MDBTreeTableHead and MDBTreeTableBody with MDBTreeTableItem inside. Adding depth property to MDBTreeTableItem element indicates another nest.

Name Size Type
Personal 15mb Folder
index 5mb html
index 5mb html
my-cat 0mb webp
Documents 350mb Folder
Bill 200mb pdf
Newspapers mentions 50mb PDF
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 
import React from 'react';
import { MDBTreeTable, MDBTreeTableItem, MDBTreeTableHead, MDBTreeTableBody } from 'mdb-react-treetable';

export default function App() {
  return (
    <MDBTreeTable>
      <MDBTreeTableHead heads={['Name', 'Size', 'Type']} />
      <MDBTreeTableBody>
        <MDBTreeTableItem values={['Personal', '15mb', 'Folder']} depth={1} />
        <MDBTreeTableItem values={['index', '5mb', 'html']} depth={2} />
        <MDBTreeTableItem values={['index', '5mb', 'html']} depth={2} />
        <MDBTreeTableItem values={['my-cat', '0mb', 'webp']} depth={2} />
        <MDBTreeTableItem values={['Documents', '350mb', 'Folder']} depth={2} />
        <MDBTreeTableItem values={['Bill', '200mb', 'PDF']} depth={3} />
        <MDBTreeTableItem values={['Newspapers mentions', '50mb', 'PDF']} depth={3} />
        <MDBTreeTableItem values={['Ebooks', '100mb', 'zip']} depth={3} />
        <MDBTreeTableItem values={['Songs', '30mb', 'Folder']} depth={2} />
        <MDBTreeTableItem values={['Ode to JS', '10mb', 'mp3']} depth={3} />
        <MDBTreeTableItem values={['One more style', '10mb', 'mp3']} depth={3} />
        <MDBTreeTableItem values={['Bjork-Its-Oh-So-Quiet', '10mb', 'mp3']} depth={3} />
        <MDBTreeTableItem values={['Images', '1.5gb', 'Folder']} depth={1} />
        <MDBTreeTableItem values={['Album-cover', '500mb', 'jpeg']} depth={2} />
        <MDBTreeTableItem values={['Naruto-background', '500mb', 'png']} depth={2} />
        <MDBTreeTableItem values={['Sasuke-background', '500mb', 'webp']} depth={2} />
      </MDBTreeTableBody>
    </MDBTreeTable>
  );
}

Treetable - API

Import

import { MDBTreeTable, MDBTreeTableItem, MDBTreeTableHead, MDBTreeTableBody } from 'mdb-react-treetable';

Properties

MDBTreeTable

Name Type Default Description Example
className String '' Add custom class to MDBTreeTable <MDBTreeTable className='custom-class'> ... </MDBTreeTable>

MDBTreeTableHead

Name Type Default Description Example
heads (string | number)[] Defines the table headers <MDBTreeTableHead heads={['Name', 'Size', 'Type']}> ... </MDBTreeTableHead>

MDBTreeTableItem

Name Type Default Description Example
depth number 1 Indicates nest depth <MDBTreeTableItem depth={2} />
values (string | number)[] Defines row values in MDBTreeTableItem <MDBTreeTableItem values={['Personal', '15mb', 'Folder']} />