# Spreadsheet

## Specs

| Label                     | Value                         |
| ------------------------- | ----------------------------- |
| **Version**               | 0.2.0 (updated on 2026-05-18) |
| **Developer**             | Labii Inc.                    |
| **Type**                  | Section                       |
| **Support Configuration** | No                            |

## Overview

The Spreadsheet widget is Labii's in-house full-featured spreadsheet solution that brings Google Sheets and Excel-like capabilities directly into your electronic lab notebook. Scientists and researchers can build structured data tables from scratch, import existing Excel files, apply rich cell formatting, and embed interactive charts — all without leaving a Labii record. The widget supports a comprehensive toolbar covering font styling, number formats, borders, alignment, and text rotation alongside row and column management operations. Embedded charts can be created from any data range in the table and support a wide variety of visualization types, making the Spreadsheet widget ideal for any experiment that requires both structured data capture and visual data analysis in a single section.

{% hint style="info" %}
The following widgets have been retired. Please use Spreadsheet as the alternative: SpreadJS Table, Sheet Grid, XSpreadsheet, ej2-Spreadsheet, Luckysheet, HandsonTable.
{% endhint %}

## Use Cases

* **Display Excel Data**: Import `.xlsx` files directly into a record to render spreadsheet content with formatting preserved alongside other experiment sections.
* **Create ELN Tables**: Build instrument readout tables, reagent concentration grids, or calibration data tables from scratch using a familiar spreadsheet interface.
* **Embedded Data Visualization**: Insert bar, line, scatter, pie, or other chart types directly beneath the table to visualize experimental results without switching to a separate tool.
* **Sample and Plate Tracking**: Organize sample identifiers, well positions, and measurement values in labeled rows and columns with color-coded background formatting.
* **Formatted Reports**: Apply font styles, number formats, borders, and alignment to produce publication-ready tables inside ELN records.
* **Compliance Documentation**: Capture structured data with a full audit trail embedded in timestamped, versioned Labii records for GLP and 21 CFR Part 11 workflows.

## Interface

### Read-only View

In read-only mode the Spreadsheet displays the saved table grid and any embedded charts. The layout is clean and non-interactive, suitable for reviewing or sharing recorded data.

* **Table Grid**: Saved cell values are rendered in a scrollable spreadsheet grid with formatting (fonts, colors, borders, number formats) preserved.
* **Embedded Charts**: Any charts that were inserted during editing are displayed beneath the table with their configured type, title, and legend.
* **Scroll Navigation**: Large tables can be scrolled horizontally and vertically.

<figure><img src="/files/4GfhIVbdjvO0a3RxMsM5" alt="Spreadsheet widget in read-only view showing a formatted table and an embedded bar chart"><figcaption><p>The read-only view renders the saved table grid alongside any embedded charts for review and sharing</p></figcaption></figure>

### Edit View

In edit mode the Spreadsheet reveals a full toolbar, a formula bar, the editable table grid, embedded charts with management controls, and a drag-and-drop import area.

* **Menu Bar**: A context-sensitive toolbar at the top of the widget providing file operations, row/column management, cell formatting, alignment, border, and chart insertion controls (see [Additional Functions](#additional-functions) for details).
* **Formula Bar**: An input field directly above the grid that displays and accepts values or formulas for the currently selected cell.
* **Table Grid**: Click any cell to select it, then type to enter or overwrite values. Navigate with keyboard keys. Cells support rich formatting applied via the toolbar.
* **Embedded Charts**: Charts added via **Insert Chart** or **Insert Composed Chart** appear below the grid with **Edit** and **Delete** action buttons. Standard charts support chart type and legend position controls, while composed charts let each data series use its own chart type, color, Y axis, and data aggregation method.
* **Drag-and-Drop Area**: Drag an `.xlsx`, `.csv`, or `.tsv` file onto the widget to import data directly without using the Open button.

<figure><img src="/files/B4kFWFxZM9iqcqIqSSXc" alt="Spreadsheet widget in edit view showing the menu bar, formula bar, table grid, and an embedded bar chart"><figcaption><p>The edit view provides the full toolbar, formula bar, inline cell editing, and chart management controls</p></figcaption></figure>

## Chart Configuration

Chart configuration is the primary configurable feature of the Spreadsheet widget. Each chart has its own settings panel that opens when you click **Insert Chart**, **Insert Composed Chart**, or **Edit** on an existing chart.

### Inserting and Configuring a Chart

{% stepper %}
{% step %}
Switch the section to **Edit** mode and click the **Insert Chart** button in the toolbar (or select it from the toolbar menu).
{% endstep %}

{% step %}
The **Chart Configuration** panel opens. Fill in the **Data Source** settings:

* **Data Range**: Specify a cell range such as `A1:D10`, or leave blank to use the entire table.
  {% endstep %}

{% step %}
Configure **Axis Configuration**:

* **Axis Orientation**: Choose **Rows** (each row is a data series) or **Columns** (each column is a data series).
* **X Axis**: Select the row or column to use as the X axis (category axis).
* **Y Axis**: Select the row or column to use as the Y axis (value axis).
* **Series**: Select one or more additional rows or columns to include as data series.
  {% endstep %}

{% step %}
Configure **Data Processing**:

* **Data Aggregation**: Choose how to aggregate values when multiple data points share the same X value — **None**, **Sum**, **Average**, **Max**, **Median**, or **Min**.
  {% endstep %}

{% step %}
Configure **Chart Appearance**:

* **Chart Type**: Select from Bar, Stacked Bar, Line, Monotone Line, Area, Monotone Area, Stacked Area, Percent Area, Pie, Scatter, Joint Line Scatter, Scatter with Fit, or Radar.
* **Legend Position**: Place the legend at **Top**, **Bottom**, **Left**, or **Right**.
* **Chart Title**: Enter a descriptive title displayed above the chart.
* **Height**: Set the chart height in pixels.
  {% endstep %}

{% step %}
Click **Save** to insert the chart. It appears below the table grid.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
You can insert multiple charts from the same table. Each chart has its own independent configuration, allowing you to visualize different data ranges or chart types side by side.
{% endhint %}

### Inserting and Configuring a Composed Chart

Use **Insert Composed Chart** when you need to combine multiple data series in a single visualization while giving each series its own presentation and processing rules.

{% stepper %}
{% step %}
Switch the section to **Edit** mode and click **Insert Composed Chart** in the toolbar.
{% endstep %}

{% step %}
In the chart configuration panel, define the shared chart settings such as the **Data Range**, **Axis Orientation**, **X Axis**, chart title, legend position, and chart height.
{% endstep %}

{% step %}
Under **Series**, add one or more data series. For each series, configure:

* **Data Series**: Select the row or column to plot.
* **Chart Type**: Choose **Area**, **Bar**, **Line**, or **Scatter**.
* **Color**: Assign a dedicated display color for that series.
* **Y Axis**: Plot the series against the **Left** or **Right** Y axis.
* **Data Aggregation**: Choose **None**, **Sum**, **Average**, **Max**, **Median**, or **Min** for how duplicate X values are processed.
  {% endstep %}

{% step %}
Click **Save** to insert the composed chart below the table grid.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Composed charts are useful when different series need different scales or visual encodings, such as displaying bars for sample counts on the left Y axis and a line for concentration on the right Y axis.
{% endhint %}

### Chart Types

| Chart Type             | Best Used For                                                |
| ---------------------- | ------------------------------------------------------------ |
| **Bar**                | Comparing discrete categories                                |
| **Stacked Bar**        | Showing part-to-whole relationships across categories        |
| **Line**               | Trends over time with sharp transitions                      |
| **Monotone Line**      | Smooth trend lines for continuous data                       |
| **Area**               | Cumulative values over time                                  |
| **Monotone Area**      | Smooth area representation for continuous data               |
| **Stacked Area**       | Cumulative contribution of multiple series over time         |
| **Percent Area**       | Relative proportions of series as 100 % stacked areas        |
| **Pie**                | Proportional breakdown of a single series                    |
| **Scatter**            | Correlation and distribution between two numeric variables   |
| **Joint Line Scatter** | Overlaying a trend line on scatter data                      |
| **Scatter with Fit**   | Scatter data with a best-fit regression line                 |
| **Radar**              | Multi-axis comparisons across several quantitative variables |

{% hint style="warning" %}
Pie charts work best with a single data series. For multiple series, use Bar or Line chart types instead.
{% endhint %}

### Editing or Deleting a Chart

* Click the **Edit** button (pencil icon) below a chart to reopen its configuration panel and update any settings.
* Click the **Delete** button below a chart to permanently remove it from the section.

## Additional Functions

### Menu Bar Reference

The toolbar is divided into logical groups. Not all actions are visible at all times — available actions depend on the context of the selected cell or region.

#### File Operations

| Action     | Description                                                                    |
| ---------- | ------------------------------------------------------------------------------ |
| **Open**   | Open a file browser to import an `.xlsx`, `.csv`, or `.tsv` file into the grid |
| **Export** | Export the current table to **CSV**, **TSV**, or **XLSX** format               |

#### Row Management

| Action                   | Description                              |
| ------------------------ | ---------------------------------------- |
| **Add Row Before**       | Insert a blank row above the current row |
| **Add Row After**        | Insert a blank row below the current row |
| **Add Row to Bottom**    | Append a single blank row at the end     |
| **Add 5 Rows to Bottom** | Append five blank rows at the end        |
| **Remove Current Row**   | Delete the currently selected row        |
| **Remove Empty Rows**    | Delete all trailing blank rows           |

#### Column Management

| Action                    | Description                                              |
| ------------------------- | -------------------------------------------------------- |
| **Add Column to Left**    | Insert a blank column to the left of the current column  |
| **Add Column to Right**   | Insert a blank column to the right of the current column |
| **Add Column to End**     | Append a single blank column at the end                  |
| **Add 5 Columns to End**  | Append five blank columns at the end                     |
| **Remove Current Column** | Delete the currently selected column                     |
| **Remove Empty Columns**  | Delete all trailing blank columns                        |

#### Cell Formatting

| Action               | Description                                                    |
| -------------------- | -------------------------------------------------------------- |
| **Font Family**      | Change the typeface of selected cells                          |
| **Font Size**        | Set a specific font size, or use Increase / Decrease Font Size |
| **Bold**             | Toggle bold on selected cells                                  |
| **Italic**           | Toggle italic on selected cells                                |
| **Underlined**       | Toggle underline on selected cells                             |
| **Strikethrough**    | Toggle strikethrough on selected cells                         |
| **Font Color**       | Apply a color to cell text                                     |
| **Background Color** | Apply a fill color to selected cells                           |
| **Clear Format**     | Remove all formatting from selected cells                      |

#### Number Format

The **Number Format** menu sets how numeric values are displayed without changing the underlying data:

| Format     | Example Display    |
| ---------- | ------------------ |
| Plain Text | 1000.12            |
| Number     | 1,000.12           |
| Percent    | 12.12%             |
| Scientific | 1.01E+03           |
| Currency   | $1,000.12          |
| Date (US)  | 9/26/2026          |
| Date (ISO) | 2026-09-26         |
| Time (12h) | 3:59:00 PM         |
| Time (24h) | 15:59              |
| Datetime   | 9/26/2026 15:59:00 |

Use **Increase Decimal Places** and **Decrease Decimal Places** to control the precision of displayed numeric values.

#### Alignment

| Action               | Options                                                                 | Description                                       |
| -------------------- | ----------------------------------------------------------------------- | ------------------------------------------------- |
| **Horizontal Align** | Left · Center · Right                                                   | Set horizontal text alignment within a cell       |
| **Vertical Align**   | Top · Middle · Bottom                                                   | Set vertical text alignment within a cell         |
| **Text Wrap**        | Overflow · Wrap                                                         | Control whether text overflows or wraps in a cell |
| **Text Rotation**    | None · Tilt Up · Tilt Down · Stack Vertically · Rotate Up · Rotate Down | Rotate cell text at an angle                      |

#### Borders

| Action           | Description                                                                                             |
| ---------------- | ------------------------------------------------------------------------------------------------------- |
| **Borders**      | Apply a border preset: All, Inner, Outer, Horizontal, Vertical, Left, Top, Right, Bottom, or No Borders |
| **Border Color** | Set the color for borders applied to selected cells                                                     |
| **Border Style** | Choose the line style (solid, dashed, dotted, etc.)                                                     |

### Import via Drag and Drop

Drag an `.xlsx`, `.csv`, or `.tsv` file from your desktop directly onto the Spreadsheet widget in edit mode. The file contents load into the grid immediately.

{% stepper %}
{% step %}
Switch the section to **Edit** mode.
{% endstep %}

{% step %}
Locate the drag-and-drop target area displayed in the widget.
{% endstep %}

{% step %}
Drag your file from the file system and drop it onto the target area.
{% endstep %}

{% step %}
The table populates with imported data. Review for alignment and completeness before saving.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Alternatively, use the **Open** button in the toolbar to browse and select a file for import.
{% endhint %}

### Export Table Data

{% stepper %}
{% step %}
In **Edit** mode, click the **Export** button in the toolbar.
{% endstep %}

{% step %}
Select the desired format: **Export to CSV**, **Export to TSV**, or **Export to XLSX**.
{% endstep %}

{% step %}
Your browser downloads the file immediately.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Exporting to XLSX preserves cell formatting. CSV and TSV exports contain values only without styling.
{% endhint %}

## Best Practices

### Data Organization

* Use the first row as a clearly labeled header row (bold, background color) before entering data values.
* Keep each column dedicated to a single data type or variable to ensure number formatting and chart axis mapping work correctly.
* Apply **ISO Date** number format (`2026-09-26`) for date columns to ensure unambiguous interpretation across locales.
* Use **Remove Empty Rows** and **Remove Empty Columns** before saving to keep records clean.

### Formatting

* Apply **Background Color** to highlight important cells, outliers, or header rows rather than relying on text alone.
* Use **Number Format → Number** for measurement values and **Currency** for cost data to make tables immediately readable.
* Avoid overusing text rotation in tables that will be exported — rotated headers export as plain text without rotation in CSV/TSV.

### Charts

* Set a descriptive **Chart Title** that includes the axis units (for example "Absorbance at 450 nm by Sample").
* Use **Data Aggregation → Average** when your table contains replicate measurements and you want the chart to represent the mean.
* Add one chart per data relationship rather than combining unrelated series in a single chart.
* Place the legend at **Top** for wide charts and **Right** for narrower charts to minimize overlap with data.

### Performance and Compliance

* For very large datasets (hundreds of rows), use **Remove Empty Rows** to reduce storage size before saving.
* When working under GLP or 21 CFR Part 11, save the section after each significant data entry session so changes appear in the Labii audit trail.

{% hint style="success" %}
Combine the Spreadsheet widget with a rich text section above it to document experimental context, and a signature section below to formally approve the recorded data.
{% endhint %}

## Related Widgets

* [**Data Grid**](/widgets/section-widgets/office/table/data-grid.md): Use when you need sortable columns, flexible header renaming, and basic import/export without advanced formatting.
* [**OnlyOffice Spreadsheet**](/widgets/section-widgets/office/onlyoffice/onlyoffice-spreadsheet.md): Full-featured spreadsheet editor powered by OnlyOffice with advanced formulas, pivot tables, and collaborative editing. Choose this widget when you need a fully-featured office spreadsheet experience with macros and multi-user real-time editing.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.labii.com/widgets/section-widgets/office/table/spreadsheet.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.