Part 1
Introduction
I've been thinking about covering the development of a data grid for a while now, but I've been struggling with how to approach the topic. Data grids are complex and don't really lend themselves to an end-to-end tutorial approach, so I thought I'd go with a sort of devlog route where I explain my thinking as I go, and provide the incremental source code (MIT license, of course).
You're probably reading this because you're nosey, are interested in Lit, or maybe are even interested in creating your own data grid. Before we go any further though, let's talk a bit about what a "data grid" actually is. You often hear the terms "data grid" and "data table" (or just "grid" and "table") used interchangeably, but they are different. Both are data visualization components that display data in column/row format; with a "data-table" being relatively simple (feature-wise), and a "data-grid" is generally way more complex. That said, there's a complexity/feature spectrum between the two, so the separation isn't always that clear cut. From a practical perspective, you often want both because you don't want the overhead of a full featured data grid if your needs are simple (don't load a bunch of JavaScript that you don't need).
Okay, so a table is simple and a grid is complex - what exactly does that mean? A simple comparison of their high-level features probably explains it the best.
Data Table
- Supports relatively few rows (< 100).
- Only supports single headers.
- No column resizing.
- Only supports sorting and selection.
- Non-editable.
- Fix cell display (you can't provide custom visualizations).
Data Grid
- Supports a large number of rows, using paging or virtualization.
- Supports header grouping.
- Allows column resizing.
- Supports sorting, selection, grouping and filtering.
- Editable.
- Supports frozen rows and columns.
- Supports detail and summary rows.
- Allows for custom cell visualizations (sparkline charts, etc.).
- Supports exporting to various formats.
- Etc...
The feature split between the two is pretty subjective, but you get the picture - a data table is used for the presentation of small static lists of data, while a data grid is for the heavy stuff.
Why Lit?
I'm a huge fan of native web components (custom elements) because of their interoperability and performance (the browser does a lot of the heavy lifting for free). They work with most JavaScript frameworks and libraries (Vue, Angular, Solid, Preact, Svelte, etc.), although React is a bit iffy (but you can work with them easily enough). I much prefer putting the effort in once and everyone can benefit, rather than creating a framework specific component. I also really enjoy working with LitElement because it's easy to use and specifically designed for component development, so there's also that.
Next Steps
I'm going to try and keep each post relatively short, and cover a single topic or area in a single post if possible. It's also very likely that I'll make a bunch of wrong decisions along the way and back-track to update previous posts; so I'll have a changelog of significant changes at the end of each post, where necessary (so check previous posts regularly).
So now that you know what I intend doing, the next post will cover scaffolding out the basic project that I'll be working on.
Top comments (0)