Outline columns in SpreadJS refers to indenting text in the columns to create a tree-like structure in a spreadsheet for better organization of data.

This feature is useful particularly when you want to add hierarchial relationships between rows and built-in expand and collapse user interface in a spreadsheet. Also, outlining columns can be of great help when you need to create project plan tasks and project plan sub-task hierarchy, financial statements and bills of material documents while working with large amounts of data lying in spreadsheets.

Users can outline columns in a worksheet while also adding check boxes and images along with collapse and expand icons.

The following image displays an outline column with collapse and expand icons, check boxes, images, and row outlines.

 

 

You can implement the collapse and expand icons in your worksheet by using the showRowOutline method. The levels in the tree structure correspond to the number of indentations.

You can also customize the images by level, show custom indicator, show checkbox and set maxlevel using outlineColumn.options.

Using Code

This example shows how to indent the columns and add images and check boxes.