Skip to content

Vue Component that takes your JSON and displays as a HTML Table with superpowers

License

Notifications You must be signed in to change notification settings

julianfrank/JsonGrid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JsonGrid

Vue Component that takes your JSON and displays as a HTML Table with superpowers

Usage

Using Bundlers

When using bundlers like ParcelJS copy the JsonGrid.vue file to your components folder. Then in your script import and then use like any other component

<template>
  <div>
...
      <JsonGrid :data="dataJSON" :search="searchQuery"></JsonGrid>
...
  </div>
</template>

<script>
import Vue from 'vue'
import JsonGrid from "./components/JsonGrid";

export default {
    components: {JsonGrid},
    data:()=>{return {
        dataJSON:{"a","A","b":"B"},
        searchQuery:"a"
    }}
}
</script>

Directly using VanillaJS

For direct JS useage ensure that VueJS is loaded and then followed by the JsonGrid.js file. Then in your script use like any other component. Use the JsonGrid Tag in HTML

<html>
  <div>
...
      <JsonGrid :data="dataJSON" :search="searchQuery"></JsonGrid>
...
  </div>
</html>

import Vue from 'vue'
import JsonGrid from "./components/JsonGrid";

new Vue({
    el: '#myApp',
    components: {JsonGrid},
    data:()=>{return {
        dataJSON:{"a","A","b":"B"},
        searchQuery:"a"
    }}
})

Features

  1. Automatically detects the column heads from the Keys in the JSON provided
  2. Column Sorting on clicking the Column headings
  3. Search Data used to filter the rows with the search term used

Future Features

  1. Sorting using more smart detection of data of the column selected
  2. Table Format and Styling Capability

About

Vue Component that takes your JSON and displays as a HTML Table with superpowers

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published