Creating a editable dynamic JSON table in React

A couple of years ago I created a dynamic JSON table, I always wanted to make it editable, yeah I can hear what your thinking..
So mid pandemic I get laid off. Great new jobs are at all time low.

While I'm on the hunt for a new role, wouldn't it be great to do that project I've had in the back of my mind .. hmmm.

Don't get me wrong, there a lot's of great tables out there, some need a tonne of boiler plate code other just don't have some of most basic feature you might expect.

So why not make one, tables are easy or should be, try adding sorting, filtering, paging and then make it editable, it's quite a challenge.

What I'd like to know is how many of you would be interested in a fairly detailed breakdown. I think it might be hard going for newcomers but for mid level developers, it could be good ?

So what would we cover

General overview (initial project setup)

Reflection, Dynamic types, efficient inferring

Managing complex state

Detailed guide on how to use the reducer hook

CRUD operations

Jest - Testing Coverage, Unit, Snapshot

NPM Publishing

anything else you might want

Take a look at the demo's and examples, source, drop me some feedback & I'm ready to write a series.

Bye for now.

Update

So the ask is to create an editable JSON table, what else?

CSS agnostic, must be style-able with any library

Output a ‘proper’ semantically correct HTML table

Recognise and display correct types (bools, numbers, dates, strings)

Warning spec's ahead 🤨🤨🤨

Developer defined options

Row Selection – return selected row

Identity columns

Label columns – custom columns names

Icon columns – display font or SVG icons in the table headers

Hide columns

Date columns – configurable date formats with localisation

Custom column cells – HTML/CSS, support images

Checkbox columns , show bools as checkboxes as default, or as string value, optionally

Footer – display messages and any HTML/CSS

Sortable

Pageable, client side pagination (for now)

Filtering, basic if possible advance search

Edit – smart pager, intuitive buttons, must guide the user

Phase 2 Developer defined options

Custom pagination

Custom editor buttons

Support for external filters on any column

Server side paging

Expose dispatch, call reducer actions

Expose state

Much of phase 2 is available such as exposing dispatch

Phase 3 Plugins TBD

Add support for developer defined components and libraries, date pickers, etc.

Phase 3 is in a very early R&D state

now that we have the boring part out of way time to write some code...

👊👊👊