Creating a editable dynamic JSON table in React

^{This articles is part of a series, part 2 is here}

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...

^{This articles is part of a series, part 2 is here}

👊👊👊