@if (type === 'uxResizableTable') { @for (document of documents; track document) { }
Title Author Date
{{ document.title }} {{ document.author }} {{ document.date | date }}
} @if (type === 'uxResizableExpandingTable') { @for (document of documents; track document) { }
Title Author Date
{{ document.title }} {{ document.author }} {{ document.date | date }}
}
uxResizableTable uxResizableExpandingTable
@for (document of documents | slice: 0 : 5; track document) { }
Title Author Date
{{ document.title }} {{ document.author }} {{ document.date | date }}

UX Aspects supports resizable columns with two different modes of behaviour.

Use uxResizableTable on the table element to allow columns to be resized without affecting the overall width of the table. This works by shrinking or growing the next column to the right to accommodate the change in width.

Use uxResizableExpandingTable on the table element to allow columns to be resized without affecting the widths of other columns. The table body will adjust width to accommodate the columns, introducing a horizontal scrollbar if necessary. uxResizableExpandingTable can only be used in a Fixed Header Table.

The uxResizableTable or the uxResizableExpandingTable directive should be applied to the table element and the uxResizableTableColumn directive should be added to every th element.

If you are adding resizable columns to a uxFixedHeaderTable you will also need to add the uxResizableTableCell directive to every td element in the table.

The width of each column can be specified by using the width property. If all columns have a specified width and the column widths do not match the width of the table, columns will be scaled proportionally to fill the available space. If you wish to prevent this proportional scaling, omit the width property from one column, giving it a variable width.

The following methods are available in theuxResizableTable and uxResizableExpandingTable directives:

This will recalculate the table layout. This will set all non-disabled table columns to the same width.

The following properties can be used to configure the uxResizableTableColumn directive:

Defines the number of pixels wide the column should be. Specifies if the column is resizable and if the drag handle should be shown. Specifies if the column drag handle is shown Emits with the width of the column when the column is resized.

The code below can be used to create the example above: