Blocks - Tabel
Blocks - Tabel
Met het Tabel-block kunt u uw data weergeven in een tabel. Dit is ideaal om een overzichtelijke lijst met data te tonen. Kies welke data u wilt weergeven in uw tabel en pas hier eventueel filters op toe. Stel eventueel de kolomuitlijning in of voeg eenheden aan de kolom toe middels voor- en/of achtervoegsels.
![block_table.png 623](https://files.readme.io/d14e7ce-block_table.png)
Voorbeeld - Tabel-block
Algemeen
- Geef een titel.
- Geef een beschrijving.
- Kies de achtergrondkleur.
- Kies de taal.
- Kies of er, en hoeveel decimalen getoond moeten worden.
Data
- Kies de gewenste Dataset uit het Project waar de App in zit.
- Kies een hoofd-attribuut (de key).
- Kies een waarde-attribuut.
- Kies de operator:
- Sum: het totale aantal van de attribuutwaarden
- Count: het aantal (verschillende) attribuutwaarden
- Min: de laagste waarde
- Max: de hoogste waarde
- Average: de gemiddelde waarde
- Median: de middelste waarde
- Kies de sortering (onbepaald, oplopend of aflopend).
Filter
- Kies eventueel een attribuut om op te filteren.
- Kies een filter-operator:
- Gelijk aan
- Niet gelijk aan
- Als
- Niet als
- Groter dan
- Groter dan of gelijk aan
- Kleiner dan
- Gelijk aan of kleiner dan
- En - alleen bij YAML
- Of - alleen bij YAML
- Vul de filterwaarde in.
Kolommen
- Geef kolom 1 een titel.
- Kies de procentuele breedte van kolom 1, kolom 2 zal de rest omvatten.
- Kies de tekstuitlijning van kolom 1 (links, midden of rechts).
- Geef kolom 2 een titel.
- Kies de tekstuitlijning van kolom 2 (links, midden of rechts).
Opmaak
- Vul eventueel een eenheid in als voorvoegsel voor kolom 2.
- Vul eventueel een eenheid in als achtervoegsel voor kolom 2.
YAML
Aanvullende opties met YAML-formulier
Bepaalde variabelen zijn niet instelbaar vanuit het reguliere formulier. Onderstaand is daarom het volledige YAML-formulier te vinden om ook deze instellingen te kunnen gebruiken.
Let op! Deze is bruikbaar voor de nieuwste versies van Apps en Blocks, beschikbaar vanaf Release 30.
- Start door het betreffende Block in de Editor te bewerken.
- Wissel onderaan naar het YAML-formulier.
- Kopieer onderstaande code en plak deze in de Editor.
- Vul de variabelen in door overal number en string met de gewenste waarde te vervangen en bij de meerkeuzevariabelen alleen de gewenste optie te laten staan. Onder het onderstaande YAML-formulier is ter referentie een tabel te vinden met de veldtypen en standaardwaarden, welke gebruikt worden als een variabele volledig weggelaten wordt. Beschrijvingen zullen nader worden toegevoegd.
- Boolean: kies true om weer te geven of te gebruiken, kies false om dit niet te doen.
- String: geef een waarde op, dit kan o.a. een optie zoals in onderstaand YAML-formulier zijn, maar ook een stuk tekst of hex-waarde. Let op! Waarden van dit type moeten tussen aanhalingstekens worden gezet (bv. "#ffffff").
- Number: geef een getal als waarde op (vaak in pixels).
version: '1.0'
table:
liveTable: true | false
title: string
description: string
style:
backgroundColor: string
layout:
column1:
textAlign: left | center | right
title: string
width: number
column2:
prefix: string
suffix: string
textAlign: left | center | right
title: string
format:
decimals: number
locale: string
data:
datasetId: string
alias:
<key>: "<value of your choice>"
operator: sum | count | min | max | avg | median
order: asc | desc
percentage: true | false
limit: number
attributes:
key: string
value: string
filter:
enable: true | false
percentage: true | false
operator: '= | != | like | notlike | > | >= | < | =< | and | or'
attribute: string
value: string
filters:
- operator: '= | != | like | notlike | > | >= | < | =< | and | or'
attribute: string
value: string
filters:
- operator: '= | != | like | notlike | > | >= | < | =< | and | or'
attribute: string
value: string
Veld | Type | Beschrijving | Default-waarde indien van toepassing | Eenheid indien van toepassing |
---|---|---|---|---|
liveTable | boolean | Of dynamische filters toegepast mogen worden | true | |
title | string | Titel | [operator] op [values] van [dataset] | |
description | string | Beschrijving | ||
backgroundColor | string (hex) | Achtergrondkleur | # ffffff | |
column1.textAlign | string | Uitlijning van de tekst in de eerste kolom | left | |
column1.title | string | Titel van de eerste kolom | value of attributes.key | |
column1.width | number | Breedte van de eerste kolom | 50 | % |
column2.prefix | string | De eenheid als voorvoegsel | ||
column2.suffix | string | De eenheid als achtervoegsel | ||
column2.textAlign | string | Uitlijning van de tekst in de tweede kolom | ||
column2.title | string | Titel van de tweede kolom | value of attributes.value | operator "count" | |
decimals | number | Het aantal decimalen | 0 | px |
locale | string | Taal | en | |
datasetId | string | ID van de dataset | ||
percentage | boolean | Of de waarden als percentage getoond moeten worden | false | |
limit | number | Het maximaal aantal records wat in de tabel getoond mag worden | ||
alias. | string | Alias op de data-attribuutnamen. is de attribuutnaam. De waarde die hier aan wordt gegeven, in "", is de alias | ||
order | string | De sortering | undefined | |
attributes.key | string | Attribuut voor de groepering van de data | ||
attributes.value | string | Het waarde-attribuut | ||
filter.enable | boolean | Of er een filter toegepast dient te worden | false | |
filter.attribute | string | Het attribuut waarop gefilterd dient te worden | ||
filter.operator | string | Operator waarmee gefilterd dient te worden | ||
filter.value | string | Filterwaarde | ||
filters[0].operator | string | Operator wanneer er meervoudige filters worden toegepast | ||
filters[0].attribute | string | Attribuut wanneer er meervoudige filters worden toegepast | ||
filters[0].value | string | Attribuutwaarde wanneer er meervoudige filters worden toegepast |
Voorbeelden
Instellen limiet
Onderstaand een voorbeeld van een YAML voor een tabel, waarmee een limiet op het aantal records ingesteld kan worden. Deze kun je hergebruiken door de dataset-id, attribuut-definities en titels te vervangen.
version: "1.0"
table:
liveTable: true
style:
backgroundColor: "rgb(255,255,255)"
layout:
column1:
title: "Provincie"
column2:
textAlign: "right"
title: "Bevolkingsdichtheid"
suffix: "inwoners per km2"
format:
locale: "nl"
data:
datasetId:
id: "2b63fd25-b46b-436f-882f-bf23d8923f7c"
name: "Provinciekaart"
operator: "sum"
order: "asc"
limit: 5
attributes:
key: "provincie"
value: "bevolkingsdichtheid"
Meervoudig filter
Voor een voorbeeld van hoe je meervoudige filters in kunt stellen zie deze handleiding.
Updated 10 months ago