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 table should support sorting when a header is clicked and exporting the displayed data, ideally to CSV or a similar format. I'm looking for the lowest-effort library or implementation approach.
3 Answers
A code-generation assistant can produce a small vanilla JavaScript implementation, but the core solution is simple enough to write directly. Keep the SQL result as an array, render the fixed columns, add a sort handler to each header, and serialize the rows for export. This avoids pulling in a large dependency for a fairly narrow use case.
Grid.js is probably the easiest fit. You can pass it an array of arrays from sql.js, and it handles rendering, clickable column sorting, and CSV export without much setup. It’s a good option if you want a ready-made grid instead of maintaining the table behavior yourself.
For a fixed column count, you may not need a library at all. Use sql.js or wa-sqlite to run the query, keep the result rows in JavaScript, and generate the table with regular DOM methods. Sort the array by column index when a header is clicked, then re-render the table body. Exporting is just converting that same array to CSV or TSV. A grid library only becomes more worthwhile if you need features like virtualization for very large result sets.
That sounds like the better route for a small table. A full grid component can add more API and styling overhead than the actual sorting and export code.