Topic: Datatable how to fix rows at the top

Kent free asked 2 years ago


Expected behavior

After configuring datatable specific rows are at the top of the table and:

1) always at the top whenever sort  is applied on any column
2) possibly with sticky style, so that they will be visible if scrolling down

One way to do it with Datatables.net is using orderFixed option, absoluteOrder plugin and hidden column with values that are only set for rows we want to fix at the top.

For now as I understand I cant use datatables plugins, and neither MDB Datatables has orderFixed option while configuring datatable.

So how can I achieve such behaviour using MDB JS lib that some rows will be always at the top with plain JS or jQuery?

Here is example how this issue is resolved with datatables.net


Kent free answered 2 years ago


I found that sortFixed was used in datatables.min.js for MDB4 package. Though it dissapeared from datatable.min.js in MDB5. Is it possible to use datatables.min.js in MDB5? OR I have to downgrade to MDB4 which is refer to bootstrap 4?

UPD. For now I still cant figure out how to just fix rows at the top of the table in reasonable time with MDBdatatable. So I ll continue working with datatables.net. Is it ok to work with MDB5 css+js with non-native datatables module?


Michał Duszak staff commented 2 years ago

We didn't test how MDB5 css+js will work with non-native datatables module. Pay attention to how your datatable will be initialized and try not to double the init. Also, when working with npm, you can choose which MDB module you'd like to append. https://mdbootstrap.com/docs/standard/getting-started/installation/#section-npm



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: PC
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes