I want to display the data returned from an api in a tabular form.What is preferable:
Building a table from scratch and adding functionality like pagination, search and row select
or
Using already built in components like react-table or react-data-table-component, MDBDataTable, etc
My requirement is, I just want to show the data returned from an axios call and also should have functions like pagination, row-select and search. Also, which component is best which will solve my requirement
try this react table component ka-table https://komarovalexander.github.io/ka-table/#/overview
It has all required functionality. Works with both js and ts. And easy to start because of big set of demos
Related
i am trying to update the data according to search filter in material table, i didn't find any method or param by which i access the data updated on search filter, i can call an api and provide search filter but it may slow down the query so i want to do it on frontend side.
i have tried the method above mentioned handleSearchChange which only give the search query nothing else, if i can get access the data of updated after searching in search field then i can do what i want
I have found an answer for the above query I have posted, the simple way to use the useRef in material table, by which you can access the current data of your table displaying.
tableRef={tableRef}
to access the data you can use
tableRef?.current?.state.data
I want to filter the data with a dropdown using useSWR. The sortedOptionList is hardcoded. Is there a way to make it more dynamic when calling the api?
https://codesandbox.io/s/weathered-wildflower-ousy1n?file=/src/App.tsx:0-1903
There is a useful package to do this task.
React Select
I am developing a React Firebase web app, and I want to implement a "custom" sort on top of sorting by name and date. How should I go about storing this "sort" information?
Do developers append a "key" property to the components themselves? How will reordering work then (do i shift every component's key values by 1? That seems inefficient). Or should I do a separate file or database entry that just stores the order as an array of component id keys?
Should all of this be resorted on page load or should I reorganize the data in a way where as soon as I request them they're already sorted?
I've tried adding the order key prop to every item but it seems overly complicated for a simple feature. I haven't had much luck searching this online.
Firestore allows you to orderBy and limit queries.
You can also specify a cursor to paginate more data on request.
See This Example in the docs for more info.
I already have a table that renders my data. But there can be as many as 1000 rows in the table.
Right now, the dataprovider component sends date to the table component via props. What's the best way to start pagination? Should I still fetch all the data at once, as is currently the case? If so, where do I store it? Keep it in memory and take slices as needed? Or somehow use query params for the the number of records to fetch (0 - 24, 25 - 49, etc)?
Returning all the data in one response could be too large, this depends on the size of each item. If the size of the response is small, you can simply request all the data and do the pagination on the UI. You can use react-table to do this.
If the response is too heavy (time-consuming), you have to implement pagination on your server. Then you can use react-table to seamlessly integrate the pagination to the UI.
The approach you use to paginate it is up to you, here are a few ways you can do it in: API pagination guide
I'm using HP UFT for functional tests.
Because of dynamic id definition of ExtJS, I can't use UFT Recording feature.
I've tried many ways for assigning dynamic IDs to staticly.
I tried to change id: function() in ext-all-debug.js file.
I tried to change Components getId() function in ext-all-debug.js file.
I tried override components with afterRender method to change ids aswell.
Sometimes I achieved to change id's using component's properties (text, fieldLabel, overflowText, etc.), but for some components I couldn't achieve to assign ID's since the components properties seem empty.
Above, I listed my actions to assign static ID. So, I want to know your opinions about my actions and if you found them incorrect or not sufficient, could you offer me new approaches for using HP UFT recording feature with ExtJS6.
You can't change the dynamic id of the dom elements which represents ExtJS components. That's really bad thing and I think you would break the whole app.
The easiest way to test ExtJS app is to use already created frameworks/tools like:
Siesta by Bryntum
Sencha Test by Sencha
The Siesta is free. It has some pro features which requires the license. But you can use it for free.
If you still insists on doing it your way. You need to dynamically get the IDs of the dom elements created by ExtJS components. Basically write your own API.
You need to execute the ExtJS JS code, which will return you the ID of the component. So you need to get the ExtJS component and call getId() function on it to get the dom id.
Here is the example code:
>Ext.ComponentQuery.query('checkbox')[0].getId()
"checkbox-1047"
You will definetely need: http://docs.sencha.com/extjs/6.5.3/modern/Ext.ComponentQuery.html#method-query
And keep in mind that the query can be pretty advanced and you can use all the configs which are set on the ExtJS elements such as name, xtype, etc
You can find some other info in my other anwser https://stackoverflow.com/a/41718879/1768843