Column Resizing

Column Resizing Specification

1. Overview

Static grid column sizes do not always allow for content to be fully visible to end users, or leaves too much empty space with columns that have little content. As a result, the igx-grid should expose a feature, which allows users to adjust the size of the igx-grid columns through the UI, so they can make them as big, or as small, as their user scenario requires. Allows the user to resize a column via clicking and dragging a resize indicator to a new location.

Objectives

Provides deferred column resizing for the igxGrid - a deferred update shows the user a temporary resize indicator while the drag operation is in effect and only applies the new column size once the drag operation ends.

2. User Stories

Developer

As a developer, I want to mark specific columns as resizable, so that I can allow the end user to resize them interactively.
As a developer, I want to be notified when a column is resized, so that I can add custom logic.
As a developer, I want to configure minimum and maximum allowable column widths, so that I can restrict the end users to resizing columns to specific sizes.
As a developer, I want to enable best fit (auto) sizing via double click – the column will be sized to the longest currently visible cell value, so that the user can see the entire content.
As a developer, I want to be able to style the resize indicator.

End user

As an end user, I want to be able to resize columns, to make the content in them fit better.
As an end user, I want to have UI indication that the column can be resized, when the mouse is positioned over the header side border.
As an end user, I want to resize the columns by click, then dragging and dropping the visual indicator, so that I can resize interactively.
As an end user, I want to have a visual indicator of the initial state of the border that I am resizing while dragging the new location, so that I can resize interactively.
As an end user, I want to auto-size a column by double clicking on resize indicator.
As an end user, I want to be able to resize columns with multi-column headers, as well as pinned column.

3. Functionality

3.1. End User Experience

Resize column

Ends users should be able to resize columns according to their needs. The resizing is done via clicking and then dragging a temporary resize indicator. The new column size is applied only when the drag operation ends. Resizing a certain column affects the overall width of the grid - a horizontal scrollbar appears if necessary.

The resize indicator is constrained within the limits of the specified minWidth and maxWidth options and cannot go outside of their bounds.

When resizing a child column, the parent header should also be resized. Same for when resizing the parent column – child column should adjust their sizes proportionally.

Pinned columns – pinned columns can be resized and will affect the size of the pinned area. As there is no constraint on the size of the pinned area it is possible for the pinned area to become bigger than the visible area and to hide the unpinned columns as a result.

Multi-column headers and Multi-Row layouts - when resizing a child column, the parent column should also be resized. Same for when resizing the parent column – child column should adjust their sizes proportionally.

Auto-size column

Auto-size runtime

Users should be able to auto-size a column by double clicking on its resize handle, which is located in the right side of the column's header.

When the column is auto-sized it will take the size of the longest currently visible cell or header value.

Auto-size on initialization

Users should be able specify a column as auto-sized by setting width to auto:

<igx-column width='auto' ... />

When the column is first initialized in the view it will resolve to the size of the longest visible cell or header. This approach is more performance optimized than auto-sizing post initialization and is recommended especially in cases where you need to auto-size a large number of columns.

For both auto-sizing options the new size is constrained within the minWidth and maxWidth setting of the column and cannot go outside their bounds. For example, if the new size exceeds maxWidth it will apply the specified maxWidth instead.

Resizing/Auto-sizing columns with percentage width

After resizing completes the column will have an approximate width in percentage so that the column remains responsive. As the new size will be an approximation it may differ slightly from where the user drops the resize indicator.

3.2. Developer Experience

Resizing is enabled per column, using the column's resizable input. By default resizing is disabled.

<igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>

Additionally, minWidth and maxWidth can be set to limit the allowed range within which the column can be resized.

<igx-column [field]="'ID'" width="100px" [resizable]="true" [minWidth]="'60px'" [maxWidth]="'230px'">
 </igx-column>

Enabling resizing for a column also allows it to be auto-sized via the UI. Developers can also use the autosize API method to manually auto-size a column.

All size related options - width, minWidth and maxWidth, allow setting both pixel width, percentage width or a mix of both. For example, width can be set in percentage but have minWidth set in pixels:

<igx-column [field]="'ID'" width="20%" [resizable]="true" [minWidth]="'60px'">
 </igx-column>

Resizing should still be limited within the specified bounds.

4. User Interface

When resizing is enabled for a column a resize handle is rendered after the related column header. The handle shows a col-resize style on hover to hint that it is a resizable element. This element can also be double-clicked in order to auto-size the column.

When that element is clicked and dragged a resize indicator is displayed at the current cursor location. This element determines the location to which the column will be resized once dropped.

When dropped, the resize indicator disappears and the column takes its new size.

resizeUI

5. API

Column Options

Name	Description	Type	Default value	Valid values
resizable	Enables/Disables resizing for a column.	boolean	false	true, false
minWidth	Sets the minimum allowed width when resizing the column.	string	'88px'	'100px', '10%'
maxWidth	Sets the maximum allowed width when resizing the column.	string	null	'500px', '50%'

Column Methods

Name	Description	Return type	Parameters
autoSize	Auto-sizes the column to the longest currently visible cell value, including the header cell.	void	null

Grid Events

Name	Description	Cancelable	Parameters
onColumnResized	Emitted when column is resized.	No	IColumnResizeEventArgs

6. ARIA Support

7. Test Plan

Base Tests

Should allow defining a grid with resizable columns.
Should allow resizing columns that have width in pixels.
Should allow resizing columns that have no width.
Should allow resizing columns that have width in percentage. Column size should remain in % after resize completes.
Should allow resizing column outside grid view.
Should resize column with preset min and max widths in pixels.
Should resize column with preset min and max widths in percentage.
Should be able to resize column to the minWidth < defaultMinWidth.
Should change the defaultMinWidth on density change.
Should auto-resize column on double click.
Should auto-resize column when it has width in %. Column size should remain in % after resize completes.
Should auto-size column programmatically - via autoSize API.
Should auto-resize column when minWidth/maxWidth is set.
Should auto-resize column when minWidth/maxWidth is set in percentage.
Should auto-resize templated column on double click.
should auto-size templated column programmatically.
Should fire onColumnResized with correct event args.
Should update grid after resizing a column to be bigger.
Should recalculate grid heights after resizing so the horizontal scrollbar appears.
Should size headers correctly when column width is below the allowed minimum.
Should size headers correctly when column width is in %.