poc: Add various examples of rich tables

package.json

@@ -15,7 +15,10 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "lint-fix": "npm-run-all --continue-on-error lint-fix:** prettier",
+    "lint-fix:js": "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",
@@ -49,6 +52,7 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "6.1.1",
     "npm-check-updates": "19.0.0",
+    "npm-run-all": "4.1.5",
     "plop": "4.0.4",
     "prettier": "3.6.2",
     "typescript": "5.9.3",

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,32 @@
+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(({ drawn, goal_difference, goals_against, goals_for, lost, name, played, points, position, won }) => (
+        <Table.Row key={position}>
+          <Table.HeaderCell scope="row">{position}</Table.HeaderCell>
+          <Table.Cell className="ams-table__cell--align-start ams-table__cell--nowrap">{name}</Table.Cell>
+          <Table.Cell>{played}</Table.Cell>
+          <Table.Cell>{won}</Table.Cell>
+          <Table.Cell>{drawn}</Table.Cell>
+          <Table.Cell>{lost}</Table.Cell>
+          <Table.Cell>{points}</Table.Cell>
+          <Table.Cell>{goals_for}</Table.Cell>
+          <Table.Cell>{goals_against}</Table.Cell>
+          <Table.Cell>{goal_difference}</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 = {
+  drawn: number
+  goal_difference: number
+  goals_against: number
+  goals_for: number
+  lost: number
+  name: string
+  played: number
+  points: number
+  position: number
+  won: number
+}
+
+export type Ranking = Team[]
+
+export const ranking: Ranking = [
+  {
+    drawn: 4,
+    goal_difference: 64,
+    goals_against: 39,
+    goals_for: 103,
+    lost: 5,
+    name: 'PSV',
+    played: 34,
+    points: 79,
+    position: 1,
+    won: 25,
+  },
+  {
+    drawn: 6,
+    goal_difference: 35,
+    goals_against: 32,
+    goals_for: 67,
+    lost: 4,
+    name: 'Ajax',
+    played: 34,
+    points: 78,
+    position: 2,
+    won: 24,
+  },
+  {
+    drawn: 8,
+    goal_difference: 38,
+    goals_against: 38,
+    goals_for: 76,
+    lost: 6,
+    name: 'Feyenoord',
+    played: 34,
+    points: 68,
+    position: 3,
+    won: 20,
+  },
+  {
+    drawn: 10,
+    goal_difference: 17,
+    goals_against: 45,
+    goals_for: 62,
+    lost: 6,
+    name: 'FC Utrecht',
+    played: 34,
+    points: 64,
+    position: 4,
+    won: 18,
+  },
+  {
+    drawn: 9,
+    goal_difference: 21,
+    goals_against: 37,
+    goals_for: 58,
+    lost: 9,
+    name: 'AZ',
+    played: 34,
+    points: 57,
+    position: 5,
+    won: 16,
+  },
+  {
+    drawn: 9,
+    goal_difference: 13,
+    goals_against: 49,
+    goals_for: 62,
+    lost: 10,
+    name: 'FC Twente',
+    played: 34,
+    points: 54,
+    position: 6,
+    won: 15,
+  },
+  {
+    drawn: 9,
+    goal_difference: 2,
+    goals_against: 55,
+    goals_for: 57,
+    lost: 11,
+    name: 'Go Ahead Eagles',
+    played: 34,
+    points: 51,
+    position: 7,
+    won: 14,
+  },
+  {
+    drawn: 7,
+    goal_difference: 5,
+    goals_against: 46,
+    goals_for: 51,
+    lost: 15,
+    name: 'N.E.C.',
+    played: 34,
+    points: 43,
+    position: 8,
+    won: 12,
+  },
+  {
+    drawn: 7,
+    goal_difference: -15,
+    goals_against: 57,
+    goals_for: 42,
+    lost: 15,
+    name: 'sc Heerenveen',
+    played: 34,
+    points: 43,
+    position: 9,
+    won: 12,
+  },
+  {
+    drawn: 11,
+    goal_difference: -8,
+    goals_against: 51,
+    goals_for: 43,
+    lost: 13,
+    name: 'PEC Zwolle',
+    played: 34,
+    points: 41,
+    position: 10,
+    won: 10,
+  },
+  {
+    drawn: 8,
+    goal_difference: -17,
+    goals_against: 54,
+    goals_for: 37,
+    lost: 15,
+    name: 'Fortuna Sittard',
+    played: 34,
+    points: 41,
+    position: 11,
+    won: 11,
+  },
+  {
+    drawn: 12,
+    goal_difference: -4,
+    goals_against: 43,
+    goals_for: 39,
+    lost: 13,
+    name: 'Sparta Rotterdam',
+    played: 34,
+    points: 39,
+    position: 12,
+    won: 9,
+  },
+  {
+    drawn: 9,
+    goal_difference: -13,
+    goals_against: 53,
+    goals_for: 40,
+    lost: 15,
+    name: 'FC Groningen',
+    played: 34,
+    points: 39,
+    position: 13,
+    won: 10,
+  },
+  {
+    drawn: 11,
+    goal_difference: -21,
+    goals_against: 63,
+    goals_for: 42,
+    lost: 14,
+    name: 'Heracles Almelo',
+    played: 34,
+    points: 38,
+    position: 14,
+    won: 9,
+  },
+  {
+    drawn: 9,
+    goal_difference: -24,
+    goals_against: 58,
+    goals_for: 34,
+    lost: 17,
+    name: 'NAC Breda',
+    played: 34,
+    points: 33,
+    position: 15,
+    won: 8,
+  },
+  {
+    drawn: 8,
+    goal_difference: -22,
+    goals_against: 56,
+    goals_for: 34,
+    lost: 20,
+    name: 'Willem II',
+    played: 34,
+    points: 26,
+    position: 16,
+    won: 6,
+  },
+  {
+    drawn: 7,
+    goal_difference: -30,
+    goals_against: 74,
+    goals_for: 44,
+    lost: 21,
+    name: 'RKC Waalwijk',
+    played: 34,
+    points: 25,
+    position: 17,
+    won: 6,
+  },
+  {
+    drawn: 10,
+    goal_difference: -41,
+    goals_against: 64,
+    goals_for: 23,
+    lost: 20,
+    name: 'Almere City FC',
+    played: 34,
+    points: 22,
+    position: 18,
+    won: 4,
+  },
+]