• Demos
    • Web Components
    • Angular
    • React
  • Docs
  • License
  • Download
  • Community
    • Forums
    • Blogs
    • Login
  • About
    • About Us
    • Contact Us
    • FAQ
new updated professional

  • Most Popular

  • Framework

  • Chart

  • Card View

  • Grid

  • Gantt Chart

  • Docking Layout

  • Kanban

  • Web Components

  • Accordion

  • Badge

  • Button

  • Calendar

  • Card

  • Carousel

  • Checkbox

  • ComboBox

  • Color Panel

  • Color Picker

  • DateTimePicker

  • DropDownList

  • DropDownButton

  • File Upload

  • Form

  • Gauge

  • Inputs

  • ListBox

  • ListMenu

  • MaskedTextBox

  • Menu

  • MultilineTextBox

  • MultiSplitButton

  • NumericTextBox

  • Pager

  • PasswordTextBox

  • PowerButton

  • ProgressBar

  • Query Builder

  • RadioButton

  • RepeatButton

  • ScrollBar

  • Slider

  • Splitter

  • SwitchButton

  • Sortable

  • Table

  • Tabs

  • Tank

  • TextBox

  • TimePicker

  • Toast

  • ToggleButton

  • Tooltip

  • Tree

  • Validator

  • Window

  • Integration & Tools

  • Bootstrap
  • Theme Builder

  • Framework

  • Angular
  • Forms with Calendar
  • Forms with ColorPicker
  • Forms with ComboBox
  • Reactive Forms with DropDownList
  • Forms with DropDownList
  • Reactive Forms with Input
  • Forms Validation
  • Forms with NumericTextBox
  • Forms Validation with NumericTextBox
  • Forms with Slider
  • Dynamic Forms
  • NgFor
  • Angular Service with Toast
  • Angular Component in Grid Column
  • Angular HTTP CRUD with Grid
  • Angular Refresh Grid DataSource
  • Angular Routing with Accordion
  • Angular Routing with Splitter
  • Angular Routing with Tabs
  • Create Custom Element
  • Introduction
  • Overview
  • Loops. Render Table with smart-for
  • Declarative Rendering
  • Event Binding
  • Sub Property Two-Way Binding
  • App with Grid Binding
  • Form Binding
  • Handling User Input
  • Form Checkbox Binding
  • Form Checkbox Binding to Array
  • Form DropDownList Binding
  • Form Radio Input Binding
  • Form TextBox Binding
  • Form DateTimePicker Binding
  • HTML Elements Binding
  • HTML Checkbox input Model Binding
  • HTML Input Binding
  • HTML Checkbox Binding to Array
  • HTML Number Input Binding
  • HTML Radio Button Binding
  • HTML Select Binding
  • HTML Select Multiple Binding
  • Loops Rendering
  • List Rendering with smart-for
  • Advanced List Rendering with smart-for
  • Grid Layout System
  • Overview
  • Advanced
  • Equal Width
  • How it works
  • Layout with span
  • Nested Grid
  • No Gaps
  • Options
  • Ordering
  • Stacked to Horizontal
  • Stack Layout System
  • Overview
  • Gaps
  • Options
  • Spacing
  • Stretch
  • Uneven Stretch

  • Accordion

  • Overview
  • Basic
  • Events
  • Methods
  • Expand Modes
  • In Tabs
  • With Tabs
  • Reorder
  • Right to Left
  • Shadow DOM

  • Badge

  • Overview

  • Button

  • Overview
  • Basic
  • Events
  • Images
  • Hover Glow effect
  • 3d
  • Blobs Button
  • Bootstrap Style
  • Progress Style
  • Change Style
  • Button Concept
  • Button Flip
  • Fizzy Button
  • Fancy Button
  • Flip Cover Button
  • Flush Button
  • Button with Icon
  • Fancy Icon
  • Rounded Button
  • Rounded Pulse Button
  • Sliced Button
  • Thin Buttons
  • Right to Left
  • Shadow DOM

  • Card

  • Overview
  • Basic
  • Events
  • Right to Left

  • Carousel

  • Overview
  • Auto Play
  • 3D
  • 3D Directions
  • 3D Template
  • Full Page
  • Template
  • Thumbnails
  • Cards
  • Right to Left
  • Shadow DOM

  • Calendar

  • Overview
  • Classic Display Mode
  • Custom Header
  • Events
  • First Day Of Week
  • Footer
  • Hotel Showcase
  • Important Days
  • Important Events
  • List Display View
  • Locale
  • Methods
  • Min/Max Date
  • Multiple Months
  • Navigation Modes
  • Restricted Dates
  • Right To Left
  • Views
  • Week Numbers
  • Weeks Visibility
  • Shadow DOM

  • CardView

  • Overview
  • Collapsible Cards
  • Deferred Scroll
  • Drag & Drop
  • Editable Cards
  • Filter, Sort, Search
  • Infinite Scroll
  • Localization
  • Right to Left
  • Settings
  • Virtual Scroll
  • Shadow DOM

  • Chart

  • Overview
  • Line and Area Series
  • Line Series
  • Stacked Line Series
  • 100% Stacked Line Series
  • Line Series with Labels
  • Line Series with Missing Points
  • Line Series with 50k Data Points
  • Line Series with Conditional Colors
  • Step Line Series
  • Spline Series
  • Spline Series with Color Bands
  • Area Series
  • 100% Stacked Area Series
  • Area Series with Missing Points
  • Area Range and Line Series
  • Column and Bar Series
  • Column Series
  • Stacked Column Series
  • Stacked and Grouped Column Series
  • 100% Stacked Column Series
  • Column Series with Conditional Colors
  • Column Range
  • Fixed Placement Columns
  • Bar Series
  • Column Series Spacing
  • Negative Bar Series
  • Column Series with Labels
  • Pie & Donut Series
  • Pie Series
  • Pie Series Legend
  • Donut Series
  • Logarithmic Axis
  • Columns with Logarithmic Axis
  • Columns with base 10 Logarithmic Axis
  • Logarithmic Axis Base Line
  • Logarithmic X Axis
  • Zooming (Range Selection)
  • Date X-axis Range Selection
  • Numeric X-axis Range Selection
  • Waterfall Series
  • Waterfall Series
  • Waterfall with Multiple Series
  • Financial Series
  • Candlestick Chart
  • OHLC Chart
  • Polar and Spider Series
  • Polar Chart
  • Partial Polar Chart
  • Polar Series Bands
  • Spider Chart
  • Funnel and Pyramid Series
  • Funnel Chart
  • Stacked Funnel Chart
  • Pyramid Chart
  • Stacked Pyramid Chart
  • Bubble Chart
  • Scatter Chart
  • Scatter Chart with 25k Data Points
  • Live Updates Performance
  • Add Data Points Dynamically
  • Color Bands
  • Sparklines
  • Styling and Layout
  • Axis Settings
  • Intervals and Steps
  • Systematic Colors Chart
  • Crosshairs
  • Color Schemes
  • Chart Background Image
  • Custom Styling
  • Custom Drawing
  • Chart Events
  • Chart Range Selector Events
  • Chart Methods
  • Chart Export and Printing
  • Right to Left
  • Shadow DOM

  • CheckBox

  • Overview
  • Basic
  • Events
  • Images
  • Right to Left
  • Shadow DOM

  • ComboBox

  • Overview
  • Auto Complete
  • Automatic Positioning
  • Basic
  • Button Position
  • Checkboxes
  • Filterable
  • Item Template
  • Methods
  • Multiple Selection Tokens
  • Multiple Selection Mode
  • Open Modes
  • Popup Resizing
  • Position
  • Token Template
  • Right to Left
  • Shadow DOM

  • Color Panel

  • Overview
  • Apply Value Mode
  • Default
  • Grid
  • Hexagonal
  • Material Grid
  • Palette Mode
  • Radial
  • Spectrum Grid
  • Events
  • Localization
  • Tooltips
  • Right to Left
  • Shadow DOM

  • Color Picker

  • Overview
  • Color Editing
  • Default
  • Grid
  • Hexagonal
  • Material Grid
  • Palette Mode
  • Radial
  • Spectrum Grid
  • Editing
  • Value Display Mode
  • Value Format
  • Right to Left
  • Shadow DOM

  • DateTimePicker

  • Overview
  • Basic
  • Dropdown Display Mode
  • Dropdown position
  • Edit Modes
  • Formats
  • High Precision/Scientific
  • Localization
  • Time Zones
  • Right to Left
  • Shadow DOM

  • DropDownButton

  • Overview
  • Auto Height
  • Auto Position
  • Button Position
  • Dropdown Position
  • Dropdown Resize
  • Open Modes
  • Events
  • Methods
  • Right to Left
  • Shadow DOM

  • DropDownList

  • Overview
  • Auto Complete
  • Automatic Positioning
  • Basic
  • Button Position
  • Checkboxes
  • Multiple Selection Mode
  • Filterable
  • Item Template
  • Methods
  • Multiple Selection
  • Open Modes
  • Popup Resizing
  • Position
  • Token Template
  • Right to Left
  • Shadow DOM

  • Docking Layout

  • Overview
  • Auto Hide Item
  • Auto Save/Load
  • Drop Position
  • Insert Before/After Item
  • Insert Outside Target Group
  • Insert Top Level Item
  • Inside Window
  • Item Dock & Undock
  • Layout Item
  • Layout Item Group
  • Remove Item
  • Snap Modes
  • State
  • Update Item
  • Visual Studio Showcase
  • Right to Left
  • Shadow DOM

  • File Upload

  • Overview
  • Directory
  • Drop Zone
  • Events
  • File Zone
  • Images only
  • Item Template
  • Localization
  • Multiple
  • Show Progress
  • Right to Left
  • Shadow DOM

  • Form

  • Overview
  • Basic
  • Form tags
  • Auto Generate
  • Accordion FormGroup
  • Checkout Form Wizard
  • Dynamic Add, Remove Form Controls
  • Form Addons
  • Form Controls
  • Form Events
  • Form Settings
  • Tabs FormGroup

  • Gantt Chart

  • Overview
  • Auto Height
  • Auto Schedule
  • Auto Scroll
  • Expand/Collapse
  • Context Menu
  • Custom Popup Editor
  • Custom Task Editor
  • Data Bind to JSON
  • Data Source
  • Data Export
  • Disable Drag Resize
  • Duration
  • Events
  • Inverted Layout
  • State Load and Save
  • Localization
  • Many Tasks
  • Methods
  • Min/Max Task Dates
  • Nested Project
  • Nonworking Days
  • Nonworking Hours
  • Project Drag
  • Snap to nearest
  • Sync Project
  • Sync Project Drag
  • Task Columns
  • Task Progress Label
  • Task Filtering
  • Task Sorting
  • Task Connections
  • Timeline header
  • View
  • Resource management
  • Resource filtering
  • Resource timeline & diagram
  • Resource timeline & histogram
  • Resource timeline view
  • Resource view
  • Resource view panel
  • Resource work & materials
  • Right to Left
  • Shadow DOM

  • Gauge

  • Overview
  • Analog Display Type
  • Basic
  • Change Font Size
  • Coercion
  • Custom Interval
  • Custom Needle
  • Date Scale
  • Integer 64-bit
  • Logarithmic Scale
  • Mechanical Action
  • Showcase
  • Size-Mode Auto
  • Styling
  • Tick label settings
  • Right to Left
  • Shadow DOM

  • Grid

  • Overview
  • Basic
  • Featured
  • Charting Grid Data
  • Dashboard
  • Business
  • Spreadsheet
  • Spreadsheet from JSON
  • Financial Live Data
  • Auto-show Select Checkbox
  • Test App
  • Tree Grid
  • Tree Grid
  • Tree Grid Nested JSON
  • Tree Grid Icons
  • Tree Grid Large Data
  • Tree Grid Animation
  • Tree Grid Checkboxes
  • Virtual Tree Grid
  • Virtual Tree Grid with Pagination
  • Tree Grid Right to Left
  • Appearance
  • Auto Size
  • Cells Wrap
  • Row Header Context Icons
  • Alternating Rows
  • Grid Lines
  • Merged Cells(RowSpan, ColSpan)
  • Columns & Rows
  • Columns: Template
  • Columns: Dynamic Template
  • Columns: Components Template
  • Columns: Formatting
  • Columns: Sticky
  • Columns: Checkbox
  • Columns: Panel
  • Columns: Chooser
  • Summary
  • Context Menu
  • Row Headers
  • Row Details
  • Large Data Set
  • Localization
  • Columns & Rows CRUD
  • Columns: CRUD
  • Rows: CRUD
  • Columns & Rows Pin/Freeze
  • Freeze Column
  • Freeze Last Column
  • Freeze First & Last Column
  • Freeze Rows
  • Freeze Far Rows
  • Freeze First & Last Row
  • Freeze Rows & Columns
  • Columns & Rows Resize
  • Columns: Resize
  • Rows: Resize
  • Columns: Dynamic Width
  • Columns & Rows Drag/Drop
  • Columns: Reorder
  • Columns: Drag
  • Rows: Reorder
  • Rows: Drag
  • Nested Grids
  • Nested Grids
  • Nested Grids Dialog
  • Editing
  • Cells Editing
  • Batch Editing
  • Row Editing
  • Dialog Editing
  • Add New Row
  • Add New Row with Auto Insert
  • Auto Complete Cell Editor
  • Auto Complete Dropdown Editor
  • DatetimePicker Editor
  • Textarea Editor
  • Custom Editor
  • Cascade Editing
  • Column Header Edit
  • Row Header Edit
  • Command Column
  • Command Column Position
  • Command Column Labels
  • Command Column Inline
  • Custom Command Column
  • Selection
  • Selection: Rows
  • Selection: Cells
  • Selection: Checkbox
  • Selection: Checkbox Config
  • Selection: Events
  • Live Updates
  • Live Updates (1s)
  • Live Updates Performance (50ms)
  • Live Updates Performance (10ms)
  • Pagination
  • Pagination
  • Pagination: Options
  • Virtual Pagination
  • Virtual Paging, Filtering, Sorting
  • Paging Spinner
  • Grouping
  • Grouping
  • Grouping: Basic
  • Grouping: Compact
  • Grouping: Bar
  • Grouping: Header Panel
  • Grouping: Summary
  • Grouping: Custom Style
  • Grouping: Styling
  • Filter & Sort
  • Filtering
  • Filtering Row
  • Filtering Row Custom Editors
  • Filtering & Sort Panels
  • Filtering Hierarchical data
  • Filtering Excel Menu
  • Filtering Custom Icons
  • Search Panel
  • Sort by One Column
  • Sort by Many Columns
  • Sort Animation
  • Custom Sort Icons
  • Data Export & Print
  • Export Data
  • Export to Image
  • Import Data
  • Export with Grouping
  • Export Tree Grid
  • Print
  • Scrolling
  • Scroll: Infinite
  • Scroll: Deferred
  • Scroll: Virtual
  • Scroll: Virtual with Immediate Fetch
  • Scroll: Virtual with Sorting and Filtering
  • Scroll: CellValue Callback
  • Right to Left
  • Shadow DOM

  • LED

  • Overview

  • Inputs

  • Overview
  • Dropdown Input
  • Multi Input
  • Check Input
  • Multi Combo Input
  • Date Range Input
  • Color Input
  • Rating
  • Input Group
  • Input Group with Custom Elements
  • Right to Left
  • Shadow DOM
  • Overview
  • Card Comments
  • Editing
  • Export
  • Filtering & Sorting
  • Hierarchical Columns
  • Hierarchical Columns Leaves
  • Hierarchical Columns Tabs
  • Horizontal Orientation
  • Methods
  • Multiple Kanbans
  • Right to Left
  • State Maintenance
  • Swimlanes
  • Swimlanes Partial
  • Task Progress
  • Task Template
  • User Privileges
  • Users
  • Shadow DOM

  • ListBox

  • Overview
  • Basic
  • Checkboxes
  • Custom Filtering
  • Custom Elements in Items
  • Editable Items
  • Filter
  • Grouping
  • Images
  • Item Template
  • Lazy Loading
  • Methods
  • Radio Buttons
  • Reorder
  • Multiple Selection
  • Virtualization
  • Right to Left
  • Shadow DOM

  • ListMenu

  • Overview
  • Basic
  • Data Source
  • Filterable
  • Grouped
  • Lazy Loading
  • Right to Left
  • Shadow DOM

  • MaskedTextBox

  • Overview
  • Basic
  • Cut, Copy & Paste
  • Hide Prompt char on Blur
  • Overwrite Mode
  • Prompt char
  • Validation
  • Right to Left
  • Shadow DOM

  • Menu

  • Overview
  • Add & Remove Items
  • Basic
  • Checkboxes
  • Context Menu
  • Data Source
  • Dropdown Position
  • Hidden Scroll Buttons
  • Items Layout
  • Items with Icons
  • Load from UL
  • Selection Mode
  • Tree Mode
  • Vertical Mode
  • Right to Left
  • Shadow DOM

  • MultiSplitButton

  • Overview
  • Basic
  • Button Group
  • Button Position
  • Checkboxes
  • Events
  • Right to Left
  • Shadow DOM

  • MultilineTextBox

  • Overview
  • Basic
  • Display Mode
  • Enter Key Behavior
  • Resizable
  • Scrollbars
  • Right to Left
  • Shadow DOM

  • NumericTextBox

  • Overview
  • Basic
  • Complex Numbers
  • Floating-Point Numbers
  • Integer Numbers
  • Localization
  • Scientific Notation Numbers
  • Styling
  • Right to Left
  • Shadow DOM

  • Pager

  • Overview
  • Basic
  • Events
  • Localization
  • Page Size Selector
  • Right to Left
  • Shadow DOM

  • PasswordTextBox

  • Overview
  • Basic
  • Custom Password Strength
  • Events
  • Password Icon
  • Strength
  • Localization
  • Strength Template
  • Right to Left
  • Shadow DOM

  • PowerButton

  • Overview

  • ProgressBar

  • Overview
  • Barber Shop Style
  • Basic
  • Amazon Echo Style
  • Events
  • Methods
  • Nested Button
  • Right to Left
  • Shadow DOM

  • Query Builder

  • Overview
  • Custom Operations
  • Value
  • Right to Left
  • Shadow DOM

  • RadioButton

  • Overview
  • Basic
  • Events
  • Images
  • Right to Left
  • Shadow DOM

  • RepeatButton

  • Overview

  • ScrollBar

  • Overview
  • Right to Left
  • Shadow DOM

  • Slider

  • Overview
  • Basic
  • Buttons
  • Click Coordinates
  • Coercion
  • Custom Interval
  • Date Scale
  • Integer Scale
  • Labels
  • Logarithmic Scale
  • Mechanical Action
  • Range Selection
  • Ticks On Track
  • Tooltip
  • Right to Left
  • Shadow DOM

  • Splitter

  • Overview
  • Auto Sizing
  • Expand / Collapse
  • Events
  • Live Resize
  • Locked Items
  • Methods
  • Min / Max Item Size
  • Nested Splitters
  • Orientation
  • Resize Modes
  • Resize With Window
  • Right to Left
  • Shadow DOM

  • Sortable

  • Overview
  • List
  • Vertical Puzzle
  • Horizontal Puzzle
  • Right to Left
  • Shadow DOM

  • SwitchButton

  • Overview
  • Right to Left
  • Using with Angular
  • Shadow DOM

  • Table

  • Overview
  • Basic
  • Billing History
  • Bootstrap Integration
  • Cell Edit
  • Custom Cell Editor
  • Change Columns
  • Column Reorder
  • Data Export
  • Expandable rows
  • Filtering
  • Filter Row
  • Filter Template
  • Filtering Advanced
  • Footer Row
  • Grouping
  • Load on Demand
  • Multiple Headers & Footers
  • Paging
  • Remote Data
  • Responsive Columns
  • Responsive Table
  • Right to Left
  • Row Editing
  • Selection
  • Spreadsheet
  • Sticky Columns
  • Sticky Footer
  • Sticky Header
  • Sorting, Paging, Filtering
  • Sort
  • Sort by Many Columns
  • Tree Table
  • Tree Table Filter
  • Tree Table Paging
  • Tree Table Selection
  • Table Bordered
  • Table Dark Bordered
  • Table CRUD
  • Dark Table
  • Dark Head
  • Hover
  • Primary Head
  • Striped
  • Shadow DOM
  • Validation

  • Tabs

  • Overview
  • Auto Height
  • Badges
  • Basic
  • Close Buttons
  • Data Source
  • Grouping
  • Hidden Scroll Buttons
  • Insert, Remove, Update
  • Integration
  • Label Settings
  • Layout
  • Position
  • Reorder
  • Selection Mode
  • Styling
  • Title Template
  • Right to Left
  • Shadow DOM

  • Tank

  • Overview
  • Basic
  • Coercion
  • Custom Interval
  • Date Scale
  • Labels
  • Layout
  • Logarithmic Scale
  • Mechanical Action
  • Resizing on Label Change
  • Scientific Notation
  • Settings
  • Label Colors
  • Ticks On Track
  • Tooltip
  • Right to Left
  • Shadow DOM

  • TextBox

  • Overview
  • Auto Complete
  • Basic
  • Data Source Callback
  • Display Mode
  • Events
  • Right to Left
  • Shadow DOM

  • TimePicker

  • Overview
  • 24-hour Format
  • Auto Switch to Minutes
  • Basic
  • Footer
  • Landscape View
  • Settings
  • Right to Left
  • Shadow DOM

  • Toast

  • Overview
  • Auto Close
  • Basic
  • Blink
  • Custom Container
  • Custom Icon
  • Events
  • Item Template
  • Modal
  • Settings
  • Right to Left
  • Shadow DOM

  • ToggleButton

  • Overview

  • Tooltip

  • Overview
  • Absolute Position
  • Basic
  • Custom Arrow Position
  • Events
  • On Progress Bar
  • Right to Left
  • Shadow DOM

  • Tree

  • Overview
  • Add / Remove Items
  • Connecting Lines
  • Custom Toggle Element
  • Data Source
  • Drag & Drop
  • Editable Labels
  • Filtering
  • Hierarchical Checkboxes
  • Item Template
  • Load on Demand
  • Move up/down
  • Scroll Modes
  • Selection Modes
  • Selection Display Modes
  • Sorting
  • State Maintenance
  • Right to Left
  • Shadow DOM

  • Validator

  • Overview
  • Base Inputs

  • Window

  • Overview
  • Basic
  • Custom Header Buttons
  • Events
  • Header Buttons
  • Header/Footer Template
  • Header Position
  • Inside Container
  • Methods
  • Minimization
  • Modal
  • Multiple Windows
  • Resizing
  • Snap Mode
  • Tabs
  • Window Types
  • Wait Window
  • Right to Left
  • Shadow DOM

Smart.Grid

Theme

Edit Theme
DEMO
SOURCE
INDEX.HTML
STYLES.CSS
APP.MODULE.TS
API

				
		

		

			

			
		

		

			

				
		

		

			

		
	
		

		
	
		
		

	
		

			

				

					

						
	
							
							

						

					

				

			

	  	

		

		

	

		
		
		
		
		
	

	

		
		
		
	

	

		
		
		
	

	

		
		
	






Smart Grid Web Component Tree Grid with Nested Rows Demo



Do you like it? Support us with your  star:  Star





View this demo in: 


Become a Pro




Edit in CodePen


	

	
	




			
		

    






  

	

	

	  

		
Documentation & Learning Resources

		
    
		  
  • Getting Started
    • 
		  
  • CSS Styling and Appearance
    • 
		  
  • API Documentation
    • 
		  
  • Open Theme Builder
    • 
		

	  

	  
	

  













    

      

        
    
          
  • Demo
    • 
          
  • Download
    • 
          
  • Docs
    • 
          
  • License
    • 
          
  • Services
    • 
        

        
    
          
  • Forums
    • 
          
  • About
    • 
          
  • Terms of Use
    • 
          
  • Privacy Policy
    • 
          
  • Contact Us
    • 
        

      

      

        
    
               
    • 
          
    • 
      
    • 
        

      

      

        

          
		  
Smart UI by jQWidgets © 2018-2020. All Rights Reserved.