A Vue.js wrapper component for Grid.js

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

It is developed to be used with all popular JavaScript frameworks include React, Angular.js, Vue or without any frameworks!

  • Small. Only 12kb with all plugins (minified and gzipped)
  • Fast! Grid.js has an internal pipeline that takes care of caching and processing data
  • Works with all web frameworks
  • Supports all modern web-browsers
  • No vendor lock-in
  • MIT licensed and Free!

Grid.js uses Preact under the hood to render the templates (Note: but it can be used with any JavaScript frameworks) and employs a minimal Flux architecture to communicate with other components.

gridjs-vue

gridjs-vue logo

A Vue wrapper component for Grid.js.

Install

npm install gridjs-vue

Component Registration

Local Registration

<script>
  import Grid from 'gridjs-vue'

  export default {
    components: {
      Grid
    }
  }
</script>

Global Registration

/* in `main.js` or wherever you specify your global components */
import Grid from 'gridjs-vue'

Vue.use(Grid)

Usage

Pass cols (an array of column headers) and either rows, from, or server as a data source to the component. Everything else is optional.

Refer to Grid.js documentation for specific configuration options.

Basic Example

<template>
  <grid :cols="cols" :rows="rows"></grid>
</template>

<script>
  import Grid from 'gridjs-vue'

  export default {
    name: 'Cars',
    components: {
      Grid
    },
    data() {
      return {
        cols: ['Make', 'Model', 'Year', 'Color'],
        rows: [
          ['Ford', 'Fusion', '2011', 'Silver'],
          ['Chevrolet', 'Cruz', '2018', 'White']
        ]
      }
    }
  }
</script>

Default Options

{
  "autoWidth": true,
  "cols": [""],
  "from": undefined,
  "language": undefined,
  "pagination": false,
  "rows": undefined,
  "search": false,
  "server": undefined,
  "sort": false,
  "theme": "mermaid",
  "width": "100%"
}

Extended Options

<template>
  <grid
    :auto-width="autoWidth"
    :cols="cols"
    :from="from"
    :language="language"
    :pagination="pagination"
    :rows="rows"
    :search="search"
    :server="server"
    :sort="sort"
    :width="width"
  ></grid>
</template>

<script>
  import Grid from 'gridjs-vue'

  export default {
    name: 'MyTable',
    components: {
      Grid
    },
    data() {
      return {
        // REQUIRED:

        // An array containing strings of column headers
        cols: ['col 1', 'col 2'],

        // AND EITHER an array containing row data
        rows: [
          ['row 1 col 1', 'row 1 col 2'],
          ['row 2 col 1', 'row 2 col 2']
        ],

        // OR a string of an HTML table selector to import
        from: '.my-element'

        // OR a server settings object
        server() ({
          url: 'https://api.com/search?q=my%20query',
          then: res => res.data.map(col => [col1.data, col2.data]),
          handle: res => res.status === 404
            ? { data: [] } : res.ok
            ? res.json() : new Error('Something went wrong')
        }),

        // OPTIONAL:

        // Boolean to automatically set table width
        autoWidth: true / false,

        // Localization dictionary object
        language: {},

        // Boolean or pagination settings object
        pagination: true / false || {},

        // Boolean or search settings object
        search: true / false || {},

        // Boolean or sort settings object
        sort: true / false || {},

        // String with name of theme or 'none' to disable
        theme: 'mermaid',

        // String with css width value
        width: '100%',
      }
    }
  }
</script>

Contributing

Originally authored by Daniel Sieradski.

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Download Details:

Author: grid-js

Live Demo: https://gridjs.io/

GitHub: https://github.com/grid-js/gridjs-vue

vuejs vue javascript vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate

Vue.js JWT Authentication with Vuex and Vue Router

Vue Vuex JWT Auth .Vue.js JWT Authentication with Vuex and Vue Router

Build A Vue.js Single-Page App with Vue Router

Vue.js Cinema . Source code for the case-study project from the course Build A Vue.js Single-Page App with Vue Router