GridColumnState.hidden can't override GridColumnProps.hidden

[Jie]

Hi,

 

If GridColumnProps has { hidden: true} in it, then GridColumnState won't be able to override the `hidden` property anymore.

Please see this example:

https://codesandbox.io/p/sandbox/stoic-wildflower-wn4lzn?file=%2Fapp%2Fapp.tsx%3A11%2C10-11%2C25

Line 15, customerID column's hidden is set to true. Clicking the "Hide" button won't show/hide that column. But if change customerID's `hidden` value to `false`, or just remove that hidden property at line 15. The "Hide" button will work.

 

Thanks,

Jie

[Vessy]

Hello, Jie,

Thanks for the example and the detailed observation.

The behavior you see is expected. When a column definition (GridColumnProps) includes hidden: true (or false), that prop becomes the single source of truth for visibility of that column. The Grid will not override an explicit prop value with GridColumnState. In React terms: the column becomes “controlled by props,” so internal/state-driven toggling won’t take effect unless you also update the prop.

How to achieve toggle behavior (two valid approaches)
 You still achieve the target hidden-column toggle behavior by managing the visibility only via column state In order to 

• Remove hidden from the static column props.
• Initialise column state with that column hidden.
• Then toggle by updating your stored column state and feeding it back to the Grid.

For example:

const initialColumns = [ { field: 'customerID', title: 'Customer ID', hidden: true }, { field: 'contactName', title: 'Contact Name' } ];

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

const toggleCustomer = () => setColumns(cols => cols.map(c => c.field === 'customerID' ? { ...c, hidden: !c.hidden } : c ) );

<Grid columns={columns} // if using a Grid API that emits column changes: onColumnChange={e => setColumns(cols => cols.map(c => c.field === e.field ? { ...c, ...e } : c ) ) } /> <button onClick={toggleCustomer}>Toggle Customer ID</button>

For convenience, I have updated the provided sample with the suggested approach so you can examine it at your end:

• https://codesandbox.io/p/devbox/upbeat-flower-z2v2kr?workspaceId=ws_91bjjDLPMmV9sf1xJ8t3df 

I hope the provided information will be helpul for you but let me know if I can help you any further on this.

Regards,
Vessy
Progress Telerik

[Jie]

Hi Vessy,

We are trying to persist the GridColumnState. Based on your answer (if a field is set in GridColumnProps, then it can't be overridden by GridColumnState), we found a few inconsistencies:

- GridColumnState.hidden can override if GridColumnProps.hidden is set to false, .

- GridColumnState .title doesn't work, whether GridColumnProps.title is set or not.

- GridColumnState .width can always override GridColumnProps.width.

 

Thanks,

Jie

[Vessy]

Hi, Jie,

Thank you for the detailed follow-up and for sharing your observations.

In general, if you’d like to update or persist the Grid’s column settings, it’s best to manage everything through the column state only. Mixing GridColumnProps and GridColumnState isn’t something we’ve tested very deeply, so the inconsistencies you’re seeing make sense. From a React standpoint, , having one “source of truth” (in this case, the column state) helps keep the behavior predictable and easier to maintain.

Could you please confirm whether your desired scenario would work if everything were handled purely through the column state?
That will help us better understand if there’s a gap we need to address or if your case requires both props and state together.

We’ll also review this on our side and check whether it’s something we should log for further improvement.

[Jie]

The state's title field doesn't work. Please see the updated example:

https://codesandbox.io/p/sandbox/stoic-wildflower-wn4lzn

 

[Vessy]

Hey, Jie,

This is expected, as the columns are defined through the columns object, but not the state. Updating the sample as follows will allow you to update successfully all props of the columns through their state:

• https://codesandbox.io/p/sandbox/staging-brook-wy6nyf?file=%2Fapp%2Fapp.tsx%3A1%2C1-67%2C1 

      <Grid
        style={{ height: "700px" }}
        data={orders}
        columnsState={columnsState}
        onColumnsStateChange={onColumnsStateChange}
      >
        {columnsState.map((c) => {
          return <GridColumn {...c} key={c.field} />;
        })}
        <GridToolbar>
          <Button onClick={onHide}>Hide</Button>
        </GridToolbar>
      </Grid>