@hanzoz/v-grid-on-steroids v0.1.0

Revogrid on steroids

-> Live demo in the Appstore <-

How to use

Install with NPM:

npm i @basf/v-grid-on-steroids --save

DataTable

<template>
  <div>
    <VGridOnSteroids
      border
      :range="true"
      :columns="columns"
      :source="source"
    />
  </div>
</template>

<script>
import VGridOnSteroids from '@hanzoz/v-grid-on-steroids'

export default {
  name: 'App',
  components: {
    VGridOnSteroids
  },
  data () {
    return {
      columns: [
        {
          prop: 'name',
          name: 'Name',
          size: 150,
        },
        {
          prop: 'gender',
          name: 'Gender',
          size: 150,
        }
      ],
      source: [
        {
          name: 'Luke Skywalker',
          gender: '',
        },
        {
          name: '',
          gender: '',
        },
      ],
    }
  }
}
</script>

DataTable with Async Function & custom editor

• Provide a new config on a column called asyncFunc, which takes a text as input and returns a promise as output that resolves to an object with a text property and a state property (good or bad)
• Moreover, you may provide a custom editor to the column

<template>
  <div>
    <VGridOnSteroids
      border
      :range="true"
      :columns="columns"
      :source="source"
    />
  </div>
</template>

<script>
import VGridOnSteroids from '@hanzoz/v-grid-on-steroids'
import { VGridVueEditor } from '@hanzoz/vue-datagrid'
import customComponent from './components/customComponent'

export default {
  name: 'App',
  components: {
    VGridOnSteroids
  },
  data () {
    const customEditor = Vue.extend({ ...customComponent })

    return {
      columns: [
        {
          prop: 'name',
          name: 'Name',
          size: 150,
          asyncFunc: (val) =>
            axios
              .get(`https://swapi.dev/api/people/?search=${val}`)
              .then((r) => {
                return {
                  text: r.data.results[0].name,
                  state: 'good',
                }
              }),
        },
        {
          prop: 'count',
          name: 'Count',
          size: 200,
          editor: VGridVueEditor(customEditor),
        },
      ],
      source: [
        {
          user: 'Luke Skywalker',
          strain: '',
        },
        {
          user: '',
          strain: '',
        },
      ],
    }
  }
}
</script>

Props

Props

Columns

Async Function

When the api call return data, you need to return state property as (good or bad) for the icon to be there or else there won't be any icon showing. A loading state will return when the api call triggered.

columns: [
  {
   ...
    asyncFunc: (val) =>
      axios
        .get(`https://swapi.dev/api/people/?search=${val}`)
        .then((r) => {
          return {
            text: r.data.results[0].name,
            state: 'good',
          }
        }),
    ...
  },

DataTable cell editor

You can use your own custom editor or use the preset component as the editor of the cell

Bundle component

coming soon...

Custom component

For custom component, you need to imnport the component and configure as below

<script>
...
import { VGridVueEditor } from '@hanzoz/vue-datagrid'
import sampleComponent from './components/sampleComponent'

export default {
  ...
  data () {
    const customEditor = Vue.extend({ ...sampleComponent })
    return {
      columns: [
        ...
        {
          ...
          editor: VGridVueEditor(customEditor),
        },
        ...
      ],
      ...
  }
}
</script>