MDBReact 4.22.0+ datatables broke

Hi @Donzen,

I did make a similar data table like yours and everything works correctly for me. Can you make a snippet for version 4.20.0 your datatable? I will try to help you.

It is my snippet:

import React from "react";
import {
  MDBDataTable,
  MDBContainer,
  MDBNavLink,
  MDBIcon
} from "mdbreact";

const DatatablePage = () => {
  function testClickEvent(param) {
    console.log(param);
  }

  const data = () => ({
    columns: [
      {
        label: "Name",
        field: "name",
        width: 150,
        attributes: {
          "aria-controls": "DataTable",
          "aria-label": "Name"
        }
      },
      {
        label: "Position",
        field: "position",
        width: 270
      },
      {
        label: "Office",
        field: "office",
        width: 200
      },
      {
        label: "Age",
        field: "age",
        sort: "asc",
        width: 100
      },
      {
        label: "Start date",
        field: "date",
        sort: "disabled",
        width: 150
      },
      {
        label: "Salary",
        field: "salary",
        sort: "disabled",
        width: 100
      }
    ],
    rows: [
      {
        name: "Tiger Nixon",
        position: "System Architect",
        office: "Edinburgh",
        age: "61",
        date: "2011/04/25",
        salary: "$320",
        clickEvent: () => testClickEvent(1)
      },
      {
        name: "Garrett Winters",
        position: "Accountant",
        office: "Tokyo",
        age: "63",
        date: "2011/07/25",
        salary: "$170"
      },
      {
        name: "Ashton Cox",
        position: "Junior Technical Author",
        office: "San Francisco",
        age: "66",
        date: "2009/01/12",
        salary: "$86"
      },
      {
        name: "Cedric Kelly",
        position: "Senior Javascript Developer",
        office: "Edinburgh",
        age: "22",
        date: "2012/03/29",
        salary: "$433"
      },
      {
        name: "Airi Satou",
        position: "Accountant",
        office: "Tokyo",
        age: "33",
        date: "2008/11/28",
        salary: "$162"
      },
      {
        name: "Brielle Williamson",
        position: "Integration Specialist",
        office: "New York",
        age: "61",
        date: "2012/12/02",
        salary: "$372"
      },
      {
        name: "Herrod Chandler",
        position: "Sales Assistant",
        office: "San Francisco",
        age: "59",
        date: "2012/08/06",
        salary: "$137"
      },
      {
        name: "Rhona Davidson",
        position: "Integration Specialist",
        office: "Tokyo",
        age: "55",
        date: "2010/10/14",
        salary: "$327"
      }
    ]
  });

  const componentData = {
    columns: [
      {
        label: "ID",
        sort: "disabled",
        field: "component"
      },
      ...data().columns
    ],
    rows: [
      ...data().rows.map((row, order) => ({
        ...row,
        component: (
          <MDBNavLink
            to={
              "/page/" +
              window.location.pathname.split("/")[2] +
              "/" +
              row.details
            }
            className="detailsLink"
          >
            <MDBIcon icon="search-plus" />
          </MDBNavLink>
        )
      }))
    ]
  };

  return (
    <MDBContainer className="mt-3">
      <MDBDataTable
        theadTextWhite={true}
        theadColor="blue"
        tbodyColor="white"
        small={true}
        responsiveMd={true}
        fixed={true}
        striped
        bordered
        hover
        entriesOptions={[5, 20, 25]}
        entries={5}
        pagesAmount={4}
        data={componentData}
      />
    </MDBContainer>
  );
};

export default DatatablePage;

I think the issue is from your object:

Influencer: "string",
Stories: null,
Posts: null,
Likes: 0,
Comments: 0,
Details: "string"

can you change it for a name from the field?

for this:

influencer: "string",
stories: null,
posts: null,
likes: 0,
comments: 0,
details: "string"

Earlier, your table worked without a problem because it was caused by a bug. It was not possible to change the order of the columns in the table, and now it is fixed.

Best regards, Konrad.