[REACT] - Programmatically show/hide columns

[jasonlunsford]

Dear Support,

We would like to be able to programmatically (via the TaskBoard API) show / hide columns via our own controls. The idea being the user can configure which columns they want to see on the board. Can you please explain how to do this, or point me to the documentation with the answer? Optimally we could do this without forcing a complete Kanban re-render, so the the show / hide behavior is smooth.

Thank you!

[marcio]

Hey Jason,

You can use the following snippet

taskboard.columns.records[0].hidden = true

or if you know the id of the column, you can use it directly, like this (if you have a column with id = todo)

taskboard.columns.todo.hidden = true

[jasonlunsford]

Hi Marcio,

Can you please elaborate on this? Is taskboard a ref? I tried drilling into the ref I configured for the TaskBoard but there is no columns property. Imagine you were doing this from a handler EXTERNAL to the TaskBoard, how would you do this? What is the method to call?

[marcio]

Hey Jason,

If you're using React, you should set the ref like our examples

const taskBoard = useRef();

return (
    <>
        <BryntumTaskBoard
            ref={taskBoard}
            ...
        />
    </>
);

and from there, you can access taskBoard.current.instance, where you can use the same properties as the plain JS Taskboard.

[jasonlunsford]

Thank you Marcio,

That worked, basically. You definitely need to assign that ref to the TaskBoard, and once you have a hold of it here's how I was able to toggle "hidden":

  ...
  const boardRef: any = useRef(null);
  ...
  const onMenuChange = (payload) => {
    payload.forEach((item) => {
      const { id, isSelected } = item;

  boardRef.current.instance.columns[id].hidden = !isSelected;
});
  };

Thanks for your help!