Smart HTML Elements

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

  • HTML Accordion UI ElementAccordion

  • HTML Badge UI ElementBadge

  • HTML Button UI ElementButton

  • HTML Calendar UI ElementCalendar

  • HTML Card UI ElementCard

  • HTML Carousel UI ElementCarousel

  • HTML Checkbox UI ElementCheckbox

  • HTML ComboBox UI ElementComboBox

  • HTML DateTimePciker UI ElementDateTimePicker

  • HTML Docking Layout UI ElementDocking Layout

  • HTML DropDownList UI ElementDropDownList

  • HTML Grid UI ElementGrid

  • HTML Gauge UI ElementGauge

  • HTML ListBox UI ElementListBox

  • HTML ListMenu UI ElementListMenu

  • HTML MaskedTextBox UI ElementMaskedTextBox

  • HTML Menu UI ElementMenu

  • HTML MultilineTextBox UI ElementMultilineTextBox

  • HTML MultiSplitButton UI ElementMultiSplitButton

  • HTML NumericTextBox UI ElementNumericTextBox

  • HTML Pager UI ElementPager

  • HTML PasswordTextBox UI ElementPasswordTextBox

  • HTML PowerButton UI ElementPowerButton

  • HTML ProgressBar UI ElementProgressBar

  • HTML RadioButton UI ElementRadioButton

  • HTML RepeatButton UI ElementRepeatButton

  • HTML ScrollBar UI ElementScrollBar

  • HTML Slider UI ElementSlider

  • HTML Splitter UI ElementSplitter

  • HTML SwitchButton UI ElementSwitchButton

  • HTML Table UI ElementTable

  • HTML Tabs UI ElementTabs

  • HTML Tank UI ElementTank

  • HTML TextBox UI ElementTextBox

  • HTML TimePicker UI ElementTimePicker

  • HTML Toast UI ElementToast

  • HTML ToggleButton UI ElementToggleButton

  • HTML Tooltip UI ElementTooltip

  • HTML Tree UI ElementTree

  • HTML Window UI ElementWindow

  • HTML FrameworkFramework

  • Create Custom Element
  • Introduction
  • Overview
  • Loops. Render Table with smart-for
  • Declarative Rendering
  • Event Binding
  • Sub Property Two-Way Binding
  • Form Binding
  • Handling User Input
  • Form Checkbox Binding
  • Form Checkbox Binding to Array
  • Form DropDownList Binding
  • Form Radio Input Binding
  • Form TextBox 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
  • HTML AccordionAccordion

  • Overview
  • Basic
  • Events
  • Methods
  • Expand Modes
  • In Tabs
  • With Tabs
  • Reorder
  • HTML BadgeBadge

  • Overview
  • HTML ButtonButton

  • Overview
  • Basic
  • Events
  • Images
  • HTML CardCard

  • Overview
  • Basic
  • Events
  • HTML CardCarousel

  • Overview
  • Auto Play
  • 3D
  • 3D Directions
  • 3D Template
  • Full Page
  • Template
  • Thumbnails
  • Cards
  • HTML CalendarCalendar

  • 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
  • HTML CheckBoxCheckBox

  • Overview
  • Basic
  • Events
  • Images
  • HTML ComboBoxComboBox

  • 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
  • HTML DateTimePickerDateTimePicker

  • Overview
  • Basic
  • Dropdown Display Mode
  • Dropdown position
  • Edit Modes
  • Formats
  • High Precision/Scientific
  • Localization
  • Time Zones
  • HTML DropDownListDropDownList

  • 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
  • HTML DropDownListDocking 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
  • HTML GaugeGauge

  • Overview
  • Analog Display Type
  • Basic
  • Change Font Size
  • Coercion
  • Custom Interval
  • Custom Needle
  • Date Scale
  • Integer 64-bit
  • Logarithmic Scale
  • Mechanical Action
  • Size-Mode Auto
  • Styling
  • Tick label settings
  • HTML GridGrid

  • Overview
  • Auto Size
  • Merged Cells(RowSpan, ColSpan)
  • Checkbox Selection
  • Columns & Rows
  • Columns: CRUD
  • Rows: CRUD
  • Columns: Dynamic Width
  • Columns: Resize
  • Row Headers
  • Freeze Column
  • Freeze Last Column
  • Freeze First & Last Column
  • Freeze Rows
  • Freeze Far Rows
  • Freeze First & Last Row
  • Freeze Rows & Columns
  • Live Updates
  • Live Updates(1s)
  • Live Updates Performance(50ms)
  • Pagination
  • Pagination
  • Pagination: Options
  • Sort
  • Sort by One Column
  • Sort by Many Columns
  • Sort Animation
  • Scrolling
  • Scroll: Infinite
  • Scroll: Virtual
  • Scroll: Deferred
  • HTML LEDLED

  • Overview
  • HTML ListBoxListBox

  • Overview
  • Basic
  • Checkboxes
  • Custom Filtering
  • Editable Items
  • Filter
  • Grouping
  • Item Template
  • Lazy Loading
  • Methods
  • Radio Buttons
  • Reorder
  • Multiple Selection
  • Virtualization
  • HTML ListMenuListMenu

  • Overview
  • Basic
  • Data Source
  • Filterable
  • Grouped
  • Lazy Loading
  • HTML MaskedTextBoxMaskedTextBox

  • Overview
  • Basic
  • Cut, Copy & Paste
  • Hide Prompt char on Blur
  • Overwrite Mode
  • Prompt char
  • Validation
  • HTML MenuMenu

  • 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
  • HTML MultiSplitButtonMultiSplitButton

  • Overview
  • Basic
  • Button Group
  • Button Position
  • Checkboxes
  • Events
  • HTML MultilineTextBoxMultilineTextBox

  • Overview
  • Basic
  • Display Mode
  • Enter Key Behavior
  • Resizable
  • Scrollbars
  • HTML NumericTextBoxNumericTextBox

  • Overview
  • Basic
  • Complex Numbers
  • Floating-Point Numbers
  • Integer Numbers
  • Localization
  • Scientific Notation Numbers
  • Styling
  • HTML PagerPager

  • Overview
  • Basic
  • Events
  • Localization
  • Page Size Selector
  • HTML PasswordTextBoxPasswordTextBox

  • Overview
  • Basic
  • Custom Password Strength
  • Events
  • Password Icon
  • Strength
  • Localization
  • Strength Template
  • HTML PowerButtonPowerButton

  • Overview
  • HTML ProgressBarProgressBar

  • Overview
  • Barber Shop Style
  • Basic
  • Amazon Echo Style
  • Events
  • Methods
  • Nested Button
  • HTML RadioButtonRadioButton

  • Overview
  • Basic
  • Events
  • Images
  • HTML RepeatButtonRepeatButton

  • Overview
  • HTML ScrollBarScrollBar

  • Overview
  • HTML SliderSlider

  • Overview
  • Basic
  • Buttons
  • Click Coordinates
  • Coercion
  • Custom Interval
  • Date Scale
  • Integer Scale
  • Labels
  • Logarithmic Scale
  • Mechanical Action
  • Range Selection
  • Ticks On Track
  • Tooltip
  • HTML SplitterSplitter

  • Overview
  • Auto Sizing
  • Expand / Collapse
  • Events
  • Live Resize
  • Locked Items
  • Methods
  • Min / Max Item Size
  • Nested Splitters
  • Orientation
  • Resize Modes
  • Resize With Window
  • HTML SwitchButtonSwitchButton

  • Overview
  • HTML TableTable

  • Overview
  • Table Bordered
  • Table Dark Bordered
  • Table CRUD
  • Sort
  • Sort by Many Columns
  • Dark Table
  • Dark Head
  • Hover
  • Primary Head
  • Striped
  • Responsive Table
  • HTML TabsTabs

  • 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
  • HTML TankTank

  • 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
  • HTML TextBoxTextBox

  • Overview
  • Auto Complete
  • Basic
  • Data Source Callback
  • Display Mode
  • Events
  • HTML TimePickerTimePicker

  • Overview
  • 24-hour Format
  • Auto Switch to Minutes
  • Basic
  • Footer
  • Landscape View
  • Settings
  • HTML ToastToast

  • Overview
  • Auto Close
  • Basic
  • Blink
  • Custom Container
  • Custom Icon
  • Events
  • Item Template
  • Modal
  • Settings
  • HTML ToggleButtonToggleButton

  • Overview
  • HTML TooltipTooltip

  • Overview
  • Absolute Position
  • Basic
  • Custom Arrow Position
  • Events
  • On Progress Bar
  • HTML TreeTree

  • 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
  • HTML WindowWindow

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

Smart.Table

Source

Custom Elements Angular
index.js
index.htm
styles.css
app.component.ts
app.component.html
app.component.css
Smart('#table', class {
	get properties() {
		return {
		    dataSource: new Smart.DataAdapter(
			{
				dataSource: getCountriesData(),
				dataFields:
				[
					'ID: number',
					'Country: string',
					'Area: number',
					'Population_Urban: number',
					'Population_Rural: number',
					'Population_Total: number',
					'GDP_Agriculture: number',
					'GDP_Industry: number',
					'GDP_Services: number',
					'GDP_Total: number'
				]
			}),
			columns: [
				'Country',
				'Area',
				'Population_Rural',
				'Population_Total',
				'GDP_Total'
			]
		}
	}
});

window.onload = function() {
	const table = document.getElementById('table');
	
	let counter = 0;
	
	document.getElementById('add').onclick = function() {
		counter++;
		
		table.dataSource.add({Country: "Bulgaria" + counter, Area: "100000", Population_Rural: "8000000", Population_Total: "8100000", GDP_TOTAL: "12321321"});
	}

	document.getElementById('remove').onclick = function() {
		if (table.dataSource.length > 0) {
			table.dataSource.remove(table.dataSource.length-1);
		}
	}
	
	document.getElementById('update').onclick = function() {
		if (table.dataSource.length > 0) {
			counter++;
			table.dataSource.update(0, {Country: "Bulgaria" + counter, Area: "100000", Population_Rural: "8000000", Population_Total: "8100000", GDP_TOTAL: "12321321321"});
		}
	}
}
			
Smart('#table', class {
	get properties() {
		return {
		    dataSource: new Smart.DataAdapter(
			{
				dataSource: getCountriesData(),
				dataFields:
				[
					'ID: number',
					'Country: string',
					'Area: number',
					'Population_Urban: number',
					'Population_Rural: number',
					'Population_Total: number',
					'GDP_Agriculture: number',
					'GDP_Industry: number',
					'GDP_Services: number',
					'GDP_Total: number'
				]
			}),
			columns: [
				'Country',
				'Area',
				'Population_Rural',
				'Population_Total',
				'GDP_Total'
			]
		}
	}
});

window.onload = function() {
	const table = document.getElementById('table');
	
	let counter = 0;
	
	document.getElementById('add').onclick = function() {
		counter++;
		
		table.dataSource.add({Country: "Bulgaria" + counter, Area: "100000", Population_Rural: "8000000", Population_Total: "8100000", GDP_TOTAL: "12321321"});
	}

	document.getElementById('remove').onclick = function() {
		if (table.dataSource.length > 0) {
			table.dataSource.remove(table.dataSource.length-1);
		}
	}
	
	document.getElementById('update').onclick = function() {
		if (table.dataSource.length > 0) {
			counter++;
			table.dataSource.update(0, {Country: "Bulgaria" + counter, Area: "100000", Population_Rural: "8000000", Population_Total: "8100000", GDP_TOTAL: "12321321321"});
		}
	}
}		
<!DOCTYPE html>
<html>
<head>
    <title>Table Add, Remove, Update Rows Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
	<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
	<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
	
    <script type="text/javascript" src="../../scripts/common.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
	<script type="text/javascript" src="../../source/smart.element.js"></script>
    <script type="text/javascript" src="../../source/smart.button.js"></script>
    <script type="text/javascript" src="../../source/smart.data.js"></script>
    <script type="text/javascript" src="../../source/smart.table.js"></script>
    <script type="text/javascript" src="../../scripts/data.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="viewport">
	<div class="demo-description">
		This demo shows how to Add, Remove and Update rows to a Table.
	</div>
    <smart-table class="table-dark table-striped" id="table"></smart-table>
	<div class="options">
		<div class="caption">Settings</div>
		<div class="option"><smart-button id="add">Add</smart-button></div>
		<div class="option"><smart-button id="remove">Remove</smart-button></div>
		<div class="option"><smart-button id="update">Update</smart-button></div>
	</div>
</body>
</html>
#table {
	width: 60%;
	display: block;
}
			#table {
	width: 60%;
	display: block;
}		


Edit in CodePen

Documentation & Learning Resources

  • Getting Started
  • CSS Styling and Appearance
  • API Documentation
  • Demo
  • Download
  • Docs
  • License
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us
HTML Elements

Smart HTML Elements © 2018-2019. All Rights Reserved.