Show / Hide column of React Table

rashesh patel commented 6 years ago

Thank you Aliaksandr, It's working... :)

Aliaksandr Andrasiuk staff commented 6 years ago

Glad I could help :)

Happy coding ;)

rashesh patel commented 6 years ago

Hi Aliaksandr, It's Working successfully but When I have used it for particular 1 .css file of table it applied for all different .css file of tables. What is the solution for that?

Aliaksandr Andrasiuk staff commented 6 years ago

Hi,

The easiest way to achieve that behavior will be to add a specific id or class to the table which you want to change and select the table by id or class. So changes will be applied only on DataTable which has that id or class.

Unfortunately, there is no possibility to achieve that in our DataTable component by adding a className property.

But you can use the code below:

.dataTables_wrapper:nth-child(1) .table thead tr th:nth-child(1),
.dataTables_wrapper:nth-child(1) .table tbody tr td:nth-child(1) {
  display: none;
}

In the code above the first table will be chosen. You can change numbers in :nth-child(1) so the relevant table(depends on the position in DOM) will be chosen.

We will add the possibility to add property className to our 'to do' list and make it possible in the near future.

Best regards.

Aliaksandr Andrasiuk staff commented 6 years ago

Hi,

In case of using that type of table, you should delete .dataTable_wrapper selector from your code. Try to use this code:

.table thead tr th:nth-child(1),
.table tbody tr td:nth-child(1) {
  display: none;
}

If it doesn't help, check your tbody styles. Seems like it doesn't use the full available width.

Best regards.

Aliaksandr Andrasiuk staff commented 6 years ago

Hi,

Try to change width value in state -> data -> columns -> width.

For example, change 50 to 250 and check if it works.

Property autoWidth will 'automatically adjust columns width to the content' so be sure you don't use it.

Here is the code i've tested and it works good for me:

import React from "react";
import { MDBDataTable } from "mdbreact";

const DatatablePage = () => {
  const data = {
    columns: [
      {
        label: "",
        field: "",
        sort: "asc",
        width: 50
      },
      {
        label: "Products_id",
        field: "Products_id",
        sort: "asc",
        width: 50
      },
      {
        label: "Product Description",
        field: "Product",
        sort: "asc",
        width: 100
      },
      {
        label: "Last_Edited User id",
        field: "Last_Edited_User_id",
        sort: "asc",
        width: 75
      },
      {
        label: "Brands & Units",
        field: "View_Brands",
        sort: "asc",
        width: 300
      }
    ],
    rows: []
  };

  return (
    <MDBDataTable
      responsive
      btn
      fixed
      striped
      bordered
      scrollY
      entries={5}
      maxHeight="50vh"
      hover
      data={data}
    />
  );
};

export default DatatablePage;

Best regards.

Aliaksandr Andrasiuk staff commented 6 years ago

Hi,

Can you share me the link to the Github(or another) repo of this project? I should look through your code structure.

Aliaksandr Andrasiuk staff commented 6 years ago

Hi,

Here is my username on github:

AAndrasiuk

rashesh patel commented 6 years ago

Hi Aliaksandr, I have invited you in GitHub.

Aliaksandr Andrasiuk staff commented 6 years ago

I accepted your invite. I will check your code and will inform you after I find the problem or in case of questions.

Best regards.

rashesh patel commented 6 years ago

Ok.. Thank you..

rashesh patel commented 6 years ago

Please revert back with the solution.

Aliaksandr Andrasiuk staff commented 6 years ago

Hi,

What about 1) and 2)? Did it help you?

3) Did wrapping a table into div help you with preventing effect to all the tables?

Show me the render method where you render Datatable component(also will be good if you tell me in what project file do you render it), I should check the props which you transfer and what components wraps your Datatable component.

rashesh patel commented 6 years ago

Hi Aliaksandr, 1) Nothing changed (Same Result).

2) Yes, only using responsive all column are fixed but width of all columns are set with default size ,because in that if I am trying to change width of one particular column there is no effect in the data table (I need more width size in some columns ), Actually in 2) Question My main concern is by using scrollX ,scrollY and responsive if I change width of any column why it affect to the others?

3) In GiHub React-Project/client/src/components/products.js Full code is in products.js file and it's .css file is products.css

Aliaksandr Andrasiuk staff commented 6 years ago

Hi, Rashesh.

I analyzed the structure of rendered Datatable in DOM and realized that I gave you the not completely correct css code as an example. Datatable renders in DOM with <colgroup> tag. It should be hidden too. So try to use :

.wrapper .table thead tr th:nth-child(1),
.wrapper .table colgroup:nth-child(1),
.wrapper .table tbody tr td:nth-child(1) {
  display: none;
}

Example of return value in render method:

<div className="wrapper">
      <MDBDataTable
        responsive
        btn
        fixed
        striped
        bordered
        scrollY
        scrollX
        entries={5}
        maxHeight="50vh"
        hover
        data={data}
      />
    </div>

As you can see I added scrollX property for available scrolling in case of small resolution and it should resolve your problem.

Also, I used a width property in data -> columns:

columns: [
   {
      label: "Id",
      field: "id",
      sort: "asc",
      width: 60
    }...

And it works well for me.

I hope it will help you.

Best regards.

Aliaksandr Andrasiuk staff commented 6 years ago

Hi,

1) It's again my fault. I forgot to add col on colgroup selector. So the whole colgroup was hidden and width propery didn't work... The code below should work well :

.wrapper .table thead tr th:nth-child(1),
.wrapper .table colgroup col:nth-child(1),
.wrapper .table tbody tr td:nth-child(1) {
      display: none;
}

2) Show me the code of <MDBCardHeader> component - how do you render it(especially className property) and css you applied to this. By default (if you copied this code from our example in the documentation it should look in another way -> probably you applied some css to this component).

3) Try this css code :

.wrapper .table thead tr th,
.wrapper .table tbody tr td {
      text-align: center;
}

Best regards.