!NPM Versionnpm-imagenpm-url
!Downloads Statsnpm-downloadsnpm-url
!npm trendstrends-badgenpm-trends
- :wrench: Installation - :mailbox: Input Arguments - :sparkles: How to use in components - :hammer: How to fetch SHEETID and sheetPageNumber from google sheet? - :paperclip: Other Information
Parses a public Google sheets spreadsheet if it follows a basic format of equally structured rows that start with a heading row.
e.g. A published spreadsheet with the following structure
User | dateStarted | Role --------|-------------|------------ John | 22-01-1999 | Manager Bob | 17-08-2005 | Supervisor Joe | 03-12-2008 | Clerk
will be parsed into the following JSON
Arguments | default values | Description ---------|---------|------------- SHEETID | 1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE | ID of google sheet, kindle refer README on how to fetch it COLUMNS | 3 | Number of colums on given google sheet sheetPageNumber | 1 | Google sheet Page Number, usually 1
NOTE: All input variables in BOLD are mandatory to fetch correct data
Kindly refer this section How to fetch SHEETID and sheetPageNumber from google sheet? to find out
All information will be fetched from google sheet, transformed and saved to component data ready to be comsumed in component template section.
Following data properties are added
A screenshot from
The URL of google sheet would look something like this,
SHEETID =
sheetPageNumber =
Spread Love :hearts: and not :noentrysign: hatred
- :wrench: Installation - :mailbox: Input Arguments - :sparkles: How to use in components - :hammer: How to fetch SHEETID and sheetPageNumber from google sheet? - :paperclip: Other Information
Parses a public Google sheets spreadsheet if it follows a basic format of equally structured rows that start with a heading row.
e.g. A published spreadsheet with the following structure
User | dateStarted | Role --------|-------------|------------ John | 22-01-1999 | Manager Bob | 17-08-2005 | Supervisor Joe | 03-12-2008 | Clerk
will be parsed into the following JSON
[
{
"user": "John",
"dateStarted": "22-01-1999",
"role": "Manager"
},
{
"user": "Bob",
"dateStarted": "17-08-2005",
"role": "Supervisor"
},
{
"user": "Joe",
"dateStarted": "03-12-2008",
"role": "Clerk"
}
]
:wrench: Installation
yarn add vue-gsheets
# or
npm install --save vue-gsheets
:earthasia: Live Link
Click here to live linkurl:mailbox: Input Arguments
Set following arguments indata
of your vue componentArguments | default values | Description ---------|---------|------------- SHEETID | 1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE | ID of google sheet, kindle refer README on how to fetch it COLUMNS | 3 | Number of colums on given google sheet sheetPageNumber | 1 | Google sheet Page Number, usually 1
NOTE: All input variables in BOLD are mandatory to fetch correct data
:sparkles: How to use in components
Add this module as a mixin to the component or page which consumes data from published google sheet. Then update theCOLUMNS
, sheetPageNumber
and SHEETID
data values in component to correct values.Kindly refer this section How to fetch SHEETID and sheetPageNumber from google sheet? to find out
SHEETID
and sheetPageNumber
info from your google sheet.<script>
import { vueGsheets } from 'vue-gsheets'
export default {
mixins: [vueGsheets],
date: () => ({
COLUMNS: 3,
sheetPageNumber: 1,
SHEETID: '1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE'
})
}
</script>
All information will be fetched from google sheet, transformed and saved to component data ready to be comsumed in component template section.
Following data properties are added
- COLUMNS - number of columns
- headers - list of header keys
- items - array of objects with data fetched
- records - number of records, 3 in eg.
<tr v-for="item in items" :key="item.dateStarted">
<td> {{ item.User }} </td>
<td> {{ item.dateStarted }} </td>
<td> {{ item.Role }} </td>
</tr>
A screenshot from
vue-devtools
:hammer: How to fetch SHEETID and sheetPageNumber from google sheet?
Open the google sheet you want to import data from in your browser. Make sure itspublished
(if not kindly do so, else this approach will not work).The URL of google sheet would look something like this,
https://docs.google.com/spreadsheets/d/1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE/edit#gid=143173541
SHEETID =
1Yc2esnockqfrNweacmegXnavuPly8PvjaRzqlRzaXTE
sheetPageNumber =
1
unless there are multiple pages on spreadsheet:date: Changelog
See the GitHub release history.License
MIT:paperclip: Other Information
- Got a bug, kindly report it here
- Let me know if you got a feature request, or support for other framework
- Contact me for contributions via twitter
- NPM Package
Spread Love :hearts: and not :noentrysign: hatred