Skip to content

Commit 4874e13

Browse files
DavidBlaaDavidBlaa
authored
Merge pull request #119 from BEXIS2/table
Table
2 parents 8a4e94a + bf1aa98 commit 4874e13

File tree

8 files changed

+56
-150
lines changed

8 files changed

+56
-150
lines changed

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
toggle = false, // Whether to display the fitToScreen toggle
4949
search = true, // Whether to display the search input
5050
pageSizes = [5, 10, 20, 50, 100], // Page sizes to display in the pagination component
51-
pageIndexStringType = 'items', // items by default
5251
fitToScreen = true, // Whether to fit the table to the screen,
5352
exportable = false, // Whether to display the export button and enable export functionality
5453
server
@@ -644,7 +643,7 @@
644643
? utils.minWidth(cell.id, columns)
645644
: $colWidths[index]
646645
}px;`
647-
: 'max-width: min-content;'}
646+
: ''}
648647
>
649648
<Render of={cell.render()} />
650649
</div>
@@ -686,7 +685,6 @@
686685
{serverItemCount}
687686
updateTable={updateTableWithParams}
688687
{pageSizes}
689-
{pageIndexStringType}
690688
id={tableId}
691689
/>
692690
{:else}
@@ -695,7 +693,6 @@
695693
pageConfig={pluginStates.page}
696694
{pageSizes}
697695
id={tableId}
698-
{pageIndexStringType}
699696
/>
700697
{/if}
701698
{/if}

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

Lines changed: 28 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,17 @@
11
<script lang="ts">
22
import Fa from 'svelte-fa';
3-
import {
4-
faAnglesRight,
5-
faAngleRight,
6-
faAnglesLeft,
7-
faAngleLeft,
8-
faChevronDown
9-
} from '@fortawesome/free-solid-svg-icons';
10-
import { ListBox, ListBoxItem, popup, type PopupSettings } from '@skeletonlabs/skeleton';
3+
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
4+
import { ListBox, ListBoxItem, Paginator, popup } from '@skeletonlabs/skeleton';
5+
import type { PopupSettings } from '@skeletonlabs/skeleton';
116
127
export let itemCount;
138
export let pageConfig;
149
export let pageSizes;
15-
export let pageIndexStringType;
1610
export let id;
1711
1812
let indexInformation = '';
1913
20-
const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = pageConfig;
21-
22-
const goToFirstPage = () => ($pageIndex = 0);
23-
const goToLastPage = () => ($pageIndex = $pageCount - 1);
24-
const goToNextPage = () => ($pageIndex += 1);
25-
const goToPreviousPage = () => ($pageIndex -= 1);
26-
27-
// Handles the input change event
28-
const handleChange = (e) => {
29-
const value = e.target.value;
30-
31-
if (value > $pageCount) {
32-
$pageIndex = $pageCount - 1;
33-
} else if (value < 1) {
34-
$pageIndex = 0;
35-
} else {
36-
$pageIndex = value - 1;
37-
}
38-
};
14+
const { pageIndex, pageCount, pageSize } = pageConfig;
3915
4016
let pageSizeDropdownValue: string = $pageSize;
4117
@@ -47,46 +23,34 @@
4723
};
4824
4925
const getIndexInfomationString = () => {
50-
if (pageIndexStringType === 'pages') {
51-
return $pageCount > 0 ? `Page ${$pageIndex + 1} of ${$pageCount}` : 'No pages';
52-
} else {
53-
return itemCount === 0 ? 'No items' : `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
54-
($pageIndex + 1) * $pageSize,
55-
itemCount
56-
)} of ${Math.min($pageCount * $pageSize, itemCount)}`;
57-
}
26+
return itemCount === 0
27+
? 'No items'
28+
: `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
29+
($pageIndex + 1) * $pageSize,
30+
itemCount
31+
)} of ${Math.min($pageCount * $pageSize, itemCount)}`;
5832
};
5933
60-
$: goToFirstPageDisabled = !$pageIndex;
61-
$: goToLastPageDisabled = $pageIndex == $pageCount - 1;
62-
$: goToNextPageDisabled = !$hasNextPage;
63-
$: goToPreviousPageDisabled = !$hasPreviousPage;
34+
$: paginationSettings = {
35+
size: itemCount,
36+
limit: $pageSize,
37+
page: $pageIndex,
38+
amounts: pageSizes
39+
};
6440
$: $pageSize = pageSizeDropdownValue;
6541
$: $pageCount, $pageIndex, $pageSize, itemCount, (indexInformation = getIndexInfomationString());
6642
</script>
6743

68-
<div class="flex justify-between w-full items-stretch gap-10">
44+
<div class="grid grid-cols-3 w-full items-stretch gap-10">
6945
<div class="flex justify-start">
70-
<!-- <select
71-
name="pageSize"
72-
id="{id}-pageSize"
73-
class="select variant-filled-primary w-min font-bold"
74-
bind:value={$pageSize}
75-
>
76-
{#each pageSizes as size}
77-
<option value={size} class="">{size}</option>
78-
{/each}
79-
</select> -->
80-
8146
<button
8247
aria-label="Open menu to select number of items to display per page"
83-
class="btn variant-filled-primary w-20 justify-between"
48+
class="btn variant-filled-primary w-20 !px-3 !py-1.5 justify-between"
8449
use:popup={pageSizePopup}
8550
>
8651
<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
8752
<Fa icon={faChevronDown} size="xs" />
8853
</button>
89-
9054
<div class="card w-20 shadow-xl py-2" data-popup={`#${id}-pageSizeDropdown`}>
9155
<ListBox rounded="rounded-none">
9256
{#each pageSizes as size}
@@ -98,48 +62,18 @@
9862
<div class="arrow bg-surface-100-800-token" />
9963
</div>
10064
</div>
101-
<div class="flex justify-center gap-1">
102-
<button
103-
class="btn btn-sm variant-filled-primary"
104-
on:click|preventDefault={goToFirstPage}
105-
aria-label="Go to first page"
106-
disabled={goToFirstPageDisabled}
107-
id="{id}-first"
108-
>
109-
<Fa icon={faAnglesLeft} /></button
110-
>
111-
<button
112-
class="btn btn-sm variant-filled-primary"
113-
id="{id}-previous"
114-
aria-label="Go to previous page"
115-
on:click|preventDefault={goToPreviousPage}
116-
disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
117-
>
118-
<input
119-
type="number"
120-
class="input border border-primary-500 rounded flex w-24"
121-
value={$pageIndex + 1}
122-
max={$pageCount}
123-
aria-label="Current page"
124-
min={1}
125-
on:change={handleChange}
65+
<div class="flex justify-center">
66+
<Paginator
67+
on:page={(page) => ($pageIndex = page.detail)}
68+
settings={paginationSettings}
69+
select="hidden"
70+
buttonClasses="disabled:!variant-filled-surface !px-3 !py-1.5 !fill-current !variant-filled-primary"
71+
active="!variant-filled-secondary"
72+
maxNumerals={1}
73+
showNumerals
12674
/>
127-
<button
128-
class="btn btn-sm variant-filled-primary"
129-
id="{id}-next"
130-
aria-label="Go to next page"
131-
on:click|preventDefault={goToNextPage}
132-
disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
133-
>
134-
<button
135-
class="btn btn-sm variant-filled-primary"
136-
aria-label="Go to last page"
137-
id="{id}-last"
138-
on:click|preventDefault={goToLastPage}
139-
disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
140-
>
14175
</div>
14276
<div class="flex justify-end items-center">
143-
<span class="text-sm text-gray-500">{indexInformation}</span>
77+
<span class="text-xs text-gray-500">{indexInformation}</span>
14478
</div>
14579
</div>

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
export let id; // Unique table ID
1111
export let pageIndex;
1212
export let pageSize;
13-
export let pageIndexStringType;
1413
export let pageSizes; // Available page sizes
1514
export let serverItemCount; // Total number of items expected from the server. `serverSide` must be true on table config.
1615
export let updateTable; // Function to update table
@@ -63,13 +62,12 @@
6362
};
6463
6564
const getIndexInfomationString = () => {
66-
if (pageIndexStringType === 'pages') {
67-
return pageCount > 0 ? `Page ${$pageIndex + 1} of ${pageCount}` : 'No pages';
68-
} else {
69-
return `Showing ${$pageIndex * $pageSize + 1} - ${($pageIndex + 1) * $pageSize} of ${
70-
pageCount * $pageSize
71-
} items`;
72-
}
65+
return serverItemCount === 0
66+
? 'No items'
67+
: `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
68+
($pageIndex + 1) * $pageSize,
69+
serverItemCount
70+
)} of ${Math.min(pageCount * $pageSize, serverItemCount)}`;
7371
};
7472
7573
$: pageCount = Math.ceil($serverItemCount / $pageSize);

‎src/lib/components/Table/utils.ts‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,21 @@ export const cellStyle = (id: string, columns: Columns | undefined) => {
3333
// Create and return styles separated by ';'
3434
return styles.join(';');
3535
};
36+
// Styles for resizing the cells
37+
export const getResizeStyles = (
38+
rowHeights: { [key: number]: { max: number; min: number } },
39+
id: string | number,
40+
index: number
41+
) => {
42+
return `
43+
min-height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
44+
max-height: ${index !== 0 && rowHeights && rowHeights[+id]
45+
? `${rowHeights[+id].max}px`
46+
: 'auto'
47+
};
48+
height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
49+
`;
50+
}
3651
// Function to normalize the filters for back-end
3752
export const normalizeFilters = (filters: {
3853
[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
@@ -54,7 +69,7 @@ export const normalizeFilters = (filters: {
5469

5570
return filter;
5671
};
57-
72+
// Creates a CSV file and downloads it
5873
export const exportAsCsv = (tableId: string, exportedData: string) => {
5974
// Creating a hidden anchor element to download the CSV file
6075
const anchor = document.createElement('a');
@@ -65,7 +80,7 @@ export const exportAsCsv = (tableId: string, exportedData: string) => {
6580
anchor.click();
6681
document.body.removeChild(anchor);
6782
};
68-
83+
// Function to convert JSON data to CSV format
6984
export const jsonToCsv = (data: string): string => {
7085
const json = JSON.parse(data);
7186

@@ -96,7 +111,6 @@ export const jsonToCsv = (data: string): string => {
96111
// Join rows with newlines
97112
return rows.join('\n');
98113
}
99-
100114
// Resetting the resized columns and/or rows
101115
export const resetResize = (
102116
headerRows: any,
@@ -140,7 +154,7 @@ export const resetResize = (
140154
});
141155
}
142156
};
143-
157+
// Finds the mapping for missing values
144158
export const missingValuesFn = (
145159
key: number | string,
146160
missingValues: { [key: string | number]: string }
@@ -160,7 +174,6 @@ export const missingValuesFn = (
160174

161175
return foundKey ? missingValues[foundKey] : key;
162176
};
163-
164177
// Function to update the server-side table data
165178
export const updateTable = async (
166179
pageSize: number,
@@ -230,7 +243,7 @@ export const updateTable = async (
230243

231244
return response;
232245
};
233-
246+
// Function to convert server data to client data
234247
export const convertServerColumns = (
235248
serverColumns: ServerColumn[],
236249
columns: Columns | undefined
@@ -288,7 +301,6 @@ export const convertServerColumns = (
288301

289302
return columnsConfig;
290303
};
291-
292304
// Calculates the maximum height of the cells in each row
293305
export const getMaxCellHeightInRow = (
294306
tableRef: HTMLTableElement,
@@ -329,7 +341,6 @@ export const getMaxCellHeightInRow = (
329341
});
330342
});
331343
};
332-
333344
// Calculates the minimum width of the cells in each column
334345
export const getMinCellWidthInColumn = (
335346
tableRef: HTMLTableElement,
@@ -355,19 +366,4 @@ export const getMinCellWidthInColumn = (
355366
});
356367
return cw;
357368
});
358-
};
359-
360-
export const getResizeStyles = (
361-
rowHeights: { [key: number]: { max: number; min: number } },
362-
id: string | number,
363-
index: number
364-
) => {
365-
return `
366-
min-height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
367-
max-height: ${index !== 0 && rowHeights && rowHeights[+id]
368-
? `${rowHeights[+id].max}px`
369-
: 'auto'
370-
};
371-
height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
372-
`;
373-
}
369+
};

‎src/lib/models/Models.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,6 @@ export interface TableConfig<T> {
127127
exportable?: boolean; // false by default
128128
pageSizes?: number[]; // [5, 10, 20, 50, 100] by default
129129
defaultPageSize?: number; // 10 by default
130-
pageIndexStringType?: 'items' | 'pages'; // pages by default
131130
optionsComponent?: typeof SvelteComponent;
132131

133132
server?: ServerConfig;

‎src/routes/components/table/data/codeBlocks.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,6 @@ export const usersBDHTML = `
146146
const usersBDConfig: TableConfig<UserBD> = {
147147
id: 'usersBD',
148148
data: usersBDStore,
149-
pageIndexStringType: 'items',
150149
columns: {
151150
dateOfBirth: {
152151
header: 'Date of birth',
@@ -214,7 +213,6 @@ export interface TableConfig<T> {
214213
exportable?: boolean; // false by default
215214
pageSizes?: number[]; // [5, 10, 20, 50, 100] by default
216215
defaultPageSize?: number; // 10 by default
217-
pageIndexStringType?: 'items' | 'pages'; // items by default
218216
optionsComponent?: typeof SvelteComponent;
219217
220218
server?: ServerConfig;

‎src/routes/components/table/docs/TableConfigDocs.svelte‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -190,21 +190,6 @@
190190
</p>
191191
</div>
192192

193-
<div class="items-center">
194-
<div class="flex gap-2">
195-
<div class="italic">pageIndexStringType:</div>
196-
<div class="font-bold"><i>"items"</i> or <i>"pages"</i></div>
197-
</div>
198-
199-
<p class="text-xl pl-10">
200-
Whether the table should display page index information by number of items or pages. <code
201-
class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
202-
>"items"</code
203-
>
204-
by default.
205-
</p>
206-
</div>
207-
208193
<div class="items-center">
209194
<div class="flex gap-2">
210195
<div class="italic">optionsComponent:</div>

0 commit comments

Comments
 (0)