Topic: Column order is wrong in React DataTables and missing documentation
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:
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.
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
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:
<MDBDataTable
striped
hover
entries={100}
data={data}/>
I can share the data if necessary.
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.8.2
- Device: Desktop
- Browser: Google Chrome
- OS: macOS Mojave
- Provided sample code: No
- Provided link: No