Skip to content

Commit 5acc46b

Browse files
zxyctnzxyctn
committed
Prepare for release
1 parent b744489 commit 5acc46b

File tree

2 files changed

+182
-171
lines changed

2 files changed

+182
-171
lines changed

‎src/lib/components/Table/TableContent.svelte‎

Lines changed: 177 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -366,190 +366,200 @@
366366
</script>
367367

368368
<div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
369-
<div class="table-container">
370-
<!-- Enable the search filter if table is not empty -->
371-
372-
<form
373-
class="flex gap-2"
374-
on:submit|preventDefault={() => {
375-
sendModel.q = searchValue;
376-
$filterValue = searchValue;
377-
}}
378-
>
379-
<div class="relative w-full flex items-center">
380-
<input
381-
class="input p-2 border border-primary-500"
382-
type="text"
383-
bind:value={searchValue}
384-
placeholder="Search rows..."
385-
id="{tableId}-search"
386-
/><button
387-
type="reset"
388-
class="absolute right-3 items-center"
389-
on:click|preventDefault={() => {
390-
searchValue = '';
391-
sendModel.q = '';
392-
$filterValue = '';
393-
}}><Fa icon={faXmark} /></button
369+
{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
370+
<div class="table-container">
371+
<!-- Enable the search filter if table is not empty -->
372+
{#if !serverSide}
373+
<form
374+
class="flex gap-2"
375+
on:submit|preventDefault={() => {
376+
sendModel.q = searchValue;
377+
$filterValue = searchValue;
378+
}}
394379
>
395-
</div>
396-
<button
397-
type="submit"
398-
class="btn variant-filled-primary"
399-
on:click|preventDefault={() => {
400-
$filterValue = searchValue;
401-
sendModel.q = searchValue;
402-
}}>Search</button
403-
>
404-
</form>
405-
406-
<div class="flex justify-between items-center py-2 w-full">
407-
<div>
408-
<!-- Enable the fitToScreen toggle if toggle === true -->
409-
{#if toggle}
410-
<SlideToggle
411-
name="slider-label"
412-
active="bg-primary-500"
413-
size="sm"
414-
checked={fitToScreen}
415-
id="{tableId}-toggle"
416-
on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
417-
>
418-
{/if}
419-
</div>
420-
<div class="flex gap-2">
421-
<!-- Enable the resetResize button if resizable !== 'none' -->
422-
{#if resizable !== 'none'}
423-
<button
424-
type="button"
425-
class="btn btn-sm variant-filled-primary rounded-full order-last"
426-
on:click|preventDefault={() =>
427-
resetResize($headerRows, $pageRows, tableId, columns, resizable)}>Reset sizing</button
428-
>
429-
{/if}
430-
{#if exportable}
380+
<div class="relative w-full flex items-center">
381+
<input
382+
class="input p-2 border border-primary-500"
383+
type="text"
384+
bind:value={searchValue}
385+
placeholder="Search rows..."
386+
id="{tableId}-search"
387+
/><button
388+
type="reset"
389+
class="absolute right-3 items-center"
390+
on:click|preventDefault={() => {
391+
searchValue = '';
392+
sendModel.q = '';
393+
$filterValue = '';
394+
}}><Fa icon={faXmark} /></button
395+
>
396+
</div>
431397
<button
432-
type="button"
433-
class="btn btn-sm variant-filled-primary rounded-full order-last"
434-
on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
435-
>Export as CSV</button
398+
type="submit"
399+
class="btn variant-filled-primary"
400+
on:click|preventDefault={() => {
401+
$filterValue = searchValue;
402+
sendModel.q = searchValue;
403+
}}>Search</button
436404
>
437-
{/if}
405+
</form>
406+
{/if}
407+
408+
<div class="flex justify-between items-center py-2 w-full">
409+
<div>
410+
<!-- Enable the fitToScreen toggle if toggle === true -->
411+
{#if toggle}
412+
<SlideToggle
413+
name="slider-label"
414+
active="bg-primary-500"
415+
size="sm"
416+
checked={fitToScreen}
417+
id="{tableId}-toggle"
418+
on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
419+
>
420+
{/if}
421+
</div>
422+
<div class="flex gap-2">
423+
<!-- Enable the resetResize button if resizable !== 'none' -->
424+
{#if resizable !== 'none'}
425+
<button
426+
type="button"
427+
class="btn btn-sm variant-filled-primary rounded-full order-last"
428+
on:click|preventDefault={() =>
429+
resetResize($headerRows, $pageRows, tableId, columns, resizable)}
430+
>Reset sizing</button
431+
>
432+
{/if}
433+
{#if exportable}
434+
<button
435+
type="button"
436+
class="btn btn-sm variant-filled-primary rounded-full order-last"
437+
on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
438+
>Export as CSV</button
439+
>
440+
{/if}
441+
</div>
438442
</div>
439-
</div>
440443

441-
<div class="overflow-auto" style="height: {height}px">
442-
<table
443-
{...$tableAttrs}
444-
class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
445-
id="{tableId}-table"
446-
>
447-
<!-- If table height is provided, making the top row sticky -->
448-
<thead class={height != null && $pageRows.length > 0 ? `sticky top-0` : ''}>
449-
<!-- {#if $data.length > 0} -->
450-
{#each $headerRows as headerRow (headerRow.id)}
451-
<Subscribe
452-
rowAttrs={headerRow.attrs()}
453-
let:rowAttrs
454-
rowProps={headerRow.props()}
455-
let:rowProps
456-
>
457-
<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-800">
458-
{#each headerRow.cells as cell (cell.id)}
459-
<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
460-
<th scope="col" class="!p-2" {...attrs} style={cellStyle(cell.id, columns)}>
461-
<div
462-
class="overflow-auto"
463-
class:resize-x={(resizable === 'columns' || resizable === 'both') &&
464-
!fixedWidth(cell.id, columns)}
465-
id="th-{tableId}-{cell.id}"
466-
>
467-
<div class="flex justify-between items-center">
468-
<div class="flex gap-1 whitespace-pre-wrap">
469-
<!-- Adding sorting config and styling -->
470-
<span
471-
class:underline={props.sort.order}
472-
class:normal-case={cell.id !== cell.label}
473-
class:cursor-pointer={!props.sort.disabled}
474-
on:click={props.sort.toggle}
475-
on:keydown={props.sort.toggle}
476-
>
477-
{cell.render()}
478-
</span>
479-
<div class="w-2">
480-
{#if props.sort.order === 'asc'}
481-
▴
482-
{:else if props.sort.order === 'desc'}
483-
▾
484-
{/if}
485-
</div>
486-
</div>
487-
<!-- Adding column filter config -->
488-
{#if cell.isData()}
489-
{#if props.colFilter?.render}
490-
<div class="">
491-
<Render of={props.colFilter.render} />
444+
<div class="overflow-auto" style="height: {height}px">
445+
<table
446+
{...$tableAttrs}
447+
class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
448+
id="{tableId}-table"
449+
>
450+
<!-- If table height is provided, making the top row sticky -->
451+
<thead class={height != null && $pageRows.length > 0 ? `sticky top-0` : ''}>
452+
<!-- {#if $data.length > 0} -->
453+
{#each $headerRows as headerRow (headerRow.id)}
454+
<Subscribe
455+
rowAttrs={headerRow.attrs()}
456+
let:rowAttrs
457+
rowProps={headerRow.props()}
458+
let:rowProps
459+
>
460+
<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-800">
461+
{#each headerRow.cells as cell (cell.id)}
462+
<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
463+
<th scope="col" class="!p-2" {...attrs} style={cellStyle(cell.id, columns)}>
464+
<div
465+
class="overflow-auto"
466+
class:resize-x={(resizable === 'columns' || resizable === 'both') &&
467+
!fixedWidth(cell.id, columns)}
468+
id="th-{tableId}-{cell.id}"
469+
>
470+
<div class="flex justify-between items-center">
471+
<div class="flex gap-1 whitespace-pre-wrap">
472+
<!-- Adding sorting config and styling -->
473+
<span
474+
class:underline={props.sort.order}
475+
class:normal-case={cell.id !== cell.label}
476+
class:cursor-pointer={!props.sort.disabled}
477+
on:click={props.sort.toggle}
478+
on:keydown={props.sort.toggle}
479+
>
480+
{cell.render()}
481+
</span>
482+
<div class="w-2">
483+
{#if props.sort.order === 'asc'}
484+
▴
485+
{:else if props.sort.order === 'desc'}
486+
▾
487+
{/if}
492488
</div>
489+
</div>
490+
<!-- Adding column filter config -->
491+
{#if cell.isData()}
492+
{#if props.colFilter?.render}
493+
<div class="">
494+
<Render of={props.colFilter.render} />
495+
</div>
496+
{/if}
493497
{/if}
494-
{/if}
498+
</div>
495499
</div>
496-
</div>
497-
</th>
498-
</Subscribe>
499-
{/each}
500-
</tr>
501-
</Subscribe>
502-
{/each}
503-
</thead>
504-
505-
<tbody class="overflow-auto" {...$tableBodyAttrs}>
506-
{#each $pageRows as row (row.id)}
507-
<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
508-
<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
509-
{#each row.cells as cell, index (cell?.id)}
510-
<Subscribe attrs={cell.attrs()} let:attrs>
511-
<td {...attrs} class="!p-2">
512-
<div
513-
class=" overflow-auto h-max {index === 0 &&
514-
(resizable === 'rows' || resizable === 'both')
515-
? 'resize-y'
516-
: ''}"
517-
id="{tableId}-{cell.id}-{row.id}"
518-
>
519-
<!-- Adding config for initial rowHeight, if provided -->
500+
</th>
501+
</Subscribe>
502+
{/each}
503+
</tr>
504+
</Subscribe>
505+
{/each}
506+
</thead>
507+
508+
<tbody class="overflow-auto" {...$tableBodyAttrs}>
509+
{#each $pageRows as row (row.id)}
510+
<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
511+
<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
512+
{#each row.cells as cell, index (cell?.id)}
513+
<Subscribe attrs={cell.attrs()} let:attrs>
514+
<td {...attrs} class="!p-2">
520515
<div
521-
class="flex items-center overflow-auto"
522-
style="height: {rowHeight ? `${rowHeight}px` : 'auto'};"
516+
class=" overflow-auto h-max {index === 0 &&
517+
(resizable === 'rows' || resizable === 'both')
518+
? 'resize-y'
519+
: ''}"
520+
id="{tableId}-{cell.id}-{row.id}"
523521
>
524-
<div class="grow h-full"><Render of={cell.render()} /></div>
522+
<!-- Adding config for initial rowHeight, if provided -->
523+
<div
524+
class="flex items-center overflow-auto"
525+
style="height: {rowHeight ? `${rowHeight}px` : 'auto'};"
526+
>
527+
<div class="grow h-full"><Render of={cell.render()} /></div>
528+
</div>
525529
</div>
526-
</div>
527-
</td>
528-
</Subscribe>
529-
{/each}
530-
</tr>
531-
</Subscribe>
532-
{/each}
533-
</tbody>
534-
</table>
530+
</td>
531+
</Subscribe>
532+
{/each}
533+
</tr>
534+
</Subscribe>
535+
{/each}
536+
</tbody>
537+
</table>
538+
</div>
539+
</div>
540+
{:else}
541+
<div class="p-10 w-full h-full flex justify-center items-center bg-neutral-200 rounded">
542+
<p>No data available</p>
535543
</div>
536-
</div>
544+
{/if}
537545

538546
{#if isFetching}
539547
<div class="p-10 w-full h-full flex justify-center items-center"><Spinner /></div>
540548
{/if}
541549

542550
<!-- Adding pagination, if table is not empty -->
543-
{#if serverSide}
544-
<TablePaginationServer
545-
{pageIndex}
546-
{pageSize}
547-
{serverItemCount}
548-
{updateTable}
549-
{pageSizes}
550-
id={tableId}
551-
/>
552-
{:else}
553-
<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
551+
{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
552+
{#if serverSide}
553+
<TablePaginationServer
554+
{pageIndex}
555+
{pageSize}
556+
{serverItemCount}
557+
{updateTable}
558+
{pageSizes}
559+
id={tableId}
560+
/>
561+
{:else}
562+
<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
563+
{/if}
554564
{/if}
555565
</div>

‎src/lib/components/Table/TableFilterServer.svelte‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,11 @@
112112
value: FilterOptionsEnum.b,
113113
label: 'Is before'
114114
},
115-
{
116-
value: FilterOptionsEnum.no,
117-
label: 'Is not on'
118-
}
115+
// TODO: 'Not on' filter should be fixed on the server side
116+
// {
117+
// value: FilterOptionsEnum.no,
118+
// label: 'Is not on'
119+
// }
119120
]
120121
};
121122

0 commit comments

Comments
 (0)