All Projects → grid-js → gridjs-vue

grid-js / gridjs-vue

Licence: other
A Vue.js wrapper component for Grid.js

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to gridjs-vue

Angular Handsontable
Angular Data Grid with Spreadsheet Look & Feel. Official Angular wrapper for Handsontable.
Stars: ✭ 175 (+143.06%)
Mutual labels:  grid, table
Blazortable
Blazor Table Component with Sorting, Paging and Filtering
Stars: ✭ 249 (+245.83%)
Mutual labels:  grid, table
Vue Easytable
🍉 Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox ...
Stars: ✭ 2,501 (+3373.61%)
Mutual labels:  grid, table
Ka Table
Lightweight MIT React Table component for both TS and JS with Sorting, Filtering, Grouping, Virtualization, Editing and many more
Stars: ✭ 117 (+62.5%)
Mutual labels:  grid, table
streamlit-aggrid
Implementation of Ag-Grid component for Streamlit
Stars: ✭ 465 (+545.83%)
Mutual labels:  grid, table
Grid
Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets and more 💥
Stars: ✭ 573 (+695.83%)
Mutual labels:  grid, table
Griddle
Simple Grid Component written in React
Stars: ✭ 2,494 (+3363.89%)
Mutual labels:  grid, table
Reactables
GigaTables is a ReactJS plug-in to help web-developers process table-data in applications and CMS, CRM, ERP or similar systems.
Stars: ✭ 112 (+55.56%)
Mutual labels:  grid, table
BeeGridTable
BeeGridTable , is a Highly Customizable Table UI component library based on Vue.js. Rich functions、More efficient、Easy to use!
Stars: ✭ 45 (-37.5%)
Mutual labels:  grid, table
react-datasheet-grid
An Airtable-like / Excel-like component to create beautiful spreadsheets.
Stars: ✭ 227 (+215.28%)
Mutual labels:  grid, table
Hot Table
Handsontable - Best Data Grid Web Component with Spreadsheet Look and Feel.
Stars: ✭ 114 (+58.33%)
Mutual labels:  grid, table
react-keyview
React components to display the list, table, and grid, without scrolling, use the keyboard keys to navigate through the data
Stars: ✭ 16 (-77.78%)
Mutual labels:  grid, table
Vue Tables 2
Vue.js 2 grid components
Stars: ✭ 1,518 (+2008.33%)
Mutual labels:  grid, table
Ngrid
A angular grid for the enterprise
Stars: ✭ 157 (+118.06%)
Mutual labels:  grid, table
Vue Grid
A flexible grid component for Vue.js
Stars: ✭ 113 (+56.94%)
Mutual labels:  grid, table
React Table
⚛️ Hooks for building fast and extendable tables and datagrids for React
Stars: ✭ 15,739 (+21759.72%)
Mutual labels:  grid, table
Angular Generic Table
A generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.
Stars: ✭ 100 (+38.89%)
Mutual labels:  grid, table
Ax5ui Grid
Javascript UI Component - GRID ( Excel Grid, jqGrid, angularjs grid, jquery grid, SlickGrid, ag-grid gridify)
Stars: ✭ 102 (+41.67%)
Mutual labels:  grid, table
react-bolivianite-grid
React grid component for virtualized rendering large tabular data.
Stars: ✭ 95 (+31.94%)
Mutual labels:  grid, table
ag-grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
Stars: ✭ 8,743 (+12043.06%)
Mutual labels:  grid, table

gridjs-vue

gridjs-vue logo

A Vue wrapper component for Grid.js.

npm Grid.js API version GitHub last commit GitHub issues Discord

Install

npm install gridjs-vue

Also available on unpkg and Skypack!

<script>
  import { Grid } from 'gridjs-vue'

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

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 for further configuration options.

Example

<template>
  <grid :columns="columns" :rows="rows" @ready="myMethod"></grid>
</template>

<script>
  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!")
      }
    }
  }
</script>

🤝 Contributing

Originally authored by Daniel Sieradski.

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].