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
|
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { Provider } from 'react-redux'
// import App from './app'
import { store } from './store'
// const container = document.createElement('div')
// document.body.appendChild(container)
toArray(document.querySelectorAll('.applet')).forEach(el => {
try {
const payload = JSON.parse(el.dataSet.getItem('payload'))
} catch(e) {
return
}
switch (payload.command) {
case 'load file':
append_tabulator(el, payload)
break
default:
append_react_applet(el, payload)
break
}
})
function append_react_applet(el, payload) {
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<App command={payload} />
</Provider>
</AppContainer>, el
)
}
function append_tabulator(el, payload) {
const table = new Tabulator(el, {
height:"311px",
layout:"fitColumns",
placeholder:"No Data Set",
columns:[
// {title:"Name", field:"name", sorter:"string", width:200},
// {title:"Progress", field:"progress", sorter:"number", formatter:"progress"},
// {title:"Gender", field:"gender", sorter:"string"},
// {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
// {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
// {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
// {title:"Driver", field:"car", align:"center", formatter:"tickCross", sorter:"boolean"},
],
})
const columns = payload.fields.split(', ')
console.log(columns)
if ()
table.setData(path)
}
|