Sorting is not shown in MDBTable


Topic: Sorting is not shown in MDBTable

Slavoljub Mihajlovic asked 6 years ago

I'm trying react MDBDataTable before purchasing for material UI design But sorting is not working I can't see sort icons http://prntscr.com/mupa39

Can you help me ? Thanks


Anna Morawska staff answered 6 years ago

Hi there,

please share with us how does your code look like, and then I would be able to help you :) I've just copy-paste the snippet from our documentation, and it seems like everything works fine

Best regards, Ania


Hi Anna This is the code snippet I'm using ( samples from documentation )

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'
  },
  {
    name: 'Cedric Kelly',
    position: 'Senior Javascript Developer',
    office: 'Edinburgh',
    age: '22',
    date: '2012/03/29',
    salary: '$433'
  },
  {
    name: 'Airi Satou',
    position: 'Accountant',
    office: 'Tokyo',
    age: '33',
    date: '2008/11/28',
    salary: '$162'
  },
  {
    name: 'Brielle Williamson',
    position: 'Integration Specialist',
    office: 'New York',
    age: '61',
    date: '2012/12/02',
    salary: '$372'
  },
  {
    name: 'Herrod Chandler',
    position: 'Sales Assistant',
    office: 'San Francisco',
    age: '59',
    date: '2012/08/06',
    salary: '$137'
  },
  {
    name: 'Rhona Davidson',
    position: 'Integration Specialist',
    office: 'Tokyo',
    age: '55',
    date: '2010/10/14',
    salary: '$327'
  },
  {
    name: 'Colleen Hurst',
    position: 'Javascript Developer',
    office: 'San Francisco',
    age: '39',
    date: '2009/09/15',
    salary: '$205'
  },
  {
    name: 'Sonya Frost',
    position: 'Software Engineer',
    office: 'Edinburgh',
    age: '23',
    date: '2008/12/13',
    salary: '$103'
  },
  {
    name: 'Jena Gaines',
    position: 'Office Manager',
    office: 'London',
    age: '30',
    date: '2008/12/19',
    salary: '$90'
  },
  {
    name: 'Quinn Flynn',
    position: 'Support Lead',
    office: 'Edinburgh',
    age: '22',
    date: '2013/03/03',
    salary: '$342'
  },
  {
    name: 'Charde Marshall',
    position: 'Regional Director',
    office: 'San Francisco',
    age: '36',
    date: '2008/10/16',
    salary: '$470'
  },
  {
    name: 'Haley Kennedy',
    position: 'Senior Marketing Designer',
    office: 'London',
    age: '43',
    date: '2012/12/18',
    salary: '$313'
  },
  {
    name: 'Tatyana Fitzpatrick',
    position: 'Regional Director',
    office: 'London',
    age: '19',
    date: '2010/03/17',
    salary: '$385'
  },
  {
    name: 'Michael Silva',
    position: 'Marketing Designer',
    office: 'London',
    age: '66',
    date: '2012/11/27',
    salary: '$198'
  },
  {
    name: 'Paul Byrd',
    position: 'Chief Financial Officer (CFO)',
    office: 'New York',
    age: '64',
    date: '2010/06/09',
    salary: '$725'
  },
  {
    name: 'Gloria Little',
    position: 'Systems Administrator',
    office: 'New York',
    age: '59',
    date: '2009/04/10',
    salary: '$237'
  },
  {
    name: 'Bradley Greer',
    position: 'Software Engineer',
    office: 'London',
    age: '41',
    date: '2012/10/13',
    salary: '$132'
  },
  {
    name: 'Dai Rios',
    position: 'Personnel Lead',
    office: 'Edinburgh',
    age: '35',
    date: '2012/09/26',
    salary: '$217'
  },
  {
    name: 'Jenette Caldwell',
    position: 'Development Lead',
    office: 'New York',
    age: '30',
    date: '2011/09/03',
    salary: '$345'
  },
  {
    name: 'Yuri Berry',
    position: 'Chief Marketing Officer (CMO)',
    office: 'New York',
    age: '40',
    date: '2009/06/25',
    salary: '$675'
  },
  {
    name: 'Caesar Vance',
    position: 'Pre-Sales Support',
    office: 'New York',
    age: '21',
    date: '2011/12/12',
    salary: '$106'
  },
  {
    name: 'Doris Wilder',
    position: 'Sales Assistant',
    office: 'Sidney',
    age: '23',
    date: '2010/09/20',
    salary: '$85'
  },
  {
    name: 'Angelica Ramos',
    position: 'Chief Executive Officer (CEO)',
    office: 'London',
    age: '47',
    date: '2009/10/09',
    salary: '$1'
  },
  {
    name: 'Gavin Joyce',
    position: 'Developer',
    office: 'Edinburgh',
    age: '42',
    date: '2010/12/22',
    salary: '$92'
  },
  {
    name: 'Jennifer Chang',
    position: 'Regional Director',
    office: 'Singapore',
    age: '28',
    date: '2010/11/14',
    salary: '$357'
  },
  {
    name: 'Brenden Wagner',
    position: 'Software Engineer',
    office: 'San Francisco',
    age: '28',
    date: '2011/06/07',
    salary: '$206'
  },
  {
    name: 'Fiona Green',
    position: 'Chief Operating Officer (COO)',
    office: 'San Francisco',
    age: '48',
    date: '2010/03/11',
    salary: '$850'
  },
  {
    name: 'Shou Itou',
    position: 'Regional Marketing',
    office: 'Tokyo',
    age: '20',
    date: '2011/08/14',
    salary: '$163'
  },
  {
    name: 'Michelle House',
    position: 'Integration Specialist',
    office: 'Sidney',
    age: '37',
    date: '2011/06/02',
    salary: '$95'
  },
  {
    name: 'Suki Burks',
    position: 'Developer',
    office: 'London',
    age: '53',
    date: '2009/10/22',
    salary: '$114'
  },
  {
    name: 'Prescott Bartlett',
    position: 'Technical Author',
    office: 'London',
    age: '27',
    date: '2011/05/07',
    salary: '$145'
  },
  {
    name: 'Gavin Cortez',
    position: 'Team Leader',
    office: 'San Francisco',
    age: '22',
    date: '2008/10/26',
    salary: '$235'
  },
  {
    name: 'Martena Mccray',
    position: 'Post-Sales support',
    office: 'Edinburgh',
    age: '46',
    date: '2011/03/09',
    salary: '$324'
  },
  {
    name: 'Unity Butler',
    position: 'Marketing Designer',
    office: 'San Francisco',
    age: '47',
    date: '2009/12/09',
    salary: '$85'
  },
  {
    name: 'Howard Hatfield',
    position: 'Office Manager',
    office: 'San Francisco',
    age: '51',
    date: '2008/12/16',
    salary: '$164'
  },
  {
    name: 'Hope Fuentes',
    position: 'Secretary',
    office: 'San Francisco',
    age: '41',
    date: '2010/02/12',
    salary: '$109'
  },
  {
    name: 'Vivian Harrell',
    position: 'Financial Controller',
    office: 'San Francisco',
    age: '62',
    date: '2009/02/14',
    salary: '$452'
  },
  {
    name: 'Timothy Mooney',
    position: 'Office Manager',
    office: 'London',
    age: '37',
    date: '2008/12/11',
    salary: '$136'
  },
  {
    name: 'Jackson Bradshaw',
    position: 'Director',
    office: 'New York',
    age: '65',
    date: '2008/09/26',
    salary: '$645'
  },
  {
    name: 'Olivia Liang',
    position: 'Support Engineer',
    office: 'Singapore',
    age: '64',
    date: '2011/02/03',
    salary: '$234'
  },
  {
    name: 'Bruno Nash',
    position: 'Software Engineer',
    office: 'London',
    age: '38',
    date: '2011/05/03',
    salary: '$163'
  },
  {
    name: 'Sakura Yamamoto',
    position: 'Support Engineer',
    office: 'Tokyo',
    age: '37',
    date: '2009/08/19',
    salary: '$139'
  },
  {
    name: 'Thor Walton',
    position: 'Developer',
    office: 'New York',
    age: '61',
    date: '2013/08/11',
    salary: '$98'
  },
  {
    name: 'Finn Camacho',
    position: 'Support Engineer',
    office: 'San Francisco',
    age: '47',
    date: '2009/07/07',
    salary: '$87'
  },
  {
    name: 'Serge Baldwin',
    position: 'Data Coordinator',
    office: 'Singapore',
    age: '64',
    date: '2012/04/09',
    salary: '$138'
  },
  {
    name: 'Zenaida Frank',
    position: 'Software Engineer',
    office: 'New York',
    age: '63',
    date: '2010/01/04',
    salary: '$125'
  },
  {
    name: 'Zorita Serrano',
    position: 'Software Engineer',
    office: 'San Francisco',
    age: '56',
    date: '2012/06/01',
    salary: '$115'
  },
  {
    name: 'Jennifer Acosta',
    position: 'Junior Javascript Developer',
    office: 'Edinburgh',
    age: '43',
    date: '2013/02/01',
    salary: '$75'
  },
  {
    name: 'Cara Stevens',
    position: 'Sales Assistant',
    office: 'New York',
    age: '46',
    date: '2011/12/06',
    salary: '$145'
  },
  {
    name: 'Hermione Butler',
    position: 'Regional Director',
    office: 'London',
    age: '47',
    date: '2011/03/21',
    salary: '$356'
  },
  {
    name: 'Lael Greer',
    position: 'Systems Administrator',
    office: 'London',
    age: '21',
    date: '2009/02/27',
    salary: '$103'
  },
  {
    name: 'Jonas Alexander',
    position: 'Developer',
    office: 'San Francisco',
    age: '30',
    date: '2010/07/14',
    salary: '$86'
  },
  {
    name: 'Shad Decker',
    position: 'Regional Director',
    office: 'Edinburgh',
    age: '51',
    date: '2008/11/13',
    salary: '$183'
  },
  {
    name: 'Michael Bruce',
    position: 'Javascript Developer',
    office: 'Singapore',
    age: '29',
    date: '2011/06/27',
    salary: '$183'
  },
  {
    name: 'Donna Snider',
    position: 'Customer Support',
    office: 'New York',
    age: '27',
    date: '2011/01/25',
    salary: '$112'
  }
]
  };

 <MDBDataTable
  striped
  bordered
  hover
  data={data}
/>

This is the sample in the documentation But when I implement it , I got this ( no sorting icons / no sortings ) http://prntscr.com/mw6yev

Thanks


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.11.0
  • Device: iMac, intel
  • Browser: Chrome
  • OS: MacOS, Windows, Ubuntu
  • Provided sample code: No
  • Provided link: Yes
Tags