logo
  • Home
  • Modern
    New
  • eCommerce
    • Frontend pages
  • Homepage
  • About Us
  • Blog
  • Blog Details
  • Contact
  • Portfolio
  • Pricing
  • Apps
    • AI
  • Chat
  • Image
  • Contacts
    2
    • Blog
  • Posts
  • Detail
  • Create
  • Edit
  • Manage Blog
    • Ecommerce
  • Shop
  • Detail
  • List
  • Checkout
  • Add Product
  • Edit Product
  • Chats
    • Users
  • Profile
  • Followers
  • Friends
  • Gallery
  • Notes
  • Calendar
  • Email
  • Tickets
  • Kanban
    • Invoice
  • List
  • Details
  • Create
  • Edit
  • Orders
  • Customers
  • Pages
  • Integrations
  • API Keys
  • Roll Base Access
  • Pricing
  • Account Setting
  • FAQ
  • Tabler Icon
  • Sample Page
  • Landingpage
    • Widgets
  • Cards
  • Banners
  • Charts
  • Forms
    • Form Elements
  • Autocomplete
  • Button
  • Checkbox
  • Radio
  • Date Time
  • Slider
  • Switch
  • Form Layout
  • Form Horizontal
  • Form Vertical
  • Form Custom
  • Form Wizard
  • Form Validation
  • Tiptap Editor
  • Tables
  • Basic
  • Collapsible
  • Enhanced
  • Fixed Header
  • Pagination
  • Search
    • Tanstack / React Table
  • Basic
  • Dense
  • Filter
  • Row Selection
  • Pagination
  • Sorting
  • Column Visibility
  • Drag n Drop
  • Editable
  • Empty
  • Expand
  • Sticky
  • UI
  • Ui Components
  • Charts
  • Line
  • Gradient
  • Area
  • Candlestick
  • Column
  • Doughtnut & Pie
  • RadialBar & Radar
  • Mui Charts
  • BarCharts
    • LineCharts
  • Lines
  • Area
  • PieCharts
  • ScatterCharts
  • SparklineCharts
  • GaugeCharts
  • Mui Trees
    • SimpleTreeView
  • Items
  • Selection
  • Expansion
  • Customization
  • Focus
  • Auth
    • Login
  • Side Login
  • Boxed Login
    • Register
  • Side Register
  • Boxed Register
    • Forgot Password
  • Side Forgot Password
  • Boxed Forgot Password
    • Two Steps
  • Side Two Steps
  • Boxed Two Steps
  • Error
  • Maintenance
  • Other
    • Menu Level
  • Level 1
    • Level 1.1
  • Level 2
    • Level 2.1
  • Level 3
  • Level 3.1
  • Disabled
  • SubCaption
    This is the sutitle
  • Chip
    9
  • Outlined
    outline
  • External Link
Remy Sharp
Mathew
Designer

Simple Treeview

  1. Home

  3. Simple Treeview

breadcrumbImg
Basic Treeview
  • Data Grid
  • Date and Time Pickers
  • Charts
  • Tree View
Sample Code

import * as React from 'react';
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'BasicSimpleTreeView ',
},
]; 


export default function BasicSimpleTreeView() {
    return (

        <Box sx={{ minHeight: 352, minWidth: 250 }}>
                <SimpleTreeView>
                    <TreeItem itemId="grid" label="Data Grid">
                        <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
                        <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
                        <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
                    </TreeItem>
                    <TreeItem itemId="pickers" label="Date and Time Pickers">
                        <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
                        <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
                    </TreeItem>
                    <TreeItem itemId="charts" label="Charts">
                        <TreeItem itemId="charts-community" label="@mui/x-charts" />
                    </TreeItem>
                    <TreeItem itemId="tree-view" label="Tree View">
                        <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
                    </TreeItem>
                </SimpleTreeView>
       
        </Box>

    );
}
Itemclicks Treeview

No item click recorded

  • Data Grid
  • Date and Time Pickers
  • Charts
  • Tree View
Sample Code

import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'TrackitemclicksTree ',
},
]; 

function TrackitemclicksTree() {
    const [lastClickedItem, setLastClickedItem] = React.useState(null);
    return (
       
            <Stack spacing={2}>
                <Typography>
                    {lastClickedItem == null
                        ? 'No item click recorded'
                        : `Last clicked item: ${lastClickedItem}`}
                </Typography>
                <Box sx={{ minHeight: 352, minWidth: 300 }}>
                    <SimpleTreeView onItemClick={(event, itemId) => setLastClickedItem(itemId)}>
                        <TreeItem itemId="grid" label="Data Grid">
                            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
                            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
                            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
                        </TreeItem>
                        <TreeItem itemId="pickers" label="Date and Time Pickers">
                            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
                            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
                        </TreeItem>
                        <TreeItem itemId="charts" label="Charts">
                            <TreeItem itemId="charts-community" label="@mui/x-charts" />
                        </TreeItem>
                        <TreeItem itemId="tree-view" label="Tree View">
                            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
                        </TreeItem>
                    </SimpleTreeView>
                </Box>
            </Stack >
     
    );
}

export default TrackitemclicksTree