javascriptreactjsreact-bootstrapmdbootstrap

MDBDataTable has heading both top and bottom and filters ui not working

I am using MDBDataTable and it has double heading both on top and bottom and i dont know how to get rid of it .

The code goes like.

The function return the data required for the datatable , the function is

const setProducts = () => {
    const data = {
      columns: [
        {
          label: "id",
          field: "id",
        },
        {
          label: "Name",
          field: "name",
          width: 150,
          attributes: {
            "aria-controls": "DataTable",
            "aria-label": "Name",
          },
        },
        {
          label: "price",
          field: "price",
          width: 270,
        },

        {
          label: "Category",
          field: "category",
          width: 150,
        },
        {
          label: "Description",
          field: "desc",
          sort: "disabled",
          width: 100,
        }
      ],
      rows: [],
    };
    product.forEach((p) => {
      data.rows.push({
        id: p.id,
        name: p.data.name,
        price: p.data.price,
        category: p.data.category,
        desc: p.data.Description,
      });
    });
    return data;
  };

And the returned ui is

return(
<MDBDataTable
      striped
      bordered
      searchLabel="Search Product"
      hover
      data={setProducts()}
    />
)

The output is

enter image description here

How to get rid of two column headers both at the top and bottom

EDIT

And i am not even getting arrows which is got during filtering the data when the mouse is hovered over the column header

What i have

enter image description here

What i need

enter image description here

Solution

  • noBottomColumns={true} (to hide the bottom row) theadTextWhite={true} ( text will become white, if the table background is white, header won't be visible)