Lib: Add table component

src/lib/components/Table.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { type TableColumn } from "$lib/components";
+
+  interface TableProps {
+    /** The data that is displayed inside the table. Any array of arbitrary key-value objects. */
+    data: any[];
+
+    /** The columns the table should have. */
+    columns: TableColumn[];
+  }
+
+  let { data, columns }: TableProps = $props();
+</script>
+
+<div class="table-container bg-white shadow">
+  <table class="table table-interactive table-compact bg-white">
+    <thead>
+      <tr class="bg-white">
+        {#each columns as col}
+          <th>{col.label}</th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each data as row}
+        <tr>
+          {#each columns as col}
+            {#if col.valuefun}
+              <td>{@html col.valuefun(row[col.data_value_name])}</td>
+            {:else}
+              <td>{row[col.data_value_name]}</td>
+            {/if}
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+    <!-- <tfoot> -->
+    <!--   <tr> -->
+    <!--     <th colspan="3">Calculated Total Weight</th> -->
+    <!--     <td>{totalWeight}</td> -->
+    <!--   </tr> -->
+    <!-- </tfoot> -->
+  </table>
+</div>

src/lib/components/Table.ts

@@ -0,0 +1,10 @@
+export interface TableColumn {
+  /** The name of the property containing the value. */
+  data_value_name: string;
+
+  /** The columnname for this property. */
+  label: string;
+
+  /** Any function to further customize the displayed value. May return HTML. */
+  valuefun?: (value: any) => string;
+}

src/lib/components/index.ts

@@ -1,14 +1,20 @@
-import Button from "./Button.svelte";
-import DriverCard from "./DriverCard.svelte";
-import Input from "./Input.svelte";
-import LazyCard from "./LazyCard.svelte";
-import LazyDropdown from "./LazyDropdown.svelte";
 import LazyImage from "./LazyImage.svelte";
 import LoadingIndicator from "./LoadingIndicator.svelte";
-import RaceCard from "./RaceCard.svelte";
-import Search from "./Search.svelte";
-import SubstitutionCard from "./SubstitutionCard.svelte";
-import TeamCard from "./TeamCard.svelte";
+import Table from "./Table.svelte";
+
+import Button from "./form/Button.svelte";
+import Input from "./form/Input.svelte";
+import LazyDropdown from "./form/LazyDropdown.svelte";
+import Search from "./form/Search.svelte";
+
+import DriverCard from "./cards/DriverCard.svelte";
+import LazyCard from "./cards/LazyCard.svelte";
+import RaceCard from "./cards/RaceCard.svelte";
+import SubstitutionCard from "./cards/SubstitutionCard.svelte";
+import TeamCard from "./cards/TeamCard.svelte";
+
+import type { LazyDropdownOption } from "./form/LazyDropdown";
+import type { TableColumn } from "./Table";
 
 import MenuDrawerIcon from "./svg/MenuDrawerIcon.svelte";
 import PasswordIcon from "./svg/PasswordIcon.svelte";
@@ -16,18 +22,27 @@ import UserIcon from "./svg/UserIcon.svelte";
 
 export {
   // Components
-  Button,
-  DriverCard,
-  Input,
-  LazyCard,
-  LazyDropdown,
   LazyImage,
   LoadingIndicator,
-  RaceCard,
+  Table,
+
+  // Form
+  Button,
+  Input,
+  LazyDropdown,
   Search,
+
+  // Cards
+  DriverCard,
+  LazyCard,
+  RaceCard,
   SubstitutionCard,
   TeamCard,
 
+  // Types
+  type LazyDropdownOption,
+  type TableColumn,
+
   // SVG
   MenuDrawerIcon,
   PasswordIcon,