React-table: How to update state.hiddenColumn=[]?

[izzuddinraffar]

Hi, I have an external function to trigger state.hiddenColumn provided in react table v7 using useEffect. The table and hidden columns is not rerender after I pass new props hiddenColumn. How to update state.hiddenColumn array properly. I have read the documentation, but not any example real code include.

Piece of my code

component 1

export default function Project(props: any) {
  const [value, setValue] = React.useState<Array<string>>([]);

  const hide1 = () => {
    const hiddenColumn= ["status", "timeline"];
    setValue(hiddenColumn);
  };

  return (
    <div className="view-project-wrapper">
          <button onClick={hide1}>test 1</button>
          <Table  columns={columns}
          data={data}  hiddenColumns={value} />
    </div>
  );
}

component 2

function Table({ columns, data, hiddenColumns = [] }) {
  console.log("table");
  console.log(hiddenColumns);
  // Use the state and functions returned from useTable to build your UI
  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
    {
      columns,
      data,
      initialState: {
        hiddenColumns: hiddenColumns
      }
    },
    useFlexLayout,
    // useBlockLayout,
    useResizeColumns,
    useSticky
  );

  React.useEffect(() => {
    console.log("useEffect");
  });

  // Render the UI for your table
  return (.....rest)
}

[zebrahondje]

Have a look at this example: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-hiding

[izzuddinraffar]

Have a look at this example: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-hiding

I have look this example before I ask here. As i said, I have external function (customized function) to pass list of hiding columns props into react table. Before that I think column.show is working fine, but it's deprecated.

[zebrahondje]

Then have a look at this hook: https://github.com/tannerlinsley/react-table/blob/master/src/hooks/useColumnVisibility.js

As you can see there are a couple of functions passed into the instance with which you can control the column visibility.

[izzuddinraffar]

Then have a look at this hook: https://github.com/tannerlinsley/react-table/blob/master/src/hooks/useColumnVisibility.js

As you can see there are a couple of functions passed into the instance with which you can control the column visibility.

Thanks for reply, I don't know how to use columnvisibility. But, I have found the solution using setHiddenColumns()

let prevHiddenColumns = [];
function Table({ columns, data, hiddenColumns = [] }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    headerGroups,
    rows,
    prepareRow,
    state,
    setHiddenColumns
  } = useTable(
    {
      columns,
      data,
      initialState: {
        hiddenColumns: hiddenColumns
      }
    },
    useFlexLayout,
    // useBlockLayout,
    useResizeColumns,
    useSticky
  );

  React.useEffect(() => {
    if (JSON.stringify(prevHiddenColumns) != JSON.stringify(hiddenColumns)) {
      prevHiddenColumns = hiddenColumns;
      setHiddenColumns(hiddenColumns);
    }
  });

[zebrahondje]

Well that's one way, but it looks like you're trying to fit a React lifecycle method into a React effect hook. Using the following piece of code would achieve the same in the way it's meant to be used.

React.useEffect(() => {
  setHiddenColumns(hiddenColumns)
}, [hiddenColumns])

[izzuddinraffar]

Well that's one way, but it looks like you're trying to fit a React lifecycle method into a React effect hook. Using the following piece of code would achieve the same in the way it's meant to be used.

React.useEffect(() => {
  setHiddenColumns(hiddenColumns)
}, [hiddenColumns])

Wow..thanks @zebrahondje , that's clean and proper way..

[meghna1711]

@zebrahondje I am using the above code in my project, but it is not working.

[maximenathan]

@zebrahondje I am using the above code in my project, but it is not working.

@meghna1711 It's working fine on my project
Maybe you are not passing the correct updated list on the updateHiddenColumns. It should be a list of id. Try to log the hidden columns state like this example