MDBDataTable Pro - Material design datatable entries dropdow


Topic: MDBDataTable Pro - Material design datatable entries dropdown doesn't work

jimgroome asked 5 years ago

Code:

<MDBDataTable
    responsive
    striped
    hover
    entries={20}
    data={tableData}
    className="clickable-table"
/>

Expected behavior

Datatable is rendered with 20 entries per page

Actual behavior

Datatable is rendered with 10 entries per page, and the dropdown to select the number of entries per page doesn't work.

Partial solution

If I comment out the display: none on line 333 of assets/scss/pro/_material-select.scss, the dropdown works. But I still only have 10 rows of data when the table is first rendered.

It's worth noting that this exact code works fine in the Free version.


Piotr Glejzer staff answered 5 years ago

Hi,

you have to change entriesOptions too, like that :

        <MDBDataTable
          striped
          bordered
          hover
          entriesOptions={[20, 25]}
          entries={20}
          pagesAmount={4}
          data={new data()}
        />

Is this work? Do you have some console errors about that select? Because I don't see a problem with that :(


jimgroome commented 5 years ago

Thank you for your response! Setting entriesOptions to [20, 50, 100] has resolved the issue, so thanks for that.

It might be worth updating the documentation to clarify that if you set entries, you have to set entriesOptions to an array that doesn't include a number lower than your entries, if that makes sense.

The dropdown issue persists, however. I have no console errors. But removing the display: none on line 333 of assets/scss/pro/_material-select.scss is a decent workaround for now.

Thanks again for your advice! Jim


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.23.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No