IgrGrid pinning is not working correctly when pinned is bound

[agoldenbaum]

Steps to Reproduce:

1. Run the attached sample project.
2. Try to pin some of the columns (open options menu and click the pin icon)

Result:

The column appears to pin and then unpin immediately after. This does not happen if the body templates are not applied. It also appears that trying to pin the column again after it initially fails, the pinning then works.

react-grid-bugs.zip

[damyanpetev]

Yeah, what I'm observing is pretty normal behavior TBH, that's related to this:

<IgrColumn 
  pinned={attribute.pinned}
  // ...

The presence of the template only triggers a check that'd cause React to re-run/render, but the same effect can be achieved with anything else that causes React re-runs, pretty much as simple as:

const [dummyState, setDummyState] = useState<boolean>(false);
//...
<span>state is: {`${dummyState}`}</span>
<button onClick={() => setDummyState(!dummyState)}>toggle state</button>

will 'unpin' pinned columns when clicked as well :)
But really, what's happening is once is set pinned={attribute.pinned} that's state controlled (much like you'd do with controlled input value) and each re-render will set the state value which the component should reflect. This is quite common for React and I think we did have an internal discussion about it and actively chose leave in place.
So if there's an user interaction for that it should be reflected back in state, e.g. like:

const [pinned, setPinned] = useState<boolean>(true);
//...
  <IgrColumn
    field="id"
    dataType="number"
    pinned={pinned}
    onPinnedChange={(e) => setPinned(e.detail)}
  ></IgrColumn>

In this case with the loop, slightly more involved handler to account for key and follow immutability:

const [columns, setColumns] = useState(attributes);

function handlePinnedChange(name: string, pinned: boolean) {
  const nextColumns = columns.map((c, _i) => {
    if (c.name === name) {
      c.pinned = pinned;
    }
    return c;
  });
  setColumns(nextColumns);
}

// ...

{columns.map((attribute) => {
  return (
    <IgrColumn
      key={attribute.name}
      field={attribute.name}              
      pinned={attribute.pinned}
      onPinnedChange={(e) => handlePinnedChange(attribute.name, e.detail)}
     // ...
    />
  );
})}

Note the repeat on the state variable instead now.