<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" >
  <link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="css/compatible.css">
</head>
<body>
  <div id="app"></div>
</body>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="//unpkg.com/docsify-demo-box-vue@1.0.4/dist/docsify-demo-box-vue.min.js"></script>
<script src="//unpkg.com/docsify-edit-on-github@1.0.1/index.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script src="//unpkg.com/vue-data-tables@3.1.2/dist/data-tables.min.js"></script>
<!-- <script src="/data-tables.js"></script> -->
<script src="//unpkg.com/json2csv@3.9.1/dist/json2csv.js"></script>
<script>
  Vue.use(DataTables)
  Vue.use(DataTables.DataTablesServer)
  ELEMENT.locale(ELEMENT.lang.en)

  var data, titles;
  var id = 0;

  var define =
`data = [{
  "content": "Water flood",
  "flow_no": "FW201601010001",
  "flow_type": "Repair",
  "flow_type_code": "repair",
  }, {
  "content": "Lock broken",
  "flow_no": "FW201601010002",
  "flow_type": "Repair",
  "flow_type_code": "repair",
  }, {
  "content": "Help to buy some drinks",
  "flow_no": "FW201601010003",
  "flow_type": "Help",
  "flow_type_code": "help"
}];

titles = [{
  prop: "flow_no",
  label: "NO."
  }, {
  prop: "content",
  label: "Content"
  }, {
  prop: "flow_type",
  label: "Type"
}]`

  var es5define = Babel.transform(define, { presets: ['es2015'] }).code

  eval(es5define)

  var jsResources = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>'
    + '\n<scr' + `ipt src="//unpkg.com/element-ui/lib/index.js"></scr` + 'ipt>'
    + '\n<scr' + `ipt src="//unpkg.com/element-ui/lib/umd/locale/en.js"></scr` + 'ipt>'
    + '\n<scr' + `ipt src="//unpkg.com/vue-data-tables@3.1.2/dist/data-tables.min.js"></scr` + 'ipt>'
  var cssResources = '@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");'
  var bootCode =
    'ELEMENT.locale(ELEMENT.lang.en)\n'
    + 'Vue.use(DataTables)\n'
    + 'Vue.use(DataTables.DataTablesServer)\n'
    + 'var data, titles\n\n' + define + '\n\n';

  window.$docsify = {
    coverpage: true,
    name: 'vue-data-tables',
    repo: 'https://github.com/njleonzhang/vue-data-tables',
    subMaxLevel: 2,
    loadSidebar: true,
    disqus: 'vueDataTables',
    search: 'auto', // default,

    plugins: [
      DemoBoxVue.create(jsResources, cssResources, bootCode),
      EditOnGithubPlugin.create(
        'https://github.com/njleonzhang/vue-data-tables/blob/master/docs/'
      ),
      function (hook) {
        var footer = [
          '<hr/>',
          '<footer>',
          '<span><a href="https://github.com/njleonzhang">leon zhang</a> &copy;2017.</span>',
          '<span>Proudly published with <a href="https://github.com/QingWei-Li/docsify" target="_blank">docsify</a>.</span>',
          '</footer>'
        ].join('')

        hook.afterEach(function (html) {
          return html + footer
        })
      }
    ]
  }
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/disqus.min.js"></script>


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110377374-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-110377374-1');
</script>
</html>