[manager-components]: datagrid column visiblity

[aboungnaseng-ovhcloud]

Have you already checked if a similar item is present on manager-components?

• Yes, I have already checked the existing components/hooks/utils.

What do you expect from this request?

Component

Description

Add column visibility

Where do you expect to use this?

01/01/2025

Do you have mock-up?

yes

When do you expect this to be delivered?

01/01/2025

Additional Information

Design ticket: ECX-4571

Specifications

New Props for Datagrid,

Prop	Type	Default Value	Description
columnVisibility	[string]	[]	List of columns that will be displayed on the first load of datagrid
onColumnVisibilityChange	([string]) => void	null	Callback function that will be called when user updates the visibility of columns
enableHiding	boolean	false	Added in the DatagridColumn<T>. Indicates whether the column can be hidden.

Code sample to configure Datagrid for column visibility.

<Datagrid
     columns=[
         { id: 'name', cell: (row) => {row.name}},
         { id: 'dob', cell: (row) => {row.dob}, enableHiding: true},
         { id: 'address', cell: (row) => {row.address}, enableHiding: true},
         { id: 'isActive', cell: (row) => {row.isActive}, enableHiding: true},
      ]
      ...
      columnVisibility=['name', 'dob', 'address'],
      onColumnVisibilityChange= () => {
             // make call to API or localStorage.setItem to update the config
      }

Design/Behavior:

The column visibility action allows for the manipulation of column displays within the Datagrid component.

• If any one column has enableHiding: true, the Datagrid must display button as shown in the below image. The column visibility Button is identified by a "column" icon, the label "Columns", and the number of visible columns, excluding those that cannot be hidden.

• On click of the button, user must see the popover with all the columns + checkbox.
• Upon clicking the Button, a popover appears in close proximity, listing all column labels alongside Checkboxes. Checkboxes can be selected or deselected, corresponding to the visibility status of the columns.
  Selecting a column label will cause the respective column to be displayed on the Datagrid.
• Certain Checkboxes and labels may be disabled, preventing the user from altering the default visibility settings of specific columns.
• If columnVisibility is received, only those columns should be displayed when the datagrid is displayed for the first time. Otherwise, by default, all the columns in the columns prop are displayed.
• When user makes the change on the visible columns, callback function must be called with "Array of string", each string represents the column currently visible.

Inspiration: https://tanstack.com/table/latest/docs/framework/react/examples/column-visibility

PR: #15683

[qpavy]

We also need this for ip-revamp project

[feoche]

The column visibility action allows for the manipulation of column displays within the Datagrid component.
The column visibility Button is identified by a "column" icon, the label "Columns", and the number of visible columns, excluding those that cannot be hidden.
Upon clicking the Button, a popover appears in close proximity, listing all column labels alongside Checkboxes. Checkboxes can be selected or deselected, corresponding to the visibility status of the columns.
Selecting a column label will cause the respective column to be displayed on the Datagrid.
Certain Checkboxes and labels may be disabled, preventing the user from altering the default visibility settings of specific columns.

[feoche]

The column visibility action allows for the manipulation of column displays within the Datagrid component.
The column visibility Button is identified by a "column" icon, the label "Columns", and the number of visible columns, excluding those that cannot be hidden.
Upon clicking the Button, a popover appears in close proximity, listing all column labels alongside Checkboxes. Checkboxes can be selected or deselected, corresponding to the visibility status of the columns.
Selecting a column label will cause the respective column to be displayed on the Datagrid.
Certain Checkboxes and labels may be disabled, preventing the user from altering the default visibility settings of specific columns.