Mui-datatables: Hide a column completely

[RaySheikh]

Hi,

first of all I want to thank you for putting this project together.

Is there a way to hide a column completely from the view columns filter?
Currently If i use a column to store a key, the filter false option will hide it but it will still show up under view columns filter as unchecked.
Or if i use blank column to add a button, it still shows up under the view column as a checked column. Is there a way to completely hide the column in the view column filter?

Thanks,

Ray

[gregnb]

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,
        }
      },      
];

[RaySheikh]

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

[gregnb]

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?

[RaySheikh]

Yes, the Filter Table works perfectly fine.

[gregnb]

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

[tgBryanBailes]

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.

[gregnb]

@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

[RaySheikh]

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

[klequis]

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

[georgezee]

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.

[georgezee]

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.

[georgezee]

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.

[OrionLayton]

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.

[georgezee]

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.

[OrionLayton]

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.

[gabrielliwerant]

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.

[appukuttan-shailesh]

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.

[turbolego]

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

[heymynameisdinaj]

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?

[appukuttan-shailesh]

@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.