How to Resize JavaScript Datagrid Columns Using Your Keyboard

What You Will Need

• Wijmo
• JavaScript

Controls Referenced

• FlexGrid

Tutorial Concept

Resizing Columns in a JavaScript Datagrid with Keyboard - Solve a common accessibility issue using Wijmo's FlexGrid control.

When working with JavaScript DataGrids, it's critical to ensure that they support accessibility, ideally with ARIA Grid specs. But even when a DataGrid fully supports the ARIA grid role, there are still some unique challenges to tackle. In this blog, we will review:

• An alternative solution to Column Resizing with a Mouse
• Implementing Column Resizing with a Keyboard
• Informing users of the alternative solution
• Bonus Feature: AutoSize all columns with a button

This tutorial will tackle the challenge of Column Resizing with a Keyboard. This feature is commonly supported by using a mouse to grab a handle in the column header and drag it to resize the column to their desired width.

So, how can we make this same feature accessible via the keyboard? 

If we check in Excel, one of our go-to sources for DataGrid ideas, we find it is possible to resize columns using a keyboard shortcut (Alt + H + O + H) and then by entering the precise width in pixels. This is a solution, though not well-known or intuitive.

A Clever Solution

One of our long-time customers suggested a great idea! Their idea was to use keyboard shortcuts while a column header was selected to increase and decrease column widths. We thought for a while about using a combination of arrow keys with shift or alt, but then it hit us. Why not just use “+” and “-” keys? It was almost too obvious! 

So the final solution is:

• allow users to navigate up into the column headers to select individual columns
• allow users to type “+” or “-” keys to increase or decrease the selected column’s width

Implementing Our Solution

We will start with a simple instance of Wijmo’s FlexGrid. This will be a DataGrid bound to a JavaScript array. It is important to set headersFocusability: 'Column' to allow users to navigate up into the Column Headers with arrow key navigation.

      var theGrid = new FlexGrid('#theGrid', {
          headersFocusability: 'Column',
          itemsSource: data
      });

Now, we need an interval to determine how much we want to increase or decrease column widths. We will use 10px so that the difference will be more obvious than 1px. However, you can set this to whatever interval you'd like.

    var widthConstant = 10; //define a constant value for increasing/decreasing col widths

Lastly, we will add a keydown event listener to the grid. This event listener will ensure a column header is selected and then will check if the “+” or “-” keys were pressed. If those conditions match, then the grid resizes the selected column appropriately and cancels the default behavior to avoid entering into edit mode.

        theGrid.hostElement.addEventListener('keydown', (e) => {
          const sel = theGrid.selection;
          if (theGrid.activePanelType === CellType.ColumnHeader) {
            const col = theGrid.columns[sel.col];
            const width = col.width || col.renderWidth;
            if (e.key === '+') {
              col.width = width + widthConstant;
            } else if (e.key === '-') {
              col.width = width - widthConstant;
            }
            e.preventDefault();
          }
        });

That's it! With this simple bit of code, we have made column resizing fully accessible using keyboards.

Letting Users Know

One thing you will want to consider is letting users know about this shortcut. We considered adding aria-keyshortcuts to the column header elements but decided against it. The reason behind this decision was that DataGrid Column Headers already announced a lot of information, and we did not think this should be read or repeated for each column. Instead, we suggest adding it in text in your page, ideally in a single place that summarizes all keyboard shortcuts in your page or app. This is a good practice that we highly recommend. 

Bonus Feature: AutoSize All Columns with a Button

Another nice feature in Excel is the ability to AutoSize or AutoFit all columns at once, which fits each column to its widest text. In Excel, this is executed through the menu, which can be accessed by the keyboard. 

In our app, we can simply add a button in the page to trigger this action. If you have a toolbar or an Actions area, you could place it there. In this app, we will just place it directly above the grid. 

So, let's add the button in markup:

    <button id="btnResize">AutoSize All Columns</button>

Then, we'll add a click event handler that calls FlexGrid’s convenient method for AutoSizing all columns:

document.getElementById('btnResize').addEventListener('click', function () {
            theGrid.autoSizeColumns();
        });

Now, users can focus on this button and hit enter on their keyboard to AutoSize all columns in the grid. 

Try It Yourself

Check out the final implementation of our sample for Resizing DataGrid Columns with Keyboard. 

We think this is a cool and clever way of supporting a feature that commonly only works with a mouse! We'd like to offer special thanks to our customer for this suggestion! We hope this helps to make your DataGrids a little more accessible.