mdbreact datatable problem with sort button

Topic: mdbreact datatable problem with sort button

Lưu Minh Long asked 5 years 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 5 years ago

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

Add comment

pal.wagner answered 5 years ago

1 0 Best answer

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.....

Add comment

pal.wagner answered 5 years ago

1 0 Best answer

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

Add comment

Jakub Chmura staff premium answered 5 years ago