Initial Release — help-frontend

Dr. Frontend

Inline Edit Table

Edit rows in place instead of navigating to separate edit pages. Adapted from the MOOSE inline editing pattern, rebuilt with @cs-coe registry components.

moose.roche.commoose-ui-aimoose-monorepoPMDA FAIR team

Live Demo

Click any cell to edit in place. Press Enter to save, Esc to cancel.

CRISPR Screen Alpha
BRCA1
HEK293
Active
High
0.94
Dr. Chen
2026-06-10
RNAi Knockdown Beta
TP53
MCF7
Completed
Medium
0.87
Dr. Patel
2026-06-08
Base Edit Gamma
KRAS
A549
Active
High
0.91
Dr. Müller
2026-06-12
Prime Edit Delta
EGFR
HeLa
Paused
Low
0.72
Dr. Kim
2026-05-30
CRISPRi Screen Epsilon
MYC
U2OS
Active
Medium
0.88
Dr. Santos
2026-06-11
Antibody Display Zeta
HER2
CHO-K1
Completed
High
0.96
Dr. Chen
2026-06-05
siRNA Library Eta
VEGF
HEK293
Failed
Medium
0.34
Dr. Patel
2026-06-01
TAL Effector Theta
PTEN
MCF7
Active
Low
0.79
Dr. Müller
2026-06-14
8 experiment(s)0 edit(s) this session

Features

Click-to-edit cells

Click any cell to switch to edit mode. Text fields use an input, enums use a dropdown. Enter saves, Escape cancels.

Undo history

Every edit is tracked. Click Undo to revert the last change, with a counter showing total edits this session.

Row selection & bulk delete

Select rows with checkboxes and delete them in bulk. Header checkbox toggles all.

Add new rows

Add a row with defaults and immediately start editing the name field.

Sorting & search

Column headers sort on click. Global search filters across all text fields.

Components Used

@cs-coe/table
Data table layout
@cs-coe/input
Inline text editing
@cs-coe/button
Toolbar actions
@cs-coe/checkbox
Row selection
@cs-coe/badge
Status & priority
@cs-coe/tooltip
Action hints

Also uses @tanstack/react-table for sorting, filtering, and column management.

Why Inline Editing?

The Moose UI pattern replaces the traditional "click row → open edit page → save → navigate back" flow with direct cell editing. This reduces context switches and keeps the user in the data view.

Best suited for tables where users frequently update individual fields (status, priority, scores) rather than editing entire records at once.

Origin: MOOSE

This example adapts the inline-editing UX frommoose-ui-ai, a redesign of the MOOSE interface byLydia Suarez Lopez. The pattern comes from theSamples tab, where researchers edit sample metadata directly in the table instead of opening a separate edit page.

MOOSE — Metadata for Organized OMICS Studies and Experiments — is a Laboratory Information Management System (LIMS) for pre-clinical omics research at Roche, built and maintained by thePMDA FAIR team.

The original UI is built on @rds/react-components(Roche Design System). This showcase reimplements the same interaction with@cs-coe registry components so it fits the CS CoE design system.