1
0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-19 05:27:57 +00:00
rolens/frontend/src/components/grid.svelte

85 lines
1.6 KiB
Svelte
Raw Normal View History

2023-01-10 16:28:27 +00:00
<script>
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;
}
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>