Data Grid

Lightweight, interactive spreadsheet widget for structured data entry, editing, sorting, and import/export directly within Labii experiment sections

Specs

Label	Value
Version	1.0.0 (updated on 2026-04-08)
Developer	Labii Inc.
Type	Section
Support Configuration	No

Overview

The Data Grid widget provides a fast, intuitive spreadsheet experience directly inside Labii experiment sections. Built on the react-data-grid library, it delivers performant virtual rendering of large datasets combined with a rich set of editing capabilities — all without leaving the Labii interface. Scientists and researchers can add or remove rows and columns, rename column and row headers, sort data by any column, edit individual cells inline, copy and paste data from Excel, and import tabular data from .xlsx, .tsv, or .csv files. The Data Grid is ideal for recording assay results, tracking plate layouts, entering measurement tables, managing small reference datasets, and any scenario where a structured, editable table embedded in an experiment is more appropriate than a full-featured spreadsheet.

Jspreadsheet (previously known as jExcel) has been retired. Please use the Data Grid widget instead.

Use Cases

• Assay Data Recording: Enter raw absorption values, signal intensities, or concentration readings in a structured grid that mirrors a physical plate or microwell layout

• Plate Layout Documentation: Map sample identifiers, standards, blanks, and controls to well positions (A1–H12) within a single inline table

• Standards and Calibration Tables: Store concentration vs. response data for standard curves alongside calculation steps in the same experiment section

• Measurement Tracking: Record repeated measurements across time points or replicates in a clearly labeled tabular format

• Protocol Parameter Tables: Organize reaction conditions, reagent volumes, temperature ramp steps, or cycling parameters in a compact grid

• Data Paste from Instruments: Quickly paste tabular output copied directly from instrument software or Excel without reformatting

• Small Reference Datasets: Maintain lookup tables, conversion factors, or reference ranges that are referenced throughout an experiment notebook

Interface

Read-only View

In read-only mode, the Data Grid renders the stored table as a clean, scrollable grid with column letters (A, B, C …) or custom column names displayed in the frozen header row and row numbers in the first column. All cell values are visible but not editable, and the toolbar is hidden. Users can scroll horizontally and vertically through large datasets while the header row and row-number column remain fixed for context.

The read-only view displays the stored table with frozen column headers and row numbers for easy reference

Edit View

The edit view activates a full interactive toolbar and enables all data-entry and management features. The interface is divided into three areas:

• Toolbar (top): Three dropdown menus — Row, Column, and Export — for structural operations

• Grid area (middle): The interactive spreadsheet with editable cells, sortable column headers, and column/row delete controls

• Import zone (bottom): A drag-and-drop area for loading .xlsx, .tsv, or .csv files directly into the grid

The edit view provides the full toolbar, inline cell editing, and a file-import drop zone

Features

Cell Editing

Double-click any cell to activate the inline text editor. Type the new value and press Enter or Tab to confirm and move to the next cell. Press Escape to discard changes. Clicking outside the active cell also commits the entered value.

All cells in the Data Grid are plain-text editors. For rich formatting, formulas, or charts, use the SpreadJS Table widget instead.

Sorting

Click a column header to sort the grid by that column in ascending order. Click again to switch to descending order. A sort arrow indicator appears beside the active sort column.

To sort by multiple columns simultaneously, hold Ctrl (Windows/Linux) or Cmd (macOS) and click additional column headers. Each sorted column displays its sort priority number alongside the direction arrow.

Column Operations

Open the Column dropdown in the toolbar to access:

• Add Column: Appends a new column to the right of the last column

• Remove Column: Deletes the currently selected column and its data

To rename a column header, double-click the header cell of any column. Type the new name and press Enter to confirm.

To resize a column, drag the right edge of any column header to the desired width.

To reorder columns, drag a column header horizontally to a new position and release.

Row Operations

Open the Row dropdown in the toolbar to access:

• Add Row: Appends a new empty row below the last row

• Remove Row: Deletes the currently selected row and its data

To rename a row, edit the value in the row-number cell (column A position) or the designated row-label column.

To delete a specific row, click the trash icon (🗑) that appears at the end of the row when hovering.

Copy and Paste

The Data Grid supports full clipboard interoperability with Excel and other spreadsheet applications:

• Copy a cell: Click a cell to select it, then press Ctrl+C / Cmd+C

• Paste into a cell: Select the target cell and press Ctrl+V / Cmd+V

• Paste a range from Excel: Select a range in Excel, copy it, click the top-left destination cell in the Data Grid, and press Ctrl+V / Cmd+V — the full block of rows and columns is pasted automatically

• Paste with headers: If the copied range includes row headers or column headers, the Data Grid will detect them and update the corresponding row and column labels automatically — useful for quickly renaming headers in bulk

When pasting a multi-cell range, the Data Grid fills only existing rows and columns. If the pasted range is larger than the available space, add the required rows and columns first using the Row and Column dropdown menus.

To bulk-update row or column headers, copy a single row or column that includes the header labels from Excel and paste it directly into the grid. The Data Grid reads the header values from the first row or first column of the pasted content and applies them as labels immediately.

Import from File

The bottom of the edit view contains a drag-and-drop import zone. Supported formats:

Format	Extension	Notes
Excel Workbook	.xlsx	First sheet is imported
Tab-Separated Values	.tsv	UTF-8 encoding recommended
Comma-Separated Values	.csv	UTF-8 encoding recommended

To import a file:

1

Enter edit mode by clicking the Edit button on the section

2

Drag the .xlsx, .tsv, or .csv file from your file explorer and drop it onto the "Drag and drop files here or click to select" area at the bottom of the widget

Alternatively, click the import area to open a file picker and select the file

3

The file contents are loaded into the grid, replacing any existing data

Review the imported data and make corrections as needed

4

Click Save to persist the imported data to the record

Importing a file replaces all existing grid data. Save a copy or export the current data before importing if you need to preserve the original content.

Export

Click the Export dropdown in the toolbar and select the desired format to download the current grid contents:

• Export to CSV: Downloads the grid as a comma-separated values (.csv) file, compatible with Excel, Google Sheets, and most data analysis tools

• Export to TSV: Downloads the grid as a tab-separated values (.tsv) file, useful for tools that use tab delimiters or when cell values may contain commas

Configuration

The Data Grid widget does not require any configuration. It is ready to use immediately after being added to a section.

Additional Functions

Keyboard Navigation

The Data Grid supports full keyboard navigation for efficient data entry:

Key	Action
Arrow keys	Move the active cell selection
Enter	Confirm edit and move down
Tab	Confirm edit and move right
Shift+Tab	Move left
Escape	Cancel an edit without saving
Ctrl/Cmd+C	Copy selected cell value
Ctrl/Cmd+V	Paste clipboard content into selected cell
Double-click	Open cell editor

Column Freeze

The row-number column and optionally additional columns on the left remain fixed (frozen) during horizontal scrolling, keeping row identifiers always visible even with many columns.

Virtualized Rendering

The grid uses virtual rendering — only the rows and columns currently visible in the viewport are mounted in the DOM. This ensures smooth scrolling performance even for tables with hundreds of rows and dozens of columns.

Best Practices

Data Organization

• Use the first row for category or group labels and subsequent rows for individual data points

• Assign descriptive column names immediately after adding columns to avoid confusion when the grid grows

• Place sample identifiers or well positions in the leftmost column so they remain visible during horizontal scrolling

Importing External Data

• Export data from your instrument software or analysis tool as .csv or .xlsx before importing into the Data Grid

• Check that the file's first row contains column headers, which become the header row in the grid

• For plate reader data, ensure well IDs map to rows and measurements map to columns before importing

Data Entry Efficiency

• Use Tab to move across a row and Enter to move down a column for rapid sequential entry

• Paste entire data blocks from Excel in a single operation rather than entering values cell by cell

• Add all required rows and columns before pasting a large range to prevent data truncation

Common Pitfalls to Avoid

• Avoid importing a new file without first exporting the current data — imports permanently replace existing grid content

• Avoid leaving column headers as the default letters (A, B, C …) when the columns have specific meanings; rename them immediately for clarity

• Avoid very large imports (thousands of rows) if only a summary table is needed — consider the SpreadJS Table widget for large datasets requiring formulas and chart support

References

External Resources

• react-data-grid on GitHub — Underlying open-source library documentation