How to use cheetah-grid - 5 common examples

import cheetahGrid from 'cheetah-grid'
import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router'
import CGrid from 'vue-cheetah-grid'
import App from './App.vue'

Vue.use(VueRouter)
Vue.use(CGrid)

Vue.filter('numberDelimiter', (value) => value.toLocaleString())

// todo use fmt
Vue.filter('dateFormat', (d, fmt) => d ? `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}` : '')

cheetahGrid.themes.default = cheetahGrid.themes.default.extends({
  // font: '16px Roboto, sans-serif'
})
// router hook
router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title} | Cheetah Grid Demo`
  next()
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

function createGrid (el, v) {
  const personsDataSource = generatePersonsDataSource(1000000)

  const startTime = new Date()

  const grid = new cheetahGrid.ListGrid({
    parentElement: el,
    header: [
      { field: 'check', caption: '', width: 50, columnType: 'check', action: 'check' },
      { field: 'personid', caption: 'ID', width: 85 },
      {
        field: 'stars',
        caption: 'Class',
        width: 150,
        columnType: new cheetahGrid.columns.type.IconColumn({
          name: 'star'
        }),
        style: {
          color: 'gold'
        },
        action: new cheetahGrid.columns.action.InlineMenuEditor({
          options: [
            { value: 1, classList: 'stars', html: '<i class="material-icons">star</i>' },
            { value: 2, classList: 'stars', html: '<i class="material-icons">star</i>'.repeat(2) },
            { value: 3, classList: 'stars', html: '<i class="material-icons">star</i>'.repeat(3) },
            { value: 4, classList: 'stars', html: '<i class="material-icons">star</i>'.repeat(4) },
            { value: 5, classList: 'stars', html: '<i class="material-icons">star</i>'.repeat(5) }
          ]
        })
      },
      {

action: new cheetahGrid.columns.action.SmallDialogInputEditor({
              classList: 'helper-text--right-justified',
              helperText (value) {
                return `${value.length}/20`
              },
              inputValidator (value) {
                return value.length > 20 ? `over the max length. ${value.length}` : null
              }
            })
          },
          {
            field: 'lname',
            caption: 'Last Name',
            width: '20%',
            minWidth: 150,
            action: new cheetahGrid.columns.action.SmallDialogInputEditor({
              classList: 'helper-text--right-justified',
              helperText (value) {
                return `${value.length}/20`
              },
              inputValidator (value) {
                return value.length > 20 ? `over the max length. ${value.length}` : null
              }
            })

          }
        ]
      },
      {
        field: 'progress',
        caption: 'Progress',
        width: '10%',

export function normalizeAction (action) {
  if (action && typeof action !== 'string') {
    if (typeof action === 'function') {
      action = new cheetahGrid.columns.action.Action({
        action
      })
    } else if (typeof action.actionName === 'string') {
      action = new cheetahGrid.columns.action[action.actionName](action.option)
    }
  }
  return action
}

function createGrid (el, v) {
  const personsDataSource = generatePersonsDataSource(1000000)

  const startTime = new Date()

  const grid = new cheetahGrid.ListGrid({
    parentElement: el,
    header: [
      { field: 'check', caption: '', width: 50, columnType: 'check', action: 'check' },
      { field: 'personid', caption: 'ID', width: 85 },
      {
        field: 'stars',
        caption: 'Class',
        width: 150,
        columnType: new cheetahGrid.columns.type.IconColumn({
          name: 'star'
        }),
        style: {
          color: 'gold'
        },
        action: new cheetahGrid.columns.action.InlineMenuEditor({
          options: [