table: Not able to disable filter for one column.

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!

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 24

Most upvoted comments

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

+84

antonio666917 on Jun 19, 2017

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

+83

amir3code on Nov 26, 2019

On version 7:

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

+77

mmaya on Nov 7, 2019

you need to use sortable:

columns:[{
  sortable:false
}]

And the column is no longer clickable.

IsaackRasmussen on Nov 20, 2018

disableSortBy: true

Thanks this worked for me disableSortBy: true

Matar91 on Sep 29, 2020

In the columns object, include the disableGlobalFilter property with a boolean value like…

 {
    Header: "First Name",
    accessor: "first_name",
    disableGlobalFilter: true, // disable global filter for this specific column
  }

My react-table version is 7.7.0

See the section Column Options at the link below

https://react-table.tanstack.com/docs/api/useGlobalFilter#table-options

wadoodhussaini on Dec 3, 2021

On v8:

const columns = [
    {
      header: 'E-mail',
      accessorKey: 'email',
      enableColumnFilter: false,
    }
]

jmaciaa on Sep 28, 2022

columns = [{ accessor: ‘actions’, Header: ‘Actions’, width: 250, disableSortBy: true, disableFilters: true, },…] disableFilters: true is not working for React Table 7.7.0 disableSortBy: true is working as expected.

WSINTRA on May 31, 2022

I dont understand why we mix disable filtering and disable sorting in this issue, topic was clearly about filtering…

I can confirm disableFilters: true works on 7.7.0

roman-la on Oct 20, 2021

disableFilters: true not working in v7.7

hrithiknaha on Apr 28, 2021

@Horroon You could use column.canSort to hide or show caret signs

Reference

sabbiu on Apr 28, 2021

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

Horroon on Nov 19, 2020

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",

AndrewAi on Jul 28, 2020

columns:[{ sortable:false }]

This will disable sorting for all columns.

sbimochan on Apr 4, 2019