In my last post, I talked about a web component I'm building... and here it is: a data grid!
Not again?
So before you say anything... yes, there are tons of grid out there. Before creating my own, I looked at what is available. I really liked the following grids:
- DataTables: while it's a great solution, the api is sometime a bit confusing and it requires jQuery.
- AG Grid: another very nice solution... although I don't really like working with "community" editions of a project. You always end up being pushed to use the Entreprise version.
- Revo Grid: which has a modern codebase and everything... but it's based on stencil (nothing wrong with that, but I'd don't like web component framework).
- AppendGrid: keeping that one in mind for easy inline editing.
I wanted something simple. Something where the source code is not made of some obscure arcane magic. Something that fits in one simple JS class and that I can use in my projects, without making compromises on the features I need. The web is already over engineered most of the time.
The Data Grid Component
I've almost found my "dream" (not ideal yet, but the main idea was there) with Zino Grid. But I didn't like some of the choices that were made:
- Using the ShadowDom API makes theming more difficult than it should be (isolation is nice, but only to a certain degree... I want my tables and my buttons to look the same in my app).
- Loading the data was restricted to only a plain json array. What if you want to pass along some other informations, like some config options etc...
- And finally, you have almost no configuration option for the columns which is really a shame.
So basically, I took Zino Grid and turned it into what I wanted. I turned out quite nice!