Welcome to vue-gridjs 👋

A Vue.js wrapper component for Grid.js

🏠 Homepage

Install

yarn install vue-gridjs || npm install vue-gridjs

Component Registration

Global Registration

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

Vue.use(Grid)

Local Registration

<script>
import Grid from 'vue-gridjs'

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

Usage

Pass either data, from, or server as a data source. Everything else is optional.

Refer to Grid.js documentation for specific configuration options.

<template>
  <grid
    :auto-width="autowidth"
    :data="data"
    :from="from"
    :language="language"
    :pagination="pagination"
    :search="search"
    :server="server"
    :sort="sort"
    :width="width"
  ></grid>
</template>

<script>
import Grid from 'vue-gridjs'

export default {
  name: 'MyTable',
  components: {
    Grid
  },
  data() {
    return {
      auto-width: true/false,             // boolean to automatically set table width
      data: {                             // object containing arrays columns & rows
        cols: ['column 1', 'column 2'],
        rows: ['row 1: col 1', 'row 1: col 2']
      },
      from: '.my-element',                // string of HTML table selector
      language: {},                       // localization dictionary object
      pagination: true/false || {},       // boolean or pagination settings object
      search: true/false || {},           // boolean or search settings object
      server: {},                         // server settings object
      sort: true/false || {},             // boolean or sort settings object
      theme: 'mermaid',                   // string with name of theme
      width: '100%'                       // string with css width value
    }
  }
}
</script>

Author

👤 Daniel Sieradski hello@self.agency

• Website: https://self.agency
• Twitter: @selfagency_llc
• Gitlab: @selfagency
• LinkedIn: @selfagency

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator