MDBDataTable Previous Next issue

Topic: MDBDataTable Previous Next issue

Jigar Kothari free asked 5 years ago

**Expected behavior**

Previous should be disabled if the user is on the First page of the data table. Next should be disabled if the user is on the Last page of the data table.

**Actual behavior**

Previous button shows the disabled cursor, but when clicked Previous on the First page, the app crashes.When on the last page, if Next is clicked it still moves ahead to show a blank Data table.

**Resources (screenshots, code snippets etc.)**

Add comment

Jakub Mandra staff answered 5 years ago

1 0 Best answer

Thanks,

I've checked your code. The problem is caused because the MDB styles are not attached in App or index.js. More read here: <a href="https://mdbootstrap.com/docs/react/getting-started/quick-start/" target="_blank">https://mdbootstrap.com/docs/react/getting-started/quick-start/</a>

It should look like this:

<pre class="prettyprint"><code>import React from 'react';
import ReactDOM from 'react-dom';
// mdb & bootstrap styles
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
</code></pre>

But that showed up the problem with default styles for the pagination component which we should fix.

Hope this will help.

Best,

Jakub

Please insert min. 20 characters.

Thanks,

I've checked your code. The problem is caused because the MDB styles are not attached in App or index.js. More read here: https://mdbootstrap.com/docs/react/getting-started/quick-start/

It should look like this:

import React from 'react';
import ReactDOM from 'react-dom';
// mdb & bootstrap styles
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

But that showed up the problem with default styles for the pagination component which we should fix.

Hope this will help.

Best,

Jakub

Jigar Kothari free commented 5 years ago

Hi Jakub,

Thanks for the reply. Importing css did help, but importing those files have overridden my previous styling throughout the site. Trying to rectify that. Please let me know if I can get a small patch of css styling related to the Datatable and pagination only rather than importing the whole stylesheet.

Thanks for the help.

Jakub Mandra staff commented 5 years ago

Hey,

You could clone our repo or download the zipped starter project https://mdbootstrap.com/docs/react/getting-started/download/

There are our scss files, which you could edit. Also, you have there an _custom-styles.scss file, where you can attach your custom styles.

In imports in mdb.scss file, you can remove modules which you do not need.

Best,

Jakub

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Hi,

I can not reproduce the issue. Can you provide us with error logs and code snippet with your Datatable implementation please?

Best,

Jakub

Jigar Kothari free commented 5 years ago

Hi Jakub,Appreciate your reply. Please find the usage and the error log

Following is the Usage:

import { MDBBtn, MDBDataTable } from 'mdbreact';

MDBDataTable striped bordered hover data={data} // they are enclosed with open & close tags, but had to remove here because while saving it strips all the tags tags. Following is the console error log.

no-script-urlprintWarnings @ webpackHotDevClient.js:120mdbreact.esm.js:3044 Uncaught TypeError: Cannot read property 'length' of undefined at DataTableInfo (mdbreact.esm.js:3044) at updateFunctionComponent (react-dom.development.js:15034) at beginWork (react-dom.development.js:15970) at performUnitOfWork (react-dom.development.js:19102) at workLoop (react-dom.development.js:19143) at HTMLUnknownElement.callCallback (react-dom.development.js:147) at Object.invokeGuardedCallbackDev (react-dom.development.js:196) at invokeGuardedCallback (react-dom.development.js:250) at replayUnitOfWork (react-dom.development.js:18350) at renderRoot (react-dom.development.js:19261) at performWorkOnRoot (react-dom.development.js:20165) at performWork (react-dom.development.js:20075) at performSyncWork (react-dom.development.js:20049) at interactiveUpdates$1 (react-dom.development.js:20337) at interactiveUpdates (react-dom.development.js:2267) at dispatchInteractiveEvent (react-dom.development.js:5083)mdbreact.esm.js:3274 Uncaught TypeError: Cannot read property 'map' of undefined at DataTablePagination.render (mdbreact.esm.js:3274) at finishClassComponent (react-dom.development.js:15141) at updateClassComponent (react-dom.development.js:15096) at beginWork (react-dom.development.js:15980) at performUnitOfWork (react-dom.development.js:19102) at workLoop (react-dom.development.js:19143) at HTMLUnknownElement.callCallback (react-dom.development.js:147) at Object.invokeGuardedCallbackDev (react-dom.development.js:196) at invokeGuardedCallback (react-dom.development.js:250) at replayUnitOfWork (react-dom.development.js:18350) at renderRoot (react-dom.development.js:19261) at performWorkOnRoot (react-dom.development.js:20165) at performWork (react-dom.development.js:20075) at performSyncWork (react-dom.development.js:20049) at interactiveUpdates$1 (react-dom.development.js:20337) at interactiveUpdates (react-dom.development.js:2267) at dispatchInteractiveEvent (react-dom.development.js:5083)index.js:1446 The above error occurred in the component: in DataTableInfo in div in div in DataTable (at SizePitchList.js:122) in div (at SizePitchList.js:114) in div (at SizePitchList.js:113) in div (at Layout.js:125) in div (at Layout.js:123) in section (at Layout.js:122) in aux (at Layout.js:114) in Layout (created by Context.Consumer) in Connect(Layout) (created by Route) in Route (created by withRouter(Connect(Layout))) in withRouter(Connect(Layout)) (at SizePitchList.js:111) in SizePitchList (created by Context.Consumer) in Connect(SizePitchList) (at UserRoute.js:9) in Route (at UserRoute.js:8) in UserRoute (created by Context.Consumer) in Connect(UserRoute) (at App.js:39) in Switch (at App.js:33) in RouteComponent (created by Route) in Route (at App.js:25) in Router (created by BrowserRouter) in BrowserRouter (at App.js:24) in App (at src/index.js:30) in Provider (at src/index.js:29)

Consider adding an error boundary to your tree to customize error handling behavior.Visit https://fb.me/react-error-boundaries to learn more about error boundaries.console.(anonymous function) @ index.js:1446index.js:1446 The above error occurred in the component: in DataTablePagination in div in div in DataTable (at SizePitchList.js:122) in div (at SizePitchList.js:114) in div (at SizePitchList.js:113) in div (at Layout.js:125) in div (at Layout.js:123) in section (at Layout.js:122) in aux (at Layout.js:114) in Layout (created by Context.Consumer) in Connect(Layout) (created by Route) in Route (created by withRouter(Connect(Layout))) in withRouter(Connect(Layout)) (at SizePitchList.js:111) in SizePitchList (created by Context.Consumer) in Connect(SizePitchList) (at UserRoute.js:9) in Route (at UserRoute.js:8) in UserRoute (created by Context.Consumer) in Connect(UserRoute) (at App.js:39) in Switch (at App.js:33) in RouteComponent (created by Route) in Route (at App.js:25) in Router (created by BrowserRouter) in BrowserRouter (at App.js:24) in App (at src/index.js:30) in Provider (at src/index.js:29)

Consider adding an error boundary to your tree to customize error handling behavior.Visit https://fb.me/react-error-boundaries to learn more about error boundaries.console.(anonymous function) @ index.js:1446react-dom.development.js:20135 Uncaught TypeError: Cannot read property 'length' of undefined at DataTableInfo (mdbreact.esm.js:3044) at updateFunctionComponent (react-dom.development.js:15034) at beginWork (react-dom.development.js:15970) at performUnitOfWork (react-dom.development.js:19102) at workLoop (react-dom.development.js:19143) at renderRoot (react-dom.development.js:19228) at performWorkOnRoot (react-dom.development.js:20165) at performWork (react-dom.development.js:20075) at performSyncWork (react-dom.development.js:20049) at interactiveUpdates$1 (react-dom.development.js:20337) at interactiveUpdates (react-dom.development.js:2267) at dispatchInteractiveEvent (react-dom.development.js:5083)

Hi Jakub,Appreciate your reply. Please find the usage and the error log

Following is the Usage:

import { MDBBtn, MDBDataTable } from 'mdbreact';

MDBDataTable striped bordered hover data={data}
 // they are enclosed with open & close tags, but had to remove here because while saving it strips all the tags tags.
Following is the console error log.

no-script-urlprintWarnings @ webpackHotDevClient.js:120mdbreact.esm.js:3044 Uncaught TypeError: Cannot read property 'length' of undefined at DataTableInfo (mdbreact.esm.js:3044) at updateFunctionComponent (react-dom.development.js:15034) at beginWork (react-dom.development.js:15970) at performUnitOfWork (react-dom.development.js:19102) at workLoop (react-dom.development.js:19143) at HTMLUnknownElement.callCallback (react-dom.development.js:147) at Object.invokeGuardedCallbackDev (react-dom.development.js:196) at invokeGuardedCallback (react-dom.development.js:250) at replayUnitOfWork (react-dom.development.js:18350) at renderRoot (react-dom.development.js:19261) at performWorkOnRoot (react-dom.development.js:20165) at performWork (react-dom.development.js:20075) at performSyncWork (react-dom.development.js:20049) at interactiveUpdates$1 (react-dom.development.js:20337) at interactiveUpdates (react-dom.development.js:2267) at dispatchInteractiveEvent (react-dom.development.js:5083)mdbreact.esm.js:3274 Uncaught TypeError: Cannot read property 'map' of undefined at DataTablePagination.render (mdbreact.esm.js:3274) at finishClassComponent (react-dom.development.js:15141) at updateClassComponent (react-dom.development.js:15096) at beginWork (react-dom.development.js:15980) at performUnitOfWork (react-dom.development.js:19102) at workLoop (react-dom.development.js:19143) at HTMLUnknownElement.callCallback (react-dom.development.js:147) at Object.invokeGuardedCallbackDev (react-dom.development.js:196) at invokeGuardedCallback (react-dom.development.js:250) at replayUnitOfWork (react-dom.development.js:18350) at renderRoot (react-dom.development.js:19261) at performWorkOnRoot (react-dom.development.js:20165) at performWork (react-dom.development.js:20075) at performSyncWork (react-dom.development.js:20049) at interactiveUpdates$1 (react-dom.development.js:20337) at interactiveUpdates (react-dom.development.js:2267) at dispatchInteractiveEvent (react-dom.development.js:5083)index.js:1446 The above error occurred in the component: in DataTableInfo in div in div in DataTable (at SizePitchList.js:122) in div (at SizePitchList.js:114) in div (at SizePitchList.js:113) in div (at Layout.js:125) in div (at Layout.js:123) in section (at Layout.js:122) in aux (at Layout.js:114) in Layout (created by Context.Consumer) in Connect(Layout) (created by Route) in Route (created by withRouter(Connect(Layout))) in withRouter(Connect(Layout)) (at SizePitchList.js:111) in SizePitchList (created by Context.Consumer) in Connect(SizePitchList) (at UserRoute.js:9) in Route (at UserRoute.js:8) in UserRoute (created by Context.Consumer) in Connect(UserRoute) (at App.js:39) in Switch (at App.js:33) in RouteComponent (created by Route) in Route (at App.js:25) in Router (created by BrowserRouter) in BrowserRouter (at App.js:24) in App (at src/index.js:30) in Provider (at src/index.js:29)

Consider adding an error boundary to your tree to customize error handling behavior.Visit <a href="https://fb.me/react-error-boundaries" target="_blank" rel="nofollow">https://fb.me/react-error-boundaries</a> to learn more about error boundaries.console.(anonymous function) @ index.js:1446index.js:1446 The above error occurred in the component: in DataTablePagination in div in div in DataTable (at SizePitchList.js:122) in div (at SizePitchList.js:114) in div (at SizePitchList.js:113) in div (at Layout.js:125) in div (at Layout.js:123) in section (at Layout.js:122) in aux (at Layout.js:114) in Layout (created by Context.Consumer) in Connect(Layout) (created by Route) in Route (created by withRouter(Connect(Layout))) in withRouter(Connect(Layout)) (at SizePitchList.js:111) in SizePitchList (created by Context.Consumer) in Connect(SizePitchList) (at UserRoute.js:9) in Route (at UserRoute.js:8) in UserRoute (created by Context.Consumer) in Connect(UserRoute) (at App.js:39) in Switch (at App.js:33) in RouteComponent (created by Route) in Route (at App.js:25) in Router (created by BrowserRouter) in BrowserRouter (at App.js:24) in App (at src/index.js:30) in Provider (at src/index.js:29)

Consider adding an error boundary to your tree to customize error handling behavior.Visit <a href="https://fb.me/react-error-boundaries" target="_blank" rel="nofollow">https://fb.me/react-error-boundaries</a> to learn more about error boundaries.console.(anonymous function) @ index.js:1446react-dom.development.js:20135 Uncaught TypeError: Cannot read property 'length' of undefined at DataTableInfo (mdbreact.esm.js:3044) at updateFunctionComponent (react-dom.development.js:15034) at beginWork (react-dom.development.js:15970) at performUnitOfWork (react-dom.development.js:19102) at workLoop (react-dom.development.js:19143) at renderRoot (react-dom.development.js:19228) at performWorkOnRoot (react-dom.development.js:20165) at performWork (react-dom.development.js:20075) at performSyncWork (react-dom.development.js:20049) at interactiveUpdates$1 (react-dom.development.js:20337) at interactiveUpdates (react-dom.development.js:2267) at dispatchInteractiveEvent (react-dom.development.js:5083)

Please insert min. 15 characters.

Jakub Mandra staff commented 5 years ago

We have never met a similar error in our package, so it is hard to tell what could be wrong.

Looks like the problem is connected with the project configuration. Do you use create-react-app or your custom config? Or maybe SSR?

It would be good if you share the project on Github and share it with us (it can be private, just add mdbootstrap as collaborator), so we could clone and debug.

Best,

Jakub

Jigar Kothari free commented 5 years ago

Hi Jakub,

Thanks for the reply. I won't be able to share the original code, but instead have created a demo wherein the same issue persists. Please check your Git account for the collaborator invitation. Also I am using create-react-app.

Jakub Mandra staff commented 5 years ago

Hi Jigar,

I'm sorry but it comes out that I'm not able to use @mdbootstrap account, I will have to use my private. So please invite @rotarepmi.

Best regards,

Jakub

Jigar Kothari free commented 5 years ago

Hi Jakub,

Done. Invite sent.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.11.0
Device: Lenovo
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

Jigar Kothari

5Support score
1Questions 0Answers 0Snippets