I wrote this as a way to try and convince my colleagues to let go of outdated and confusing libraries in favor of more straightforward, cleaner approaches to managing data represented by tables. I'll admit, I didn't expect something like this to be so challenging, but that made it even more worth mentioning in my portfolio.
I wrote a custom element that extends <table> , which checks a few custom attributes for sorting purposes, but the data is inserted by JavaScript. Any time I make something reusable like this, I always keep the hypothetical future dev in mind. Because of that, I've contained all this complexity, so the only step a dev would need to take is simply:
table.cells = [
{rowIdx: 0, columnIdx: 0, data: 'Hello'},
{rowIdx: 0, columnIdx: 1, data: 'World'},
]... plus some optional styling on the _selected class applied to each <th> and <td> of the selected column.
As with most things, I'm not sure if I would still write the same code today, but it's just another cool piece of my track record!
Tools Used:
- JavaScript (ES6+)
- Custom Elements