Fixed Grid Columns on Left and Right Side

IntegralUI Grid component is a native web component or custom html element that allows you to fix columns on either the left or right side of the grid. In this article, you will learn how to change the side at which grid column is fixed during run-time, using a dropdown menu from each column header.

The sample code below shows how to freeze columns on left or right side in the grid is available in each JavaScript framework: Angular, React and Vue.

In this demo, there is a grid where each column header has a dropdown button. When clicked, a dropdown menu will appear with options stating the side at which the column is fixed. There are three options: None, Left and Right that fixes the column at corresponding grid side. Only non-fixed columns are scrollable.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Fix Columns on Left and/or Right Side in Grid Component

To fix a column at specific grid side is simple. Each column object has a field named 'fixed', which can accept one of these three string values:

• none - states that column is not fixed
• left - column is fixed on left side of the grid
• right - column is fixed on right side of the grid

• JavaScript
• Angular
• React
• Vue

By default the value of fixed field is undefined and it's presumed that the column is not fixed. It has the same meaning as when it is set to 'none'.

If the size of all fixed columns exceeds the grid width, it will result in cropping the grid view so that content is show with following priority:

1. Columns fixed on left side will appear on top
2. Following are columns fixed on right side
3. At the end are non-fixed columns, which are scrollable

This means that if you have too many columns as fixed, left and right fixed columns will appear above scrolling content. For this reason, it is best to allow fixing columns during run-time, for example using a dropdown menu from each column header.

How to Add a DropDown Menu to Grid Column

Column header in grid component is fully customizable, it can contain any custom HTML elements. In this case, we will use the IntegralUI DropDownButton component, because it shows a dropdown menu when clicked. You only need to set its appearance via CSS and add some code.

In this example, the column header template has a dropdown button placed after its title on right side. It looks like this:

• JavaScript
• Angular
• React
• Vue

Now you can create a dropdown menu and apply it to each dropdown button in grid column. The menu is represented by a List component set in the contentTemplate property for the dropdown button.

• JavaScript
• Angular
• React
• Vue

Finally, you will need to handle events from this custom dropdown menu: when it opens and when item is clicked:

• expandedChanged - fired when dropdown menu opens or closes
• itemClick - fired when menu item is clicked
• itemTouch - fired when menu item is touched

By handling the expandedChanged event, you can select the column to which the dropdown button belongs and mark that column's dropdown menu is visible or not. The itemClick (for touch devices use itemTouch) event is used to apply changes to the grid when an option is selected. In this case, you need to change the column fixed field based on current selection and then update the grid layout. Whenever an option is selected, you can also close the dropdown menu for that column.

• JavaScript
• Angular
• React
• Vue

As a result, you can now dynamically change the side at which column is fixed using a dropdown menu.

This is only an example, you can change how or when columns are fixed in different ways: during data load or using a different UI (it doesn't have to be a dropdown menu). It is totally up to you to decide how you will handle this. In general, only requirement is to set the fixed field in column object to a value that corresponds to the grid side and then just update the grid layout.

Conclusion

When you have a grid with many columns, for quick view at the data you may need to fix some of these columns on left or right side. The IntegralUI Grid is a web component for JavaScript, Angular, React and Vue that comes with a built-in option that allows you to fix columns during run-time.

As this example shows, to fix columns dynamically you can create your own custom UI (or use other components or custom HTML elements) and merge it with the Grid. You can add a dropdown menu with options for fixing columns that will appear whenever a button is clicked from the column header or handle it in a different way. The Grid component allows you to create your own custom solution that is best for your application.

IntegralUI Web is an UI library of native web components that includes the Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.