I've been working on a Generic Table Designer-tool on and off for almost a year. It's not something I've prioritized that much — a few hours per month.
I wanted to create a component, where the configuration is just a bunch of keywords in a data-table
-attribute, example:
<table data-table="border col-lines row-zebra shadow editable etc.">
Then, in CSS, I'll use the same list of attributes for styling, using the contains-selector:
[data-table*="row-zebra"] tr:nth-child(even) td {
--td-bgc: var(--zebra-row);
}
In JavaScript, I use includes()
to check for the keys needed, example:
const editable = table.dataset.includes('editable');
The color-palette of a table is generated from a single custom property, --h
, which is the hue in hsl()
. Using different saturation and lightness-values to shade or tint the root color, we can easily create tables with different look'n'feel:
I'm not done with the JavaScript — I'm only working on this in my spare-time! — but when it's ready, it will add keyboard-navigation, sorting, column resizing, column toggle on/off, search/filtering, pagination, table-data from an endpoint, export to csv — and much more. It will also be possible to edit cells.
For now, the CSS-version is (almost) done. I've uploaded the initial version to Codepen, where you can play around with the various options, using a simple editor-interface. I've included some "presets" as well, to get you started.
Here it is — open it on Codepen in fullscreen to use it properly:
Let me know what you think! Should I create a repo for this? Any features missing?
Thanks for reading!