1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Multiple problems with MDBDataTableV5

kennovation free asked 3 years ago

I have a variety of problem with MDBDataTableV5 using a fairly simple configuration. Before I provide laborious details for a variety of issues, I thought that I should first ask if this is known to be stable or if there is a good example full test app for me to review before going into detail on my issues. Maybe it’s user error or a wrong version or something?

Here’s the summary of issues

  1. Column header labels do not align with column values. This is somewhat dependent on data size in each cell. I’ve tried various combinations of setting or not setting widths.
  2. The sort arrow on the first column is cutoff at the left margin.
  3. It seems that the order of the data in the rows objects must match the columns. This affects display and also export to CSV.
  4. If I enable checkboxes, then I get all sorts of strange behavior when I try to update data (e.g. losing the checkboxes). I’ve tried adding checked and checkbox fields, but can’t get this to work properly. An example would be most helpful here.
  5. When checkboxes are enabled, export to CSV gets two additional fields. These are unlabeled but correspond to checked and checkbox.The checked value is fine since it’s a boolean, but the checkbox is an object. Why isn’t that suppressed?
  6. Following the doc and including the "checked" property throws an error in debugger. I can clean this up with checkbox='true'.

I can dive into each of these, but as you can see, there is a constellation of issues so I wanted to look at the big picture first.

Resources (screenshots, code snippets etc.) Example table showing some of the issues

Sample code

      /********** 
   * TODO Checkboxes are not working well when I use dynamic data. Relates to providing checkbox and/or checked fields I think.
   * These properties were removed from MDBDataTableV5 to remove checkboxes until this is fixed
   * 
          checkbox='true'
          multipleCheckboxes
          proCheckboxes
          filledCheckboxes
          headCheckboxID='id41'
          bodyCheckboxID='checkboxes41'

          getValueCheckboxes={(e) => {
            updateCheckedState(e);
          }}
          getValueAllCheckBoxes={(e) => {
            updateCheckedState(e);
          }}
  ***********/
  return (
    <MDBContainer>
      <MDBRow center className="mt-5 pt-5">
        <MDBCol md="12">
        <MDBDataTableV5
          data={datatable}
          order={['userId', 'asc']}
          hover
          proSelect
          materialSearch
          searchTop
          searchBottom={false}
          paging={false}
          small
          scrollY
          maxHeight='60vh'
          exportToCSV
        />
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );

Piotr Glejzer staff commented 3 years ago

Ok, I understand your problems, about checkboxes I can't help now because there are bugs inside a code and we have to fix this in our way. I added your list to our todo list, do you have more problems with that?

kennovation free commented 3 years ago

Okay. At least I know now that it's not me (though that would have been easier to fix).

As for non-checkbox problems, items 1, 2, and 3 in my list above are still open issues. Item 1, the headers not lining up is particularly annoying if you could prioritize answering that please.

Is there an ETA on the checkbox fixes? If too long, I'll need to use a different table component or create my own checkboxes. Please let me know so that I can decide what to do.

Thanks!

Piotr Glejzer staff commented 3 years ago

Thanks for your message. We don't have an ETA for that :(

kennovation free answered 3 years ago

Here's a stringify of the data object passed to the table. I've tried various combinations of widths - currently I ensure that there is a width for everything.

{
  "columns": [
    {
      "label": "User",
      "field": "userId",
      "width": 420,
      "sort": "asc"
    },
    {
      "label": "Name",
      "field": "constructName",
      "width": 400,
      "sort": ""
    },
    {
      "label": "Quantity",
      "field": "quantity",
      "width": 200,
      "sort": ""
    },
    {
      "label": "Tags",
      "field": "tags",
      "width": 200,
      "sort": ""
    },
    {
      "label": "Instructions",
      "field": "instructions",
      "width": 500,
      "sort": "disabled"
    },
    {
      "label": "ZE",
      "field": "element_ze",
      "width": 200,
      "sort": ""
    },
    {
      "label": "ZRES",
      "field": "element_zres",
      "width": 200,
      "sort": ""
    },
    {
      "label": "ZZ",
      "field": "element_zz",
      "width": 200,
      "sort": ""
    },
    {
      "label": "ORZ",
      "field": "element_orz",
      "width": 200,
      "sort": ""
    },
    {
      "label": "ORZ Seq",
      "field": "orzSequence",
      "width": 800,
      "sort": ""
    }
  ],
  "rows": [
    {
      "userId": "unittest",
      "constructName": "Three's company",
      "quantity": "0.1",
      "tags": "onetag",
      "instructions": "Make GC  > 45 and < 55",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "zz_standardv1",
      "element_orz": "orz_1",
      "orzSequence": "WIP-sequenze_goes_here"
    },
    {
      "userId": "unittest",
      "constructName": "or fourth",
      "quantity": "2",
      "tags": "",
      "instructions": "",
      "element_ze": "",
      "element_zres": "",
      "element_zz": "zz_unknown",
      "element_orz": "orz_4",
      "orzSequence": "This is s test"
    },
    {
      "userId": "unittest",
      "constructName": "All work and no play",
      "quantity": "7.5",
      "tags": "Shining",
      "instructions": "makes Jack a dull boy.",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "zz_standardv1",
      "element_orz": "orz_4",
      "orzSequence": "This is s test"
    },
    {
      "userId": "unittest",
      "constructName": "What's in a name?",
      "quantity": "5.0",
      "tags": "you're it",
      "instructions": "Please rush!",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "zz_unknown",
      "element_orz": "orz_4",
      "orzSequence": "This is s test"
    },
    {
      "userId": "ken@example.com",
      "constructName": "New ORZ",
      "quantity": "1",
      "tags": "",
      "instructions": "xx",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "zz_standardv1",
      "element_orz": "Init orz1",
      "orzSequence": "WIP-sequenze_goes_here"
    },
    {
      "userId": "unittest",
      "constructName": "Refresh test",
      "quantity": "10",
      "tags": "test",
      "instructions": "Did this appear automatically?",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "zz_standardv1",
      "element_orz": "orz_3",
      "orzSequence": "WIP-sequenze_goes_here"
    },
    {
      "userId": "ken@example.com",
      "constructName": "Demo Monday",
      "quantity": "10.0",
      "tags": "something clever",
      "instructions": "Make sure GC > 45 < 52",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "",
      "element_orz": "orz_create",
      "orzSequence": "WIP-sequenze_goes_here"
    },
    {
      "userId": "unittest",
      "constructName": "merge with api call",
      "quantity": "3",
      "tags": "",
      "instructions": "",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "zz_standardv1",
      "element_orz": "orz_1",
      "orzSequence": "WIP-sequenze_goes_here"
    },
    {
      "userId": "unittest",
      "constructName": "Run from cloud",
      "quantity": "14.0",
      "tags": "cloud",
      "instructions": "Deployed version",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "zz_standardv1",
      "element_orz": "orz_1",
      "orzSequence": "WIP-sequenze_goes_here"
    },
    {
      "userId": "ken@example.com",
      "constructName": "u3",
      "quantity": "3",
      "tags": "",
      "instructions": "",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "zz_unknown",
      "element_orz": "orz_1",
      "orzSequence": "WIP-sequenze_goes_here"
    },
    {
      "userId": "ken@example.com",
      "constructName": "Regrezzion test",
      "quantity": "10",
      "tags": "notag",
      "instructions": "Check the DB",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "zz_unknown",
      "element_orz": "Sample ORZ 4",
      "orzSequence": "WIP-sequenze_goes_here"
    },
    {
      "userId": "unittest",
      "constructName": "Bob the builder",
      "quantity": "5.0",
      "tags": "lumber",
      "instructions": "Sunday night update 1",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "zz_standardv1",
      "element_orz": "orz_4",
      "orzSequence": "This is s test"
    },
    {
      "userId": "unittest",
      "constructName": "test again",
      "quantity": "3",
      "tags": "",
      "instructions": "",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "",
      "element_orz": "",
      "orzSequence": "WIP-sequenze_goes_here"
    },
    {
      "userId": "unittest",
      "constructName": "Thursday evening test",
      "quantity": "10.0",
      "tags": "onetag",
      "instructions": "Nothing to see here.",
      "element_ze": "ze_standardv1",
      "element_zres": "zres_standardv1",
      "element_zz": "zz_none",
      "element_orz": "orz_create",
      "orzSequence": "WIP-sequenze_goes_here"
    }
  ]
}

Piotr Glejzer staff commented 3 years ago

thanks for the code, I will check it

kennovation free answered 3 years ago

Can you please respond to the items 1, 2, and 3 from the list?

Piotr Glejzer staff commented 3 years ago

Can you show me your data object what you are using in this component? The widths of columns and arrows are a probable problem with CSS code, if you show me data I will check it.
Write
Create snippet
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 React
  • MDB Version: 5.0.1
  • Device: Mac
  • Browser: Chrome
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No
Tags
datatables mdbdatatablev5
About author
kennovation
96Support score
7Questions 5Answers 0Snippets