Skip to content

Commit 8baeab2

Browse files
bmarkovbmarkov
authored
Add files via upload
1 parent 9b19795 commit 8baeab2

File tree

21 files changed

+707
-0
lines changed

21 files changed

+707
-0
lines changed

‎demos/table/overview/index.htm‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Table Overview Demo</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
6+
<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
7+
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
8+
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
9+
10+
<script type="text/javascript" src="../../scripts/common.js"></script>
11+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
12+
<script type="text/javascript" src="../../source/smart.element.js"></script>
13+
<script type="text/javascript" src="../../source/smart.core.js"></script>
14+
<script type="text/javascript" src="../../scripts/data.js"></script>
15+
<script src="index.js"></script>
16+
<link rel="stylesheet" type="text/css" href="styles.css" />
17+
</head>
18+
<body class="viewport">
19+
<div class="demo-description">
20+
Our Table web component can be used to wrap or replace standard Tables and add different styles, hover effects, sorting by one or multiple columns, add, remove and update rows.
21+
</div>
22+
<smart-table id="table">
23+
<table>
24+
<thead>
25+
<tr>
26+
<th scope="col">Country</th>
27+
<th scope="col">Area</th>
28+
<th scope="col">Population_Rural</th>
29+
<th scope="col">Population_Total</th>
30+
<th scope="col">GDP_Total</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<tr><td>Brazil</td><td>8515767</td><td>0.15</td><td>205809000</td><td>2353025</td></tr>
35+
<tr><td>China</td><td>9388211</td><td>0.46</td><td>1375530000</td><td>10380380</td></tr>
36+
<tr><td>France</td><td>675417</td><td>0.21</td><td>64529000</td><td>2846889</td></tr>
37+
<tr><td>Germany</td><td>357021</td><td>0.25</td><td>81459000</td><td>3859547</td></tr>
38+
<tr><td>India</td><td>3287590</td><td>0.68</td><td>1286260000</td><td>2047811</td></tr>
39+
<tr><td>Italy</td><td>301230</td><td>0.31</td><td>60676361</td><td>2147952</td></tr>
40+
<tr><td>Japan</td><td>377835</td><td>0.07</td><td>126920000</td><td>4616335</td></tr>
41+
<tr><td>Russia</td><td>17098242</td><td>0.26</td><td>146544710</td><td>1857461</td></tr>
42+
<tr><td>United States</td><td>9147420</td><td>0.19</td><td>323097000</td><td>17418925</td></tr>
43+
<tr><td>United Kingdom</td><td>244820</td><td>0.18</td><td>65097000</td><td>2945146</td></tr>
44+
</tbody>
45+
</table>
46+
</smart-table>
47+
</body>
48+
</html>

‎demos/table/table-bordered-dark/index.htm‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Table Overview Demo</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
6+
<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
7+
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
8+
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
9+
10+
<script type="text/javascript" src="../../scripts/common.js"></script>
11+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
12+
<script type="text/javascript" src="../../source/smart.element.js"></script>
13+
<script type="text/javascript" src="../../source/smart.data.js"></script>
14+
<script type="text/javascript" src="../../source/smart.table.js"></script>
15+
<script type="text/javascript" src="../../scripts/data.js"></script>
16+
<script src="index.js"></script>
17+
<link rel="stylesheet" type="text/css" href="styles.css" />
18+
</head>
19+
<body class="viewport">
20+
<smart-table class="table-hover table-bordered table-striped table-dark" id="table"></smart-table>
21+
</body>
22+
</html>

‎demos/table/table-bordered-dark/index.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
Smart('#table', class {
2+
get properties() {
3+
return {
4+
dataSource: new Smart.DataAdapter(
5+
{
6+
dataSource: getCountriesData(),
7+
dataFields:
8+
[
9+
'ID: number',
10+
'Country: string',
11+
'Area: number',
12+
'Population_Urban: number',
13+
'Population_Rural: number',
14+
'Population_Total: number',
15+
'GDP_Agriculture: number',
16+
'GDP_Industry: number',
17+
'GDP_Services: number',
18+
'GDP_Total: number'
19+
]
20+
}),
21+
columns: [
22+
'Country',
23+
'Area',
24+
'Population_Rural',
25+
'Population_Total',
26+
'GDP_Total'
27+
]
28+
}
29+
}
30+
});
31+
32+
window.onload = function() {
33+
const table = document.getElementById('table');
34+
35+
table.sortBy('Population_Total', 'asc');
36+
}

‎demos/table/table-bordered/index.htm‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Table Bordered Demo</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
6+
<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
7+
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
8+
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
9+
10+
<script type="text/javascript" src="../../scripts/common.js"></script>
11+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
12+
<script type="text/javascript" src="../../source/smart.element.js"></script>
13+
<script type="text/javascript" src="../../source/smart.data.js"></script>
14+
<script type="text/javascript" src="../../source/smart.table.js"></script>
15+
<script type="text/javascript" src="../../scripts/data.js"></script>
16+
<script src="index.js"></script>
17+
<link rel="stylesheet" type="text/css" href="styles.css" />
18+
</head>
19+
<body class="viewport">
20+
<div class="demo-description">
21+
Add .table-bordered for borders on all sides of the table and cells.
22+
</div>
23+
<smart-table class="table-hover table-bordered table-striped" id="table"></smart-table>
24+
</body>
25+
</html>

‎demos/table/table-bordered/index.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
Smart('#table', class {
2+
get properties() {
3+
return {
4+
dataSource: new Smart.DataAdapter(
5+
{
6+
dataSource: getCountriesData(),
7+
dataFields:
8+
[
9+
'ID: number',
10+
'Country: string',
11+
'Area: number',
12+
'Population_Urban: number',
13+
'Population_Rural: number',
14+
'Population_Total: number',
15+
'GDP_Agriculture: number',
16+
'GDP_Industry: number',
17+
'GDP_Services: number',
18+
'GDP_Total: number'
19+
]
20+
}),
21+
columns: [
22+
'Country',
23+
'Area',
24+
'Population_Rural',
25+
'Population_Total',
26+
'GDP_Total'
27+
]
28+
}
29+
}
30+
});
31+
32+
window.onload = function() {
33+
const table = document.getElementById('table');
34+
35+
table.sortBy('Population_Total', 'asc');
36+
}

‎demos/table/table-crud/index.htm‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Table Add, Remove, Update Rows Demo</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
6+
<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
7+
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
8+
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
9+
10+
<script type="text/javascript" src="../../scripts/common.js"></script>
11+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
12+
<script type="text/javascript" src="../../source/smart.element.js"></script>
13+
<script type="text/javascript" src="../../source/smart.button.js"></script>
14+
<script type="text/javascript" src="../../source/smart.data.js"></script>
15+
<script type="text/javascript" src="../../source/smart.table.js"></script>
16+
<script type="text/javascript" src="../../scripts/data.js"></script>
17+
<script src="index.js"></script>
18+
<link rel="stylesheet" type="text/css" href="styles.css" />
19+
</head>
20+
<body class="viewport">
21+
<div class="demo-description">
22+
This demo shows how to Add, Remove and Update rows to a Table.
23+
</div>
24+
<smart-table class="table-dark table-striped" id="table"></smart-table>
25+
<div class="options">
26+
<div class="caption">Settings</div>
27+
<div class="option"><smart-button id="add">Add</smart-button></div>
28+
<div class="option"><smart-button id="remove">Remove</smart-button></div>
29+
<div class="option"><smart-button id="update">Update</smart-button></div>
30+
</div>
31+
</body>
32+
</html>

‎demos/table/table-crud/index.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
Smart('#table', class {
2+
get properties() {
3+
return {
4+
dataSource: new Smart.DataAdapter(
5+
{
6+
dataSource: getCountriesData(),
7+
dataFields:
8+
[
9+
'ID: number',
10+
'Country: string',
11+
'Area: number',
12+
'Population_Urban: number',
13+
'Population_Rural: number',
14+
'Population_Total: number',
15+
'GDP_Agriculture: number',
16+
'GDP_Industry: number',
17+
'GDP_Services: number',
18+
'GDP_Total: number'
19+
]
20+
}),
21+
columns: [
22+
'Country',
23+
'Area',
24+
'Population_Rural',
25+
'Population_Total',
26+
'GDP_Total'
27+
]
28+
}
29+
}
30+
});
31+
32+
window.onload = function() {
33+
const table = document.getElementById('table');
34+
35+
let counter = 0;
36+
37+
document.getElementById('add').onclick = function() {
38+
counter++;
39+
40+
table.dataSource.add({Country: "Bulgaria" + counter, Area: "100000", Population_Rural: "8000000", Population_Total: "8100000", GDP_TOTAL: "12321321"});
41+
}
42+
43+
document.getElementById('remove').onclick = function() {
44+
if (table.dataSource.length > 0) {
45+
table.dataSource.remove(table.dataSource.length-1);
46+
}
47+
}
48+
49+
document.getElementById('update').onclick = function() {
50+
if (table.dataSource.length > 0) {
51+
counter++;
52+
table.dataSource.update(0, {Country: "Bulgaria" + counter, Area: "100000", Population_Rural: "8000000", Population_Total: "8100000", GDP_TOTAL: "12321321321"});
53+
}
54+
}
55+
}

‎demos/table/table-dark-head/index.htm‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Table Head Options</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
6+
<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
7+
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
8+
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
9+
10+
<script type="text/javascript" src="../../scripts/common.js"></script>
11+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
12+
<script type="text/javascript" src="../../source/smart.element.js"></script>
13+
<script type="text/javascript" src="../../source/smart.data.js"></script>
14+
<script type="text/javascript" src="../../source/smart.table.js"></script>
15+
<script type="text/javascript" src="../../scripts/data.js"></script>
16+
<script src="index.js"></script>
17+
<link rel="stylesheet" type="text/css" href="styles.css" />
18+
</head>
19+
<body class="viewport">
20+
<div class="demo-description">
21+
Similar to tables and dark tables, use the modifier classes .thead-primary, .thead-secondary, .thead-surface, .thead-light or .thead-dark to make <thead>s appear in primary, light or dark gray.
22+
</div>
23+
<smart-table class="table-hover table-striped thead-dark" id="table"></smart-table>
24+
</body>
25+
</html>

‎demos/table/table-dark-head/index.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
Smart('#table', class {
2+
get properties() {
3+
return {
4+
dataSource: new Smart.DataAdapter(
5+
{
6+
dataSource: getCountriesData(),
7+
dataFields:
8+
[
9+
'ID: number',
10+
'Country: string',
11+
'Area: number',
12+
'Population_Urban: number',
13+
'Population_Rural: number',
14+
'Population_Total: number',
15+
'GDP_Agriculture: number',
16+
'GDP_Industry: number',
17+
'GDP_Services: number',
18+
'GDP_Total: number'
19+
]
20+
}),
21+
columns: [
22+
'Country',
23+
'Area',
24+
'Population_Rural',
25+
'Population_Total',
26+
'GDP_Total'
27+
]
28+
}
29+
}
30+
});
31+
32+
window.onload = function() {
33+
const table = document.getElementById('table');
34+
35+
table.sortBy('Population_Total', 'asc');
36+
}

‎demos/table/table-dark/index.htm‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Table Dark Demo</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
6+
<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
7+
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
8+
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
9+
10+
<script type="text/javascript" src="../../scripts/common.js"></script>
11+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
12+
<script type="text/javascript" src="../../source/smart.element.js"></script>
13+
<script type="text/javascript" src="../../source/smart.data.js"></script>
14+
<script type="text/javascript" src="../../source/smart.table.js"></script>
15+
<script type="text/javascript" src="../../scripts/data.js"></script>
16+
<script src="index.js"></script>
17+
<link rel="stylesheet" type="text/css" href="styles.css" />
18+
</head>
19+
<body class="viewport">
20+
<div class="demo-description">
21+
Add .table-dark to invert the colors—with light text on dark backgrounds.<tbody>.
22+
</div>
23+
<smart-table class="table-dark" id="table">
24+
<table>
25+
<thead>
26+
<tr>
27+
<th scope="col">Country</th>
28+
<th scope="col">Area</th>
29+
<th scope="col">Population_Rural</th>
30+
<th scope="col">Population_Total</th>
31+
<th scope="col">GDP_Total</th>
32+
</tr>
33+
</thead>
34+
<tbody>
35+
<tr><td>Brazil</td><td>8515767</td><td>0.15</td><td>205809000</td><td>2353025</td></tr>
36+
<tr><td>China</td><td>9388211</td><td>0.46</td><td>1375530000</td><td>10380380</td></tr>
37+
<tr><td>France</td><td>675417</td><td>0.21</td><td>64529000</td><td>2846889</td></tr>
38+
<tr><td>Germany</td><td>357021</td><td>0.25</td><td>81459000</td><td>3859547</td></tr>
39+
<tr><td>India</td><td>3287590</td><td>0.68</td><td>1286260000</td><td>2047811</td></tr>
40+
<tr><td>Italy</td><td>301230</td><td>0.31</td><td>60676361</td><td>2147952</td></tr>
41+
<tr><td>Japan</td><td>377835</td><td>0.07</td><td>126920000</td><td>4616335</td></tr>
42+
<tr><td>Russia</td><td>17098242</td><td>0.26</td><td>146544710</td><td>1857461</td></tr>
43+
<tr><td>United States</td><td>9147420</td><td>0.19</td><td>323097000</td><td>17418925</td></tr>
44+
<tr><td>United Kingdom</td><td>244820</td><td>0.18</td><td>65097000</td><td>2945146</td></tr>
45+
</tbody>
46+
</table>
47+
</smart-table>
48+
</body>
49+
</html>

0 commit comments

Comments
 (0)