# Data Grid ## 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](https://github.com/Comcast/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. {% hint style="info" %} Jspreadsheet (previously known as jExcel) has been retired. Please use the Data Grid widget instead. {% endhint %} ## 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.
Data Grid widget in read-only view showing plate layout data with row and column headers

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
Data Grid widget in edit view showing toolbar, interactive cells, and file import drop zone

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. {% hint style="info" %} All cells in the Data Grid are plain-text editors. For rich formatting, formulas, or charts, use the [SpreadJS Table](https://docs.labii.com/widgets/section-widgets/office/table) widget instead. {% endhint %} ### 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 {% hint style="info" %} 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. {% endhint %} {% hint style="success" %} 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. {% endhint %} ### 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: {% stepper %} {% step %} Enter edit mode by clicking the **Edit** button on the section {% endstep %} {% step %} 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 {% endstep %} {% step %} The file contents are loaded into the grid, replacing any existing data Review the imported data and make corrections as needed {% endstep %} {% step %} Click **Save** to persist the imported data to the record {% endstep %} {% endstepper %} {% hint style="warning" %} 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. {% endhint %} ### 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](https://docs.labii.com/widgets/section-widgets/office/table) widget for large datasets requiring formulas and chart support ## References ### External Resources * [react-data-grid on GitHub](https://github.com/Comcast/react-data-grid) — Underlying open-source library documentation