Skip to content

Commit bf1aa98

Browse files
zxyctnzxyctn
committed
Get rid of page index string type option
1 parent 29a56fb commit bf1aa98

File tree

8 files changed

+33
-66
lines changed

8 files changed

+33
-66
lines changed

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

Lines changed: 0 additions & 3 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
@@ -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: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
export let itemCount;
88
export let pageConfig;
99
export let pageSizes;
10-
export let pageIndexStringType;
1110
export let id;
1211
1312
let indexInformation = '';
@@ -24,16 +23,12 @@
2423
};
2524
2625
const getIndexInfomationString = () => {
27-
if (pageIndexStringType === 'pages') {
28-
return $pageCount > 0 ? `Page ${$pageIndex + 1} of ${$pageCount}` : 'No pages';
29-
} else {
30-
return itemCount === 0
31-
? 'No items'
32-
: `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
33-
($pageIndex + 1) * $pageSize,
34-
itemCount
35-
)} of ${Math.min($pageCount * $pageSize, itemCount)}`;
36-
}
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)}`;
3732
};
3833
3934
$: paginationSettings = {

‎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>

‎src/routes/components/table/examples/TableDate.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
const usersBDConfig: TableConfig<UserBD> = {
1010
id: 'usersBD',
1111
data: usersBDStore,
12-
pageIndexStringType: 'items',
1312
columns: {
1413
dateOfBirth: {
1514
header: 'Date of birth',
@@ -25,7 +24,7 @@
2524
</script>
2625

2726
<div id="usersBD">
28-
<CodeContainer title="Date (+ page index type of items)" svelte={usersBDHTML} data={usersBDStoreCode}>
27+
<CodeContainer title="Date" svelte={usersBDHTML} data={usersBDStoreCode}>
2928
<Table config={usersBDConfig} />
3029
</CodeContainer>
3130
</div>

0 commit comments

Comments
 (0)