Components advanced

Table

A simple read‑only data table for displaying tabular data. Use DataGrid instead if pagination, sorting, search, or inline editing are required.

Atualizado Feb 19, 2026

Table

A simple read‑only data table for displaying tabular data. Use DataGrid instead if 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

dataBinding

Data binding to populate table rows from data source. 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

Etiquetas

table advanced displaying simple static data small datasets

Componentes Relacionados

Pronto para criar?

Comece a criar seu app gratuitamente com o Qödiak.

Começar Gratuitamente

Artigos Relacionados