I use ant design table and I want to fix the height of table and add scroll when data is large
antd table demo
And I want when user scrolls to the bottom of the table, then more data is fetched from the server. But ant design table does not have the onScroll event, I cannot know when and where user scrolls to
I find these people having the same issue as me
antd gihub
and they suggest to use refs and I use this ref solution but it does not work
gist solution
Could you show me how to do it?
This issue should be resolved by two things:
Use scrollToFirstRowOnChange , it keeps position consistent after every re-render.
Add scroll event on the .ant-table-body.
You can use React Lazyload and wrap your components on frontend side. If you need backend lazy loading you can check this example: Node.js + MongoDB example and set the amount of data you need to distribute per page
Related
The antd tables work well with Input components. I have been using the editable cell example at https://ant.design/components/table#components-table-demo-edit-cell and it works well with undo / redo functionality.
The Select / Options and Date Picker components however do not have any documentation in the context of a table that's hooked up to a state. I have gotten the Options / Date Picker to work but when implementing undo / redo logic, it looks like their state does not by default update like the Input fields. If you Google this, it is a tricky part of React in general to get these components to update automatically with state changes in a Form.
Is there an example of an antd table with select or date picker that's hooked up to state information?
I got the Select / Option to work correctly visually e.g. default states load correctly, depending on selection color changes etc. I can manipulate the data as needed. Similarly, got the Date Picker to work. However, where I am stuck is automatically tying state changes to update the components. I can probably do some crazy stuff like force render but before going that route wanted to check if there is a cleaner / better antd way of doing this.
I think you have to custom return to default Editable Cells like the following example url example
After wasting many hours on this, it looks like there is a bug in antd Forms. See this SO thread: React | Ant design select value not setting
In short, removed the Form.Item and everything works fine.
I need help with React-table.
I have a table that has rows with custom components (Select components and editable input).
When I change the Select/editable input the whole table is re-rendering .
how can I prevent it from happened?
I try to wrap my custom components with React.memo but I did not success to handle the problem.
This is a link for sandbox
you can see in the console that if you change the input it renders everything.
P.S don't use the last column something doesn't work there (i copied it from my project)
thanks!
I have an React table that contains 20k+ rows and some of these rows contains editable fields. I e.g. have a number field in which I have a component where it is possible to +/- the value.
I have been using the Examples: Editable Data from react tables own page, where all data is stored in as useState and then on each update it is changed - this however performes very badly, as the re-render delays the value changes when clicking the + button multiple times. Is there a way to handle this better and maybe also keep the original data such that is it possible to do a "reset", such that I don't need to overwrite the entire dataset for the table.
I did some research on the topic and found that you could use react-virtualized.
React components for efficiently rendering large lists and tabular data
It seems that it would be perfect solution to your problem.
Whats very cool is that by default all react-virtualized components use shallowCompare to avoid re-rendering unless props or state has changed.
Hope this will be a good replacement for react-table
I have an ag-grid instance, which have to be updated continuously, every few seconds, with fresh data by calling a service.
I want the grid to update only the cells with changed data.
Is there any way to achieve this using React?
Thanks in advance.
assuming you bind the grid data correctly, and don't alter the rowBuffer, or otherwise force the grid to render all its data to the DOM (thereby turning off virtualization), you should be fine.
the grid will test for changes in the data and only render what was updated (see the docs on change-detection).
if you still find you need some boost (like when you have real large datasets) you can try batch-transactions.
all of the above is correct regardless of framework; these are core features of ag-grid.
Hi friends i am using jdev 11g release2 (11.1.2.4.0).I want to create a registration form from dragging datas from data control and my question was how to change or move the position of textfield in that form into different areas?
You should be using various layout components to achieve the layout you want, and remember that layout components can be nested to create more complex layouts.
See some examples here:
http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/layoutForm.jspx
You can use the view source menu to see how they achieved that.
http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/layoutBasics.jspx
Please be a bit more clear in your query. From what I was able to make out:
You can either use the "code view" of the JDev to move the code which represents the component to a different location or use the "Design view" to drag and move the component.
I would recommend the first approach as it makes it easier to manage the code/layout
You can change the position of the fields within the form or you can drag them out. However for this you should try out some tests and see which suits you best. I think if you surround each attribute with "Panel label and message" you will have a better view of your page.