Our Google Sheets to Dynamic App Table enables you to update data in a Google Sheets spreadsheet, and have the data automatically update you app
This feature amazing feature is great for easily displaying all types of information to your app members such as sports scores, prices lists, menus, service comparisons, rates, and much more!
We are using Google Sheets API v4. Usage of the API is free but there are some usage quota limits.
INITIAL SETUP
(01) Open Google Sheets and create your spreadsheet.
(02) When setting up your spreadsheet, the very first row of the spreadsheet is used to manage the width of the columns. You can specify the width of each columns in pixels (ex: 100px or use auto). Second row is for the table column headers. The Table in your app will be auto generated based on your specified width, table header etc.
(03) After your spreadsheet is configured, go to your App Manager and select the Google Sheets app page. If we added temporary data to the page, replace our information with your own.
(04) Paste the Google Sheet ID and the Google Sheet Name (click here for instructions on obtaining the Sheet ID and Sheet Name).
Next, paste the Google Sheets API Key (click here for instructions on obtaining a Google Sheets API Key).
(05) After entering the information Click Save. To change the Design, click the Design Settings tab. This section enables you to change the design settings of the Table in your app.
TABLE DESIGNS
It’s important to note that if we already designed your table, it’s not recommended that you make any changes before consulting with us.
DEFAULT PAGE DESIGNS
FREQUENTLY ASKED QUESTIONS
(1) Is the table scrollable?
Yes, Table is scrollable in the both direction vertical & horizontal.
(2) Can I display user-specific data using this feature?
No, this feature isn’t developed for that purpose. If you need this type of functionality contact us.
(3) Can I apply search filter like search in the specific column only?
No. The search function will search throughout the table in all columns, not in a specific column.
(4) What’s the benefit of a specified column width?
Sometimes with auto width, text isn’t doesn’t good in the table (for example it will word-wrap), so you can specify the column width for the better look.
(5) Is it possible to make a fixed table header and scrollable table body?
Yes, you can achieve it using the below CSS. Just change a table body height in the CSS code below. Add the code to the Advanced SCSS Box at the bottom of the Colors section in your App Manager. If there is already code in the Advanced SCSS box, do not remove it. Start a new line “after” the last character in the box, then paste the above code.
/*** BEGIN: GOOGLE SHEETS TO TABLE - FIXED TABLE WIDTH AND SCROLLOABLE BODY ***/
.module-gstable #gsTable thead { display:block; }
.module-gstable #gsTable tbody {
display: block;
overflow-y: scroll;
height: 200px;
}
/*** END: GOOGLE SHEETS TO TABLE - FIXED TABLE WIDTH AND SCROLLOABLE BODY ***/