@bexis2/bexis2-core-ui 0.4.27 → 0.4.29

package/README.md

@@ -1,5 +1,15 @@
 # bexis-core-ui
-## 04.27
+
+## 0.4.29
+- table
+  - Fixes the appearance issues related to Table paginator.
+  - 
+## 0.4.28
+- Fixes issue with options component not displaying items correctly
+- New pagination component
+- Removes the option for selecting page index string type of "pages" or "items". "items" will be the default and only option to show pagination info now.
+  
+## 0.4.27
 - Fixes the issue with updating the number of displayed items correctly.
 - Makes "items" the default type for displaying pagination info.
 

package/dist/components/Table/TableContent.svelte

@@ -50,8 +50,6 @@ let {
   // Whether to display the search input
   pageSizes = [5, 10, 20, 50, 100],
   // Page sizes to display in the pagination component
-  pageIndexStringType = "items",
-  // items by default
   fitToScreen = true,
   // Whether to fit the table to the screen,
   exportable = false,
@@ -566,7 +564,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 																			? utils.minWidth(cell.id, columns)
 																			: $colWidths[index]
 																  }px;`
-																: 'max-width: min-content;'}
+																: ''}
 														>
 															<Render of={cell.render()} />
 														</div>
@@ -608,7 +606,6 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 				{serverItemCount}
 				updateTable={updateTableWithParams}
 				{pageSizes}
-				{pageIndexStringType}
 				id={tableId}
 			/>
 		{:else}
@@ -617,7 +614,6 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 				pageConfig={pluginStates.page}
 				{pageSizes}
 				id={tableId}
-				{pageIndexStringType}
 			/>
 		{/if}
 	{/if}

package/dist/components/Table/TablePagination.svelte

@@ -1,33 +1,12 @@
 <script>import Fa from "svelte-fa";
-import {
-  faAnglesRight,
-  faAngleRight,
-  faAnglesLeft,
-  faAngleLeft,
-  faChevronDown
-} from "@fortawesome/free-solid-svg-icons";
-import { ListBox, ListBoxItem, popup } from "@skeletonlabs/skeleton";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { ListBox, ListBoxItem, Paginator, popup } from "@skeletonlabs/skeleton";
 export let itemCount;
 export let pageConfig;
 export let pageSizes;
-export let pageIndexStringType;
 export let id;
 let indexInformation = "";
-const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = pageConfig;
-const goToFirstPage = () => $pageIndex = 0;
-const goToLastPage = () => $pageIndex = $pageCount - 1;
-const goToNextPage = () => $pageIndex += 1;
-const goToPreviousPage = () => $pageIndex -= 1;
-const handleChange = (e) => {
-  const value = e.target.value;
-  if (value > $pageCount) {
-    $pageIndex = $pageCount - 1;
-  } else if (value < 1) {
-    $pageIndex = 0;
-  } else {
-    $pageIndex = value - 1;
-  }
-};
+const { pageIndex, pageCount, pageSize } = pageConfig;
 let pageSizeDropdownValue = $pageSize;
 const pageSizePopup = {
   event: "click",
@@ -36,45 +15,31 @@ const pageSizePopup = {
   closeQuery: ".listbox-item"
 };
 const getIndexInfomationString = () => {
-  if (pageIndexStringType === "pages") {
-    return $pageCount > 0 ? `Page ${$pageIndex + 1} of ${$pageCount}` : "No pages";
-  } else {
-    return itemCount === 0 ? "No items" : `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
-      ($pageIndex + 1) * $pageSize,
-      itemCount
-    )} of ${Math.min($pageCount * $pageSize, itemCount)}`;
-  }
+  return itemCount === 0 ? "No items" : `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
+    ($pageIndex + 1) * $pageSize,
+    itemCount
+  )} of ${Math.min($pageCount * $pageSize, itemCount)}`;
+};
+$: paginationSettings = {
+  size: itemCount,
+  limit: $pageSize,
+  page: $pageIndex,
+  amounts: pageSizes
 };
-$: goToFirstPageDisabled = !$pageIndex;
-$: goToLastPageDisabled = $pageIndex == $pageCount - 1;
-$: goToNextPageDisabled = !$hasNextPage;
-$: goToPreviousPageDisabled = !$hasPreviousPage;
 $: $pageSize = pageSizeDropdownValue;
 $: $pageCount, $pageIndex, $pageSize, itemCount, indexInformation = getIndexInfomationString();
 </script>
 
-<div class="flex justify-between w-full items-stretch gap-10">
+<div class="grid grid-cols-3 w-full items-stretch gap-10">
 	<div class="flex justify-start">
-		<!-- <select
-			name="pageSize"
-			id="{id}-pageSize"
-			class="select variant-filled-primary w-min font-bold"
-			bind:value={$pageSize}
-		>
-			{#each pageSizes as size}
-				<option value={size} class="">{size}</option>
-			{/each}
-		</select> -->
-
 		<button
 			aria-label="Open menu to select number of items to display per page"
-			class="btn variant-filled-primary w-20 justify-between"
+			class="btn variant-filled-primary w-20 !px-3 !py-1.5 justify-between"
 			use:popup={pageSizePopup}
 		>
 			<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
 			<Fa icon={faChevronDown} size="xs" />
 		</button>
-
 		<div class="card w-20 shadow-xl py-2" data-popup={`#${id}-pageSizeDropdown`}>
 			<ListBox rounded="rounded-none">
 				{#each pageSizes as size}
@@ -86,48 +51,19 @@ $: $pageCount, $pageIndex, $pageSize, itemCount, indexInformation = getIndexInfo
 			<div class="arrow bg-surface-100-800-token" />
 		</div>
 	</div>
-	<div class="flex justify-center gap-1">
-		<button
-			class="btn btn-sm variant-filled-primary"
-			on:click|preventDefault={goToFirstPage}
-			aria-label="Go to first page"
-			disabled={goToFirstPageDisabled}
-			id="{id}-first"
-		>
-			<Fa icon={faAnglesLeft} /></button
-		>
-		<button
-			class="btn btn-sm variant-filled-primary"
-			id="{id}-previous"
-			aria-label="Go to previous page"
-			on:click|preventDefault={goToPreviousPage}
-			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
-		>
-		<input
-			type="number"
-			class="input border border-primary-500 rounded flex w-24"
-			value={$pageIndex + 1}
-			max={$pageCount}
-			aria-label="Current page"
-			min={1}
-			on:change={handleChange}
+	<div class="flex justify-center">
+		<Paginator
+			on:page={(page) => ($pageIndex = page.detail)}
+			settings={paginationSettings}
+			select="hidden"
+			active="active"
+			controlVariant=""
+			regionControl="btn-group"
+			maxNumerals={1}
+			showNumerals
 		/>
-		<button
-			class="btn btn-sm variant-filled-primary"
-			id="{id}-next"
-			aria-label="Go to next page"
-			on:click|preventDefault={goToNextPage}
-			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
-		>
-		<button
-			class="btn btn-sm variant-filled-primary"
-			aria-label="Go to last page"
-			id="{id}-last"
-			on:click|preventDefault={goToLastPage}
-			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
-		>
 	</div>
-	<div class="flex justify-end items-center">
-		<span class="text-sm text-gray-500">{indexInformation}</span>
+	<div class="flex justify-end items-center text-on-primary-token">
+		<span class="text-xs text-gray-500">{indexInformation}</span>
 	</div>
 </div>

package/dist/components/Table/TablePagination.svelte.d.ts

@@ -4,7 +4,6 @@ declare const __propDef: {
         itemCount: any;
         pageConfig: any;
         pageSizes: any;
-        pageIndexStringType: any;
         id: any;
     };
     events: {

package/dist/components/Table/TablePaginationServer.svelte

@@ -8,7 +8,6 @@ import {
 export let id;
 export let pageIndex;
 export let pageSize;
-export let pageIndexStringType;
 export let pageSizes;
 export let serverItemCount;
 export let updateTable;
@@ -48,11 +47,10 @@ const goTo = (dst) => {
   updateTable();
 };
 const getIndexInfomationString = () => {
-  if (pageIndexStringType === "pages") {
-    return pageCount > 0 ? `Page ${$pageIndex + 1} of ${pageCount}` : "No pages";
-  } else {
-    return `Showing ${$pageIndex * $pageSize + 1} - ${($pageIndex + 1) * $pageSize} of ${pageCount * $pageSize} items`;
-  }
+  return serverItemCount === 0 ? "No items" : `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
+    ($pageIndex + 1) * $pageSize,
+    serverItemCount
+  )} of ${Math.min(pageCount * $pageSize, serverItemCount)}`;
 };
 $: pageCount = Math.ceil($serverItemCount / $pageSize);
 $: goToFirstPageDisabled = !$pageIndex;

package/dist/components/Table/TablePaginationServer.svelte.d.ts

@@ -4,7 +4,6 @@ declare const __propDef: {
         id: any;
         pageIndex: any;
         pageSize: any;
-        pageIndexStringType: any;
         pageSizes: any;
         serverItemCount: any;
         updateTable: any;

package/dist/components/Table/utils.d.ts

@@ -6,6 +6,12 @@ import type { Columns, Filter, ServerColumn, ServerConfig } from '../../models/M
 export declare const minWidth: (id: string, columns: Columns | undefined) => number;
 export declare const fixedWidth: (id: string, columns: Columns | undefined) => number;
 export declare const cellStyle: (id: string, columns: Columns | undefined) => string;
+export declare const getResizeStyles: (rowHeights: {
+    [key: number]: {
+        max: number;
+        min: number;
+    };
+}, id: string | number, index: number) => string;
 export declare const normalizeFilters: (filters: {
     [key: string]: { [key in FilterOptionsEnum]?: number | string | Date; };
 }) => Filter[];
@@ -26,9 +32,3 @@ export declare const getMaxCellHeightInRow: (tableRef: HTMLTableElement, resizab
     };
 }>, tableId: string, rowHeight: number | null) => void;
 export declare const getMinCellWidthInColumn: (tableRef: HTMLTableElement, colWidths: Writable<number[]>, headerRowsLength: number, resizable: "columns" | "rows" | "none" | "both") => void;
-export declare const getResizeStyles: (rowHeights: {
-    [key: number]: {
-        max: number;
-        min: number;
-    };
-}, id: string | number, index: number) => string;

package/dist/components/Table/utils.js

@@ -27,6 +27,16 @@ export const cellStyle = (id, columns) => {
     // Create and return styles separated by ';'
     return styles.join(';');
 };
+// Styles for resizing the cells
+export const getResizeStyles = (rowHeights, id, index) => {
+    return `
+	min-height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
+	max-height: ${index !== 0 && rowHeights && rowHeights[+id]
+        ? `${rowHeights[+id].max}px`
+        : 'auto'};
+	height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
+	`;
+};
 // Function to normalize the filters for back-end
 export const normalizeFilters = (filters) => {
     let filter = [];
@@ -44,6 +54,7 @@ export const normalizeFilters = (filters) => {
     });
     return filter;
 };
+// Creates a CSV file and downloads it
 export const exportAsCsv = (tableId, exportedData) => {
     // Creating a hidden anchor element to download the CSV file
     const anchor = document.createElement('a');
@@ -54,6 +65,7 @@ export const exportAsCsv = (tableId, exportedData) => {
     anchor.click();
     document.body.removeChild(anchor);
 };
+// Function to convert JSON data to CSV format
 export const jsonToCsv = (data) => {
     const json = JSON.parse(data);
     if (json.length === 0)
@@ -115,6 +127,7 @@ export const resetResize = (headerRows, pageRows, tableId, columns, resizable) =
         });
     }
 };
+// Finds the mapping for missing values
 export const missingValuesFn = (key, missingValues) => {
     const foundKey = typeof key === 'number' && key.toString().includes('e')
         ? Object.keys(missingValues).find((item) => {
@@ -175,6 +188,7 @@ export const updateTable = async (pageSize, pageIndex, server, filters, data, se
     serverItems?.set(response.count);
     return response;
 };
+// Function to convert server data to client data
 export const convertServerColumns = (serverColumns, columns) => {
     const columnsConfig = {};
     serverColumns.forEach((col) => {
@@ -277,12 +291,3 @@ export const getMinCellWidthInColumn = (tableRef, colWidths, headerRowsLength, r
         return cw;
     });
 };
-export const getResizeStyles = (rowHeights, id, index) => {
-    return `
-	min-height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
-	max-height: ${index !== 0 && rowHeights && rowHeights[+id]
-        ? `${rowHeights[+id].max}px`
-        : 'auto'};
-	height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
-	`;
-};

package/dist/models/Models.d.ts

@@ -100,7 +100,6 @@ export interface TableConfig<T> {
     exportable?: boolean;
     pageSizes?: number[];
     defaultPageSize?: number;
-    pageIndexStringType?: 'items' | 'pages';
     optionsComponent?: typeof SvelteComponent;
     server?: ServerConfig;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.27",
+  "version": "0.4.29",
   "private": false,
   "scripts": {
     "dev": "vite dev",

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

@@ -48,7 +48,6 @@
 		toggle = false, // Whether to display the fitToScreen toggle
 		search = true, // Whether to display the search input
 		pageSizes = [5, 10, 20, 50, 100], // Page sizes to display in the pagination component
-		pageIndexStringType = 'items', // items by default
 		fitToScreen = true, // Whether to fit the table to the screen,
 		exportable = false, // Whether to display the export button and enable export functionality
 		server
@@ -644,7 +643,7 @@
 																			? utils.minWidth(cell.id, columns)
 																			: $colWidths[index]
 																  }px;`
-																: 'max-width: min-content;'}
+																: ''}
 														>
 															<Render of={cell.render()} />
 														</div>
@@ -686,7 +685,6 @@
 				{serverItemCount}
 				updateTable={updateTableWithParams}
 				{pageSizes}
-				{pageIndexStringType}
 				id={tableId}
 			/>
 		{:else}
@@ -695,7 +693,6 @@
 				pageConfig={pluginStates.page}
 				{pageSizes}
 				id={tableId}
-				{pageIndexStringType}
 			/>
 		{/if}
 	{/if}

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

@@ -1,41 +1,17 @@
 <script lang="ts">
 	import Fa from 'svelte-fa';
-	import {
-		faAnglesRight,
-		faAngleRight,
-		faAnglesLeft,
-		faAngleLeft,
-		faChevronDown
-	} from '@fortawesome/free-solid-svg-icons';
-	import { ListBox, ListBoxItem, popup, type PopupSettings } from '@skeletonlabs/skeleton';
+	import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+	import { ListBox, ListBoxItem, Paginator, popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
 
 	export let itemCount;
 	export let pageConfig;
 	export let pageSizes;
-	export let pageIndexStringType;
 	export let id;
 
 	let indexInformation = '';
 
-	const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = pageConfig;
-
-	const goToFirstPage = () => ($pageIndex = 0);
-	const goToLastPage = () => ($pageIndex = $pageCount - 1);
-	const goToNextPage = () => ($pageIndex += 1);
-	const goToPreviousPage = () => ($pageIndex -= 1);
-
-	// Handles the input change event
-	const handleChange = (e) => {
-		const value = e.target.value;
-
-		if (value > $pageCount) {
-			$pageIndex = $pageCount - 1;
-		} else if (value < 1) {
-			$pageIndex = 0;
-		} else {
-			$pageIndex = value - 1;
-		}
-	};
+	const { pageIndex, pageCount, pageSize } = pageConfig;
 
 	let pageSizeDropdownValue: string = $pageSize;
 
@@ -47,46 +23,34 @@
 	};
 
 	const getIndexInfomationString = () => {
-		if (pageIndexStringType === 'pages') {
-			return $pageCount > 0 ? `Page ${$pageIndex + 1} of ${$pageCount}` : 'No pages';
-		} else {
-			return itemCount === 0 ? 'No items' : `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
-				($pageIndex + 1) * $pageSize,
-				itemCount
-			)} of ${Math.min($pageCount * $pageSize, itemCount)}`;
-		}
+		return itemCount === 0
+			? 'No items'
+			: `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
+					($pageIndex + 1) * $pageSize,
+					itemCount
+			  )} of ${Math.min($pageCount * $pageSize, itemCount)}`;
 	};
 
-	$: goToFirstPageDisabled = !$pageIndex;
-	$: goToLastPageDisabled = $pageIndex == $pageCount - 1;
-	$: goToNextPageDisabled = !$hasNextPage;
-	$: goToPreviousPageDisabled = !$hasPreviousPage;
+	$: paginationSettings = {
+		size: itemCount,
+		limit: $pageSize,
+		page: $pageIndex,
+		amounts: pageSizes
+	};
 	$: $pageSize = pageSizeDropdownValue;
 	$: $pageCount, $pageIndex, $pageSize, itemCount, (indexInformation = getIndexInfomationString());
 </script>
 
-<div class="flex justify-between w-full items-stretch gap-10">
+<div class="grid grid-cols-3 w-full items-stretch gap-10">
 	<div class="flex justify-start">
-		<!-- <select
-			name="pageSize"
-			id="{id}-pageSize"
-			class="select variant-filled-primary w-min font-bold"
-			bind:value={$pageSize}
-		>
-			{#each pageSizes as size}
-				<option value={size} class="">{size}</option>
-			{/each}
-		</select> -->
-
 		<button
 			aria-label="Open menu to select number of items to display per page"
-			class="btn variant-filled-primary w-20 justify-between"
+			class="btn variant-filled-primary w-20 !px-3 !py-1.5 justify-between"
 			use:popup={pageSizePopup}
 		>
 			<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
 			<Fa icon={faChevronDown} size="xs" />
 		</button>
-
 		<div class="card w-20 shadow-xl py-2" data-popup={`#${id}-pageSizeDropdown`}>
 			<ListBox rounded="rounded-none">
 				{#each pageSizes as size}
@@ -98,48 +62,19 @@
 			<div class="arrow bg-surface-100-800-token" />
 		</div>
 	</div>
-	<div class="flex justify-center gap-1">
-		<button
-			class="btn btn-sm variant-filled-primary"
-			on:click|preventDefault={goToFirstPage}
-			aria-label="Go to first page"
-			disabled={goToFirstPageDisabled}
-			id="{id}-first"
-		>
-			<Fa icon={faAnglesLeft} /></button
-		>
-		<button
-			class="btn btn-sm variant-filled-primary"
-			id="{id}-previous"
-			aria-label="Go to previous page"
-			on:click|preventDefault={goToPreviousPage}
-			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
-		>
-		<input
-			type="number"
-			class="input border border-primary-500 rounded flex w-24"
-			value={$pageIndex + 1}
-			max={$pageCount}
-			aria-label="Current page"
-			min={1}
-			on:change={handleChange}
+	<div class="flex justify-center">
+		<Paginator
+			on:page={(page) => ($pageIndex = page.detail)}
+			settings={paginationSettings}
+			select="hidden"
+			active="active"
+			controlVariant=""
+			regionControl="btn-group"
+			maxNumerals={1}
+			showNumerals
 		/>
-		<button
-			class="btn btn-sm variant-filled-primary"
-			id="{id}-next"
-			aria-label="Go to next page"
-			on:click|preventDefault={goToNextPage}
-			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
-		>
-		<button
-			class="btn btn-sm variant-filled-primary"
-			aria-label="Go to last page"
-			id="{id}-last"
-			on:click|preventDefault={goToLastPage}
-			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
-		>
 	</div>
-	<div class="flex justify-end items-center">
-		<span class="text-sm text-gray-500">{indexInformation}</span>
+	<div class="flex justify-end items-center text-on-primary-token">
+		<span class="text-xs text-gray-500">{indexInformation}</span>
 	</div>
 </div>

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

@@ -10,7 +10,6 @@
 	export let id; // Unique table ID
 	export let pageIndex;
 	export let pageSize;
-	export let pageIndexStringType;
 	export let pageSizes; // Available page sizes
 	export let serverItemCount; // Total number of items expected from the server. `serverSide` must be true on table config.
 	export let updateTable; // Function to update table
@@ -63,13 +62,12 @@
 	};
 
 	const getIndexInfomationString = () => {
-		if (pageIndexStringType === 'pages') {
-			return pageCount > 0 ? `Page ${$pageIndex + 1} of ${pageCount}` : 'No pages';
-		} else {
-			return `Showing ${$pageIndex * $pageSize + 1} - ${($pageIndex + 1) * $pageSize} of ${
-				pageCount * $pageSize
-			} items`;
-		}
+		return serverItemCount === 0
+			? 'No items'
+			: `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
+					($pageIndex + 1) * $pageSize,
+					serverItemCount
+			  )} of ${Math.min(pageCount * $pageSize, serverItemCount)}`;
 	};
 
 	$: pageCount = Math.ceil($serverItemCount / $pageSize);

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

@@ -33,6 +33,21 @@ export const cellStyle = (id: string, columns: Columns | undefined) => {
 	// Create and return styles separated by ';'
 	return styles.join(';');
 };
+// Styles for resizing the cells
+export const getResizeStyles = (
+	rowHeights: { [key: number]: { max: number; min: number } },
+	id: string | number,
+	index: number
+) => {
+	return `
+	min-height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
+	max-height: ${index !== 0 && rowHeights && rowHeights[+id]
+			? `${rowHeights[+id].max}px`
+			: 'auto'
+		};
+	height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
+	`;
+}
 // Function to normalize the filters for back-end
 export const normalizeFilters = (filters: {
 	[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
@@ -54,7 +69,7 @@ export const normalizeFilters = (filters: {
 
 	return filter;
 };
-
+// Creates a CSV file and downloads it
 export const exportAsCsv = (tableId: string, exportedData: string) => {
 	// Creating a hidden anchor element to download the CSV file
 	const anchor = document.createElement('a');
@@ -65,7 +80,7 @@ export const exportAsCsv = (tableId: string, exportedData: string) => {
 	anchor.click();
 	document.body.removeChild(anchor);
 };
-
+// Function to convert JSON data to CSV format
 export const jsonToCsv = (data: string): string => {
 	const json = JSON.parse(data);
 
@@ -96,7 +111,6 @@ export const jsonToCsv = (data: string): string => {
 	// Join rows with newlines
 	return rows.join('\n');
 }
-
 // Resetting the resized columns and/or rows
 export const resetResize = (
 	headerRows: any,
@@ -140,7 +154,7 @@ export const resetResize = (
 		});
 	}
 };
-
+// Finds the mapping for missing values
 export const missingValuesFn = (
 	key: number | string,
 	missingValues: { [key: string | number]: string }
@@ -160,7 +174,6 @@ export const missingValuesFn = (
 
 	return foundKey ? missingValues[foundKey] : key;
 };
-
 // Function to update the server-side table data
 export const updateTable = async (
 	pageSize: number,
@@ -230,7 +243,7 @@ export const updateTable = async (
 
 	return response;
 };
-
+// Function to convert server data to client data
 export const convertServerColumns = (
 	serverColumns: ServerColumn[],
 	columns: Columns | undefined
@@ -288,7 +301,6 @@ export const convertServerColumns = (
 
 	return columnsConfig;
 };
-
 // Calculates the maximum height of the cells in each row
 export const getMaxCellHeightInRow = (
 	tableRef: HTMLTableElement,
@@ -329,7 +341,6 @@ export const getMaxCellHeightInRow = (
 		});
 	});
 };
-
 // Calculates the minimum width of the cells in each column
 export const getMinCellWidthInColumn = (
 	tableRef: HTMLTableElement,
@@ -355,19 +366,4 @@ export const getMinCellWidthInColumn = (
 		});
 		return cw;
 	});
-};
-
-export const getResizeStyles = (
-	rowHeights: { [key: number]: { max: number; min: number } },
-	id: string | number,
-	index: number
-) => {
-	return `
-	min-height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
-	max-height: ${index !== 0 && rowHeights && rowHeights[+id]
-			? `${rowHeights[+id].max}px`
-			: 'auto'
-		};
-	height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
-	`;
-}
+};

package/src/lib/models/Models.ts

@@ -127,7 +127,6 @@ export interface TableConfig<T> {
 	exportable?: boolean; // false by default
 	pageSizes?: number[]; // [5, 10, 20, 50, 100] by default
 	defaultPageSize?: number; // 10 by default
-	pageIndexStringType?: 'items' | 'pages'; // pages by default
 	optionsComponent?: typeof SvelteComponent;
 
 	server?: ServerConfig;