8021919bc6
* fix(frontend): Improve AgGrid Infinite table default codes + deprecated table + improve AutoDatatable * fix(frontend): Handle undefined rowCount * fix(frontend): Improve Ag Grid footer * fix(frontend): Improve Deprecated badge
101 lines
2.5 KiB
Svelte
101 lines
2.5 KiB
Svelte
<script context="module" lang="ts">
|
|
export type DatatableContext = {
|
|
size: 'xs' | 'sm' | 'md' | 'lg'
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { createEventDispatcher, setContext } from 'svelte'
|
|
import Button from '../common/button/Button.svelte'
|
|
import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon } from 'lucide-svelte'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
export let paginated: boolean = false
|
|
export let currentPage: number = 1
|
|
export let showNext: boolean = true
|
|
export let loadMore: number = 0
|
|
export let shouldLoadMore: boolean = false
|
|
export let rounded: boolean = true
|
|
export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md'
|
|
export let perPage: number | undefined = undefined
|
|
export let shouldHidePagination: boolean = false
|
|
export let noBorder: boolean = false
|
|
export let rowCount: number | undefined = undefined
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
setContext<DatatableContext>('datatable', {
|
|
size
|
|
})
|
|
</script>
|
|
|
|
<div
|
|
class={twMerge(
|
|
'h-full overflow-auto',
|
|
rounded ? 'rounded-md' : '',
|
|
noBorder ? 'border-0' : 'border'
|
|
)}
|
|
>
|
|
<div class={twMerge('overflow-auto')}>
|
|
<table class={twMerge('min-w-full divide-y')}>
|
|
<slot />
|
|
</table>
|
|
</div>
|
|
{#if paginated && !shouldHidePagination}
|
|
<div
|
|
class="bg-surface border-t flex flex-row justify-between p-1 items-center gap-2 sticky bottom-0"
|
|
>
|
|
<div>
|
|
{#if rowCount}
|
|
<span class="text-xs mx-2"> {rowCount} items</span>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<span class="text-xs">
|
|
Page: {currentPage}
|
|
{perPage && rowCount ? `/ ${Math.ceil(rowCount / perPage)}` : ''}
|
|
</span>
|
|
|
|
{#if perPage !== undefined}
|
|
<select class="!text-xs !w-16" bind:value={perPage}>
|
|
<option value={25}>25</option>
|
|
<option value={100}>100</option>
|
|
<option value={1000}>1000</option>
|
|
</select>
|
|
{/if}
|
|
<Button
|
|
color="light"
|
|
size="xs2"
|
|
on:click={() => dispatch('previous')}
|
|
disabled={currentPage === 1}
|
|
startIcon={{ icon: ArrowLeftIcon }}
|
|
>
|
|
Previous
|
|
</Button>
|
|
{#if showNext}
|
|
<Button
|
|
color="light"
|
|
size="xs2"
|
|
on:click={() => dispatch('next')}
|
|
endIcon={{ icon: ArrowRightIcon }}
|
|
>
|
|
Next
|
|
</Button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{:else if shouldLoadMore}
|
|
<div class="bg-surface border-t flex flex-row justify-center py-4 items-center gap-2">
|
|
<Button
|
|
color="light"
|
|
size="xs2"
|
|
on:click={() => dispatch('loadMore')}
|
|
endIcon={{ icon: ArrowDownIcon }}
|
|
>
|
|
Load {loadMore} more
|
|
</Button>
|
|
</div>
|
|
{/if}
|
|
</div>
|