SQL Workbench; Tabulator; DuckDB Remote Parquet Two Ways

Today, we have another DuckDB-centric edition, save for the interstitial section on Tabular, which we’ll be using with DuckDB in the last section, which is also a shunt to another URL to a site based on Nue (we’re still not covering Nue-proper for a while, though I do link to the source).

SQL Workbench

SQL Workbench In “Using DuckDB-WASM for in-browser Data Engineering,” Tobias Müller discusses a use case of building a SQL workbench with DuckDB-WASM, an in-process database management system specialized in OLAP workloads. Tobias explains how the WASM-ified DuckDB lets us interactively run queries, display records, and visualize the resultsets. He also shows off some example data engineering pipelines and how one might share these pipelines and other artifacts.

You enter queries, and can then interact with the results. The section header shows the results of some queries and a sample visualization.

Def hit up the tutorial to learn more (it’s a pretty neat tool).

We’re going to go over the queries in the last section.

Tabulator

I had thought everyone knew about Tabulator, but I got the impression, today, that was not the case, so let’s dig in!

This JavaScript library is slick, highly customizable, and well-engineered. With it, plain ol’ HTML tables (or JavaScript arrays/JSON) can transform into dynamic and interactive data grids. You’re literally one import and a scant few function calls away from using it (as we’ll see in the last section).

Tabulator has a bonkers number of features and is heavily customizable. It supports actions such as sorting, filtering, formatting, and even editing data right within the table. We can paginate data, move columns around, and set up a table to be responsive, hiding columns that don’t fit on smaller screens. It also allows for the addition of new rows, undo and redo actions, and it can handle large datasets efficiently by only rendering the rows in view, which is a huge plus for performance.

You don’t need to install a bunch of plugins to get anything to work, though you will need luxon to deal with date columns. Unlike Excel, Tabulator doesn’t think anything is a date. Plus, it’s designed to work with all the major front-end JavaScript frameworks like React, Angular, and Vue, making it incredibly versatile for developers working in different environments. However, as we will see, it works great in vanilla JS.

Rather than blather more, let’s see it in action.

DuckDB Remote Parquet Two Ways

In the first section, you already saw a hint of the queries we’ll be using.

Please head over here for the remainder of the expository.

You can also find standalone (view-source for the code) versions of both the vanilla and Observable examples at:

• Vanilla Standalone
• Observable Standalone

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️