• Demos
  • 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

  • Web Components

  • Accordion

  • Badge

  • Button

  • Calendar

  • Card

  • Carousel

  • Checkbox

  • ComboBox

  • Color Panel

  • Color Picker

  • DateTimePicker

  • DropDownList

  • DropDownButton

  • File Upload

  • Gauge

  • 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

  • Angular
  • React
  • Vue
  • Bootstrap
  • Theme Builder

  • Framework

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • Card

  • Overview
  • Basic
  • Events
  • Right to Left

  • Carousel

  • Overview
  • Auto Play
  • 3D
  • 3D Directions
  • 3D Template
  • Full Page
  • Template
  • Thumbnails
  • Cards
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • Calendar

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

  • CardView

  • Overview
  • Collapsible Cards
  • Deferred Scroll
  • Drag & Drop
  • Editable Cards
  • Filter, Sort, Search
  • Infinite Scroll
  • Localization
  • Right to Left
  • Settings
  • Virtual Scroll
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • CheckBox

  • Overview
  • Basic
  • Events
  • Images
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • Color Panel

  • Overview
  • Apply Value Mode
  • Default
  • Grid
  • Hexagonal
  • Material Grid
  • Palette Mode
  • Radial
  • Spectrum Grid
  • Events
  • Localization
  • Tooltips
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • Color Picker

  • Overview
  • Color Editing
  • Default
  • Grid
  • Hexagonal
  • Material Grid
  • Palette Mode
  • Radial
  • Spectrum Grid
  • Editing
  • Value Display Mode
  • Value Format
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • DateTimePicker

  • Overview
  • Basic
  • Dropdown Display Mode
  • Dropdown position
  • Edit Modes
  • Formats
  • High Precision/Scientific
  • Localization
  • Time Zones
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • DropDownButton

  • Overview
  • Auto Height
  • Auto Position
  • Button Position
  • Dropdown Position
  • Dropdown Resize
  • Open Modes
  • Events
  • Methods
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • File Upload

  • Overview
  • Directory
  • Drop Zone
  • Events
  • File Zone
  • Images only
  • Item Template
  • Localization
  • Multiple
  • Show Progress
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • Gantt Chart

  • Overview
  • Auto Height
  • Auto Schedule
  • Auto Scroll
  • Expand/Collapse
  • Custom Popup Editor
  • Custom Task Editor
  • Disable Drag Resize
  • Duration
  • 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 Connections
  • View
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • Grid

  • Overview
  • Featured
  • Charting Grid Data
  • Dashboard
  • Business
  • Spreadsheet
  • Spreadsheet from JSON
  • Financial Live Data
  • Auto-show Select Checkbox
  • Test App
  • Init
  • Default Init
  • Init from DIV
  • Init from Attribute
  • Import as ES6 Module
  • Smart 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
  • 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
  • Row Resize
  • Columns: Dynamic Width
  • 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
  • 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: Styling
  • Filter
  • Filtering
  • Sort
  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • LED

  • Overview
  • Input Group
  • Input Group with Custom Elements

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • ListMenu

  • Overview
  • Basic
  • Data Source
  • Filterable
  • Grouped
  • Lazy Loading
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • MaskedTextBox

  • Overview
  • Basic
  • Cut, Copy & Paste
  • Hide Prompt char on Blur
  • Overwrite Mode
  • Prompt char
  • Validation
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • MultiSplitButton

  • Overview
  • Basic
  • Button Group
  • Button Position
  • Checkboxes
  • Events
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • MultilineTextBox

  • Overview
  • Basic
  • Display Mode
  • Enter Key Behavior
  • Resizable
  • Scrollbars
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • NumericTextBox

  • Overview
  • Basic
  • Complex Numbers
  • Floating-Point Numbers
  • Integer Numbers
  • Localization
  • Scientific Notation Numbers
  • Styling
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • Pager

  • Overview
  • Basic
  • Events
  • Localization
  • Page Size Selector
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • PasswordTextBox

  • Overview
  • Basic
  • Custom Password Strength
  • Events
  • Password Icon
  • Strength
  • Localization
  • Strength Template
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • PowerButton

  • Overview

  • ProgressBar

  • Overview
  • Barber Shop Style
  • Basic
  • Amazon Echo Style
  • Events
  • Methods
  • Nested Button
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • Query Builder

  • Overview
  • Custom Operations
  • Value
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • RadioButton

  • Overview
  • Basic
  • Events
  • Images
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • RepeatButton

  • Overview

  • ScrollBar

  • Overview
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • Sortable

  • Overview
  • List
  • Vertical Puzzle
  • Horizontal Puzzle
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • SwitchButton

  • Overview
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • Table

  • Overview
  • Table Bordered
  • Table Dark Bordered
  • Table CRUD
  • Sort
  • Sort by Many Columns
  • Dark Table
  • Dark Head
  • Hover
  • Primary Head
  • Striped
  • Responsive Table
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • TextBox

  • Overview
  • Auto Complete
  • Basic
  • Data Source Callback
  • Display Mode
  • Events
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • TimePicker

  • Overview
  • 24-hour Format
  • Auto Switch to Minutes
  • Basic
  • Footer
  • Landscape View
  • Settings
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • Toast

  • Overview
  • Auto Close
  • Basic
  • Blink
  • Custom Container
  • Custom Icon
  • Events
  • Item Template
  • Modal
  • Settings
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • ToggleButton

  • Overview
  • Using with Angular
  • Using with Vue
  • Using with React

  • Tooltip

  • Overview
  • Absolute Position
  • Basic
  • Custom Arrow Position
  • Events
  • On Progress Bar
  • Right to Left
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

Smart.Grid

Theme

Edit Theme
DEMO
INDEX.JS
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




	


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 HTML Elements by jQWidgets © 2018-2019. All Rights Reserved.