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

  • Most Popular

  • Framework

  • Grid

  • Chart

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

  • Card

  • Overview
  • Basic
  • Events

  • Carousel

  • Overview
  • Auto Play
  • 3D
  • 3D Directions
  • 3D Template
  • Full Page
  • Template
  • Thumbnails
  • Cards
  • 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

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

  • CheckBox

  • Overview
  • Basic
  • Events
  • Images
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • ListMenu

  • Overview
  • Basic
  • Data Source
  • Filterable
  • Grouped
  • Lazy Loading
  • 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
  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

  • MultiSplitButton

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

  • MultilineTextBox

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

  • NumericTextBox

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

  • Pager

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

  • PasswordTextBox

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

  • PowerButton

  • Overview

  • ProgressBar

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

  • Query Builder

  • Overview
  • Custom Operations
  • Value
  • Using with Angular
  • Using with Vue
  • Using with React

  • RadioButton

  • Overview
  • Basic
  • Events
  • Images
  • Using with Angular
  • Using with Vue
  • Using with React

  • RepeatButton

  • Overview

  • ScrollBar

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

  • Sortable

  • Overview
  • List
  • Vertical Puzzle
  • Horizontal Puzzle
  • Using with Angular
  • Using with Vue
  • Using with React

  • SwitchButton

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

  • TextBox

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

  • TimePicker

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

  • Toast

  • Overview
  • Auto Close
  • Basic
  • Blink
  • Custom Container
  • Custom Icon
  • Events
  • Item Template
  • Modal
  • Settings
  • 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
  • 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
  • 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
  • Using with Angular
  • Using with Vue
  • Using with React

Smart.Table

Theme

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

				
		

		

			

			
		

		

			

				
		

		

			

		
	
		

		
	
		
		

	
		

			

				

					

						
	
							
							

						

					

				

			

	  	

		

		
			

	

		
		
		
		
		
	

	

		
		
		
	

	

		
		
	






Smart Table Web Component Table-sort 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.