Topic: mdbreact datatable problem with sort button
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
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
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.....
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.25.6
- Device: PC
- Browser: Microsoft Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Piotr Glejzer staff commented 4 years ago
How do you want to unsort that column without clicking on another column?