This makes use of two tools, defined in their own files: ColumnResizingTool.js and RowResizingTool.js. Each tool adds an Adornment to a selected node that has a resize handle for each column or each row of a "Table" Panel. While resizing, you can press the Tab or the Delete key in order to stop the tool and restore the column or row to its natural size.

This sample also adds TwoWay Bindings to the RowColumnDefinition.width property for the columns. Each column width is stored in the corresponding index of the node data's "widths" property, which must be an Array of numbers. The default value is NaN, allowing the column to occupy its natural width. Note that there are no Bindings for the row heights.

The model data, automatically updated after each change or undo or redo:

See also the Add & Remove Rows & Columns sample.