Table

A simple read‑only data table for displaying tabular information. Choose DataGrid when pagination, sorting, search, or inline editing are required.

Use Cases

• Displaying simple read‑only data tables
• Static data presentation
• Small datasets that don’t need pagination
• Quick data overview without interaction features

Properties

columns

Column definitions with header and field mapping. Type: array.

striped

Alternate row background colors for readability. Type: boolean. Default: true

bordered

Show cell borders. Type: boolean. Default: true

hover

Highlight rows on mouse hover. Type: boolean. Default: false

compact

Reduce padding for denser display. Type: boolean. Default: false

rows

Static data rows to display. Each row is an object whose keys match column field names. Not needed when using binding. Type: array.

binding

Query binding to populate rows from a data query. When set, rows come from query results. Column field names must match query column names. Type: object.

dataBinding

DEPRECATED — use binding instead. Type: object.

Best Practices

• Use Table for simple read‑only displays under 20 rows
• Use DataGrid instead if you need pagination, sorting, search, or editing
• Define columns with both header (display name) and field (data key)
• Enable striped for better row readability
• Use compact: true for dense data display

Common Mistakes

Using Table for large datasets

Why it's a problem: Table has no pagination - all rows render at once, causing performance issues

Fix: Use DataGrid for datasets over 20 rows or when pagination is needed

Using Table when user needs to interact with data

Why it's a problem: Table is read‑only with no built‑in sorting, search, or editing

Fix: Use DataGrid with enableSorting, enableSearch, or enableInlineEditing

Column field names don’t match data keys

Why it's a problem: Column defines field: ‘name’ but data has ‘product_name’ — cells show empty.

Fix: Column field values must exactly match the keys in rows objects or query column names.