Tables

How tables work

A table is made up of columns and rows:

• Columns define the type of information (e.g. price, location)

• Rows represent individual entries (e.g. one property or one region)

You can configure which columns are shown and how they are displayed.

Configuration options

Column selection (up to 5)

• You can select up to 5 columns to display

• Each column represents one attribute of your dataset

Example:

• Location

• Property type

• Average price

• Living area

• Number of listings

Best practice:

• Focus on the most relevant information

• Avoid overcrowding the table with too many columns

Reordering columns (drag and drop)

• Columns can be rearranged via drag and drop

Use this to:

• Place the most important information first

• Create a logical reading flow (e.g. location → price → size)

Example order:

1. Location

2. Property type

3. Average price

4. Living area

Layout options

Show numeration

Adds a numbering column at the beginning of the table.

Example:

1. Berlin

2. Hamburg

3. Munich

Use it when:

• Ranking items (e.g. top markets, most expensive regions)

• You want to emphasize order or position

Avoid it when:

• The order is not meaningful

Auto-size columns based on content

Adjusts column widths based on the content length.

• Enabled: Columns adapt to text length

• Disabled (default): All columns have equal width

Use it when:

• Content length varies significantly (e.g. long location names vs. short values)

Avoid it when:

• You want a more uniform, grid-like appearance

Handling large tables

• When a table contains more than 10 rows, a button is automatically shown

• This allows users to expand and view all rows

Best practice:

• Keep the initial view concise

• Ensure the most important rows appear first

Tables in dashboards

Tables behave differently from charts when placed on a dashboard.

Special case:

• Tables always span the full width of the content area

• They are not displayed side by side with other components

This means:

• A table will always appear as a separate block

• Other charts (e.g. line or bar charts) will be placed above or below, not next to it

Best practice:

• Place tables after charts when you want to provide detailed data behind a visual

• Use tables as a deep-dive element, not as the primary visual highlight

Example layout:

• Floating bar chart (price range)

• Bar chart (average price by property type)

• Table (detailed breakdown by region)

This structure helps users first understand trends visually and then explore the exact values in the table.

Footnote field

You can add additional context below the table.

Formatting options:

• Bold

• Links

Use the footnote for:

• Data sources

• Definitions of columns

• Methodology or calculation notes

Example:

• “Data based on Engel & Völkers market reports 2025.”

• “Average price refers to median listing price per square meter.”

Best practices

Do’s

• Select only the most relevant columns (max 5)

• Order columns from most to least important

• Use clear and consistent column labels

• Use numeration when ranking or ordering matters

• Use footnotes to clarify data sources or definitions

Don’ts

• Do not overload the table with too many columns

• Do not use unclear or abbreviated column names

• Do not mix unrelated data in one table

• Do not rely on column order without clear labeling

• Do not ignore readability when using long text values

Example setup

Scenario: Comparison of key real estate markets

• Columns:

  • Location

  • Property type

  • Average price (€)

  • Living area (m²)

  • Number of listings

• Column order: Location → Property type → Price → Size → Listings

• Show numeration: Enabled

• Auto-size columns: Enabled

This setup allows users to quickly compare markets while keeping the table structured and easy to scan.