Conditional Column Pinning

Illustrate implementing conditional pinning based on user input or specific conditions, using a toggle button to pin/unpin a column dynamically.

const [isPinned, setIsPinned] = React.useState(false);

Defines a state to track if a column is pinned or not. Initially, it is not pinned.

const togglePin = () => setIsPinned(!isPinned);

Function to toggle the pinning state of the column.

<button onClick={togglePin}>{isPinned ? 'Unpin Column' : 'Pin Column'}</button>

Render a button that when clicked, toggles the pin state of a column. The button's label changes based on the pin state.

const getColumnDefs = () => [
  { field: 'name', pinned: isPinned ? 'left' : null },
  { field: 'age' },
  { field: 'country' }
];

Function to define the column definitions. The 'name' column will be conditionally pinned to the left based on the isPinned state.