How to persist the column order of the dataGridPro table in Material UI? - reactjs

I am trying to persist the column order of the dataGridPro table in Material UI. As you know, we can simply allow all column reordering by dragging the header column and moving them left or right. But the column order would be initialized after the page reloading.
By default, columns are ordered according to the order of the columns array.
Should I store the updated array in the backend database or other storage? How can I implement this functionality and which choice would be preferable?
I am looking forward to your answer.
Expected behavior
Persist the column order after the page reloading or page navigation

Related

Table with multiple search bars and add object logic

I have a table with multiple columns that I want to search through with multiple search bars (one for each column). I'm using MUI Datagrid table. You may think- that's filtering not quick search. You are correct, but I need to use the search/filter queries to add that object to the table IF it doesn't exist in the table. So to be clear- user has a table that he filters, he decides the object he searches for isn't there so he decides to add it with the search words. What I think of is- getting the data from my backend, passing it to the fuse.js instance, then somehow passing that to the MUI Datagrid. Is this the correct aproach or am I missing any plugins I could utilize?

Material Table Get Rows After Lookup Selection

I want to access all rows after anyone filters a data after lookup selection.
For example, here I should get second row data after istanbul is selected. Is there any functionality resonating the feature of what we can call as "onLookupChange" in Material Table?

AG-GRID SSRM Expandable Columns

I have a server side row model grid in pivot mode and it's bringing back my data just fine as a pivot.
Row groupings expand to the next dimension, etc...
I would like to do the same with column groupings as well (expand/contract).
This is trivial on the default client side row model, but with SSRM the columns are created explicitly as secondary ColDefs based on returned pivot data. I've tried setting columnGroupShow property to 'closed' with 'sum' aggFunc, but I think that only works client side. Not sure if AG-Grid even supports this functionality (painlessly).

Is there any js function function to fetch the complete data from pagination

My task is to enable the user to select only a single row from the entire table by using checkbox.
When user select any single row , checkbox for the other rows are disabled. But this is happening only on single page.
Since my table has large amount of data and pagination is applied. The above mentioned logic is functioning properly but when I move to other page of table , there user is again able to select some another row but this should not happen as the requirement is that user should only be able to select a single row throughout the table.
3)Help me out in telling that how to fetch the entire data from the table where pagination is applied because document . Get Element By Name only functions on single page and not on entire table
Keep a variable in the state selectedRowId, every time the table renders enable checkboxes on the bases whether selectedRowId is null or not.

Making persistant for Toggle Columns in treetable

Is there any example you have to make the table data persistent after hide or show or reorder certain columns in primeng.
For example:
If there is a treetable with 3 columns Id,Name and type and by toggling I hided the ID column using toggle option and if I refreshed the page, the table should come with Name and type only.
Is there any api is available to get the column data dynamically for each hide and show as well as reordering ? kindly provide an example it will be really helpful.
I don't think there is an API for this.. I used localstorage for saving the state of the table.

Resources