Show / Hide column of React Table


Topic: Show / Hide column of React Table

rashesh patel pro asked 4 weeks ago

Hi, I am using data table of MDB React and I want to hide one or two column of the table, for that what should I do??


Aliaksandr Andrasiuk staff answered 4 weeks ago

Hi,

There is no possibility to hidden a column by setting property width: 0.

But you can achieve that behavior by using css. The code below will solve your problem:

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

The first line .dataTables_wrapper .table thead tr th:nth-child(1), selects the th with Name and the second line .dataTables_wrapper .table tbody tr td:nth-child(1) selects to the whole column with all the names and display:block means that selectors above will not be displayed.

You can create a separate .css file and paste this code there. Then you should import this .css file in your .js file, where your DataTable component is situated.

If your .css is situated in the same folder as your DataTable component import should look like this :

import './DataTable.css'

Best regards.


rashesh patel pro commented 3 weeks ago

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


Aliaksandr Andrasiuk staff commented 3 weeks ago

Glad I could help :)

Happy coding ;)


rashesh patel pro commented 3 weeks 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 3 weeks 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 answered 4 weeks ago

Hello,

It can be achieved by using css selectors:

.dataTables_wrapper .table tbody tr td:nth-child(column) {
 `display: none;
}

It's not the ideal solution but it's only for now.

Best regards.


rashesh patel pro answered 4 weeks ago

Hi, Sorry I didn't get what you mentioned for css, Here I am attaching images for example

Table-1 Table-code

From the above table I have to hide first column which is labeled 'Name', So what exactly do for that??


rashesh patel pro answered 2 weeks ago

Hi Aliaksandr,

Same problem has came after using

.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; }

also.

Even all Data Table columns are shrink... please find images before using and after using that code. 1) Before...

Before

2) After...

After


Aliaksandr Andrasiuk staff commented 2 weeks 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.


rashesh patel pro answered 2 weeks ago

Hi Aliaksandr,

1)Here is my data table header and body (which is in array),

table header

2) In render I have written

table render

3) Before using this code in .css

.table thead tr th:nth-child(1),

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

table width before

4) After using this code in .css

.table thead tr th:nth-child(1),

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

table width after

So now what I have to exactly do to fixed the width?????


Aliaksandr Andrasiuk staff commented 2 weeks 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.


rashesh patel pro answered a week ago

Hi Aliaksandr,

1) I have tried that but there are two scroll bar comes please refer image

datatable-1

2) If I scroll (no. 2) to the right side, obviously header position will not change because it has its own scroll (no. 1).

Because of that column of the table header and table body is not matched.

please refer image below

datatable-2

3) If I scroll (no. 1) to the extreme right the result is same

datatable-3

Previously it shows only 1 scroll which is (no. 2), and it works for both table header and table body which is perfect.

How to remove that table header scroll (no. 1)?


Aliaksandr Andrasiuk staff commented 7 days ago

Hi,

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


rashesh patel pro answered 6 days ago

Hi Aliaksandr,

Please provide me your user name or Email, So I can add you in My GitHub account collaborator list.


Aliaksandr Andrasiuk staff commented 5 days ago

Hi,

Here is my username on github:

AAndrasiuk


rashesh patel pro commented 5 days ago

Hi Aliaksandr, I have invited you in GitHub.


Aliaksandr Andrasiuk staff commented 5 days 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 pro commented 5 days ago

Ok.. Thank you..


Hi,

Realized this is a huge project and I need your help in coordination.

1) How to remove that table header scroll (no. 1)?

Try to add scrollX property to the table.

...

Then, please, try to render your table without

.table thead tr th:nth-child(1),

.table tbody tr td:nth-child(1) {

  display: none;

}

Attach the screenshot of the result.

Try to apply the code above and attach the screenshot.

Also, it would be great, if you will show me the data for rows from request in setStateData method.


rashesh patel pro answered 4 days ago

Hi Aliaksandr,

1)By using scrollX its working properly, but in table header table heading and button are over ride please refer image

updated table code

2) I have given all the columns some width,but If I change the width of a particular column then it also affect to other column means they automatically shrink or expand,so how to fixed that??
Even In first column of checkbox you can see in image it is not properly in the center, it is automatically shifted right or left while I am trying to change width of that column.

3) And please give me the solution of hide particular column of particular table, because as per your previously given solution it affects to all the tables not only one.

Thank You.


1) If I'm not mistaken, some time ago you asked on support how to make datatable's title situated in the center (can't find that support). And I advised to use css rules like this:

{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

If it true, you can use media query to change that css rules. Example :

@media only screen and (max-width: 768px){
    .card-header a{
        left: 70%;
    }
}

The rule above means, that styles will be applied only when max-width of the screen is 768px. You can change that value on what you want.

So your title will be positioned at a distance of 70% of the width of the relative element from the left side. Also, you can change the font-size of the title if it's too big.

2) Try to not use scrollY and scrollX properties. Instead, use only responsive. If it will not help, then show me the code of the Datatable properties.

3) You can render your Datatable component inside of, for example, div component with class. And then select your Datatable by selecting first the div's class. Example :

 render() {
     return (
        <div className="datatable_wrapper">
              <MDBDataTable striped responsive bordered hover data={data} />
        </div>
  );

Then change your css selectors:

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

Hope I could help.


rashesh patel pro answered 3 days ago

Hi Aliaksandr,

3)

a) Before Using

.datatable_wrapper .table thead tr th:nth-child(1),

.datatable_wrapper .table tbody tr td:nth-child(1)

{ display: none; } }

before

b)After using

.datatable_wrapper .table thead tr th:nth-child(1),

.datatable_wrapper .table tbody tr td:nth-child(1)

{ display: none; } }

All columns shrunk....

after


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.11.0
  • Device: LAPTOP
  • Browser: CHROME
  • OS: WINDOWS 10
  • Provided sample code: No
  • Provided link: No
Tags