Search code examples
htmlgoogle-sheetsspreadsheettabular

Easy way to present tabular data in web page (like Google spreadsheet)

I have some tabular data to present on a web page for my organisation. It's currently about 80 rows and half a dozen columns. It will need to be updated every few weeks. I'd like it to be as user-friendly as possible (scrolling by page, maybe search box, sorting by column headers...)

Two obvious ways to do this are:

  • Generate HTML (<table>) - downside is the lack of functionality
  • Embed Google spreadsheet. This works ok, but isn't flexible at all - hard to style, and it doesn't appear to support fixed header rows (strangely enough - they work when it's not embedded).

So, is there an equivalent of Google spreadsheet, where I can store the data on some other site, and embed a nice view of it? Failing that, is there a tool that will generate an HTML table with the functionality I'm after (presumably embedded in Javascript - that's ok).

Solution

  • JSpreadsheets.com has done a good job of collecting and comparing the various HTML5 tables, spreadsheets and data grids that are a staple for most data heavy web projects.

    My favorites are:

    • AGGrid - HTML+JS - Well documented, performant and free for the non-enterprise version
    • DataTables - HTML+JS - The granddaddy of the dynamic HTML table with tonnes of community support
    • HandsOnTable - HTML+JS - Performant, user-friendly while offering true spreadsheet features
    • Airtable - Saas - Hosted spreadsheet alternative to Google sheets