mdbreact datatable problem with sort button


Topic: mdbreact datatable problem with sort button

Lưu Minh Long asked 4 months ago

I created a datatable like this:

const DatatablePage = () => {
        const data = {
            columns: [
                {
                    label: 'Stock Code', // Column's name
                    field: 'StockCode', // json attribute
                    sort: 'asc', // ascending sort
                    width: 150 // width of the column
                },
                {
                    label: 'Item Description',
                    field: 'ItemDes',
                    sort: 'asc',
                    width: 200
                },
                {
                    label: 'Unit Price',
                    field: 'UnitPrice',
                    sort: 'asc',
                    width: 200,
                },
                {
                    label: 'In Stock',
                    field: 'QUANTITY',
                    sort: 'asc',
                    width: 100
                }
            ],
            rows: table
        };

    return (
        <MDBDataTable
            bordered
            small
            data={data}
            btn
            noBottomColumns={true}
            className='blueTable'
        />
    );
}

But the sort button only has arrow down option: https://i.stack.imgur.com/UeEFG.png When I want to unsort that column, I have to sort other column: https://i.stack.imgur.com/T5GQW.png
I copied the code from the tutorial/example. Why is this happen?
Any help is greatly appreciated


Piotr Glejzer staff commented 4 months ago

How do you want to unsort that column without clicking on another column?


Jakub Chmura staff premium answered 4 months ago

hi @Lưu Minh Long,

I checked examples from our documentatnion, and everything works well.

Can you paste here your whole app? You paste here an example with table wariable which is not defined and i can not check it.

Best, Kuba


pal.wagner answered 3 months ago

Hi!

We have the same issue. I created a quick app to demonstrate the issue.

1., create app : npx create-react-app dt-bughunt --template typescript 2., install packages

{

"name": "dt-bughunt", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/jest": "^24.0.0", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", "bootstrap-css-only": "^4.4.1", "@fortawesome/fontawesome-free": "^5.12.0", "@material-ui/core": "3.9.3", "mdbreact": "^4.26.0", "prop-types": "15.6.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1", "typescript": "~3.7.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }}

3., Modify the App.jsx:

import React from 'react';import { MDBDataTable } from 'mdbreact';

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

function App() { const data = { columns: [ { label: 'Name', field: 'name', sort: 'asc', width: 150 }, { label: 'Position', field: 'position', sort: 'asc', width: 270 }, { label: 'Office', field: 'office', sort: 'asc', width: 200 }, { label: 'Age', field: 'age', sort: 'asc', width: 100 }, { label: 'Start date', field: 'date', sort: 'asc', width: 150 }, { label: 'Salary', field: 'salary', sort: 'asc', width: 100 } ], rows: [ { name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', age: '61', date: '2011/04/25', salary: '$320' }, { name: 'Garrett Winters', position: 'Accountant', office: 'Tokyo', age: '63', date: '2011/07/25', salary: '$170' }, { name: 'Ashton Cox', position: 'Junior Technical Author', office: 'San Francisco', age: '66', date: '2009/01/12', salary: '$86' } ] };

return ( );}

export default App;

Interesting is that if I create a snippet here, the sorting is working.....


pal.wagner answered 3 months ago

Sorry for another post but the snippet is also not working!!!....If you click on the sort arrow on any column it resets the sorting after a few seconds...could be the problem is this in our case also


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: React
  • MDB Version: 4.25.6
  • Device: PC
  • Browser: Microsoft Edge
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes