Column order is wrong in React DataTables and missing docume


Topic: Column order is wrong in React DataTables and missing documentation

Avsec pro asked 8 months ago

I am trying to use DataTables with React, but have two problems. The first one is: the columns in table header are shown in the right order but the columns in data are not.

Here is how I do it:

const data = {
  columns: [
    {'label': 'Name', 'field': 'name'},
    {'label': 'Model', 'field': 'model'},
    {'label': 'Feature', 'field': 'feature'},
    {'label': 'Score', 'field': 'score'},
    {'label': 'Normalized Score', 'field': 'normalized_score'}
  ],
  rows: [
    {
      "feature": "8988T_DNase_None",
      "model": "DeepSEA/predict",
      "name": "[known_CEBP_binding_increase]GtoT__chr1_109817091_109818090",
      "normalized_score": "",
      "score": 0.13724151253700256
    },
    {
      "feature": "AoSMC_DNase_None",
      "model": "DeepSEA/predict",
      "name": "[known_CEBP_binding_increase]GtoT__chr1_109817091_109818090",
      "normalized_score": "",
      "score": 0.3942023515701294
    },
    {
      "feature": "Chorion_DNase_None",
      "model": "DeepSEA/predict",
      "name": "[known_CEBP_binding_increase]GtoT__chr1_109817091_109818090",
      "normalized_score": "",
      "score": 0.42923635244369507
    },
    {
      "feature": "CLL_DNase_None",
      "model": "DeepSEA/predict",
      "name": "[known_CEBP_binding_increase]GtoT__chr1_109817091_109818090",
      "normalized_score": "",
      "score": 0.2091972529888153
    },
    {
      "feature": "Fibrobl_DNase_None",
      "model": "DeepSEA/predict",
      "name": "[known_CEBP_binding_increase]GtoT__chr1_109817091_109818090",
      "normalized_score": "",
      "score": 0.33895522356033325
    }
  ]
};

return (
  <MDBDataTable striped hover data={data}/>
)

Here is the result:

How it looks

As you can see, the columns are filled in the order they appear in the data, but not according to the columns definition (Name should be in the first column but it is on the third column in the table above)

My second problem is that I want to be able to change the default entry size to 100, instead of 10. I could not find an option for that.


Jakub Mandra staff premium answered 8 months ago

Hi,

Row fields should be organized in proper order too. To change default entry size use property entries.

You can find more options in our documentation in API tab.

Here is your reedited code:

  const data = {
    columns: [
      {'label': 'Name', 'field': 'name'},
      {'label': 'Model', 'field': 'model'},
      {'label': 'Feature', 'field': 'feature'},
      {'label': 'Score', 'field': 'score'},
      {'label': 'Normalized Score', 'field': 'normalized_score'}
    ],
    rows: [
      {
        "name": "[known_CEBP_binding_increase]GtoT__chr1_109817091_109818090",
        "model": "DeepSEA/predict",
        "feature": "8988T_DNase_None",
        "score": 0.13724151253700256,
        "normalized_score": ""
      },
      {
        "name": "[known_CEBP_binding_increase]GtoT__chr1_109817091_109818090",
        "model": "DeepSEA/predict",
        "feature": "AoSMC_DNase_None",
        "score": 0.3942023515701294,
        "normalized_score": ""
      },
      {
        "name": "[known_CEBP_binding_increase]GtoT__chr1_109817091_109818090",
        "model": "DeepSEA/predict",
        "feature": "Chorion_DNase_None",
        "score": 0.42923635244369507,
        "normalized_score": ""
      },
      {
        "name": "[known_CEBP_binding_increase]GtoT__chr1_109817091_109818090",
        "model": "DeepSEA/predict",
        "feature": "CLL_DNase_None",
        "score": 0.2091972529888153,
        "normalized_score": ""
      },
      {
        "name": "[known_CEBP_binding_increase]GtoT__chr1_109817091_109818090",
        "model": "DeepSEA/predict",
        "feature": "Fibrobl_DNase_None",
        "score": 0.33895522356033325,
        "normalized_score": ""
      }
    ]
  };

  return (
    <MDBDataTable striped hover entries={100} data={data}/>
  )

Best,

Jakub


Avsec pro answered 6 months ago

Thanks for the answer. I still have the same problem with pagination size in version 4.8.2. See the code and the screenshot below:

Screenshot

<MDBDataTable striped hover entries={100} data={data}/>

I can share the data if necessary.


Jakub Mandra staff premium answered 6 months ago

Hi,

This problem was addressed in v.4.8.6 release (the newest one is 4.11.1).

Please update your mdbreact package. You can just run npm install and the newest version should be installed, or if you need the specific version -> add #version_number at the end of the mdbreact repository link.

Best,

Jakub


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.8.2
  • Device: Desktop
  • Browser: Google Chrome
  • OS: macOS Mojave
  • Provided sample code: No
  • Provided link: No