React Dynamic JSON Table

Tests	Code Coverage	CodeFactor	Sonar Cloud	NPM Status	Doc's Site
	76.4%

• 👀 Demo Site
• 🖥️ Sand Box
• 📝 Code Quality Report

  • The sonar report is not showing the correct coverage value, use Yarn Coverage to generate a local report

• 📋 Changelog
• ✨ Contributing

Background

Some tables require lot's of boiler plate code, with changes across the stack if anything is modified, others a just too basic.

This a fully Editable dynamic table, that's also relatively feature rich, easy to configure, supports pagination, sorting and filtering out of the box, that actually tries to handle data intelligently

It's no slouch either, tested with 10K, 100K, 1M rows if you really want to exercise your CPU.

Minimal Boiler-Plate Code

Auto column mapping, Configurable options such as identity columns

Features

• CRUD
• ID columns
• Label Columns
• Hidden Columns
• Icon columns (SVG or Font)
• Images (cells), custom HTML/CSS
• and lot's more

CSS Agnostic, Doc's and Examples

Tailwind, Syamtic UI React, Bootstrap examples

Tests Tests Tests

Code Coverage is growing fast, CI is working. happy day's.. run the tests in the repo

Documentation an Examples

Doc's, Code-Sand-Box examples.

Install

yarn add react-dj-table

Add Import

Import Table from 'react-dj-table'

Supply Data

const data = ... //some json array

Add Component

<Table json={data}/>

Paging

Pretty standard built in pager.. or roll your own

Editing

Fully CRUD - smart(ish) edit built it, validate and revert user changes before you commit them to your data store Intuitive buttons, create a record , change the data, watch as it guides the user.

Hackable

You got access to the reducers dispatch functions, state TBD (next patch release)

Feature Requests

See Github discussions

Demo + Code-Sand-Box examples.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

khalidmunir 💻

This project follows the all-contributors specification. Contributions of any kind welcome!