React Form with subtotals - reactjs

I worked wth AG-Grid but not sure we can achieve a design like following. I tried but no luck.
Could someone help me to develop a form with subtotals? I know we have a Pivot library but we cannot achieve a design like the following. Could someone please help whether any library exists or some basic idea of how to develop a form like this?
Please note we need filters and sorting, as AG-Grid provides it by default on top.
Thanks

I would suggest you use Materias-ui Tables. They are incredibly versatile and easy to use because of good documentation and examples on the official website.
Therefore, I can see that your desired result can be achieved with Collapsible table and Sorting & selecting. Although I suggest you read the whole page.
https://material-ui.com/components/tables/#collapsible-table

Related

React library for Sorting, Searching, Filtering and Pagination

I am working on a requirement in React where I need to have Sorting, Searching , Filtering and Pagination features to grid table data ( API response ). I want to know the best library I can use to get these features in React. I have been researching and I found many libraries like ag-grid, react-table, bootstrap etc. and its really confusing which one to opt.
Can anyone please help me here?
I have using react-table and recommend it.

Ant Design - How to wrap a Table into a Form.List in antd

everyone. I have a task UI like this pic. The project team is using React and Ant design.
This's first time i working with Antd so i don't know how shoudl i solve this task. I think i use a Table in a Form.List to display and handle use edit.
But i can't find any example code like that on anywhere. If you was solved problem like that, please show me a code sandbox link or any thing else.
Thanks for reading my problem.

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.

Creating charts with Netzke

Does anyone knows the way to create ext js charts with Netzke? I guess there is no such component right know, but maybe someone have an idea.
What are the basic steps to connect using Rails and EXT JS, without Netzke?
I have looked at that gist and this https://gist.github.com/1190511
But I still can't figure it out. Is there a chance to see, no matter how simple a working version of the simplest chart in the Demo app or anything else? I understand the EXT side but I am having a real problem in putting it together with Netzke. I know I am missing something really simple.
A chart component is too application-specific, but it's surely possible to create one using Netzke built-in client-server mechanisms. Here's a demo: http://variant.herokuapp.com (try selecting different dates on the calendar to see the charts updated on the fly). Here's a gist for the LineChart component used there: https://gist.github.com/4112061 - hope, it can give you an idea (Netzke 0.7.x).

Adding a filter header row to ExtJS GridPanel

I know that it's possible to add a filter row UNDER the column title because I've seen it done with Coolite. But since I'm a total newbie with Sencha (ExtJS), I have trouble finding how to do it with the ExtJS.grid.GridPanel directly in the script. Would you point me in the right direction with some samples please ?
If possible, I would like to do so without plugins, but if there's one out there doing great and easy to use, I could change my mind.
Thanks !
Here you have a link to the GridHeaderFilters Plugin. There you have an easy example of how to use it.
And regarding your comment about trying to do this without a plugin I recommend you not to do it. Because this might seem like a easy code to write but I believe it is not. And that is why this plugin has hundreds of lines. I think this is not a plugin full of features that you won't use, this plugin just does the filtering the way you need it.
And as a final note, if you are expecting the exact same behavior as in this coolite example I think you are out of luck. Because if you get the javascript source code of that example and run it through jsbeautifier you will see that this example is not using any ExtJS plugin and is not a easy code as is using a really complex template for the headers.

Resources