React Table: Best Practices, Suggestions - reactjs

I've been tasked with creating a dynamic table for our UI. We decided to use the tech stack of React/Redux and are trying to figure out the best way to develop:
Questions:
1) What, in your experience, has been the best tool to create a dynamic table that works well with action creators and user interactions?
a - Issue: Being able to sort and search without creating massive code
b - Issue: Being able to edit in row and delete in row
2) I've been playing with Material UI, Semantic UI, and others. Any thoughts on which one is easiest to customize
As always appreciate the help, sorry for the noob questions. I've been trying to code in Material UI, but it's a bit difficult to manage since I don't have much experience with it.

Did you try RC-Table? If not, I would recommend to give it a shot. RC components are the primary building blocks using which the entire ANT lib for React was built. RC components are majorly focused on various functional logic which is extended by ANT components. You can either try to use core RC-Table itself or ANT-Table to find if it eases your efforts. In our development, we consumed a few RC-blocks and it solved lots of our purpose. This has
Sorting without massive code (with their examples I believe)
Able to Edit cells and Delete rows.
I don't believe there exists a library that solves all purposes with all ease. Everyone has its own pros/cons. But you can give this RC/ANT a try if it would solve your needs. Nevertheless, referring RC blocks at any stage of REACT component development is worth a read.

Related

How to employ React Thinking

I have taken several react courses that walk through building applications. The courses teach syntax and concepts. But how you solve a problem using react is different!
I am a dinosaur web person who is used to html/javascript.
In terms of a real-world example, such an enterprise level component, how do you tackle it? Do you follow a process where you write pseudo code first? Do you start with writing your code all in one file, and then break them into their own components?
I was going to try to create a modal component (I am sure they exist in a million places already) but for the sake of understanding, but I immediately get hung up in my own confusion.
If you need to use some simple components like modals, buttons etc., you can use one of the popular component libraries like Material UI.

React virtuoso - How it works behind the scenes

Everyone. I'm researching about react-virtuoso. It's a new repository for efficiently rendering large component list.
It's pretty new. I'm getting of stuck about how it works. Why react virtuoso can overcome problems of react-virtualized?
Thanks a lot <3.
React virtuoso author here.
The project has been around since 2019 and has 6M+ NPM downloads. I would not consider it new, but it is newer than react-virtualized and react-window.
It has been specifically designed to overcome the challenges of variable item sizes by using optimized data structures.
If you're interested into understanding its implementation, you can will have to get acquainted with its internal state management paradigm, urx. From there on, you can read the source code - there are several core features that take care of the sizing and scroll handling.
Hope this helps.

How to integrate Go.js's floorplan with React.js

I wanted to create a react project allowing a user to annotate floorplan thanks to Go.js's floorplanner here is the link https://gojs.net/latest/projects/floorplanner/FloorPlanner.html. If you look visit that link and down below you will see the scripts that were used to create floorplanner. But instead of creating the floorplanner with vanilla JS I wanted to use React.js. Can someone help with the integration of Go.js's floorplanner with React?
This question is too vague for an easy answer. You should look at the react example: https://github.com/NorthwoodsSoftware/gojs-react
And modify it to your liking. This can involve taking large parts of all of the floor planner sample, though if you have no practice with GoJS this it may be worth taking the time to learn everything involved in the sample, before any integration.

Could i use react-virtualized for rendering and modifying large tabular data?

I would like to build a service that can manage large dataset by grid view. It's similar to Excel or Google's Spreadsheet. The service can render and modify directly on the grid view.
I would like to use react or some latest technology to develop the front-end. I found a react component named react-virtualized.
I still wonder that can it implement modification functionality on it.
Could you explain me more about how it work or under the hood ? Actually i need some idea to propose the solution like this.
Could i use react-virtualized for rendering and modifying large tabular data?
Yes.
Sounds like you're looking to build something like this. It is built with react-virtualized and the source code for it can be found here.
Could you explain me more about how it work or under the hood ? Actually i need some idea to propose the solution like this.
This question is a bit too vague for Stack Overflow I think. You might find this talk informative since it kind of covers the basics of react-virtualized. After that I would suggest browsing the documentation.
Once you have a foundation then more specific questions could be directed here or to the react-virtualized Slack channel.

Making development with Ext JS fast

Ext JS is a nice framework for web UI, but I found that building and putting stuff together takes a long time and painfully slow.
This might be a general problem when working with JavaScript, but does anybody have any way to speed things up?
What can I use? Better IDE with good JavaScript suppport? GUI designers? Code generators?
I need some way to speed up common things like building grids and forms but yet let me do complex things like creating custom components easily.
I'm using ASP.NET MVC. Coolite seems nice at first, but I feel that I'll be having trouble when creating any custom components later on.
There's always Ext GWT, which lets you use Eclipse tooling (and all of the advantages that gives you, such as refactoring, swift code navigation, etc.) to create your Ext/JavaScript app.
When you download the ExtJs library, you find lot of sample applications for common requirements like Grid panel, forms, form elements etc.
Regarding IDEs, you dont find mature productive tools, but check the below link and wish it could be of help to you
http://www.extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/
But if you really wish to develop custom components, you need to get through knowledge,start approaching with ExtJs-provided sample apps.
If you want to get faster at anything, practice it until you fully understand how it works and how to make it do what you want. If you are just starting out, why would expect to be able to work as quickly as you do when you are working on something that you are very familiar with?
Things I use to make ExtJS less painful
Chrome, for it's developer tools, or Firefox with Firebug.
snipMate: snippets for Vim, so I can quickly produce boiler plate code for classes.
JSLint as a command line tool. Especially good for detecting rogue commas.
Sencha forums.
ExtJS IRC chat (Server: irc.freenode.net Room: #extjs).
API documentation.
Sencha and Saki's ExtJS examples.
Beer.
ExtJS is building a designer right know so you can look forward it, the only problem I think is not gonna be free.
you can see a video demo there, in term of release date I think this is due to the first quarter of this year.
I say learn the framework. But to develop apps, I use IntelliJ IDEA, which has partial code completion, etc. It costs money though.
Once you have some practice and understanding of how ExtJS works, you'll get faster at it. By using the examples for reference, and building up my application in small pieces, I've gotten much better (and faster) at developing stuff with ExtJS. A great way to get started is to find an example (or two) that kind of do what you need, and modify (or combine) them to see how they work together.

Resources