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.
The following widgets have been retired. Please use Spreadsheet as the alternative: SpreadJS Table, Sheet Grid, XSpreadsheet, ej2-Spreadsheet, Luckysheet, HandsonTable.
Use Cases
- Display Excel Data: Import
.xlsxfiles 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.
The read-only view renders the saved table grid alongside any embedded charts for review and sharing
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 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.tsvfile onto the widget to import data directly without using the Open button.
The edit view provides the full toolbar, formula bar, inline cell editing, and chart management controls
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
Switch the section to Edit mode and click the Insert Chart button in the toolbar (or select it from the toolbar menu).
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.
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.
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.
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.
Click Save to insert the chart. It appears below the table grid.
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.
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.
Switch the section to Edit mode and click Insert Composed Chart in the toolbar.
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.
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.
Click Save to insert the composed chart below the table grid.
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.
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 |
Pie charts work best with a single data series. For multiple series, use Bar or Line chart types instead.
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.
Switch the section to Edit mode.
Locate the drag-and-drop target area displayed in the widget.
Drag your file from the file system and drop it onto the target area.
The table populates with imported data. Review for alignment and completeness before saving.
Alternatively, use the Open button in the toolbar to browse and select a file for import.
Export Table Data
In Edit mode, click the Export button in the toolbar.
Select the desired format: Export to CSV, Export to TSV, or Export to XLSX.
Your browser downloads the file immediately.
Exporting to XLSX preserves cell formatting. CSV and TSV exports contain values only without styling.
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.
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.
Related Widgets
- Data Grid: Use when you need sortable columns, flexible header renaming, and basic import/export without advanced formatting.
- OnlyOffice Spreadsheet: 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.