React-bootstrap-table2: Programmatically filter hidden columns

[paulalcabasa]

Is it possible to filter hidden columns?

[AllenFang]

@paulalcabasa we don't support this feature but you can implement it by yourself, just control the colums props on BootstrapTable thanks

[mkwenzel]

Hi @paulalcabasa were you able to figure out how to make this work? I'd like to do the same thing in my code!

[mkwenzel]

EDIT: This does not work as well as I had thought--the programmatic filter remains BUT the column header CSS seems to over-ride the filter CSS and essentially forces the table header height to allow for the "invisible" table sort element. This is visually undesirable, and the added white space is a live area (sorts the table columns if you click in it). I'll keep working to figure out how to fix the CSS on it.

Update for anyone else who might be looking how to do this:

1. Set CSS property "visibility" to "hidden" on the following 3 styles: column, column header, filter.
2. Set style height for filter to 0px
3. Set style width for column to 0

Works like a charm! See code below for example (places to set CSS are marked with double *).

Link for more info about CSS visibility

{
    dataField: 'hideme',
    text: 'HideMe',
    headerStyle: (column, colIndex) => {
        **return { width: 0 , 'visibility': 'hidden'}**
    },
    filter: multiSelectFilter({
        options: selectHideMeOptions,
        defaultValue: this.state.columnFilter7,
            getFilter: (filter) => {
                this.setState.columnFilter7 = filter
            },
            placeholder: 'Select',
            **style: {'visibility': 'hidden','height':'20px'}**
                }),
    **style: {'visibility': 'hidden'}**
}

[Amritpd]

Out of the box support for this would be very helpful!

[ZippoLag]

Thanks a lot @mkwenzel !

However, I ended up replacing all your styles for simply display: 'none', since I couldn't get bot the header and each cell to be _really_ hidden.

[ghost]

EDIT: This does not work as well as I had thought--the programmatic filter remains BUT the column header CSS seems to over-ride the filter CSS and essentially forces the table header height to allow for the "invisible" table sort element. This is visually undesirable, and the added white space is a live area (sorts the table columns if you click in it). I'll keep working to figure out how to fix the CSS on it.

Update for anyone else who might be looking how to do this:

1. Set CSS property "visibility" to "hidden" on the following 3 styles: column, column header, filter.
2. Set style height for filter to 0px
3. Set style width for column to 0

Works like a charm! See code below for example (places to set CSS are marked with double *).

Link for more info about CSS visibility

{
  dataField: 'hideme',
  text: 'HideMe',
  headerStyle: (column, colIndex) => {
      **return { width: 0 , 'visibility': 'hidden'}**
  },
  filter: multiSelectFilter({
      options: selectHideMeOptions,
      defaultValue: this.state.columnFilter7,
          getFilter: (filter) => {
              this.setState.columnFilter7 = filter
          },
          placeholder: 'Select',
          **style: {'visibility': 'hidden','height':'20px'}**
              }),
  **style: {'visibility': 'hidden'}**
}

Yes, If you want to display absolutely nothing, you need to set style and headerStyle options from {'visibility': 'hidden'} to {'display': 'none'}