Skip to content

To the moon and back: Breaking changes! #368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jun 9, 2021
Merged

To the moon and back: Breaking changes! #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
995c66b
Change attribute names to match GridJS API
selfagency Jun 8, 2021
ea93940
Update table on window resize
selfagency Jun 8, 2021
a5d40d7
To the moon and back
selfagency Jun 9, 2021
f88802d
Add ready event
selfagency Jun 9, 2021
f2cf99b
Rework new helper function
selfagency Jun 9, 2021
17626e7
update devdeps
selfagency Jun 9, 2021
40da820
Update README.md
selfagency Jun 9, 2021
af3db2b
All new documentation
selfagency Jun 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,11 @@ module.exports = {
browser: true,
node: true
},
extends: [
'plugin:vue/essential',
'eslint:recommended',
'@vue/prettier',
'plugin:import/errors',
'plugin:import/warnings'
],
extends: ['plugin:vue/recommended', 'eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings'],
parserOptions: {
parser: 'babel-eslint'
},
plugins: ['html'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
Expand Down
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

All notable changes to this project will be documented in this file. Dates are displayed in UTC.

## [Unreleased]

## [5.0.1] - 2021-06-08

- Major update!
Expand Down
274 changes: 17 additions & 257 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,21 @@

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

[![npm](https://img.shields.io/npm/v/gridjs-vue?color=41B883&label=current&style=flat-square)](https://www.npmjs.com/package/gridjs-vue) ![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)
[![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
```

### Component Registration

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

```html
<script>
Expand All @@ -28,26 +32,17 @@ npm install gridjs-vue
</script>
```

#### Global Registration

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

Vue.use(GridGlobal)
```

## Usage
## Basic 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. Pass in new data to update the table.
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.

Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific configuration options. This module may lag behind the main Grid.js module somewhat, so check the API version badge at the top of this README.
**[Read the full documentation](docs/index.md) for further configuration options.**

### Basic Example
### Example

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

<script>
Expand All @@ -60,257 +55,22 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
},
data() {
return {
cols: ['Make', 'Model', 'Year', 'Color'],
columns: ['Make', 'Model', 'Year', 'Color'],
rows: [
['Ford', 'Fusion', '2011', 'Silver'],
['Chevrolet', 'Cruz', '2018', 'White']
]
}
}
}
</script>
```

### Default Options

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

### Extended Options

```html
<template>
<grid
:auto-width="autoWidth"
:class-names="classNames"
:cols="cols"
:from="from"
:language="language"
:pagination="pagination"
:rows="rows"
:search="search"
:server="server"
:sort="sort"
:styles="styles"
: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
// `columns` in the Grid.js API
cols: ['col 1', 'col 2'],

// OR an array containing objects defining column headers
cols: [
{
name: 'Column 1',
id: 'col1'
},
{
name: 'Column 2',
id: 'col2',
formatter: (cell) => this.$gridjs.html(`<b>${cell}</b>`)
}
],

// AND EITHER an array containing row data
// `data` in the Grid.js API
rows: [
['row 1 col 1', 'row 1 col 2'],
['row 2 col 1', 'row 2 col 2']
],

// OR an array containing JSON row data
rows: [
{ col1: 'row 1', col2: 'row 1' },
{ col1: 'row 2', col2: 'row 2' }
],

// OR a function returning an array of row data
rows() {
return [
{ col1: 3 + 4, col2: 5 + 6 },
{ col1: 1 * 2, col2: 7 * 8 }
]
},

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

// OR a function returning an HTML table string
from() {
return `
<table>
<tr><th>column 1</th></tr>
<tr><td>${1 * 2}</td></tr>
</table>
`
},

// OR a server settings function or 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,

// Object with CSS class names
// `className` in the Grid.js API
classNames: {},

// Localization dictionary object
language: {},

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

// Boolean
search: true / false || {},

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

// Object with CSS styles
// `style` in the Grid.js API
styles: {},

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

// String with css width value
width: '100%',
methods: {
myMethod() {
console.log("It's ready!")
}
}
}
</script>
```

### Helper Functions

If you install the component globally, rather than importing it locally, the following helpers are added to the Vue prototype and are available globally.

#### \$gridjs.uuid

Returns a unique identifier that can be used to reference the current cell.

Usage:

```js
const ref = this.$gridjs.uuid()
```

#### \$gridjs.h

Renders a [Preact virtual DOM instance](https://gridjs.io/docs/examples/virtual-dom). Grid.js is built in Preact, so why not take advantage of it?

Usage:

```js
this.cols = [
{
name: 'Actions',
formatter: (cell, row) => {
return this.$gridjs.h('button', {
onClick: () => alert(`
Editing "${row.cells[0].data}"
`)
}, 'Edit')
}
},
{ ... },
{ ... }
]
```

#### \$gridjs.html

Renders [HTML in a formatter function](https://gridjs.io/docs/examples/html-cells).

Example:

```js
this.cols = [
{
name: 'Model',
formatter: cell => this.$gridjs.html(`<b>${cell}</b>`)
},
{ ... },
{ ... }
]
```

#### \$gridjs.render

Renders a Vue component. Refer to [Vue documentation](https://vuejs.org/v2/guide/render-function.html#createElement-Arguments) for advanced options.

Usage:

```js
this.$gridjs.render(ref, component, { props }, { options })
```

Example:

```js
import FormatterComponent from './FormatterComponent.vue'

[...]

this.cols = [
{
name: 'Model',
formatter: cell => {
const current = this.$gridjs.uuid()
this.$gridjs.render(
`[data-ref="${current}"]`,
FormatterComponent,
{
content: cell,
otherProp: true
}
)
return this.$gridjs.html(`<div data-ref="${current}"></div>`)
}
},
{ ... },
{ ... }
]
```

## 🤝 Contributing

Originally authored by [Daniel Sieradski](https://twitter.com/self_agency).
Expand Down
12 changes: 10 additions & 2 deletions attributes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,16 @@
},
"gridjs-vue/classNames": {
"type": "object",
"description": "Object containing CSS class names. Default: undefined"
"description": "Object containing CSS class definitions. Default: undefined"
},
"gridjs-vue/cols": {
"gridjs-vue/columns": {
"type": "array",
"description": "Array containing strings of column headers. Default: undefined"
},
"gridjs-vue/fixedHeader": {
"type": "boolean",
"description": "Boolean to fix position of table header. Default: false"
},
"gridjs-vue/from": {
"type": ["string", "function"],
"description": "String of HTML table selector or function returning HTML table string. Default: undefined"
Expand All @@ -27,6 +31,10 @@
"type": ["boolean", "object"],
"description": "Boolean or pagination settings object. Default: true"
},
"gridjs-vue/resizable": {
"type": "boolean",
"description": "Boolean activating resizable columns. Default: false"
},
"gridjs-vue/rows": {
"type": ["array", "function"],
"description": "Array containing or function returning row data. Default: undefined"
Expand Down
Loading