I'm running SQLite in WebAssembly and need to display query results in a table with a fixed number of columns and a variable number of rows. The row data is separated using a delimiter that indicates where each new row begins. I'd like the table headers to support clicking for sorting, and I also need an option to export the displayed data. What library or approach would be the simplest for this?
3 Answers
Grid.js should cover this pretty easily. Pass it an array of arrays from sql.js, and it can render the table, sort when a header is clicked, and export the data as CSV. That saves you from implementing the table behavior yourself.
A code-generation tool can produce a vanilla JavaScript version, but this is simple enough to write directly. Parse the delimiter while shaping the query results, keep the column count fixed, and use a small sort-and-render function for the headers. A large framework would probably add more overhead than value here.
You may not need a full table library. With sql.js or wa-sqlite, run the query, keep the result rows in a JavaScript array, and create the table elements directly. Sort the array by column index when a header is clicked, then re-render the body. Exporting is just converting that same array to CSV or TSV. This is usually fine for a few thousand rows.
For larger datasets, a grid component may be worth it for virtualization. Otherwise, the small custom solution is often less complicated than adapting a full grid API.
That sounds reasonable if the table logic stays manageable. I was mainly hoping to avoid manually handling sorting and export edge cases.