Mui-datatables: Columns display to false throwing console errors

[leonardolouie]

Warning: Failed prop type: Invalid prop columns[0] supplied to a.
in a (created by WithStyles(a))
in WithStyles(a) (created by Styled(WithStyles(a)))
in Styled(WithStyles(a)) (created by DataTable)
in div (created by DataTable)
in DataTable (created by Report)

Expected Behavior

When I'm trying to hide the first column the console must not throw any error.

Current Behavior

imagine this is the column that I passing on the data table as a prop

 const columns = [
    {
      name: 'user_id',
      options: {
        display: false
      }
    },
    {
      name: 'first_name',
      label:'First Name'
    },
  ];

the data table checking the first column which is the column[0] and throwing consoles error that
Failed prop type: Invalid prop columns[0] supplied to a

Steps to Reproduce (for bugs)

1. Import mui-datatable
   2.pass this columns as a prop

 const columns = [
    {
      name: 'user_id',
      options: {
        display: false
      }
    },
    {
      name: 'first_name',
      label:'First Name'
    },
  ];

const data = [
    {
       user_id: '12321313',
       first_name:'sample name'
    }
]

Your Environment

| Tech | Version |
|--------------|---------|
"@material-ui/core": "^4.10.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@material-ui/styles": "^4.10.0",
"mui-datatables": "^3.7.1",

[dbyun-doinglab]

Also running into this issue!

[tbarrettwilsdon]

Seeing the same issue, but not setting display: false to anything - the only place I even declare display as a param in column options is within filterOptions. It seems to have been introduced in datatables, not mui-datatables because it only appeared after a version bump of the underlying packages.

Edit - it appears to occur on any column with display declared at all, in my case not false. As best I can tell, besides the console errors functionality seems unimpacted.

[goldpot]

am seeing this issue too after upgrade to 3.7.1. Any ideas?

[wdh2100]

@leonardolouie

thank you for reporting.

When I look, the propTypes declaration is wrong.

Name | Type | Default
-- | -- | --
display | boolean or string | true

• AS-IS
  https://github.com/gregnb/mui-datatables/blob/fde3497a552040505f70c274466715fce1d7e8ab/src/MUIDataTable.js#L125

• TO-BE

 display: PropTypes.oneOf(['true', 'false', 'excluded', 'always', true, false]),

if you use a string, you can avoid waring.

There is no problem performing the operation, but I think it must be fixed.

I'll fix it soon.

[tbarrettwilsdon]

@wdh2100 - you nailed it, good catch! What's strange is that for my use case (display as a param for filterOptions), the proptypes actually look correct in accepting a function - https://github.com/gregnb/mui-datatables/blob/fde3497a552040505f70c274466715fce1d7e8ab/src/MUIDataTable.js#L139

It would appear the PR open wouldn't actually resolve it for me, but now I'm a bit perplexed as to why it's even throwing a warning.

[leonardolouie]

@leonardolouie

thank you for reporting.

When I look, the propTypes declaration is wrong.

Name Type Default
display boolean or string true

• AS-IS
  https://github.com/gregnb/mui-datatables/blob/fde3497a552040505f70c274466715fce1d7e8ab/src/MUIDataTable.js#L125
• TO-BE

 display: PropTypes.oneOf(['true', 'false', 'excluded', 'always', true, false]),

if you use a string, you can avoid waring.

There is no problem performing the operation, but I think it must be fixed.

I'll fix it soon.

Sorry for the late response, btw thanks cheers!

[leonardolouie]

options: {
display: 'false'
}

If the pr still didn't merged just do this folks and the console error will be rid off.

My console looks nice now!

Thanks, @wdh2100