Datatable can't sort both ways


Topic: Datatable can't sort both ways

Hami123 asked 5 months ago

Expected behavior It first sorts ascending when you click once and when you click again it sorts descending like it works in the example for the Datatable

Actual behavior It only sorts ascending and nothing happens when you click again

Resources (screenshots, code snippets etc.) Copy pasted and tried both the examples for 5+ and 4.27. Also tried deleting and re-installing package-lock and node_modules


Piotr Glejzer staff commented 5 months ago

do you have some console errors or something? I don't see this problem in my environment.


Hami123 commented 5 months ago

No unfortunately I can't see any errors or warnings about it. I did try to set one of the columns to sort descending instead though and that did work for the first click. But when I clicked again it wasn't able to sort ascending instead. Everything else on the table works good.


Hami123 commented 5 months ago

Here is a snippet, and that seems to work: https://mdbootstrap.com/snippets/react/hami123/2274771?action=forum_snippet#js-tab-view

When I try replacing my App.js it doesn't work though. I'm having these imports in index.js before the App import as it said in the instructions (https://www.npmjs.com/package/mdbreact):

import '@fortawesome/fontawesome-free/css/all.min.css';import 'bootstrap-css-only/css/bootstrap.min.css';import 'mdbreact/dist/css/mdb.css';


Piotr Glejzer staff commented 5 months ago

could you put your all code with this problem here?


Hami123 commented 5 months ago

App.js is excatly the same as the code snippet above.

index.js:

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

//mdbreact

import '@fortawesome/fontawesome-free/css/all.min.css';

import 'bootstrap-css-only/css/bootstrap.min.css';

import 'mdbreact/dist/css/mdb.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

ReactDOM.render( < React.StrictMode> < App /> < /React.StrictMode>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();


Piotr Glejzer staff commented 5 months ago

try to remove , I don't see a problem with sorting in my apps :(


rossman commented 2 months ago

I tried this in a test project and I have exactly the same problem. I can upload the whole react project if desired. Is there a way I can do that?


Krzysztof Wilk staff commented 2 months ago

Hi @rossman!

You can send me your react project on my e-mail k.wilk@mdbootstrap.com, I'll try to check what's wrong :)

Best regards


rossman commented 2 months ago

@Krzysztof Wilk I just sent the project to your email. Thanks for the help.


Krzysztof Wilk staff commented 2 months ago

Hi!

I didn't get anything :/ could you resend your project into my private mail - xedanion16@gmail.com, please?

Best regards


rossman commented 2 months ago

I sent an email to both email addresses. The email contains a link where you can download the file. Note, I got a bounceback for xedanion16@gmail.com from google. It said that the email address does not exist.


rossman answered 2 months ago

Here's the google drive link to the project:

https://drive.google.com/file/d/1aQLCknvAeZRd5mSbO6JYQn6NAcxxs98G/view?usp=sharing

Edit: I'm not sure why this is being shown as an answer to the initial question, but this is NOT an answer. It's a project showing the problem described.


Piotr Glejzer staff commented 2 months ago

Try to remove <React.StrictMode/> in your App.js. I don't know why this mode is blocking sorting in another way. I added the task to check it.


rossman commented 2 months ago

Thank you, that worked.

If your bug tracking is public, please provide a link so I can see the progress on this issue. If it's not public and you can remember, please provide an update to this forum post when the issue is resolved.

It should be noted that React.StrictMode wrapped around App is the default configuration when a new project is created using "npx create-react-app".


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: React
  • MDB Version: 4.27.0
  • Device: PC
  • Browser: Chrome
  • OS: CentOS Linux 7
  • Provided sample code: No
  • Provided link: No