Smart.Table

Theme

Smart Table Web Component Table-crud Demo

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.elements.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