Metrics/KPI en Data tables

Grafieken, kaarten, tabellen en kalender zijn standaard weergaves. Er liggen een heleboel extra parameters op u te wachten in de documentatie. Intussen zijn een heleboel andere widgets net zo interessant als de belangrijkste.

Voor meer informatie kunt u een kijkje nemen naar de widget list .

Een dataset oppikken

Om metrics, KPI, geavanceerde kaarttooltips en meer te illustreren, gaan we een dataset gebruiken die allemaal regelmatige rapporten van de Franse spoorwegmaatschappij sinds 2011 bevatten. Deze dataset bevat voor elke TGV (hogesnelheidstrein) lijn (100 lijnen), het aantal geplande treinen per maand, het aantal treinen dat het station niet heeft verlaten en het aantal treinen dat te laat is binnengekomen.

Dataset-ID: regularite-mensuelle-tgv U kunt het opzoeken op data.opendatasoft.com Deze dataset vervolgens toevoegen aan uw domein (Nieuwe dataset, Een bron uit het Opendatasoft-netwerk toevoegen, de dataset selecteren, opslaan, publiceren)

Maak enkele KPI's aan

Om metrics / KPI aan te maken, gebruiken we odsAggregation, om de som, het gemiddelde, het minimum, het maximum van een dataveld te berekenen. Op basis van de context zullen de metrics dynamisch alles updaten volgens het surfgedrag van de gebruiker (zoekopdrachten, filters).

Laten we vanuit de nieuwe pagina een context krijgen uit deze dataset. De eenvoudigste manier is om naar de explore/cataloguspagina te gaan. Ga naar de dataset en vervolgens naar de tabelweergave, kopieer en plak de widgetcode uit de deel-koppelingen hieronder:

<ods-dataset-context
        context="regularitemensuelletgv"
        regularitemensuelletgv-dataset="regularite-mensuelle-tgv">

        <ods-table context="regularitemensuelletgv"></ods-table>

</ods-dataset-context>

Boven de tabelweergave zullen we een teller toevoegen die gebaseerd is op het veld nombre_de_trains_programmes (aantal geplande treinen). Laten we het aantal treinen nemen dat sinds 2011 in Frankrijk gepland is.

Met odsAggregation zijn de parameters:
  • de naam van de variabele waarin het aggregatieresultaat zal worden opgeslagen

  • de context om op te werken

  • de functie

  • de uitdrukking (de naam van het veld)

Met een filter aantal om dit correct weer te geven in een HTML "span" zou u iets gelijkaardigs moeten krijgen aan dit:

<div class="container">

    <ods-dataset-context
                         context="regularitemensuelletgv"
                         regularitemensuelletgv-dataset="regularite-mensuelle-tgv">

        <div ods-aggregation="myvar"
             ods-aggregation-context="regularitemensuelletgv"
             ods-aggregation-function="SUM"
             ods-aggregation-expression="nombre_de_trains_programmes">

                <span>Scheduled train : {{ myvar | number }}</span>

        </div>

        <br/>

        <ods-table context="regularitemensuelletgv"></ods-table>

    </ods-dataset-context>

</div>

Er wordt een aantal (ongeveer 1,7 miljoen) weergegeven aan het begin van de pagina die reeds CSS nodig heeft om te worden beklemtoond. Cijfers worden vaak afgerond in een vakje met een belangrijke grootte en gewicht van het lettertype.

Voeg deze CSS-code toe aan uw pagina:

.kpi {
    padding: 2px 30px; /* Give some air to the digits */
    border: 1.5px solid #010201; /* the border */
    border-radius: 5px; /* rounded corners */
    font-size: 2em; /* bigger font */
    font-weight: 500; /* thicker font */
    margin: 10px 5px; /* give some air around the KPI */
}

En voeg de klasse kpi toe aan uw span tag.

Sla op, hernieuw en zie of het iets beter is.

Alvorens verder te gaan met CSS en vooral responsieve code, laten we 2 extra cijfers toevoegen: aantal geannuleerde treinen (nombre_de_trains_annules) en aantal treinen met vertraging (nombre_de_trains_en_retard_a_l_arrivee)

<div ods-aggregation="myvar"
     ods-aggregation-context="regularitemensuelletgv"
     ods-aggregation-function="SUM"
     ods-aggregation-expression="nombre_de_trains_programmes">
        <span class="kpi">Scheduled train : {{ myvar | number }}</span>
</div>

<br/>

<div ods-aggregation="myvar"
     ods-aggregation-context="regularitemensuelletgv"
     ods-aggregation-function="SUM"
     ods-aggregation-expression="nombre_de_trains_annules">
        <span class="kpi">Canceled train : {{ myvar | number }}</span>
</div>

<br/>

<div ods-aggregation="myvar"
     ods-aggregation-context="regularitemensuelletgv"
     ods-aggregation-function="SUM"
     ods-aggregation-expression="nombre_de_trains_en_retard_a_l_arrivee">
        <span class="kpi">Delayed train : {{ myvar | number }}</span>
</div>

<br/>

<ods-table context="regularitemensuelletgv"></ods-table>

Resultaat:

../../../_images/advanced__kpi-1.png

Het werkt, maar alle cijfers staan los van elkaar. We kunnen filters toevoegen om ze dynamisch te maken, afhankelijk van gebruikersfilters, enz. maar we kunnen ermee niets berekenen. Het zou interessant zijn om het percentage geannuleerde of vertraagde treinen uit het totaal te hebben.

Om dit te doen, moet u ods-aggregation koppelen aan verschillende variabele namen.

Het moet er zo uit zien:

    <div ods-aggregation="total"
     ods-aggregation-context="regularitemensuelletgv"
     ods-aggregation-function="SUM"
     ods-aggregation-expression="nombre_de_trains_programmes">
    <div ods-aggregation="canceled"
         ods-aggregation-context="regularitemensuelletgv"
         ods-aggregation-function="SUM"
         ods-aggregation-expression="nombre_de_trains_annules">
        <div ods-aggregation="delayed"
             ods-aggregation-context="regularitemensuelletgv"
             ods-aggregation-function="SUM"
             ods-aggregation-expression="nombre_de_trains_en_retard_a_l_arrivee">

                <span class="kpi">Scheduled : {{ total | number }}</span>
                <span class="kpi">Canceled : {{ canceled | number }}</span>
                <span class="kpi">Delayed : {{ delayed | number }}</span>
        </div>
    </div>
</div>

Nu is het met AngularJS-uitdrukking mogelijk om percentages tussen elke waarde te berekenen:

<span class="kpi">Scheduled : {{ total | number }}</span>
<span class="kpi">Canceled : {{ canceled | number }}</span>
<span class="kpi">Delayed : {{ delayed | number }}</span>
<span class="kpi">% Canceled : {{ canceled / total * 100 | number : 2 }}%</span>
<span class="kpi">% Delayed : {{ delayed / total * 100 | number : 2 }}%</span>

Opmerking

| number : 2 is de AngularJS-filter om numerieke waarden mooi af te drukken. De optionele parameter 2 is om te beperken tot slechts 2 decimalen

Alvorens verder te gaan, laten we de HTML-code opkuisen om CSS te kunnen toepassen voor responsieve weergave, verschillende groottes lettertype tussen de titel en de waarde, enz.:

<div class="row">
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">
            <div class="kpi-title">
                Scheduled
            </div>
            <div class="kpi-value">
                {{ total | number }}
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">
            <div class="kpi-title">
                Canceled
            </div>
            <div class="kpi-value">
                {{ canceled | number }}
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">
            <div class="kpi-title">
                Delayed
            </div>
            <div class="kpi-value">
                {{ delayed | number }}
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">
            <div class="kpi-title">
                % Canceled
            </div>
            <div class="kpi-value">
                {{ canceled / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">
            <div class="kpi-title">
                % Delayed

            </div>
            <div class="kpi-value">
                {{ delayed / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-4">
        <div class="kpi">

            <div class="kpi-title">
                On time
            </div>
            <div class="kpi-value">
                {{ total - delayed - canceled | number }}
            </div>
        </div>
    </div>
</div>

En vervang de CSS:

.kpis {
    display: inline-flex;
}

.kpi {
    text-align: center;

    padding: 5px 0px;
    margin-bottom: 10px;
    height: 70px;

    border: 1.5px solid #010201; /* the border */
    border-radius: 5px; /* rounded corners */
}

.kpi-title {
    font-size: 1em; /* bigger font */
    font-weight: 400; /* thicker font */
}

.kpi-value {
    font-size: 2em; /* bigger font */
    font-weight: 500; /* thicker font */
}

.kpi-value-unit {
    font-size: 1.5rem; /* bigger font */
    font-weight: 400; /* thicker font */
}

Sla op, hernieuw, zie:

../../../_images/advanced__kpi-2.png

Geef uw KPI - ng-klasse kleur

De ng-class richtlijn is zeer gemakkelijk wanneer een HTML-element stijl moet worden gegeven afhankelijk van een waarde, de context, een uitdrukking of alle andere dynamische zaken die gebruikt kunnen worden in AngularJS-uitdrukking.

Bijvoorbeeld: om een drempel voor onze cijfers te definiëren, groen indien het percentage geannuleerde treinen minder bedraagt dan 0,20ù en rood wanneer dit percentage groter is, voeg dit toe aan uw element:

<div class="col-md-2 col-sm-3 col-xs-4">
    <div class="kpi" ng-class="{'good' : canceled / total * 100 < 0.2, 'bad' : canceled / total * 100 >= 0.2}">
        <div class="kpi-title">
            % Canceled
        </div>
        <div class="kpi-value">
            {{ canceled / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
        </div>
    </div>
</div>

En deze CSS:

.good {
    color: #55cd61;
    border-color: #55cd61;
}

.medium {
    color: #ff9c22;
    border-color: #ff9c22;
}

.bad {
    color: #e50000;
    border-color: #e50000;
}

Sla op, hernieuw en zie dat ons cijfer nu rood is (de "slechte" CSS-klasse is gebruikt)

Om het dynamisch gedrag duidelijk te zien, laten we enkele filters toevoegen links van de tabel (op de tweede lijn). Om dit te doen:
  • voeg een div met de klasse row om de tabel te omringen

  • voeg een div met col-md-9 rond de tabel

  • voeg een ods-facets widget met 2 ods-facet voor filters datum en vertrek

  • omring ods-facets met een div gestyled met col-md-3

  • voeg optioneel enkele ods-box gestyled div om blokken met een witte achtergrond te omringen

Het zou er zo moeten uitzien:

<div class="row">
    <div class="col-md-3">
        <div class="ods-box">
            <ods-facets context="regularitemensuelletgv">
                <h2>
                    Date
                </h2>
                <ods-facet name="date"></ods-facet>
                <h2>
                    Origin station
                </h2>
                <ods-facet name="depart"></ods-facet>
            </ods-facets>
        </div>
    </div>
    <div class="col-md-9">
        <div class="ods-box">
            <ods-table context="regularitemensuelletgv"></ods-table>
        </div>
    </div>
</div>

Sla op, hernieuw en zie hoe het zich gedraagt wanneer filters worden geselecteerd. In 2013 heeft Paris EST Station minder dan 0,20% geannuleerde treinen gehad. Neem eens een kijkje.

../../../_images/advanced__kpi-ngclass-1.png ../../../_images/advanced__kpi-ngclass-2.png

Opmerking

ng-class syntax is, omringd door haakjes, de CSS-klasse tussen aanhalingstekens, gevolgd door : vervolgens de AngularJS-uitdrukking:

{ 'CSS-klasse' : AngularJS uitdrukking, ... }

Er kunnen verschillende klassen en uitdrukkingen worden gespecificeerd. Alle uitdrukkingen worden getest van links naar rechts.

Vergelijk met filters: beklemtoon verschillen met kleuren

Het is interessant om de volledige dataset te vergelijken en een gefilterde weergave door de gebruiker te hebben en te zien of de cijfers (vooral percentages) verschillend, groter of kleiner zijn.

Het plan is om 2 contexten te hebben, één die de volledige dataset vertegenwoordigt en één die gefilterd kan worden door de gebruiker. Eenmaal de filter is toegepast, wanneer het cijfer groter of kleiner is dan het cijfer voor de volledige dataset, zal dit worden beklemtoond door middel van een kleur.

Om dit te doen, hebt u het volgende nodig:
  • een secundaire context

  • plug ods-facets en ods-table op deze secundaire context

  • bereken hetzelfde cijfer voor beide contexten

  • voeg het secundaire cijfer toe WANNEER en ENKEL WANNEER een filter is geselecteerd

  • configureer de ng-class om volledige en gefilterde cijfers te vergelijken

Start!

Twee contexten, één dataset:

<ods-dataset-context
                     context="regularitemensuelletgv,regularitemensuelletgvfiltered"
                     regularitemensuelletgv-dataset="regularite-mensuelle-tgv"
                     regularitemensuelletgvfiltered-dataset="regularite-mensuelle-tgv">

Blokken vol cijfers zouden er nu zo moeten uitzien:

<div ods-aggregation="total"
     ods-aggregation-context="regularitemensuelletgv"
     ods-aggregation-function="SUM"
     ods-aggregation-expression="nombre_de_trains_programmes">
    <div ods-aggregation="canceled"
         ods-aggregation-context="regularitemensuelletgv"
         ods-aggregation-function="SUM"
         ods-aggregation-expression="nombre_de_trains_annules">
        <div ods-aggregation="delayed"
             ods-aggregation-context="regularitemensuelletgv"
             ods-aggregation-function="SUM"
             ods-aggregation-expression="nombre_de_trains_en_retard_a_l_arrivee">

            <div ods-aggregation="totalfiltered"
                 ods-aggregation-context="regularitemensuelletgvfiltered"
                 ods-aggregation-function="SUM"
                 ods-aggregation-expression="nombre_de_trains_programmes">
                <div ods-aggregation="canceledfiltered"
                     ods-aggregation-context="regularitemensuelletgvfiltered"
                     ods-aggregation-function="SUM"
                     ods-aggregation-expression="nombre_de_trains_annules">
                    <div ods-aggregation="delayedfiltered"
                         ods-aggregation-context="regularitemensuelletgvfiltered"
                         ods-aggregation-function="SUM"
                         ods-aggregation-expression="nombre_de_trains_en_retard_a_l_arrivee">

                        <div class="row">
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        Scheduled
                                    </div>
                                    <div class="kpi-value">
                                        {{ totalfiltered | number }}
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ total | number }})
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        Canceled
                                    </div>
                                    <div class="kpi-value">
                                        {{ canceledfiltered | number }}
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ canceled | number }})
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        Delayed
                                    </div>
                                    <div class="kpi-value">
                                        {{ delayedfiltered | number }}
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ delayed | number }})
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        % Canceled
                                    </div>
                                    <div class="kpi-value">
                                        {{ canceledfiltered / totalfiltered * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ canceled / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>)
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        % Delayed

                                    </div>
                                    <div class="kpi-value">
                                        {{ delayedfiltered / totalfiltered * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ delayed / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>)
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-4">
                                <div class="kpi">
                                    <div class="kpi-title">
                                        On time
                                    </div>
                                    <div class="kpi-value">
                                        {{ totalfiltered - delayedfiltered - canceledfiltered | number }}
                                    </div>
                                    <div class="kpi-value-reference">
                                        ({{ total - delayed - canceled | number }})
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Pas CSS aan door deze klassen te updaten of toe te voegen:

.kpi {
    height: 90px;
    /* ... */
}

.kpi-value-reference {
    font-size: 1em; /* bigger font */
    font-weight: 400; /* thicker font */
}

.kpi-value-unit {
    font-size: 0.7em; /* bigger font */
    /* ... */
}

Laten we tot slot de cijfers % vertraagd en % geannuleerd kleur geven. Wanneer het gefilterde resultaat groter is dan het totaal gemiddelde, geef het weer in het rood. Zo niet, wanneer kleiner (beter) is, geef het weer in het groen.

<div class="col-md-2 col-sm-3 col-xs-4">
    <div class="kpi" ng-class="{
                               'good': (canceledfiltered / totalfiltered * 100) < (canceled / total * 100),
                               'bad': (canceledfiltered / totalfiltered * 100) > (canceled / total * 100),
                               }">
        <div class="kpi-title">
            % Canceled
        </div>
        <div class="kpi-value">
            {{ canceledfiltered / totalfiltered * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
        </div>
        <div class="kpi-value-reference">
            ({{ canceled / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>)
        </div>
    </div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
    <div class="kpi" ng-class="{
                               'good': (delayedfiltered / totalfiltered * 100) < (delayed / total * 100),
                               'bad': (delayedfiltered / totalfiltered * 100) > (delayed / total * 100),
                               }">
        <div class="kpi-title">
            % Delayed

        </div>
        <div class="kpi-value">
            {{ delayedfiltered / totalfiltered * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>
        </div>
        <div class="kpi-value-reference">
            ({{ delayed / total * 100 | number : 2 }}<span class="kpi-value-unit"> %</span>)
        </div>
    </div>
</div>

Sla op, hernieuw en probeer met het jaar 2015:

../../../_images/advanced__kpi-ngclass-3.png

Maak een datatabel aan

odsAnalysis krijgt de analyse van één of verschillende aggregatie voor elke waarde indien een veld. Het gezien worden net zoals een grafiek, maar in plaats van curves, kolommen of taartpunten weer te geven, geeft odsAnalysis elke waarde en bent u vrij om deze in een tabel of andere uitdrukking weer te geven.

Eerst testen we het resultaat door de correcte analyse in te stellen in het analysetabblad van de dataset. Wat interessant zou kunnen zijn, is om de tabel van de top 10 regelmatige stations weer te geven. Om dit te doen:

  • X-as : "départ" (origin station)
    • 4 reeksen: - gemiddelde regelmatigheid (Régularité) - gemiddeld aantal geplande treinen (nombre_de_trains_programmes) - gemiddeld aantal geannuleerde treinen (nombre_de_trains_annules) - gemiddeld aantal treinen met vertraging (nombre_de_trains_en_retard_a_l_arrivee)

  • sorteer per regelmatigheidsreeks

  • Aantal punten: maximaal 10

../../../_images/advanced__data-table-1.png

Het doel is om deze exacte analyse te reproduceren met odsAnalysis. Ter herinnering: gelieve een kijkje te nemen in de documentatie hier

odsAnalysis parameters:
  • ods-analysis: de naam van de variabele

  • ods-analysis-context: de context om op te werken

  • ods-analysis-max: maximaal 10 elementen

  • ods-analysis-x: het veld om op te werken (elke aggregatie zal berekend worden voor alle waarden van dit veld)

  • ods-analysis-serie-xxx: definieer een reeks met de naam xxx op basis van een uitdrukking (het veld) en een functie (AVG, MAX, MIN, SUM etc...)

  • ods-analysis-sort: sorteer op een reeks door de naam of -naam op te geven om de sortering om te keren

Alvorens naar de code (HTML) te gaan, neem een kijkje naar het resultaat dat opgeslagen is in de variabele:

<div class="row">
    <div ods-analysis="results"
         ods-analysis-context="regularitemensuelletgvfiltered"
         ods-analysis-max="10"
         ods-analysis-x="depart"
         ods-analysis-serie-regularity="AVG(regularite)"
         ods-analysis-serie-scheduled="AVG(nombre_de_trains_programmes)"
         ods-analysis-serie-canceled="AVG(nombre_de_trains_annules)"
         ods-analysis-serie-delayed="AVG(nombre_de_trains_en_retard_a_l_arrivee)"
         ods-analysis-sort="regularity"
         >
        {{ results }}
    </div>
</div>

Pretty print het json-blok:

{
   "results":[
      {
         "scheduled":97.37288135593221,
         "canceled":0.2033898305084746,
         "regularity":94.60508474576272,
         "delayed":5.288135593220339,
         "x":"ST MALO"
      },
      {
         "scheduled":283.728813559322,
         "canceled":1.2203389830508475,
         "regularity":94.28813559322033,
         "delayed":16.135593220338983,
         "x":"NANCY"
      },
      {
         "scheduled":160.64406779661016,
         "canceled":0.559322033898305,
         "regularity":92.61186440677963,
         "delayed":11.677966101694915,
         "x":"QUIMPER"
      }
   ]
}

We hebben een resultaten json-lijst, elk blok heeft een x-waarde, het vertrekstation, en 4 aggregaties/waarden die overeenstemmen met onze reeksen. De AngularJS richtlijn ng-repeat laat toe de resultaten lijst te herhalen. Voor elk element drukken we een nieuwe lijn in de tabel af.

<div ods-analysis="tgvanalysis"
     ods-analysis-context="regularitemensuelletgvfiltered"
     ods-analysis-max="10"
     ods-analysis-x="depart"
     ods-analysis-serie-regularity="AVG(regularite)"
     ods-analysis-serie-scheduled="AVG(nombre_de_trains_programmes)"
     ods-analysis-serie-canceled="AVG(nombre_de_trains_annules)"
     ods-analysis-serie-delayed="AVG(nombre_de_trains_en_retard_a_l_arrivee)"
     ods-analysis-sort="regularity"
     >
    <table id="top10">
        <thead>
            <tr>
                <td>Position</td>
                <td>Train station</td>
                <td>Regularity</td>
                <td>Scheduled</td>
                <td>Canceled</td>
                <td>Delayed</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(i, result) in tgvanalysis.results">
                <td>
                    {{ i + 1 }}
                </td>
                <td>
                    {{ result.x }}
                </td>
                <td>
                    {{ result.regularity | number : 2 }}
                </td>
                <td>
                    {{ result.scheduled | number : 2 }}
                </td>
                <td>
                    {{ result.canceled | number : 2 }}
                </td>
                <td>
                    {{ result.delayed | number : 2 }}
                </td>
            </tr>
        </tbody>
    </table>
</div>

Enkele CSS om de HTML-tabel mooi te maken:

#top10 {
    margin: 20px auto;
}

#top10 thead > tr {
    background-color: #007396;
    color: white;
}

#top10 td {
    min-width: 100px;
    padding: 3px 10px;
    text-align: center;
}

#top10 tr:nth-child(even) {
    background-color: #ededed;
}

#top10 tr:hover{
    background-color:#ccc;
}

Sla op, hernieuw, speel met filters:

../../../_images/advanced__data-table-2.png