christoph/svelte-formula11
1
Fork 0
Code Issues 21 Actions Packages Projects 1 Activity

Lib: Add optional height classes to component + make thead sticky

Browse Source
This commit is contained in:
Christoph Urlacher
2025-03-25 19:29:16 +01:00
parent 22a6da55fa
commit 4a497aefb4
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/Table.svelte
View File

@ -8,17 +8,20 @@
/** The columns the table should have. */ /** The columns the table should have. */
columns: TableColumn[]; columns: TableColumn[];
/** Optional height classes */
height?: string;
/** An optional function handling clicking on a table row */ /** An optional function handling clicking on a table row */
handler?: (event: Event, id: string) => Promise<void>; handler?: (event: Event, id: string) => Promise<void>;
} }
let { data, columns, handler = undefined }: TableProps = $props(); let { data, columns, height = "", handler = undefined }: TableProps = $props();
</script> </script>
{#if data.length > 0} {#if data.length > 0}
<div class="table-container bg-white shadow"> <div class="table-container bg-white shadow {height}">
<table class="table table-compact bg-white"> <table class="table table-compact !overflow-scroll bg-white">
<thead> <thead class="sticky top-0">
<tr class="bg-surface-500"> <tr class="bg-surface-500">
{#each columns as col} {#each columns as col}
<th class="!px-3">{col.label}</th> <th class="!px-3">{col.label}</th>