DatagridBvue

Demo

Datagrid Table | Rule engine Filter | Datagrid Rule Creator Modal | Model decorators

Provide Plugin for Grids (table with editable cells). And also components for filtering. This plugin use BootstrapVue.

For displaying tabular data, supports pagination, filtering, sorting, various style options, events, and asynchronous data.

Vue.js v2.7.14 is recommended
Bootstrap-vue is 2.23.1 recommended
Bootstrap is 4.6.0 recommended

Installation

Install with npm

npm install datagrid-bvue

Install with yarn

yarn add datagrid-bvue

Features

Available components:

DataGridTable
DataGridFilter
RuleEngineCreatorModal
Decorators

Available features:

Pagination
Filtering
Sorting
Customizable
Asynchronous data
Custom field types
Custom rules components
Rules schemas
Decorators for models and fields
Customizable style
i18n translation (en, fr)

Demo folder

You can find a demo folder with a complete example. Demo

// Importing styles
import 'datagrid-bvue/style.css';
// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap-vue/dist/bootstrap-vue-icons.min.css'

// setups the plugin with some options
import DataGridPlugin from 'datagrid-bvue'
Vue.use(DataGridPlugin, {
  ruleSchemas: {
    Student: [
      {identifier: 'id', name: 'id', type: 'String'},
      {identifier: 'firstName', name: 'Prenom', type: 'String'},
      {identifier: 'lastName', name: 'Nom', type: 'String'},
    ],
  },
})

can be initialised with custom field type viewers and editors

import CustomTypeViewer from './CustomFieldViewer.vue'
import CustomTypeEditor from './CustomEditor.vue'

Vue.use(DataGridPlugin, {
  lang: 'Fr', //default Fr
  calendarTime: false, //default true
  dateFormat: 'ddd DD-MM-YY HH:mm',
  customFieldTypes: [
    {name: 'SomeType', viewer: CustomTypeViewer, editor: CustomTypeEditor},
  ],
})

can be used with rules schema

Rules schemas allows you to use the Filter component.

Vue.use(DataGridPlugin, {
  lang: 'fr',
  ruleSchemas: {
    Student: [
      {identifier: 'id', name: 'id', type: 'String'},
      {identifier: 'firstName', name: 'Prenom', type: 'String'},
      {identifier: 'lastName', name: 'Nom', type: 'String'},
    ],
  },
})

The Filter component inject inside your provider ctx object a FilterRuleInterface Object.

Usage

Datagrid Table

Extra (provider function, fields type autodetect and pagination)

Autodetect fields type with correct edition component in the cell
Extra slot for actions
Provider for async data and Database connection
- Generated pagination, can be also used with provider function by adding "paginationEntries" props. paginationEntries // number of total entries for pagination using provider function

<template>
  <div>
    <h1>{{ title }}</h1>
    <DataGridTable
      name="school"
      :items="provider"
      @goToEditor="goToItemEditor"
    />
  </div>
</template>

<script lang="ts">
import Vue, { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      title: 'Testing datagrid',
      items: [
        {
          id: 'Rebellious66',
          age: 53,
          first_name: 'Dragon',
          last_name: 'Monkey D.',
          da: new Date(),
          skills: [],
        },
      ],
    }
  },
  methods: {
    async provider(ctx) {
      //ctx
      return this.items
    },
    goToItemEditor(item) {
      const msg = 'open complete editor for item, ' + JSON.stringify(item)
      alert(msg)
    },
  },
})
</script>

Modification handler

<template>
  <div>
    <h1>{{ title }}</h1>
    <DataGridTable
      name="valhalla"
      :items="provider"
      @goToEditor="goToItemEditor"
      @modified="modificationStart"
      :modification-handler="modificationHandler"
    />
  </div>
</template>

<script lang="ts">
import Vue, { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      title: 'Testing datagrid',
      items: [
        {
          id: 'Rebellious66',
          age: 40,
          first_name: 'Ragnar',
          last_name: 'Lothbrok',
          da: new Date(),
          skills: [],
        },
      ],
    }
  },
  computed: {},
  methods: {
    // will call this function after each modification handler routine
    async provider(ctx) {
      // use ctx for api calls
      const delay = (ms) => new Promise((res) => setTimeout(res, ms))
      await delay(2000)
      return this.items
    },
    // can be used to prepare a route to edit page
    goToItemEditor(item) {
      const msg = 'open complete editor for item, ' + JSON.stringify(item)
      alert(msg)
    },
    // you can use a custom modification handler
    async modificationHandler({item, fieldKey, newValue}) {
      item[fieldKey] = newValue
    },
    modificationStart() {
      // a call to the modification handler was emitted
      console.log('modified')
    },
  },
  watch: {},
})
</script>

Other fields

<template>
  <div>
    <h1>{{ title }}</h1>
    <DataGridTable name="school" :items="items" :fields="fields" striped />
  </div>
</template>

<script lang="ts">
import Vue, { defineComponent } from 'vue'
import {Money} from 'ts-money/build'

export default defineComponent({
  data() {
    return {
      title: 'Testing page',
      items: [
        {
          id: 'aaa',
          a: 'hello_0',
          b: 'Fr',
          c: 10,
          d: 'M',
          e: null,
          f: new Money(1200, 'CAD'),
          g: [],
        },
        {
          id: 'bbb',
          a: undefined,
          b: 'fr',
          c: 78,
          d: '',
          e: {className: 'Invoice'},
          f: 89,
          g: [],
        },
        {id: 'ccc', h: '', i: 'QC', j: null},
      ],
      fields: [
        {
          identifier: 'id',
          name: 'Id title',
          config: {
            canView: true,
            canRead: true,
            canEdit: false,
            canFilter: true,
            canSort: true,
          },
          type: 'String',
        },
        {
          identifier: 'a',
          name: 'message',
          config: {
            canView: true,
            canRead: true,
            canEdit: false,
            canFilter: true,
            canSort: true,
          },
          type: 'String',
        },
        {
          identifier: 'b',
          name: 'Language',
          config: {
            isVisible: true,
            isWritable: true,
            showFilter: false,
            showInGrid: true,
            sortable: false,
          },
          type: 'Lang',
        },
        {
          identifier: 'c',
          name: 'Percent',
          config: {
            canView: true,
            canRead: true,
            canEdit: false,
            canFilter: true,
            canSort: true,
          },
          type: 'Percent',
        },
        {
          identifier: 'd',
          name: 'Gender',
          config: {
            canView: true,
            canRead: true,
            canEdit: false,
            canFilter: true,
            canSort: true,
          },
          type: 'Gender',
        },
        {
          identifier: 'e',
          name: 'Other',
          config: {
            canView: true,
            canRead: true,
            canEdit: false,
            canFilter: true,
            canSort: true,
          },
          type: 'Pointer',
          onClickExternalRoutine: this.testPointerHandler,
        },
        {
          identifier: 'f',
          name: 'Account',
          config: {
            canView: true,
            canRead: true,
            canEdit: false,
            canFilter: true,
            canSort: true,
          },
          type: 'Money',
        },
        {
          identifier: 'g',
          name: 'Courses',
          config: {
            canView: true,
            canRead: true,
            canEdit: false,
            canFilter: true,
            canSort: true,
          },
          type: 'Array',
        },
      ],
    }
  },
  methods: {
    async provider(ctx) {
      // const delay = ms => new Promise(res => setTimeout(res, ms));
      // await delay(3000)
      return this.items
    },
    async testPointerHandler(data) {
      // can be used to start move the page or notify an attempt to modify a pointer type
      console.log(data)
    },
  },
})
</script>

A usa as Table

B-Table style props available:

Name	Types
showFilter	Boolean
striped	Boolean
bordered	Boolean
borderless	Boolean
outlined	Boolean
small	Boolean
hover	Boolean
dark	Boolean
fixed	Boolean
footClone	Boolean
headVariant	String
noCollapse	Boolean
responsive	Boolean

<template>
  <div>
    <h1>{{ title }}</h1>
    <DataGridTable
      name="school"
      :items="items"
      :fields="fields"
      @goToEditor="goToItemEditor"
    />
  </div>
</template>

<script lang="ts">
import Vue, { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      title: 'Testing datagrid',
      items: [
        {id: 'aaa', a: 1, b: 2, c: 3},
        {id: 'bbb', a: 4, b: 5, c: 6},
        {id: 'ccc', a: 7, b: 8, c: 9},
      ],
      fields: [
        {
          identifier: 'id',
          name: 'Id title',
          type: 'String',
        },
        {
          identifier: 'a',
          name: 'A',
          type: 'String',
        },
        {
          identifier: 'b',
          name: 'b',
          type: 'String',
        },
      ],
    }
  },
  methods: {
    goToItemEditor(item) {
      const msg = 'open complete editor for item, ' + JSON.stringify(item)
      alert(msg)
    },
  },
})
</script>

Actions slot

An action slot "#action" is available for each row. You can use it to add buttons or other actions.

<template #action="{item, index}">
  action slot
  {{ index }} {{ item }}
</template>

// add an extra field to use in the action slot
const fields = {
  identifier: '#action',
  name: 'Actions',
  config: {
    canView: true,
    canRead: true,
    canEdit: false,
    canFilter: true,
    canSort: true,
  },
  type: FieldType.String,
}

Rule Engine Filter

To use the filter you need to add the target name that matches the schema name

// config

Vue.use(DataGridPlugin, {
  ruleSchemas: {
    Student: [
      {identifier: 'id', name: 'id', type: 'String'},
      {identifier: 'firstName', name: 'Prenom', type: 'String'},
    ],
  },
})

// usage

<DataGridTable
  name="42 School"
  target="Student"
  :items="provider"
  :fields="fields"
/>

You can also use the filter as a standalone component

<RuleEngineFilter
  v-model="filterBuild"
  :field-list="authorisedFields"
  operator="AND"
  target="Student"
  visible-name="School"
/>

Modal Rule Creator

<template>
  <div class="my-4">
    <h2>{{ title }}</h2>
    <div class="d-inline-flex">
      <button class="btn btn-primary ml-4" @click="toggleModal">
        Toggle Modal
      </button>
      <button
        class="btn btn-primary ml-4"
        @click="
          () => {
            useEditor = !useEditor
          }
        "
      >
        Toggle custom editor
      </button>
    </div>
    <RuleEngineCreatorModal
      ref="mod"
      v-model="modalVisible"
      :use-editor="useEditor"
      :rule="filterBuild"
      target="Invoice"
      @update:rule="
        (filterEdited) => {
          filterBuild = filterEdited
        }
      "
    >
      <template v-slot:editor="{value, onEditorInput}">
        <div class="form-group">
          <label for="">Custom editor</label>
          <input
            type="text"
            class="form-control"
            :value="value"
            @input="(val) => onEditorInput(val.target.value)"
          />
        </div>
      </template>
    </RuleEngineCreatorModal>
  </div>
</template>

<script lang="ts">
import Vue, { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      title: 'Rule Creation Modal Tester',
      filterBuild: null,
      modalVisible: false,
      useEditor: false,
    }
  },
  methods: {
    toggleModal() {
      this.$refs.mod.toggleModal()
    },
  },
})
</script>

Model decorators

DatagridBvue offers powerful model decorators to streamline the setup of your grid data and configurations.

@DataGridModel() Marks the class as a model for the data grid system. @DataGridField(type: string, options?: FieldOptions)

Usage:

@DataGridModel()
export class Discount {
  @DataGridField('String')
  id!: string;

  @DataGridField('String')
  name!: string;

  @DataGridField('Number')
  value!: number;
}

@DataGridModel()
export class Invoice {
  @DataGridField('Money')
  total!: number;

  @DataGridField('InvoiceStatus')
  status!: string;

  @DataGridField('Date')
  createdAt!: unknown;

  @DataGridField('Pointer', { linkedEntityClass: Discount })
  discount!: Discount | undefined;
}

@DataGridModel()
class Student {
    @DataGridField()
    id: string;
    
    @DataGridField()
    firstName: string;
    
    @DataGridField()
    lastName: string;
    
    @DataGridField('Pointer', { linkedEntityClass: Invoice })
    invoice!: Invoice | undefined;
}

Utility:

getAllGridRulesConfig() - Returns a record object where keys are entity labels and values are an array of schema definitions for those entities. Can be used to setup the ruleSchemas option for the plugin.

  const options: DataGridOptions = {
      ...
      ruleSchemas: getAllGridRulesConfig(),
  }

getFieldsForEntity(entityClass: DataGridModelClass) - Fetches the fields for a given entity class.
getAllRegisteredEntitiesData - Fetches all the registered entities data.
getAllRegisteredModelIdentifiers - Fetches the identifiers for all registered entity models.
getFieldsForEntityId(entityId: string) - Fetches the fields for a given entity id.
getFieldsForEntityLabel(entityLabel: string) - Fetches the fields for a given entity label.
getAllGridFieldsConfig() - Returns a record object where keys are entity labels and values are an array of field data for those entities.

Name		Name	Last commit message	Last commit date
Latest commit History 135 Commits
.github		.github
dev		dev
spec		spec
src		src
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
index.html		index.html
jest.config.ts		jest.config.ts
package.json		package.json
tsconfig.demo.json		tsconfig.demo.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

DatagridBvue

Demo

Table of Contents

Installation

Install with npm

Install with yarn

Features

Demo folder

can be initialised with custom field type viewers and editors

can be used with rules schema

Usage

Datagrid Table

Extra (provider function, fields type autodetect and pagination)

A usa as Table

Actions slot

Rule Engine Filter

Modal Rule Creator

Model decorators

About

Releases 5

Packages

Contributors 3

Languages

newera-systems/parse-vue-datagrid-engine

Folders and files

Latest commit

History

Repository files navigation

DatagridBvue

Demo

Table of Contents

Installation

Install with npm

Install with yarn

Features

Demo folder

can be initialised with custom field type viewers and editors

can be used with rules schema

Usage

Datagrid Table

Extra (provider function, fields type autodetect and pagination)

A usa as Table

Actions slot

Rule Engine Filter

Modal Rule Creator

Model decorators

About

Resources

Stars

Watchers

Forks

Releases 5

Packages 0

Contributors 3

Languages

Packages