Which one do I need?

Read-heavy table or editable grid: pick between ui-datatable and ui-spreadsheet.

Two packages, two tables, one question. They look alike and behave nothing alike, so choose by what your users do with the rows, not by how the screen looks.

Reading rows? ui-datatable. Typing into cells? ui-spreadsheet. That one sentence settles most cases. The rest of this page is for the other cases.

The read-heavy table

ui-datatable

Reference
Client
Role
Status
Amount
PRJ-001
Riverside Studio
Designer
Confirmed
$180
PRJ-002
Northgate Labs
Developer
Pending
$240
PRJ-003
Harbour Media
Copywriter
Confirmed
$150
PRJ-004
Eastfield Group
Designer
Completed
$210
PRJ-005
Southbank Digital
Consultant
Pending
$320

DataTable owns a row model. You hand it columns and data; it derives sort order, selection, visibility, pinning, pagination and CSV export, and it never edits a value. Rows are things your users scan, filter and take away. Think back-office lists: orders, invoices, members, logs.

The editable grid

ui-spreadsheet

NameReferenceStock

Spreadsheet owns a keyboard grid. Cells hold real inputs, arrow keys and tab move focus the way a spreadsheet does, paste accepts a whole block of cells, rows drag into a new order, and virtualisation keeps thousands of rows smooth. It never sorts or mutates your data; it reports intent and you update the array. Think bulk entry: stock counts, price lists, imports someone tidies by hand.

Choose by behaviour

Your users…Package
Scan, sort and filter rowsui-datatable
Export to CSVui-datatable
Expand a row for detailui-datatable
Type into cells, tab across, paste a blockui-spreadsheet
Reorder rows by handui-spreadsheet
Edit thousands of rows without paginationui-spreadsheet

Edge cases

  • A mostly read-only table with one editable column is still ui-datatable: render an input in that column's cell. Reach for ui-spreadsheet when editing is the point of the screen, not an exception on it.
  • A small editable table inside a form is ui-spreadsheet, wrapped in Spreadsheet.NestedInput.
  • Both on one screen is normal: a DataTable list that opens into a Spreadsheet editor. They share the same tokens, so they already match.

Both ship as source, so if your case sits between the two you can read both implementations before you commit. Start from either quick start: ui-datatable · ui-spreadsheet