diff --git a/src/lib/components/Table.svelte b/src/lib/components/Table.svelte
new file mode 100644
index 0000000..87516e5
--- /dev/null
+++ b/src/lib/components/Table.svelte
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ {#each columns as col}
+ | {col.label} |
+ {/each}
+
+
+
+ {#each data as row}
+
+ {#each columns as col}
+ {#if col.valuefun}
+ | {@html col.valuefun(row[col.data_value_name])} |
+ {:else}
+ {row[col.data_value_name]} |
+ {/if}
+ {/each}
+
+ {/each}
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/components/Table.ts b/src/lib/components/Table.ts
new file mode 100644
index 0000000..9733df4
--- /dev/null
+++ b/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;
+}
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 602da24..faf6ecd 100644
--- a/src/lib/components/index.ts
+++ b/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,