<spreadsheet>

<spreadsheet> is a General Operator component that renders a basic embedded spreadsheet tool.

Its cells are selected through cells: $ss.cells[1][2] is the cell in row 1 and column 2. An index on the spreadsheet itself, such as $ss[1], names nothing.

Attributes and Properties

Examples

Example: default <spreadsheet>

Without any additional attributes, the default <spreadsheet> is $4$ rows by $4$ columns.

Example: referencing <spreadsheet> data

Values stored within individual cells of a <spreadsheet> can be accessed using the following notation: spreadsheetName.cell## where ## is the column letter and row number of the cell. For example, $foods.cellA2 refers to the cell in the first column and second row of the <spreadsheet> component.

Example: <spreadsheet> with <cell> children

Initial data can be prefilled using nested <cell> children. The rowNum and colNum attributes can be used to locate data.

When only one or neither of these attributes is specified, data is populated in the following manner:

• data is placed in the first row, first column
• subsequent entries are placed in the next availabe column, in the same row
• if only the column number is specified, data is placed in the previously used row
• if only the row number is specified, data is placed in the previously used column

Example: build <spreadsheet> with rows

Initial data can be prefilled using nested <row> children, which in turn contain individual <cell> children.

Example: build <spreadsheet> with columns

Initial data can be prefilled using nested <column> children, which in turn contain individual <cell> children.

Example: setting column widths

Without widths, each column is sized to fit its contents, so a column left empty for students to type into is drawn narrow. A <col> per column sets the widths, exactly as it does in a <tabular>: the <col> components apply to the columns in order, and each width is a percentage of the width of the spreadsheet (beside the row numbers, when they are shown). A column that is already written out as a <column> can instead take the same width attribute itself. The spreadsheet still has at least minNumColumns columns, $4$ by default, so set minNumColumns when the widths are meant to share the spreadsheet among fewer columns; otherwise the extra columns are added beyond the widths and the spreadsheet scrolls sideways.

Example: using spreadsheets for computations

Spreadsheet computation formulas can be entered directly into an individual <cell> component. References for data within spreadsheets follow standard spreadsheet naming conventions, but no $ is required. Formulas can be prefilled, or entered manually by the user by clicking on the cell. Try directly entering a formula into cell B3 that references one or more of the other cells.

Example: emphasizing a header row

Add header to a <row> and its cells are drawn in bold. A header row can still be edited like any other. The emphasis is not only visual: the cells of a header row are announced to a screen reader as headers for the columns beneath them.

Example: cells the user cannot edit

Add fixed to a <cell> and the user cannot change it: the cell is greyed and clicking it opens no editor, though it can still be selected and copied. Use it to protect labels and computed results while leaving the data cells open. Adding fixed to a <row> fixes every cell of that row, and adding it to the <spreadsheet> itself makes the whole grid read-only.

Attribute Examples

Attribute Example: minNumRows, minNumColumns

<spreadsheet minNumRows="2" minNumColumns="6"/>     

The default size <spreadsheet/> of 4 rows by 4 columns has been modified with the minNumRows and the minNumColumns attributes.

Attribute Example: width, height

<spreadsheet/>
<spreadsheet width="50%"/>    

The default size <spreadsheet> component (100% of available screen width) is shown above one with a specified width of 50% of available width.

A width may equally be given as a number of pixels (600, 600px) or a physical measurement (6in); a height takes those same absolute sizes. See Sizes.

Attribute Example: rowHeaders, columnHeaders

<spreadsheet rowHeaders="false" columnHeaders="false"/> 

In this example, the rowHeaders and columnHeaders are suppressed by setting these attributes to false.

Attribute Example: hiddenRows, hiddenColumns

<spreadsheet hiddenRows="2 4" hiddenColumns="1 3"/>

Individual rows and columns may be hidden using the hiddenRows and hiddenColumns attributes.

Attribute Example: fixedRowsTop, fixedColumnsLeft

<spreadsheet fixedRowsTop="2" fixedColumnsLeft="2" minNumRows="20" minNumColumns="20"/>

Individual rows and columns may be fixed in place during scrolling using the fixedRowsTop and fixedColumnsLeft attributes. Each of these accepts an integer value for the number of rows or columns to fix in place.

Since Doenet will allow for as much height as required for the spreadsheet to display its rows, this effect is easier to observe with the columns than the rows.