archit-p / editable-react-table

React table built to resemble a database.

Editable React Table

Note

Rowstack is a professional React database component I built that's brilliantly designed, feature rich and performant. Check it out!

Features

• Resizing columns
• Cell data types - number, text, select
• Renaming column headers
• Sort on individual columns
• Adding columns to left or right of a column
• Adding column to end
• Editing data in cells
• Adding a new row of data
• Deleting a column
• Changing column data types
• Adding options for cells of type select

Getting Started

1. Clone this repository.

git clone https://github.com/archit-p/editable-react-table

2. Install dependencies and build.

npm install
npm start

Contributions

Contributions are welcome! Feel free to pick an item from the roadmap below or open a fresh issue!

Roadmap

• Support for virtualized rows
• Date data-type
• Multi-Select data-type
• Checkbox data-type
• Animating dropdowns
• Performance - supporting 100000 rows

editable-react-table's Issues

Record a new demo for README

The table has changed in looks and performance with recent updates. A new demo would serve to showcase these updates.

How can I easily integrate into existing project? Possibility to make a npm package?

Hey, I have a pretty big project setup already and want to integrate this, now cloning this repo and adding there might overwrite my files. Is there any possibility to make this a npm package?

Select popup is hidden behind window

Screenshot

Keep CodeSandbox demo up-to-date with repo

Currently, the codesandbox link in the README, links to a static demo. As the code in the repo is updates, this demo becomes outdated. We want to automatically keep it up-to-date with the repo.

Missing search

This is missing a very useful feature: search / filter.

App doesn't render on Safari

Screenshot

Explore how to release this project as a package

#10 requests for this table to be usable as a package in other project. Few things to consider would be:

1. What would the API look like?
2. What level of data management would this package have?
3. How to allow for styling to be edited?

npm start

npm start npm ERR! Missing script: "start"

i might just be an idiot, but there does not seem to be a start script.

Error in the Getting started > 2-Install dependencies and build.

With the code currently in the folder, the command to start is npm run dev and not npm start. Npm start was probably for the previous version's built-in react.

Thank you for your work wish you the best

Collaborate?

Hi @archit-p , I just wanted you to know that I'm enjoying the table feature you've built for React. I'm hacking away in a fork, trying to get it to a point where it can be easily installed into an existing React project via npm module. That's my main need right now, because I would hope to use it in a few internal projects for our Mumbai-based company.

Take a look and let me know if you'd be interested in trying to work out a way to merge these together before I deviate from your code base too much. If so, I'd like to hear specifically what it would take in your view to remain compatible with however you're already using it.

https://github.com/koyal-tech/editable-react-table

Warm regards,
Jeff

Integration example with an SDK?

Can this be integrated on top of Airtable, notion, coda using their SDKs?