Premium

React Grid Column Hiding

The Ignite UI for React has a built-in column hiding UI, which can be used through the React Grid toolbar to change the visible state of the columns. Developers have the flexibility to define the Column Hiding UI anywhere within the page as needed. The React Grid Column Hiding feature is especially useful when one wants to decrease the size of the grid and to eliminate the need for tabbing through redundant fields.

React Grid Column Hiding Example

Grid Setup

Let’s start by creating our IgrGrid and binding it to our data. We will also enable both filtering and sorting for the columns.

<IgrGrid autoGenerate={false} data={customersData} width="100%" height="560px" allowFiltering={true}>
    <IgrColumn field="ID" dataType="string" sortable={true} hidden={true}></IgrColumn>
    <IgrColumn field="ContactName" dataType="string" sortable={true} hidden={true}></IgrColumn>
    <IgrColumn field="ContactTitle" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="City" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="CompanyName" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Fax" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Address" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="PostalCode" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Country" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Phone" dataType="string" sortable={true}></IgrColumn>
</IgrGrid>

Toolbar’s Column Hiding UI

The built-in Column Hiding UI is placed inside an IgrDropdown in the IgrGrid‘s toolbar. We can show/hide the Column Hiding UI by using this exact dropdown.

For this purpose all we have to do is set both the IgrGridToolbarActions and the IgrGridToolbarHiding inside of the IgrGrid.

<IgrGrid>
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarHiding></IgrGridToolbarHiding>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrGrid>

The IgrGrid provides us with some useful properties when it comes to using the toolbar’s column hiding UI.

By using the Title and Prompt properties, we will set the title and filter prompt that are displayed inside the dropdown in the toolbar.

<IgrGrid>
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarHiding title="Column Hiding" prompt="Type here to search"></IgrGridToolbarHiding>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrGrid>

You can see the result of the code from above at the beginning of this article in the React Column Hiding Example section.

Disable hiding of a column

We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their disableHiding property to true.

<IgrGrid>
    <IgrColumn field="ContactName" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
    <IgrColumn field="ContactTitle" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
</IgrGrid>

Styling

The grid could be further customized by setting some of the available CSS variables. In order to achieve that, we will use a class that we will first assign to the grid:

<IgrGrid className="grid"></IgrGrid>

Then set the related CSS variables for the related components. We will apply the styles also only on the igx-column-actions, so the rest of the grid is unaffected:

.grid  igx-column-actions {
    /* Main Column Actions styles */
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;

    /* Checkbox styles */
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;

    /* Input styles */
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;

    /* Buttons styles */
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}

Demo

API References

Additional Resources

Our community is active and always welcoming to new ideas.