How to Dynamically pull data from Google Sheets to HTML table | R25

R25 puts a Google Sheet on a web page as a proper searchable table. The columns come from your header row, so adding a column in the sheet adds it to the table on the next refresh, and every column gets its own search box rather than one box for the lot.

Searching column by column

This is what separates it from a plain table. Under each heading sits a search field that filters on that column alone. Type a code into the ID column and you get that ID; type a name into the name column and you get that name. Combining them narrows the list without any dropdowns to configure or filters to set up in advance.

One thing to watch with numbers

The search matches text, not values, so searching a weight column for 5 also matches 15 because the characters are there. The walkthrough runs into this and fixes it the sensible way — write 05 in the sheet so 5 and 15 stay distinct. Worth knowing before you blame the app.

Built for real row counts

The table is a data table library rather than hand-rolled HTML, which is why a thousand-plus rows still come up in seconds. The page length selector is preset to 100, 200 and 300 rows because the table handles those sizes comfortably, and the usual pagination controls are there.

How it reads your sheet

The script walks the header row to build the columns. A column that has a header gets one; a column that has data but no header still has its values printed, so nothing is silently dropped. Records are read from a named sheet, which keeps the other tabs in the workbook out of it.

Setting it up

Copy the sheet — the code comes with it under Extensions — then deploy as a web app and authorise it once.