Topic: CSS isn't working with MDB Datatable

Aman free asked 2 years ago


*Expected behavior*css should be applied

*Actual behavior*After installing mdbreact and importing all the necessary components, design isn't applied.

enter code here

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

//Componentimport * as React from 'react';import {MDBDataTable, MDBBtn, MDBInput, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter, MDBIcon, MDBBadge, MDBContainer, MDBRow, MDBCol} from "mdbreact";

const DatatablePage = () => {const data = {............};return ( MDBDataTable striped bordered hover data={data} />);}

enter image description here


Piotr Glejzer staff commented 2 years ago

you have to import styles in your index.js ( where you have a render your App), before import App.js


Aman free answered 2 years ago


Thanks @Piotr Glejzer it worked.

one thing is still missing the sorting icon on each table, would you like to guide me there as well please?

enter image description here


Piotr Glejzer staff commented 2 years ago

did you load properly font awesome?



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.27.0
  • Device: Dell
  • Browser: Chrome, edge
  • OS: Windows
  • Provided sample code: No
  • Provided link: No