Smart.Table

Theme

Smart Table Web Component Table-sort 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');
	
	table.sortBy('Country', 'asc');
}

			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');
	
	table.sortBy('Country', 'asc');
}

<!DOCTYPE html>
<html>
<head>
    <title>Table Sort 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">
		Add "sort-mode" attribute and set it to "one" to make the Table sortable. To make it sortable by many columns, set the attribute to "many"<tbody>.
	</div>
    <smart-table sort-mode="one" class="table-dark table-striped" id="table"></smart-table>
</body>
</html>

Edit in CodePen

Documentation & Learning Resources