mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-09 08:03:50 +00:00
make download button configurable for table
This commit is contained in:
@@ -465,6 +465,7 @@
|
||||
</div>
|
||||
|
||||
<AppTableFooter
|
||||
download={resolvedConfig?.downloadButton}
|
||||
pageSize={resolvedConfig?.pagination?.configuration?.auto?.pageSize ?? 20}
|
||||
manualPagination={resolvedConfig?.pagination?.selected == 'manual'}
|
||||
result={filteredResult}
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
let c = ''
|
||||
export { c as class }
|
||||
export let style = ''
|
||||
export let download: boolean = true
|
||||
|
||||
function downloadResultAsJSON() {
|
||||
const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(result))
|
||||
@@ -27,49 +28,53 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={twMerge('px-2 py-1 text-xs gap-2 items-center justify-between', c, 'flex flex-row')}
|
||||
{style}
|
||||
>
|
||||
{#if result.length > pageSize || manualPagination}
|
||||
{#if result.length > pageSize || manualPagination || download}
|
||||
<div
|
||||
class={twMerge('px-2 py-1 text-xs gap-2 items-center justify-between', c, 'flex flex-row')}
|
||||
{style}
|
||||
>
|
||||
{#if result.length > pageSize || manualPagination}
|
||||
<div class="flex items-center gap-2 flex-row">
|
||||
<Button
|
||||
size="xs"
|
||||
variant="border"
|
||||
color="light"
|
||||
btnClasses="!py-1 !pl-1"
|
||||
on:click={() => $table.previousPage()}
|
||||
disabled={!$table.getCanPreviousPage()}
|
||||
>
|
||||
<ChevronLeft size={14} />
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="border"
|
||||
color="light"
|
||||
btnClasses="!py-1 !pr-1"
|
||||
on:click={() => $table.nextPage()}
|
||||
disabled={!$table.getCanNextPage()}
|
||||
>
|
||||
Next
|
||||
<ChevronRight size={14} />
|
||||
</Button>
|
||||
{$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}
|
||||
</div>
|
||||
{:else}
|
||||
<div />
|
||||
{/if}
|
||||
<div class="flex items-center gap-2 flex-row">
|
||||
<Button
|
||||
size="xs"
|
||||
variant="border"
|
||||
color="light"
|
||||
btnClasses="!py-1 !pl-1"
|
||||
on:click={() => $table.previousPage()}
|
||||
disabled={!$table.getCanPreviousPage()}
|
||||
>
|
||||
<ChevronLeft size={14} />
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="border"
|
||||
color="light"
|
||||
btnClasses="!py-1 !pr-1"
|
||||
on:click={() => $table.nextPage()}
|
||||
disabled={!$table.getCanNextPage()}
|
||||
>
|
||||
Next
|
||||
<ChevronRight size={14} />
|
||||
</Button>
|
||||
{$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}
|
||||
{#if download}
|
||||
<Button
|
||||
size="xs"
|
||||
variant="border"
|
||||
color="light"
|
||||
btnClasses="!py-1"
|
||||
on:click={downloadResultAsJSON}
|
||||
startIcon={{ icon: faDownload }}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div />
|
||||
{/if}
|
||||
<div class="flex items-center gap-2 flex-row">
|
||||
<Button
|
||||
size="xs"
|
||||
variant="border"
|
||||
color="light"
|
||||
btnClasses="!py-1"
|
||||
on:click={downloadResultAsJSON}
|
||||
startIcon={{ icon: faDownload }}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1078,7 +1078,14 @@ Hello \${ctx.username}
|
||||
tooltip:
|
||||
'Search can be configured in the following ways: Disabled: The search is disabled,By Runnable: The search is done in the backend, or by component: The search is done in the frontend.'
|
||||
},
|
||||
pagination: paginationOneOf
|
||||
pagination: paginationOneOf,
|
||||
downloadButton: {
|
||||
type: 'static',
|
||||
fieldType: 'boolean',
|
||||
value: true,
|
||||
onlyStatic: true,
|
||||
tooltip: 'display a button to download the table as a csv file'
|
||||
}
|
||||
},
|
||||
componentInput: {
|
||||
type: 'static',
|
||||
|
||||
Reference in New Issue
Block a user