# Building a data grid component

[In my last post](https://blog.lekoala.be/why-you-should-use-rgb-values-for-css-variables), 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](https://www.datatables.net/): while it's a great solution, the api is sometime a bit confusing and it requires jQuery.
- [AG Grid](https://www.ag-grid.com/): 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](https://revolist.github.io/revogrid/): 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](https://appendgrid.apphb.com/): 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](https://github.com/riverside/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!
 
## The demo

%[https://codepen.io/lekoalabe/pen/NWvLByP]