Argument of type '10' is not assignable to parameter of type 'CanvasColumnFactor'

Question

Why we cannot create a page section with the configuration of two columns with the first one filling the 2 of the 12 column of the layout and the second column filling 10 of the 12 column of layout.

When I use the code bellow:

const page = await ClientsidePageFromFile(sp.web.getFileByServerRelativeUrl("/sites/" + b[1] + "/SitePages/Home1.aspx"));
let section = page.addSection();
let leftColumn = section.addColumn(2);
let rightColumn = section.addColumn(10);

I get the message error:

Argument of type '10' is not assignable to parameter of type 'CanvasColumnFactor'

Answer 1

As per SharePoint/PnP-JS-Core library, CanvasColumnFactorType is defined as:

/**
 * Column size factor. Max value is 12 (= one column), other options are 8,6,4 or 0
 */
export type CanvasColumnFactorType = 0 | 2 | 4 | 6 | 8 | 12;

So, you cannot pass 10 value to parameter of type CanvasColumnFactor. You have to use one of the above values.

---

Additional:

Note that the total value of CanvasColumnFactorType in one section should be 12. Otherwise, you can not edit the created section on the web page.

Source: spfx-add-news-button-webpart