React-table: Not able to disable filter for one column.

[hbulgarini]

Hello !

I'm trying to disable the filter by adding the property "filterable:false" on one specific column , but i'm afraid that this is not working and the filter is shown anyway for that column.
Here is my setup for the specific column:

        const columns = [
            {
                header: '',
                accessor:'contract_id',
                filterable:false,
                render: ({value}) => (<button className="btn " onClick={(e) => this.ShowContract(e, value)}>Ver</button>)
}

Any ideas why it is not working? Do i'm settting in the incorrect way or the option for disable filters is not working?

Thanks!

[antoniwan]

Hi,

I was able to disable filtering by adding it like this:

    const columns = [
      {
        Header: 'Name',
        accessor: 'name',
      },
      {
        Header: 'E-mail',
        accessor: 'email',
        sortable: false,
        filterable: false,
      },
      {
        Header: 'Country',
        accessor: 'country',
      }
    ];

[tannerlinsley]

This should work just fine. https://codepen.io/tannerlinsley/pen/XgZgeg?editors=0010

[hbulgarini]

Hello Guys, thanks for your reply but i'm still not able to disable the filter after adding the filterable:false property on the column definition:
Please check my code:

        const columns = [
            {
                header: 'Nombre',
                accessor:'name',
                filterable:false
            },
            {
                header: 'Tipo',
                accessor: 'type',
            },
            {
                header: 'Teléfono',
                accessor: 'tel',
            },
            {
               header: 'Email',
                accessor: 'email',
            }
        ]

And here is how i define my react-table

    <ReactTable className="-striped -highlight"
                            columns={columns}
                            defaultPageSize={10}
                            data={data} // should default to []

                            loading={this.state.loading}
                            showFilters={true}
                            previousText={'Anterior'}
                            nextText={'Siguiente'}
                            loadingText={'Cargando...'}
                            noDataText={'No existen registros'}
                            pageText={'Siguiente'}
                            ofText={'de'}
                            rowsText={'lineas'}
                            getTdProps={(state, rowInfo, column, instance) => {

                                var ret = {

                                    onClick: e => {
                                        if (this.state.CurrentID ==rowInfo.row.person_id ){
                                            this.setState({CurrentID: null,CurrentName: null});
                                            this.setState({message_class: "animated fadeOut",alertmessage:""})
                                            this.setState({Visible: "hidden"})
                                        }
                                        else{
                                            this.setState({CurrentID: rowInfo.row.person_id,CurrentName: rowInfo.row.name});
                                            this.setState({message_class: "animated fadeOut",alertmessage:""})
                                            this.setState({Visible: "visible"})
                                        }


                                    }
                                }
                                if(rowInfo && (this.state.CurrentID == rowInfo.row.person_id)){
                                    ret.style = { background: '#B0C4DE'}

                                }
                                return ret;
                            }}
                    />

Any comments?

[paigeflourin]

still can't disable mine as well.

[IsaackRasmussen]

you need to use sortable:

columns:[{
  sortable:false
}]

And the column is no longer clickable.

[sbimochan]

columns:[{
sortable:false
}]

This will disable sorting for all columns.

[sbimochan]

This should work just fine. https://codepen.io/tannerlinsley/pen/XgZgeg?editors=0010

Only works if it is parent column.

[lyhd]

still can't disable mine as well.

This works for me!

https://github.com/tannerlinsley/react-table/issues/336#issuecomment-309575199

[mmaya]

On version 7:

{ Header: 'First Name', accessor: 'firstName', disableFilters: true, }

[amir3code]

On Version 7:

{
    Header: 'Some Thing',
    accessor: 'something',
    disableSortBy: true
}

In this case you disable sorting features on a column.
Source: https://github.com/tannerlinsley/react-table/blob/master/docs/api.md#column-options-1

[jaekunchoi]

This doesn't work on 7.0.4 was someone able to get it working?

[sbimochan]

This doesn't work on 7.0.4 was someone able to get it working?

Everything works on 7 but is tricky.

[AndrewAi]

Why is it tricky? It's just a simple thing. I'm also having difficulty hiding columns by default whose value are empty, which also should be very simple but having difficulty getting it done. Any help here would be appreciated.

const columns = React.useMemo(
    () => [
      {
        Header: "Disclaimer Form Records",
        columns: [
{
            Header: "Price",
            accessor: "totalGroupPrice",
            disableFilters: true,
            disableSortBy: true
            // isVisible: !data[0].totalGroupPrice
          },
}

"react-table": "^7.0.0-rc.16",

[Matar91]

disableSortBy: true

Thanks this worked for me disableSortBy: true

[Horroon]

disableSortBy: true
Thanks worked for me but one thing still remain two caret signs after text remains there