0

I am using mdbreact npm for data tables with next.js and i want to add fa fa sort icon with heading but it is not working below is my code and i already i tried it with CSS :-

// This is how i import mdbreact after installation :- 
import { MDBDataTable, MDBBtn, MDBTable, MDBTableBody, MDBTableHead } from 'mdbreact';

// These Are The Heading Of The Table :-
const columns = 
[
{ label: 'Customer Tag' + <i class="fa fa-sort" aria-hidden="true"></i>, field: 'Customer_Tag', sort: 'asc', width: 150 },
{ label: 'Discount Type', field: 'Discount_Type', sort: 'asc', width: 270 },
{ label: 'Discount Condition', field: 'Discount_Condition', sort: 'asc', width: 200 },
{ label: 'Enable/Disable', field: 'status', sort: 'disabled', width: 100 },
{ label: 'Action', field: 'action', sort: 'disabled', width: 100 },
];

// And This is My MDBreact Table return( )

Jee Mok
  • 6,157
  • 8
  • 47
  • 80
Rajat Srivastava
  • 115
  • 8

3 Answers3

2

The value of label is supposed to be a string, so I suspect that's why it doesn't work. Docs here: https://mdbootstrap.com/docs/react/tables/datatables/

You will not be able to use the font awesome class names because you can't put an element in the label.

I don't have a good solution but here's two options:

I used react-table for my data tables and was able to do what you're attempting. Consider switching to react-table.

Don't use font awesome in this instance, try finding a html entity that means the same thing, such as something from this list: https://dev.w3.org/html5/html-author/charref

Sydney Y
  • 2,912
  • 3
  • 9
  • 15
  • Not Working For Me Sir – Rajat Srivastava Feb 02 '20 at 06:47
  • Can you tell me how the original is 'not working' please? Are you getting a build error, a console error, is it just not displaying? Any error messages would be helpful. – Sydney Y Feb 02 '20 at 06:51
  • while using this code i am getting below error :- ./pages/component/dataTables.js SyntaxError: C:\Users\lenovo\Desktop\wholesaleapp\pages\component\dataTables.js: Unexpected token (73:34) 72 | const columns = [ > 73 | { label: {'Customer Tag ' + }, field: 'Customer_Tag', sort: 'asc', width: 150 }, | ^ – Rajat Srivastava Feb 02 '20 at 07:08
  • Thanks for the feedback. Yes, as per the documentation the label must be a string. Your error message shows me that it is enforced. No elements allowed. I'll update the answer with another suggestion. – Sydney Y Feb 02 '20 at 07:13
  • Your help will be good for me. i also tried this :- const columns = [ { label: Customer Tag , field: 'Customer_Tag', sort: 'asc', width: 150 }, { label: 'Discount Type', field: 'Discount_Type', sort: 'asc', width: 270 }, { label: 'Discount Condition', field: 'Discount_Condition', sort: 'asc', width: 200 }, { label: 'Enable/Disable', field: 'status', sort: 'disabled', width: 100 }, { label: 'Action', field: 'action', sort: 'disabled', width: 100 }, ]; – Rajat Srivastava Feb 02 '20 at 08:17
  • Like This :- { label: Discount Type ⇵, field: 'Discount_Type', sort: 'asc', width: 270 } – Rajat Srivastava Feb 02 '20 at 10:54
0

I solved it with the entity, here is my code :-

const columns = [ { label: Customer Tag ⇵, field: 'Customer_Tag', sort: 'asc', width: 270, attributes: {className :"fas fa-sort"} }, { label: Discount Type ⇵, field: 'Discount_Type', sort: 'asc', width: 270 }, { label: Discount Condition ⇵, field: 'Discount_Condition', sort: 'asc', width: 200 }, { label: 'Enable/Disable', field: 'status', sort: 'disabled', width: 100 }, { label: 'Action', field: 'action', sort: 'disabled', width: 100 },

];

Rajat Srivastava
  • 115
  • 8
0

please include the below link

import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
Ikram Ullah
  • 1
  • 1
  • 6