Devextreme-reactive: [Feature Request] Ability to hide a column filter (in addition to just disabling the filter)

Created on 10 Apr 2018 · 3Comments · Source: DevExpress/devextreme-reactive

Hi,

I have a feature request - add ability to hide a column filter in addition to just disabling it.
According to this documentation, disabling a column filter is supported, but in my case, I want to go an extra step to hide a column filter, because in my project, I have a column called "Actions", and there are some action buttons, like showing details, etc, in the cells of that column. Even if I can disable the filtering for that column, it would be really nice that I can just hide it, rather than showing a disabled filter. Visually, hiding the disabled filter in my case will be much better. So, if possible, an extra prop in FilteringState.ColumnExtension interface, like filteringVisible: boolean;, would be nice.

devextreme-reactive: 1.1.1
react: 16.2.0
browser: Chrome/Edge
material-ui: yes

Grid question

Source

franklixuefei

👍2

Most helpful comment

Hi,

Thank you for sharing your idea! Currently, you can implement the described functionality by using a custom template for a filter cell.

const Cell = (props) => {
  if (props.column.name === 'name') {
    return <TableFilterRow.Cell {...props}>
    &nbsp;
    </TableFilterRow.Cell> 
  }
  return (<TableFilterRow.Cell {...props} />);
};
<Grid>
  <TableFilterRow cellComponent={Cell} />
</Grid>

This demo shows it in action.

Moreover, I'd point one more solution. It's based on using the DataTypeProvider plugin. It can be more convenient in your case. Please refer to this sample to see how this approach works.

SergeyAlexeev on 11 Apr 2018

👍3 🎉1

All 3 comments

Hi,

Thank you for sharing your idea! Currently, you can implement the described functionality by using a custom template for a filter cell.

const Cell = (props) => {
  if (props.column.name === 'name') {
    return <TableFilterRow.Cell {...props}>
    &nbsp;
    </TableFilterRow.Cell> 
  }
  return (<TableFilterRow.Cell {...props} />);
};
<Grid>
  <TableFilterRow cellComponent={Cell} />
</Grid>

This demo shows it in action.

Moreover, I'd point one more solution. It's based on using the DataTypeProvider plugin. It can be more convenient in your case. Please refer to this sample to see how this approach works.

SergeyAlexeev on 11 Apr 2018

👍3 🎉1

@SergeyAlexeev Thanks a lot for your decent solutions! Solved my problem!

franklixuefei on 11 Apr 2018

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.