Go to specific record

[Tom687]

I have created a little React game which, when finished, displays a form for the user to enter is name, which is then inserted in my database (MySql) with his score. Then a table is displayed, retrieving every records saved from the DB, showing the score done by every user (sorted by highest score).

What I would like is, when the user finishes and submits his record with its name, that all the records are retrieved from the DB but the table would jump to the page of the user's score (which would still be sorted by highest score) (and eventually highlight his row).

Just so you know, I have the ID of every user in the table (and obviously the ID of the last inserted user - which is the one I want to go to -). I guess this is a key element but don't know how to use it to achieve what I want to do.

I did a lot of research about it but can not find anything. I know this is not a bug but rather a fonction I don't know how to implement.

I also looked at server side pagination, sorting etc but I really don't understand how to put it in place, let alone that I don't think this is the solution to my problem (as my table is populated with "static" data - after putting the users' record in the DB, if that makes sense -).

I hope you will be able to help me here and am truly sorry if this is not the good place to ask this kind of question (if so, please let me know where I should).

Thank you very much and keep up the great work ! Mui-datatables is, with no doubt, the best in its kind and a must have !

Tech	Version
Material-UI	4.11.0
MUI-datatables	3.3.1
React	16.13.1
browser	Google Chrome @latest

[patorjk]

This is the right place to ask. Typically you'd use the "page" option, however, that option is currently setup to only take in an initial page number. This runs counter to most the table's other options. In the next release I'll be updating rowsPerPage option to accept changes. I could possibly do the same for the page option.

One workaround for the moment is to update page and also update a key for the table (example here).

[Tom687]

@patorjk Thank you for your answer.

The workaround works, however only for the first time. I have a "See my score" button, that sets the page number and also put it as a key to the table, just like you did.

When I click the button for the first time, it works and gets me to the page I wanted to go. But if I change the page again with the prev / next arrows and then click the "See my score" button again, nothing happens (although I have console.log(page) that shows the correct page to go number when clicking).

Do you have come through this problem ? If yes, how did you solve it ?

Thank you very much for your help

#EDIT :

I actually solved it, just using onTableChange option to set the page back again (from tableState.page)

Thank you

[patorjk]

Glad to hear this is solved, though I'll still be updating page for the next version, so you won't need to include the key parameter. You'll still need to use onTableChange though, since if you're setting the page option, you'll need to track the value when the table changes it.

[Tom687]

Sorry to come back at this, but actually my function to get the page is not correct.

Let's say the page I want to go is page 3 which has a user having an ID of 2. What kind of function should I write to get to the third page to see that users' score ? (remember it is sorted by highest score)

Should I go server-side ? Or is there another possibility I can not get my head around ?

Again thank you very much

#EDIT :

Thank you for the heads up

[patorjk]

Try this beta version of table:

npm install mui-datatables@3.4.0-beta.0

Here is a codesandbox showing it in action:

https://codesandbox.io/s/muidatatables-custom-toolbar-674xj?file=/index.js

You can use the dropdown in the header to externally change the page or the table footer to change the page.

[Tom687]

Thank you for your fast answer but I think we have a misunderstanding.

I have no problem changing the page, the problem is, let's admit I have 10 pages. The user finished the game, enters his name, then his record is inserted in the DB.

After this the table displays on the first page (which retrieves the data from the DB and is sorted by highest score by default), but the users place is in page 3.

How could I automatically go to page 3, without any manipulation, to get the user to see his ranking ? Eventually by putting a "Show my score" button as I tested, but ideally automatically ? Just knowing the ID, name and score retrieved from the DB.

I have thought of a function that could deduct the page he is in by linking his ID with the row index / number (I also have the ID of every users in the table).

The problem is this function. I initially thought I had it but no (remember the table is initially sorted by highest score).

Do you have any idea how I could achieve this ? Would it require server side stuff or could I do it without it ?

Thank you again and sorry for the misunderstanding

[patorjk]

How could I automatically go to page 3, without any manipulation, to get the user to see his ranking ? Eventually by putting a "Show my score" button as I tested, but ideally automatically ? Just knowing the ID, name and score retrieved from the DB.

You have to know the page where the score is, and then you update the options prop, which triggers the table to update.

Do you have any idea how I could achieve this ? Would it require server side stuff or could I do it without it ?

Yes, you just need to update the options prop with the page to trigger the table to update/re-render. You could do this with a button, or you could have code that does it in the background. You could also do it with a server side table, but you don't need to.

[Tom687]

Hi, thank you again for your help.

I finally got my "goToUserScorePage" function working. I get the last inserted ID from the table, then use Object.values(tableState.displayData).forEach() to return the dataIndex of the users' row in a variable. I then do a little division to get the page where I need to go and update the page via useState().

However it got me to another problem, which I am not yet able to resolve. Maybe you could help me with it ?

With the "key prop hack" in the table props, the problem is that, when I get to the users' rank page with my function (via a button), if I sort the table differently with a different column, the function doesn't do anything anymore.

However, whenever I change the page, I can sort the table how I want and the button calling the function will work again and get me to the right page.

I understand this is because of the key prop taking the current page that does this, but I cannot figure out a way to make the function work right after calling it, without changing the page.

Do you have any idea ?

Another small thing, when it gets to the right page with the function, whatever is the sorted column before calling the function, the default sorting by highest score comes back. Is that normal behaviour ? It is not bothering me for this kind of situation but I just would like to know.

You have to know the page where the score is, and then you update the options prop, which triggers the table to update.

By the way, which options prop are you talking about ?

Thank you very much, your help is greatly appreciated.

[patorjk]

When you use the key prop, you're resetting the table. If you were to use the beta I showed earlier I don't think you would have these issues. Also, be aware that if you're passing in a sort value in your options, that will override that table's internal sort.