Skip to content

Commit

Permalink
chore: update table-sortable in icore_open_docs to match main docs (#605
Browse files Browse the repository at this point in the history 
)

* chore: fix sortable table demo type errors

* chore: update icore_open_docs table-sortable to match main docs
  • Loading branch information
@ppvg
ppvg authored Jul 25, 2024
1 parent c92d0ec commit 840ddcf
Show file tree
Hide file tree
Showing 2 changed files with 234 additions and 40 deletions.
14 changes: 10 additions & 4 deletions docs/src/routes/(docs)/components/table-sortable/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
</script>

<script>
import { base } from "$app/paths";
import Code from "$lib/Code.svelte";
import SideMenu from "$lib/SideMenu.svelte";
Expand All @@ -26,10 +25,17 @@
.slice()
.sort(
sortDirection === "ascending"
? (a, b) => ("" + a[sortColumn]).localeCompare(b[sortColumn], undefined, { numeric })
: (a, b) => ("" + b[sortColumn]).localeCompare(a[sortColumn], undefined, { numeric }),
)
? (a, b) =>
sortColumn
? ("" + a[sortColumn]).localeCompare(String(b[sortColumn]), undefined, { numeric })
: 0
: (a, b) =>
sortColumn
? ("" + b[sortColumn]).localeCompare(String(a[sortColumn]), undefined, { numeric })
: 0,
);
/** @type {(column: 'firstname'|'lastname'|'age') => void} */
const toggleSort = (column) => {
if (column === sortColumn) {
sortDirection = sortDirection === "ascending" ? "descending" : "ascending";
Expand Down
260 changes: 224 additions & 36 deletions icore_open_docs/src/routes/(docs)/components/table-sortable/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,47 @@
</script>

<script>
import { base } from "$app/paths";
import Code from "$lib/Code.svelte";
import SideMenu from "$lib/SideMenu.svelte";
const demoTableRows = [
{ firstname: "Janine", lastname: "Hinde", age: 16 },
{ firstname: "Henk", lastname: "de Vries", age: 8 },
{ firstname: "Maria", lastname: "Lin", age: 32 },
{ firstname: "John", lastname: "Doe", age: 64 },
];
/** @type {'firstname'|'lastname'|'age'|undefined} */
let sortColumn = undefined;
/** @type {'ascending'|'descending'} */
let sortDirection = "ascending";
$: numeric = sortColumn === "age";
$: sortedDemoTableRows = demoTableRows
.slice()
.sort(
sortDirection === "ascending"
? (a, b) =>
sortColumn
? ("" + a[sortColumn]).localeCompare(String(b[sortColumn]), undefined, { numeric })
: 0
: (a, b) =>
sortColumn
? ("" + b[sortColumn]).localeCompare(String(a[sortColumn]), undefined, { numeric })
: 0,
);
/** @type {(column: 'firstname'|'lastname'|'age') => void} */
const toggleSort = (column) => {
if (column === sortColumn) {
sortDirection = sortDirection === "ascending" ? "descending" : "ascending";
} else {
sortColumn = column;
sortDirection = "ascending";
}
};
</script>

<svelte:head>
Expand All @@ -20,67 +58,190 @@
<li><a href="#requirements">Benodigdheden</a></li>
</ul>
</SideMenu>
<article class="visually-grouped">
<article>
<div>
<section id="introduction">
<h1>Sorteerbare tabel</h1>
<p>
Om inzicht te krijgen in de data kan het behulpzaam zijn om de gebruiker de data te laten
sorteren. Bijvoorbeeld op basis van op of aflopende data.
sorteren.
</p>

<h2>Benodigde stappen:</h2>
<ol>
<li>
Voeg een <code>button</code> toe binnen de <code>th</code> om sorteerelemeent klikbaar te
maken.
Voeg een <code>&lt;button></code> toe binnen de <code>&lt;th></code> van elke
sorteerbare kolom.
<ul>
<li>
Voeg de <code>&lt;button></code> alleen toe aan sorteerbare kolommen. Niet elke kolom
hoeft sorteerbaar te zijn.
</li>
<li>
Plaats de tekst van de kolomkop in de <code>&lt;button></code>, zodat de hele
kolomkop klikbaar is.
</li>
</ul>
</li>
<li>
Voeg binnen de knop een icoon toe indien gewenst. Voor meer informatie zie:
<a href="{base}/components/button-icon">Icoonknoppen</a>
Voeg binnen de knop van elke sorteerbare kolom een icoon toe. Voor meer informatie zie:
<a href="./icons.html">Iconen</a>.
<ul>
<li>
Voeg <code>aria-hidden="true"</code> aan de <code>&lt;span></code> van het icoon, om
te voorkomen dat het icoon in de toegankelijke naam van de knop opgenomen wordt.
</li>
<li>
Zorg dat de gebruikte Icoonset iconen heeft voor ongesoorteerde data, oplopend
gesorteerde data en aflopend gesorteerde data.
</li>
<li>
Gebruik bij voorkeur iconen met ingevulde driehoeken, bijvoorbeeld <span
class="icon icon-sortable">driehoeken omhoog en omlaag</span
>
voor ongesorteerd, <span class="icon icon-ascending">driehoek omhoog</span> voor
oplopend gesorteerd en <span class="icon icon-descending">driehoek omlaag</span> voor
aflopend gesorteerd.
</li>
</ul>
</li>
<li>
Voeg <code>abbr=""</code> toe aan de <code>&lt;th&gt;</code> met een korte duidelijke omschrijving
om de gebruikerservaring te verbeteren voor gebruikers die gebruik maken van een screenreader.
Voeg een toelichting over de sorteerknoppen toe aan de <code>&lt;caption></code>.
Bijvoorbeeld: "kolomkoppen met knoppen zijn sorteerbaar".
<ul>
<li>
Indien gewenst kan deze tekst visueel verborgen worden met de <code
>visually-hidden</code
> class.
</li>
<li>
Zorg ervoor dat er een punt of komma staat tussen de bestaande caption-tekst en deze
hint-tekst. Bij gebruik van een <code>visually-hidden</code> <code>&lt;>span></code>
kan bijvoorbeeld een komma toegevoegd worden voorafgaand aan de hint-tekst.
</li>
</ul>
</li>
<li>
Voeg een <code>abbr=""</code> toe aan de <code>&lt;th></code> indien de tekst in de
<code>&lt;th></code>
erg lang is.
<ul>
<li>
De kortere omschrijving in de <code>abbr=""</code> wordt gebruikt door screenreaders
bij het voorlezen van een cel in de bijbehorende kolom.
</li>
</ul>
</li>
<li>
Voeg JavaScript toe voor het dynamische gedrag van het component. De exacte
implementatie is afhankelijk van de context.
<ul>
<li>
Sorteer de inhoud van de tabel wanneer de gebruiker op één van de knoppen in de
kolomkoppen klikt.
</li>
<li>
Draai de sorteervolgorde om, wanneer de gebruiker op de knop klikt van de kolom waar
op dit moment op gesorteerd wordt.
</li>
<li>
Zorg ervoor dat elke kolomkop het juiste icoon heeft, afhankelijk van de huidige
sortering van de tabel.
</li>
<li>
Voeg <code>aria-sort="ascending"</code> / <code>aria-sort="descending"</code> toe
aan de <code>&lt;th></code> van de kolom waarop gesorteerd wordt.
</li>
</ul>
</li>
</ol>

<h2>Aandachtspunten</h2>
<ul>
<li>Dit element bevat momenteel geen JavaScript of logica voorbeeld.</li>
<li>
<strong
>Het is voor dit component nodig om het dynamische gedrag zelf via JavaScript te
implementeren.</strong
>
</li>
<li>De exacte implementatie in JavaScript is afhankelijk van de context.</li>
<li>
De manier waarop de data gesorteerd moet worden, kan afhankelijk zijn van het soort data
(bijvoorbeeld tekstueel of numeriek). Dit kan per kolom verschillen.
</li>
</ul>
</section>

<section id="examples">
<h2>Voorbeelden</h2>
<h3>Visueel voorbeeld:</h3>
<div class="horizontal-scroll">
<table>
<caption> Tabelvoorbeeld met sorteerbare data: </caption>
<table id="sortable-table-example">
<caption>
Tabelvoorbeeld met sorteerbare data
<span class="visually-hidden">, kolomkoppen met knoppen zijn sorteerbaar</span>
</caption>
<thead>
<tr>
<th scope="col" abbr="Ascending data">
<button title="Sort descending">
Descending <span class="icon icon-ascending"></span>
<th scope="col" aria-sort={sortColumn === "firstname" ? sortDirection : undefined}>
<button class="sort" on:click={() => toggleSort("firstname")}>
Voornaam
<span
aria-hidden="true"
class="icon"
class:icon-sortable={sortColumn !== "firstname"}
class:icon-ascending={sortColumn === "firstname" &&
sortDirection === "ascending"}
class:icon-descending={sortColumn === "firstname" &&
sortDirection === "descending"}
/>
</button>
</th>
<th
scope="col"
abbr="Achternaam"
aria-sort={sortColumn === "lastname" ? sortDirection : undefined}
>
<button class="sort" on:click={() => toggleSort("lastname")}>
Achternaam (met tussenvoegsel)
<span
aria-hidden="true"
class="icon"
class:icon-sortable={sortColumn !== "lastname"}
class:icon-ascending={sortColumn === "lastname" &&
sortDirection === "ascending"}
class:icon-descending={sortColumn === "lastname" &&
sortDirection === "descending"}
/>
</button>
</th>
<th scope="col" abbr="Descending data">
<button title="Sort ascending">
Ascending <span class="icon icon-descending"></span>
<th
scope="col"
class="number"
aria-sort={sortColumn === "age" ? sortDirection : undefined}
>
<button class="sort" on:click={() => toggleSort("age")}>
Leeftijd
<span
aria-hidden="true"
class="icon"
class:icon-sortable={sortColumn !== "age"}
class:icon-ascending={sortColumn === "age" && sortDirection === "ascending"}
class:icon-descending={sortColumn === "age" && sortDirection === "descending"}
/>
</button>
</th>
</tr>
</thead>

<tbody>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
{#each sortedDemoTableRows as row}
<tr>
<td>{row.firstname}</td>
<td>{row.lastname}</td>
<td class="number">{row.age}</td>
</tr>
{/each}
</tbody>
</table>
</div>
Expand All @@ -91,31 +252,58 @@
code={`
<div class="horizontal-scroll">
<table>
<caption>Tabelvoorbeeld met sorteerbare data:</caption>
<caption>
Tabelvoorbeeld met sorteerbare data
<span class="visually-hidden">, kolomkoppen met knoppen zijn sorteerbaar</span>
</caption>
<thead>
<tr>
<th scope="col" abbr="Ascending data">
<button title="Sort descending">Descending <span class="icon icon-ascending"></button>
<th scope="col">
<button>
Voornaam
<span class="icon icon-sortable" aria-hidden="true"></span>
</button>
</th>
<th scope="col" abbr="Achternaam">
<button>
Achternaam (met tussenvoegsel)
<span class="icon icon-sortable" aria-hidden="true"></span>
</button>
</th>
<th scope="col" abbr="Descending data">
<button title="Sort ascending">Ascending <span class="icon icon-descending"></span></button>
<th scope="col">
<button>
Leeftijd
<span class="icon icon-sortable" aria-hidden="true"></span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Janine</td>
<td>Hinde</td>
<td class="number">16</td>
</tr>
<tr>
<td>Henk</td>
<td>de Vries</td>
<td class="number">8</td>
</tr>
<tr>
<td>Maria</td>
<td>Lin</td>
<td class="number">32</td>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>John</td>
<td>Doe</td>
<td class="number">64</td>
</tr>
</tbody>
</table>
</div>
`}
`}
/>
</section>

Expand Down

0 comments on commit 840ddcf

Please sign in to comment.