poc: Rich Tables

package.json

@@ -15,8 +15,10 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",
+    "lint-fix": "npm-run-all --continue-on-error lint-fix:** prettier",
     "lint-fix": "eslint . --fix",
     "link": "npm link @amsterdam/design-system-assets @amsterdam/design-system-css @amsterdam/design-system-react @amsterdam/design-system-react-icons @amsterdam/design-system-tokens",
+    "prettier": "prettier --write .",
     "unlink": "npm unlink @amsterdam/design-system-assets @amsterdam/design-system-css @amsterdam/design-system-react @amsterdam/design-system-react-icons @amsterdam/design-system-tokens",
     "update": "npm-check-updates --upgrade && npm install",
     "update:minor": "npm-check-updates --target minor --upgrade && npm install",
@@ -45,6 +47,7 @@
     "eslint-plugin-perfectionist": "5.8.0",
     "eslint-plugin-prettier": "5.5.5",
     "npm-check-updates": "20.0.0",
+    "npm-run-all": "4.1.5",
     "plop": "4.0.5",
     "prettier": "3.8.1",
     "typescript": "6.0.2",

src/app/amsterdam/amsterdam.css

@@ -6,4 +6,3 @@
     break-inside: avoid;
   }
 }
-

src/app/page.tsx

@@ -24,6 +24,9 @@ export default function Signalen() {
             <NextLink href="/amsterdam" legacyBehavior passHref>
               <LinkList.Link>Amsterdam</LinkList.Link>
             </NextLink>
+            <NextLink href="/rijke-tabellen" legacyBehavior passHref>
+              <LinkList.Link>Rijke tabellen</LinkList.Link>
+            </NextLink>
             <NextLink href="/signalen" legacyBehavior passHref>
               <LinkList.Link>Signalen</LinkList.Link>
             </NextLink>

src/app/rijke-tabellen/common/RankingTableBody.tsx

@@ -0,0 +1,45 @@
+import { Table } from '@amsterdam/design-system-react'
+
+import type { Ranking } from './ranking'
+
+type RankingTableBodyProps = {
+  ranking: Ranking
+}
+
+export const RankingTableBody = ({ ranking }: RankingTableBodyProps) => (
+  <Table.Body>
+    {ranking.length ? (
+      ranking.map(
+        ({
+          doelpunten_tegen,
+          doelpunten_voor,
+          doelsaldo,
+          gelijk,
+          gespeeld,
+          gewonnen,
+          positie,
+          punten,
+          team,
+          verloren,
+        }) => (
+          <Table.Row key={positie}>
+            <Table.HeaderCell scope="row">{positie}</Table.HeaderCell>
+            <Table.Cell className="ams-table__cell--align-start ams-table__cell--nowrap">{team}</Table.Cell>
+            <Table.Cell>{gespeeld}</Table.Cell>
+            <Table.Cell>{gewonnen}</Table.Cell>
+            <Table.Cell>{gelijk}</Table.Cell>
+            <Table.Cell>{verloren}</Table.Cell>
+            <Table.Cell>{punten}</Table.Cell>
+            <Table.Cell>{doelpunten_voor}</Table.Cell>
+            <Table.Cell>{doelpunten_tegen}</Table.Cell>
+            <Table.Cell>{doelsaldo}</Table.Cell>
+          </Table.Row>
+        ),
+      )
+    ) : (
+      <Table.Row>
+        <Table.Cell colSpan={10}>Geen gegevens</Table.Cell>
+      </Table.Row>
+    )}
+  </Table.Body>
+)

src/app/rijke-tabellen/common/RankingTableHeaderRow.tsx

@@ -0,0 +1,18 @@
+import { Table } from '@amsterdam/design-system-react'
+
+export const RankingTableHeaderRow = () => (
+  <Table.Row>
+    <Table.HeaderCell scope="col">Positie</Table.HeaderCell>
+    <Table.HeaderCell className="ams-table__cell--align-start" scope="col">
+      Team
+    </Table.HeaderCell>
+    <Table.HeaderCell scope="col">Gespeeld</Table.HeaderCell>
+    <Table.HeaderCell scope="col">Gewonnen</Table.HeaderCell>
+    <Table.HeaderCell scope="col">Gelijk</Table.HeaderCell>
+    <Table.HeaderCell scope="col">Verloren</Table.HeaderCell>
+    <Table.HeaderCell scope="col">Punten</Table.HeaderCell>
+    <Table.HeaderCell scope="col">Doelpunten voor</Table.HeaderCell>
+    <Table.HeaderCell scope="col">Doelpunten tegen</Table.HeaderCell>
+    <Table.HeaderCell scope="col">Doelsaldo</Table.HeaderCell>
+  </Table.Row>
+)

src/app/rijke-tabellen/common/getSortedRanking.ts

@@ -0,0 +1,23 @@
+import type { Ranking, Team } from './ranking'
+
+type SortDirection = 'asc' | 'desc'
+export type SortOrder = `${keyof Team}-${SortDirection}`
+
+export function getSortedRanking(ranking: Ranking, sortOrder: SortOrder) {
+  const [field, direction] = sortOrder.split('-') as [keyof Team, SortDirection]
+
+  return [...ranking].sort((a, b) => {
+    const aValue = typeof a[field] === 'string' ? a[field].toLowerCase() : a[field]
+    const bValue = typeof b[field] === 'string' ? b[field].toLowerCase() : b[field]
+
+    if (typeof aValue === 'string' && typeof bValue === 'string') {
+      return direction === 'desc' ? bValue.localeCompare(aValue) : aValue.localeCompare(bValue)
+    }
+
+    if (typeof aValue === 'number' && typeof bValue === 'number') {
+      return direction === 'desc' ? bValue - aValue : aValue - bValue
+    }
+
+    return 0
+  })
+}

src/app/rijke-tabellen/common/index.ts

@@ -0,0 +1,3 @@
+export * from './getSortedRanking'
+export * from './ranking'
+export * from './RankingTableBody'

src/app/rijke-tabellen/common/ranking.ts

@@ -0,0 +1,233 @@
+export type Team = {
+  doelpunten_tegen: number
+  doelpunten_voor: number
+  doelsaldo: number
+  gelijk: number
+  gespeeld: number
+  gewonnen: number
+  positie: number
+  punten: number
+  team: string
+  verloren: number
+}
+
+export type Ranking = Team[]
+
+export const ranking: Ranking = [
+  {
+    doelpunten_tegen: 39,
+    doelpunten_voor: 103,
+    doelsaldo: 64,
+    gelijk: 4,
+    gespeeld: 34,
+    gewonnen: 25,
+    positie: 1,
+    punten: 79,
+    team: 'PSV',
+    verloren: 5,
+  },
+  {
+    doelpunten_tegen: 32,
+    doelpunten_voor: 67,
+    doelsaldo: 35,
+    gelijk: 6,
+    gespeeld: 34,
+    gewonnen: 24,
+    positie: 2,
+    punten: 78,
+    team: 'Ajax',
+    verloren: 4,
+  },
+  {
+    doelpunten_tegen: 38,
+    doelpunten_voor: 76,
+    doelsaldo: 38,
+    gelijk: 8,
+    gespeeld: 34,
+    gewonnen: 20,
+    positie: 3,
+    punten: 68,
+    team: 'Feyenoord',
+    verloren: 6,
+  },
+  {
+    doelpunten_tegen: 45,
+    doelpunten_voor: 62,
+    doelsaldo: 17,
+    gelijk: 10,
+    gespeeld: 34,
+    gewonnen: 18,
+    positie: 4,
+    punten: 64,
+    team: 'FC Utrecht',
+    verloren: 6,
+  },
+  {
+    doelpunten_tegen: 37,
+    doelpunten_voor: 58,
+    doelsaldo: 21,
+    gelijk: 9,
+    gespeeld: 34,
+    gewonnen: 16,
+    positie: 5,
+    punten: 57,
+    team: 'AZ',
+    verloren: 9,
+  },
+  {
+    doelpunten_tegen: 49,
+    doelpunten_voor: 62,
+    doelsaldo: 13,
+    gelijk: 9,
+    gespeeld: 34,
+    gewonnen: 15,
+    positie: 6,
+    punten: 54,
+    team: 'FC Twente',
+    verloren: 10,
+  },
+  {
+    doelpunten_tegen: 55,
+    doelpunten_voor: 57,
+    doelsaldo: 2,
+    gelijk: 9,
+    gespeeld: 34,
+    gewonnen: 14,
+    positie: 7,
+    punten: 51,
+    team: 'Go Ahead Eagles',
+    verloren: 11,
+  },
+  {
+    doelpunten_tegen: 46,
+    doelpunten_voor: 51,
+    doelsaldo: 5,
+    gelijk: 7,
+    gespeeld: 34,
+    gewonnen: 12,
+    positie: 8,
+    punten: 43,
+    team: 'N.E.C.',
+    verloren: 15,
+  },
+  {
+    doelpunten_tegen: 57,
+    doelpunten_voor: 42,
+    doelsaldo: -15,
+    gelijk: 7,
+    gespeeld: 34,
+    gewonnen: 12,
+    positie: 9,
+    punten: 43,
+    team: 'sc Heerenveen',
+    verloren: 15,
+  },
+  {
+    doelpunten_tegen: 51,
+    doelpunten_voor: 43,
+    doelsaldo: -8,
+    gelijk: 11,
+    gespeeld: 34,
+    gewonnen: 10,
+    positie: 10,
+    punten: 41,
+    team: 'PEC Zwolle',
+    verloren: 13,
+  },
+  {
+    doelpunten_tegen: 54,
+    doelpunten_voor: 37,
+    doelsaldo: -17,
+    gelijk: 8,
+    gespeeld: 34,
+    gewonnen: 11,
+    positie: 11,
+    punten: 41,
+    team: 'Fortuna Sittard',
+    verloren: 15,
+  },
+  {
+    doelpunten_tegen: 43,
+    doelpunten_voor: 39,
+    doelsaldo: -4,
+    gelijk: 12,
+    gespeeld: 34,
+    gewonnen: 9,
+    positie: 12,
+    punten: 39,
+    team: 'Sparta Rotterdam',
+    verloren: 13,
+  },
+  {
+    doelpunten_tegen: 53,
+    doelpunten_voor: 40,
+    doelsaldo: -13,
+    gelijk: 9,
+    gespeeld: 34,
+    gewonnen: 10,
+    positie: 13,
+    punten: 39,
+    team: 'FC Groningen',
+    verloren: 15,
+  },
+  {
+    doelpunten_tegen: 63,
+    doelpunten_voor: 42,
+    doelsaldo: -21,
+    gelijk: 11,
+    gespeeld: 34,
+    gewonnen: 9,
+    positie: 14,
+    punten: 38,
+    team: 'Heracles Almelo',
+    verloren: 14,
+  },
+  {
+    doelpunten_tegen: 58,
+    doelpunten_voor: 34,
+    doelsaldo: -24,
+    gelijk: 9,
+    gespeeld: 34,
+    gewonnen: 8,
+    positie: 15,
+    punten: 33,
+    team: 'NAC Breda',
+    verloren: 17,
+  },
+  {
+    doelpunten_tegen: 56,
+    doelpunten_voor: 34,
+    doelsaldo: -22,
+    gelijk: 8,
+    gespeeld: 34,
+    gewonnen: 6,
+    positie: 16,
+    punten: 26,
+    team: 'Willem II',
+    verloren: 20,
+  },
+  {
+    doelpunten_tegen: 74,
+    doelpunten_voor: 44,
+    doelsaldo: -30,
+    gelijk: 7,
+    gespeeld: 34,
+    gewonnen: 6,
+    positie: 17,
+    punten: 25,
+    team: 'RKC Waalwijk',
+    verloren: 21,
+  },
+  {
+    doelpunten_tegen: 64,
+    doelpunten_voor: 23,
+    doelsaldo: -41,
+    gelijk: 10,
+    gespeeld: 34,
+    gewonnen: 4,
+    positie: 18,
+    punten: 22,
+    team: 'Almere City FC',
+    verloren: 20,
+  },
+]

src/app/rijke-tabellen/feedback-aram.md

@@ -0,0 +1,25 @@
+# Feedback Aram op Rijke Tabellen
+
+- Sorteren via select
+	- De vraag of dit een goed patroon is
+	- Zo ja, Select in form, knop erachter, evt verbergen, select onChange = form submit
+	- Zo krijg je de sort param wel in de url en kun je de link alleen delen via de url balk (er is geen link)
+- Voorbeeld toevoegen voor sorteren met links ipv Select
+- Sorteren via buttons
+	- Dit zouden geen buttons moeten zijn maar links → Icon Link? Dus vervangen, buttons zijn nooit beter hier
+	- Misschien net zo goed om de hele kolomkop + een icon te linken (hit area groter, wel blauw, op zich duidelijk)
+- Filteren op tekst
+	- Nadenken over plek in tabel: in thead, td of th, misschien samenvoegen met de th van de kolomkop
+- Voorbeeld toevoegen met 1 zoekveld in een form boven de tabel die alle kolommen filtert
+- Pagineren
+	- De select is hier wel het geijkte patroon, dus een form eromheen en submit on change
+	- Zorgen dat pageSize geen lokale state is, maar in de url zit
+- Link in cel
+	- Duidelijker een detailpagina tonen
+	- Uitzoeken of position: relative wel ondersteund wordt op een tr – hier gaan dingen niet goed
+- Button in cel
+	- Delete klopt wel, dat is een button die een form submit – een form om elke button heen
+	- Bewerken kan beter een link zijn naar een pagina waar je de ruimte hebt, met een parameter mode=edit
+- Principe: alles baseren op url parameters
+	- Links waar mogelijk
+	- Anders controls in een form met autosubmit als het kan