Hide a column completely about mui-datatables HOT 21 CLOSED

hey @RaySheikh thanks for the feedback. Yes there is a way to hide it using the display property. An example of that usage:

const columns = [
      {
        name: "Name",
        options: {
          display: false,
        }
      },      
];

from mui-datatables.

For future reference, if someone needs to keep a column hidden in the table that isn't shown to the user in the table, not under view columns and not under filters, do the following (as example):

Note: column 'jsonObject' is hidden

<MUIDataTable
  title="My Data"
  columns={[{name:'ID', options: {display: false}},
            {name:'Name', options: {display: true}},
            {name:'jsonObject', options: {display: false, viewColumns: false, filter: false}}]}
  data={this.state.data.map(item => {
    return [
            item.id,
            item.name,
            item
          ]
  })}
  options={{
    filter: true,
    sort: true,
    onRowClick: handleRowClick,
  }}
/>

Note: the purpose of keeping such a hidden column, is that you can use this for storing info within the table that is not necessarily useful to the user, but useful for further functionalities such as when they click on row(s) and you need to use 'selectedRows'. Instead of using the "index" of selected rows to identify the entry in the actual list of objects, you can simply store the necessary info in the hidden column.

from mui-datatables.

I was looking to implement this as per my last comment, when I discovered the option already exists, it just is not documented.

You can achieve this by setting the viewColumns option on each individual column itself. Setting this to false will mean the column doesn't appear in the 'View columns list`.

I've raised a PR #609 to update the docs.

from mui-datatables.

Hey @gregnb thanks for replying. I am using the display: false property but when filtering the columns using the column filter button they still show up. Please see the screenshot below.

Thanks,

Ray

from mui-datatables.

Is there any way to include a column in the table, but set it to 'unchecked' by default in View Columns? I'm trying to conserve space on initial display but give the user the option to see more.

@OrionLayton - yes, setting the column property display: false will hide the column from the table initially, but still allow it to be selected from the View columns list.

from mui-datatables.

TL, DR;

In order to hide a column completely, do this:

 options: { 
    filter: false,
    display: false, 
    viewColumns: false,`
}

from mui-datatables.

Ok thanks @RaySheikh I'll reopen this ticket and fix the view columns issue

from mui-datatables.

Columns with display: 'false' are indeed initially hidden and 'unchecked' in the View Columns list, but their checkboxes do not respond to clicks, and the columns do not display upon clicking the checkbox. Columns that are initially visible do respond to checking/unchecking in View Columns.

I am running @material-ui/core and icons 4.2.x, newer than the 3.x required by mui-datatables, so I wonder if that might be the problem.

from mui-datatables.

Ok, I'll take a look into this bug tonight. That is in the 'view columns' but how about the filtering? is it hiding there properly?

from mui-datatables.

Yes, the Filter Table works perfectly fine.

from mui-datatables.

I'm not sure I understand the issue here. The way to hide a column completely is to not include it in the data you give to mui-datatables. Using the display option hides it on load, but allows the user to choose to see it if they would like. This seems to work exactly as I would expect.

from mui-datatables.

@RaySheikh After looking into this issue @tgBryanBailes is right. If I were to change ViewColumns to show a checkbox based off display being true/false then users will not be able to toggle on/off after load. I don't want to add another property because simply not providing the data is how you should solve this

from mui-datatables.

Sorry for the late reply. The only reason I asked for an option to completely turn off the column is because I wanted to hide a GUID in one of the columns for a callback or an onclick function. I did not want to give my user an option to show the ID/GUID.

Thanks,

Ray

from mui-datatables.

I'll also start by saying thank you for developing this grid. It is really nice!

A way to hide a column is almost the first thing I looked for. In my case it will be a mongoDB object id which the user should not be able to see but will be used for all click events as a unique identifier for the row. Is there a way to not include it in the data give to the grid and still determine what data in the database the row is associated with. I could see keeping a matching data structure with ID and sync via index, but that isn't a clean approach.

Thanks,
Karl

from mui-datatables.

This would be useful for our project as well. In our case, we use some columns for filtering only, but would not like them to be viewable by the end user at all.

Edited to add:
As a workaround, I hide the appropriate cells from the Show Columns fieldset using CSS:
fieldset div label:nth-child(3) { display: none; }
This is definitely hackish, and subject to break if the columns change, but solved the problem we were facing.

from mui-datatables.

Alongside the 'sort', 'filter', 'display' properties, perhaps there should be an 'allowToggle' property.

if allowToggle is true, then the column can be added/removed through the Show Column drop down.
if allowToggle is false, the column will not appear in this list for selection.
default could be true to preserve current behavior.

Besides the examples above, this could also be used to prevent the user from hiding key rows, without which the data wouldn't be clear.

@gregnb - if you think the above makes sense, I could try this out and raise a PR.

from mui-datatables.

Is there any way to include a column in the table, but set it to 'unchecked' by default in View Columns? I'm trying to conserve space on initial display but give the user the option to see more.

from mui-datatables.

It should work @OrionLayton. It could be your version. If you can post a simple example to a codesandbox, it would make it easier to see what is going on.

from mui-datatables.

I had this error when trying to set display to false:

The types of 'options.display' are incompatible between these types.
Type 'string' is not assignable to type '"false" | "true" | "excluded" | undefined'. TS2345

My code:

options: { display: 'false' }

The solution:

options: { display: 'false' as const, }

This also works 😆
options: { display: 'false' as 'false', }

Credit to @lassekl92 for debugging

from mui-datatables.

is there any way to completely hide the filter input column of checkbox/multiselect/etc? I'd like to use the checkbox with different functionality (ie onClick={() => {console.log(rowData.id)}, something I haven't found a way to do. I can do this with onRowClick, but the filter inputs do not respond to onRowClick, so I'd rather hide that column entirely.

Given I don't have access to that generated column to set display: false, is there another way to either add the same custom callback to every checkbox or to remove that column from view?

from mui-datatables.

@heymynameisdinaj : Not sure if I understood what you meant by 'filter input column'.... but is it that you want to remove the filter table by column values button (the three horizontal lines of different lengths) from the toolbar. Probably you meant something else.

from mui-datatables.