2023-01-10 16:28:27 +00:00
|
|
|
<script>
|
2023-01-17 17:00:57 +00:00
|
|
|
import GridItems from './grid-items.svelte';
|
2023-01-10 16:28:27 +00:00
|
|
|
import Icon from './icon.svelte';
|
|
|
|
|
|
|
|
export let columns = [];
|
|
|
|
export let items = [];
|
2023-01-14 19:38:39 +00:00
|
|
|
export let actions = [];
|
2023-01-10 16:28:27 +00:00
|
|
|
export let key = 'id';
|
|
|
|
export let activeKey = '';
|
|
|
|
export let activeChildKey = '';
|
|
|
|
export let showHeaders = true;
|
2023-01-18 13:15:54 +00:00
|
|
|
export let striped = true;
|
2023-01-10 16:28:27 +00:00
|
|
|
</script>
|
|
|
|
|
2023-01-18 13:15:54 +00:00
|
|
|
<div class="grid">
|
2023-01-14 19:38:39 +00:00
|
|
|
{#if actions?.length}
|
|
|
|
<div class="actions">
|
|
|
|
{#each actions as action}
|
2023-01-15 15:51:39 +00:00
|
|
|
<button class="btn" on:click={action.fn} disabled={action.disabled}>
|
2023-01-14 19:38:39 +00:00
|
|
|
{#if action.icon}<Icon name={action.icon} />{/if}
|
|
|
|
{action.label || ''}
|
|
|
|
</button>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
|
2023-01-10 16:28:27 +00:00
|
|
|
<table>
|
|
|
|
{#if showHeaders && columns.some(col => col.title)}
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th class="has-toggle"></th>
|
|
|
|
{#each columns as column}
|
|
|
|
<th scope="col">{column.title || ''}</th>
|
|
|
|
{/each}
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
<tbody>
|
2023-01-18 13:15:54 +00:00
|
|
|
<GridItems {items} {columns} {key} {striped} bind:activeKey bind:activeChildKey on:select on:selectChild on:trigger />
|
2023-01-10 16:28:27 +00:00
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.grid {
|
|
|
|
width: 100%;
|
2023-01-11 19:41:15 +00:00
|
|
|
height: 100%;
|
2023-01-13 15:56:48 +00:00
|
|
|
background-color: #fff;
|
2023-01-10 16:28:27 +00:00
|
|
|
}
|
|
|
|
|
2023-01-14 19:38:39 +00:00
|
|
|
.actions {
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
padding: 0.5rem;
|
|
|
|
border-bottom: 1px solid #ccc;
|
|
|
|
}
|
|
|
|
.actions button {
|
|
|
|
margin-right: 0.2rem;
|
|
|
|
}
|
|
|
|
|
2023-01-10 16:28:27 +00:00
|
|
|
table {
|
|
|
|
border-collapse: collapse;
|
|
|
|
width: 100%;
|
2023-01-18 13:15:54 +00:00
|
|
|
background-color: #fff;
|
2023-01-10 16:28:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
table thead {
|
|
|
|
border-bottom: 2px solid #ccc;
|
|
|
|
}
|
|
|
|
|
2023-01-10 19:10:39 +00:00
|
|
|
th {
|
2023-01-10 16:28:27 +00:00
|
|
|
font-weight: 600;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
tr {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
2023-01-17 17:00:57 +00:00
|
|
|
th {
|
2023-01-10 16:28:27 +00:00
|
|
|
padding: 0.3rem;
|
2023-01-15 15:15:23 +00:00
|
|
|
text-overflow: ellipsis;
|
2023-01-10 16:28:27 +00:00
|
|
|
}
|
|
|
|
</style>
|