/
browser-example.html
executable file
·100 lines (91 loc) · 2.65 KB
/
browser-example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/ansi_up@4.0.4/ansi_up.min.js"></script>
<script src="./../dist/tty-table.cjs.js"></script>
<script src="./../dist/tty-table.umd.js"></script>
<script type="module">
import Table from './../dist/tty-table.esm.js'
// let Table = require('tty-table') // tty-table.cjs.js
// let Table = TTY_Table; // tty-table.umd.js
let header = [
{
value: "item",
headerColor: "cyan",
color: "white",
align: "left",
width: 20
},
{
value: "price",
color: "red",
width: 10,
formatter: function (value) {
var str = `$${value.toFixed(2)}`
if(value > 5) {
str = this.style(str, "green")
}
return str
}
},
{
alias: "Is organic?",
value: "organic",
width: 15,
formatter: function (value) {
if(value === "yes") {
value = this.style(value, "bgGreen", "black")
} else{
value = this.style(value, "bgRed", "white")
}
return value
}
}
]
// Example with arrays as rows
const rows = [
["tallarin verde", 5.50, "yes"],
["aji de gallina", 4.50, "no"],
]
const footer = [
"TOTAL",
function (cellValue, columnIndex, rowIndex, rowData) {
let total = rowData.reduce((prev, curr) => {
return prev + curr[1]
}, 0)
.toFixed(2)
return `$${total}`
},
function (cellValue, columnIndex, rowIndex, rowData) {
let total = rowData.reduce((prev, curr) => {
return prev + ((curr[2] === "yes") ? 1 : 0)
}, 0)
return `${ (total / rowData.length * 100).toFixed(2) }%`
}
]
const options = {
borderStyle: "solid", // only "dashed" works with iife module
borderColor: "green",
paddingBottom: 0,
headerAlign: "center",
align: "center",
color: "white",
truncate: "..."
}
let ANSI = Table(header, rows, footer, options).render()
console.log(ANSI);
var ansi_up = new AnsiUp;
var html = ansi_up.ansi_to_html(ANSI);
setTimeout(function(){
document.getElementById('example').innerHTML = html;
},200);
</script>
</head>
<body>
<h2>Source: examples/browser-example.html</h2>
Only known to be supported in Chrome > 79.
<pre>
<span id="example"></span>
</pre>
</body>
</html>