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

A Vue.js wrapper component for Grid.js
https://github.com/grid-js/gridjs-vue

grid table vue vuejs

Last synced: 3 months ago
JSON representation

A Vue.js wrapper component for Grid.js

• Host: GitHub
• URL: https://github.com/grid-js/gridjs-vue
• Owner: grid-js
• Created: 2020-06-16T08:51:02.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-06-17T02:24:41.000Z (about 1 year ago)
• Last Synced: 2025-03-30T20:13:00.902Z (3 months ago)
• Topics: grid, table, vue, vuejs
• Language: TypeScript
• Homepage: https://gridjs.io
• Size: 2.61 MB
• Stars: 98
• Watchers: 4
• Forks: 24
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# gridjs-vue

![gridjs-vue logo](https://user-images.githubusercontent.com/2541728/84843482-ffc31c00-b015-11ea-95e8-dc6fb3931ad5.png)

A Vue wrapper component for [Grid.js](https://gridjs.io).

[![npm](https://img.shields.io/npm/v/gridjs-vue?color=blue&label=current&style=flat-square)](https://www.npmjs.com/package/gridjs-vue)

![Grid.js API

version](https://img.shields.io/badge/Grid.js%20API-v5.0.1-blue?style=flat-square)

![GitHub last commit](https://img.shields.io/github/last-commit/grid-js/gridjs-vue?color=41B883&style=flat-square)

[![GitHub

issues](https://img.shields.io/github/issues/grid-js/gridjs-vue?color=41B883&style=flat-square)](https://github.com/grid-js/gridjs-vue/issues)

[![Discord](https://img.shields.io/discord/711188165850955858?color=41B883&style=flat-square&label=discord)](https://discord.com/invite/K55BwDY)

## Install

```sh

npm install gridjs-vue

```

Also available on [unpkg](https://unpkg.com/browse/gridjs-vue/dist/) and [Skypack](https://www.skypack.dev/view/gridjs-vue)!

```html

  import { Grid } from 'gridjs-vue'

  export default {

    components: {

      Grid

    }

  }

```

## Basic Usage

Pass `columns` (an array of column headers) and either `rows`, `from`, or `server` as a data source to the component. Everything else is optional. Pass in new data to update the table.

**[Read the full documentation](docs/index.md) for further configuration options.**

### Example

```html

  

  import Grid from 'gridjs-vue'

  export default {

    name: 'Cars',

    components: {

      Grid

    },

    data() {

      return {

        columns: ['Make', 'Model', 'Year', 'Color'],

        rows: [

          ['Ford', 'Fusion', '2011', 'Silver'],

          ['Chevrolet', 'Cruz', '2018', 'White']

        ]

      }

    },

    methods: {

      myMethod() {

        console.log("It's ready!")

      }

    }

  }

```

## 🤝 Contributing

Originally authored by [Daniel Sieradski](https://twitter.com/self_agency).

Contributions, issues and feature requests are welcome!

Feel free to check [issues page](https://github.com/grid-js/gridjs-vue/issues).

## Show your support

Give a ⭐️ if this project helped you!