React-table: show: false in column is still showing column

[agray5]

In Version 7:

Describe the bug
Setting show to false in the column appears to have no effect

To Reproduce
Steps to reproduce the behavior:

//In code
useTable({columns: [{accessor: "uid", Header: "uid", show: false}], data})

Result:
column uid is still visible.

Expected behavior
The column with show: false to not be visible

Codesandbox!
codesandbox

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser firefox
• Version 71.0

Additional context

[thisizkp]

Looking at the recently closed issues, I think show is deprecated and it's recommended to use the new initialState.hiddenColumns state.

https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md#usetable

[thisizkp]

but this doesn't seem to hide the header for that respective column; How do I do that? 🤔

[agray5]

@thisizkp Thanks for the info! In the codesandbox it seems to hide both the column and the header.
This is from the basic example, I just added the initalState.

[thisizkp]

@agray5 Great, that seems to be working fine then. I'm not sure what prevented the header from hiding in my case. Will check that out.

[kizu]

I just want to add that from the DX point of view, using hiddenColumns can be not perfect. I've tried using it, it works, but I would really like to see something like isVisible on a column working as a default value for the column visibility.

Basically, column state > hiddenColumns > columns table option, from the more prioritized to the less. Alongside canBeToggledHidden or something like that this would make it possible to make the state from the definition persistent (basically, canBeToggledHidden flag would mean “take the state on the column definition be it hidden/shown and discard the current state, the hiddenColumns and do not show the controls for the toggling”, similar to other similar plugins).

[bjaging]

@agray5 Great, that seems to be working fine then. I'm not sure what prevented the header from hiding in my case. Will check that out.

@thisizkp I had the same issue. I was accessing the headers/columns directly from the useTable hook since I don't have any header grouping. This seems to return all columns and is not taking visibility into account. I eventually changed my implementation so that I always go through the headerGroup first like so:
{headerGroups[0].headers.map(column => ( <MyColumnHeader {...column.getHeaderProps( column.getSortByToggleProps() )} > {column.render('Header')} </MyColumnHeader> ))}

[tannerlinsley]

column.isVisible will work on a column (though I believe it is undocumented) and I'm pretty sure it will override any state to hide or unhide the column as well.

[jackyq2015]

@tannerlinsley tried isVisible: false but still not working. version 7.0.0-rc.15
can someone please give an example? Thanks

[DaniloOliveira28]

I am experiencing the same problem. I am using 7.0.0-rc.15 and isVisible is not working.

[aaryn101]

@tannerlinsley Is column.show supposed to be handled by developers using useTable - or is useTable supposed to filter out those columns for us?

[mbeaudru]

If show is deprecated, maybe we should remove it from the Column options documentation ?

I'm willing to do it + document isVisible if it's the way it is intended to be 👍

[ggascoigne]

show is not so much deprecated as no longer there (there's no longer any code reference to it). Looking at the code, I think that the only way to adjust column visibility is to use the initialState.hiddenColumns option.

[aaryn101]

show is not so much deprecated as no longer there (there's no longer any code reference to it). Looking at the code, I think that the only way to adjust column visibility is to use the initialState.hiddenColumns option.

show is still present in the documentation and I can't imagine that initialState.hiddenColumns is truly the replacement, so it seems like this functionality was either forgotten about, left for later, or expected to be implemented by whatever component calls useTable.

[tannerlinsley]

The docs have been updated. Thanks for your help everyone!

[kuzdogan]

Maybe we should have kept this in the documentation indicating it's deprecated. Older resources still contain show field and I've spent some time trying to figure out why show was not working.

And was not able to find initialState.hiddenColumns as it's under Table documentation and can't be searched by 'visible', 'show' or 'hide` keywords.

[malsioufi]

isVisible, still not working, I have tried to update the simple table example.

When I tried to use console.log on the column where I set isVisible: false, I noticed that it was set to true, so I guess there is something that overriding the column's state.

Do I need to do both isVisible: false and the initialState.hiddenColumns ?

[at-webdev]

For typescript, both column.isVisible and column. show throws error as Property doesnt exsist on type Column, any possible fix for this?
I am using types doc from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table

[ggascoigne]

@malsioufi looking at the code, column.isVisible isn't an input parameter, it's a reflection of the calculated state based on examining the hiddenColumns.

@at-webdev column.isVisible is defined on UseTableColumnProps and is part of the ColumnInstance interface. Again, I suspect that you are trying to use it as an option on the initial columns, and it just doesn't work that way.

[at-webdev]

@ggascoigne Thanks! It works on JS environment but not on Typescript environment. I have set isVisible on column definition, accessed column.isVisible on the below sandbox.

https://codesandbox.io/s/relaxed-night-y5gcl?file=/src/App.js.

I am wondering why it isnt working same way on typescript environment?

[ggascoigne]

So this isn't about how the library works so much as how typescript works.

you added:

React.useEffect(() => {
    setHiddenColumns(
      columns.filter(column => !column.isVisible).map(column => column.accessor)
    );
  }, [setHiddenColumns, columns]);

You are relying on adding an attribute to Column that you then process before setting the hidden column list. You could have called it foo and had the same behavior.

You've effectively added a new attribute to the column object, and it's one that isn't in the definition so you get an error.

If you want to modify the attributes of the Column definition then you can add them to the definition in react-table-config.d.ts.

[OmarZeidan]

I think we still have an issue here.

Logically, when I set isVisible: false on my column, I would expect the API to respect my wishes, but when I check the allColumns data, I still see that its true by default!

I appreciate all the RAD effort from the team, but would love to see a more robust documentation and examples.

Love,

[ggascoigne]

Which btw is how column.show used to work, and it caused confusion around
how to dynamically change column visibility state. Columns as an
initialization mechanism are meant to be immutable, having show on column
as well as setHiddenColumns led people to think that there were two ways to
dynamically change column visibility, which led to a different set of bug
reports.

On Wed, Apr 22, 2020 at 2:33 AM Omar Zeidan [e-mail]
wrote:

I think we still have an issue here.

Logically, when I set isVisible: false on my column, I would expect the
API to respect my wishes, but when I check the allColumns data, I still
see that its true by default!

I appreciate all the RAD effort from the team, but would love to see a
more robust documentation and examples.

Love,

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/1804#issuecomment-617666867,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AACAVVBJPFCA6CKMIXYP2RLRN22XNANCNFSM4J6PHOBQ
.

[ggascoigne]

I guess a better question would be, can you point to where in the docs the
text suggests that it works the way you are suggesting, and then we can
update the docs to match the behavior.

On Wed, Apr 22, 2020 at 7:23 AM Guy Gascoigne-Piggford [e-mail]
wrote:

Which btw is how column.show used to work, and it caused confusion around
how to dynamically change column visibility state. Columns as an
initialization mechanism are meant to be immutable, having show on column
as well as setHiddenColumns led people to think that there were two ways to
dynamically change column visibility, which led to a different set of bug
reports.

On Wed, Apr 22, 2020 at 2:33 AM Omar Zeidan [e-mail]
wrote:

I think we still have an issue here.

Logically, when I set isVisible: false on my column, I would expect the
API to respect my wishes, but when I check the allColumns data, I still
see that its true by default!

I appreciate all the RAD effort from the team, but would love to see a
more robust documentation and examples.

Love,

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/1804#issuecomment-617666867,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AACAVVBJPFCA6CKMIXYP2RLRN22XNANCNFSM4J6PHOBQ
.

[at-webdev]

I attempted to update Column definition on react-table-config.d.ts as below,but couldnt get them to work.Any Leads appreciated on adding additional attributes to Column.

 interface ColumnVisibility {
   Header: any;
  isVisible?: Boolean;
 }
declare module "react-table" {
// other export interface

  export interface ColumnInterface<D extends object = {}>
    extends UseSortByColumnOptions<D> {},ColumnVisibility<D>{}

  export interface ColumnInstance<D extends object = {}>
    extends UseSortByColumnProps<D> {},ColumnVisibility<D>{}
}

[ggascoigne]

try:

declare module 'react-table' {

  export interface Column<D extends object = {}>
    extends UseFiltersColumnOptions<D>,
      UseGroupByColumnOptions<D>,
      UseResizeColumnsColumnOptions<D>,
      UseSortByColumnOptions<D> {
    isVisible?: boolean
  }
}

replace the specific extends hook interfaces with the ones that you are actually using.

ColumnInstance is used to help define the column and header values that are passed on later in the process, after they've been enhanced by running through the hooks etc. Column defines the input.

[at-webdev]

try:

declare module 'react-table' {

  export interface Column<D extends object = {}>
    extends UseFiltersColumnOptions<D>,
      UseGroupByColumnOptions<D>,
      UseResizeColumnsColumnOptions<D>,
      UseSortByColumnOptions<D> {
    isVisible?: boolean
  }
}

replace the specific extends hook interfaces with the ones that you are actually using.

ColumnInstance is used to help define the column and header values that are passed on later in the process, after they've been enhanced by running through the hooks etc. Column defines the input.

Thanks @ggascoigne. It works great!

[niravbhimani53]

@ggascoigne I have copied interface for Column (mentioned in your comment) in my file called react-table-config.d.ts.

declare module 'react-table' {

  export interface Column<D extends object = {}>
    extends UseFiltersColumnOptions<D>,
      UseGroupByColumnOptions<D>,
      UseResizeColumnsColumnOptions<D>,
      UseSortByColumnOptions<D> {
    isVisible?: boolean
  }
}

But typescript is complaining about

Duplicate indentifier 'Column'. ts(2300)
index.d.ts(91,13): 'Column' was declared here.

I copied the rest of the types from @types/react-table example file.

How can I fix this error?

[ggascoigne]

If you post a code pen I’ll take a look at it.

On Wed, Apr 29, 2020 at 8:11 PM Nirav Bhimani [e-mail]
wrote:

@ggascoigne https://github.com/ggascoigne I have copied interface for
Column (mentioned in your comment) in my file called
react-table-config.d.ts.

declare module 'react-table' {

export interface Column extends UseFiltersColumnOptions,
UseGroupByColumnOptions,
UseResizeColumnsColumnOptions,
UseSortByColumnOptions {
isVisible?: boolean
}
}

But typescript is complaining about

Duplicate indentifier 'Column'. ts(2300)
index.d.ts(91,13): 'Column' was declared here.

I copied the rest of the types from @types/react-table example file.

How can I fix this error?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/1804#issuecomment-621586414,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AACAVVD2PLUNN2KGTPUWFFLRPDT4ZANCNFSM4J6PHOBQ
.

[niravbhimani53]

If you post a code pen I’ll take a look at it.
…
On Wed, Apr 29, 2020 at 8:11 PM Nirav Bhimani @.*> wrote: @ggascoigne https://github.com/ggascoigne I have copied interface for Column (mentioned in your comment) in my file called react-table-config.d.ts. declare module 'react-table' { export interface Column, UseGroupByColumnOptions, UseResizeColumnsColumnOptions, UseSortByColumnOptions { isVisible?: boolean } } But typescript is complaining about Duplicate indentifier 'Column'. ts(2300) index.d.ts(91,13): 'Column' was declared here. I copied the rest of the types from @types/react-table example file. How can I fix this error? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1804 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACAVVD2PLUNN2KGTPUWFFLRPDT4ZANCNFSM4J6PHOBQ .

I created new sandbox using react + typescript + react-table + @types/react-table. Added new file for types - react-table-config.d.ts. Please check the line 67 on below link.

https://codesandbox.io/s/recursing-lovelace-fed53?file=/types/react-table-config.d.ts

[ggascoigne]

Ah, my mistake. This changed in the most recent version of the react-table types, you want to use ColumnInterface in this situation..

export interface ColumnInterface<D extends object = {}>
    extends UseFiltersColumnOptions<D>,
      UseGroupByColumnOptions<D>,
      UseResizeColumnsColumnOptions<D>,
      UseSortByColumnOptions<D> {
    isVisible?: boolean
  }
}

[ggascoigne]

I.e. we should both have read what the other messages in this thread said.

[jlei523]

Can show provide a code example of how to use initialState.hiddenColumns to toggle hide and show columns?

I've never used initialState before and the documentation is sparse on how to actually use it to hide and show columns.

[niravbhimani53]

Can show provide a code example of how to use initialState.hiddenColumns to toggle hide and show columns?

I've never used initialState before and the documentation is sparse on how to actually use it to hide and show columns.

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    // Get the state from the instance
    state: { pageIndex, pageSize, filters }
  } = useTable(
    {
      columns,
      data,
      defaultColumn,
      initialState: { pageIndex: 0, hiddenColumns: [ids] } // Array<ColumnId: String>
    },
    useFilters,
    useGlobalFilter,
    usePagination
  );

You can find documentation to read for all hooks here

[jlei523]

@niravbhimani53

Edit (SOLVED): I did not know that in order to change the hiddenColumns, you must call setHiddenColumns which is supplied by useTable. Problem solved.

Thanks, I was able to get it to work to hide the columns by default.

However, the table does not show the columns after I removed the column IDs from the array.

I'm setting the hiddenColumns array in a useReducer state and dispatching an action to remove the IDs inside hiddenColumns. When I console hiddenColumns inside where I call useTable, it shows that it as empty but the table still doesn't change to show the columns.

  const [state, dispatch] = useReducer(reducer, defaultState);
  const {
    hiddenColumns
  } = state;

Inside my reducer file:

//default state set to hide Balance and CreditLimit columns

const defaultState = {
  hiddenColumns: ["Balance", "CreditLimit"]
};


// reducer function
    case "TOGGLE_SHOW_BALANCES":
      return {
        ...state,
        hiddenColumns: []
      };

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    pageOptions,
    page,
    state: { pageIndex, pageSize },
    gotoPage,
    previousPage,
    nextPage,
    setPageSize,
    canPreviousPage,
    canNextPage,
    pageCount
  } = useTable(
    {
      columns,
      data,
      initialState: {
        sortBy: [
          {
            id: "TradeName",
            desc: false
          }
        ],
        hiddenColumns
      }
    },
    useSortBy,
    usePagination
  );

[changyeamoon]

Is there a way to hide the column but still allow filtering for that column?

[niravbhimani53]

@changyeamoon You can use option defaultCanFilter: true when you are defining columns for hidden column.
https://react-table-omega.vercel.app/docs/api/useFilters#column-options.

Please provide an example if it doesn't work. It's hard to give an accurate solution without looking at code

[changyeamoon]

@niravbhimani53 heres a quick sandbox:

https://codesandbox.io/s/bold-fog-26op0?file=/App.js (checkout line 183)

This is basically what i want to do, is there a more native way to approach this?

1. I'd like to be able to hide the column in the column level, rather than the useTable level that everyone else here is suggesting.
2. I'd like to retain Header so I can use it for the filter label ( because I could just do { Header: '', Cell: '' } )
3. I'd like to maybe just hide the entire column but still be able to filter against it

[niravbhimani53]

@changyeamoon

1. Columns that are not visible are still used for sorting, filtering, etc. (Copied from docs ). Your hidden will be used when filtering Unless you specifically pass property to disable the filter (defaultCanFilter : false).
2. Checkout line 198 where I passed prop called isVisible: false & set custom id="info". Then check useTable line 102
   It would be good if you give custom id for each column. (my suggestion)

useTable(
    {
      columns,
      data,
      // `hiddenColumns` accepts array of strings where you can pass id's of column
      // Custom function which looks for key named `isVisible`
      // And pass id of column with isVisible = false
      // All columns should have unique id otherwise column wont be hidden
      // function only deals with single level of header level
      // Run recursive loop to look for all hidden columns if you got multiple headers
      hiddenColumns: () => {
        const hiddenColumnIds = [];
        columns.foreach(col => {
          if (col.isVisible === false) hiddenColumnIds.push(col.id)
        });

        return hiddenColumnIds;
      }
    },
    useFilters, // useFilters!
    useGlobalFilter // useGlobalFilter!
  )

https://codesandbox.io/s/gallant-gagarin-82rjv?file=/App.js

Let me know if I missed anything or need more clarification.

[changyeamoon]

@niravbhimani53 I'm not sure if sandbox is failing, but I'm not seeing any different output between our sandboxes? The columns are still visible.

And i dont know about the doc, but i can verify locally if you pass the column id to hiddenColumns, it can not be used for filtering. even with an explicit canFilter: true prop.

It also looks like hiddenColumns lives in initialState and does not accept a function. It also doesnt work when i try locally. the only way to update it is through setHiddenColumns which is supplied by useTable. (seen from docs). Again I'm trying to see if we can do this natively in the column level, so the setHiddenColumns isnt my favorite option (and this will disable filtering) .

and I believe the id is auto generated by your accessor key which is usually what i would name it anyhow. If there's no accessor then your Header. All which _should_ be unique