Update structure of server-side config for server-side table

Author: zxyctn

src/routes/components/table/examples/TableServer.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
 
 	import CodeContainer from '$docs/components/CodeContainer.svelte';
 	import Table from '$lib/components/Table/Table.svelte';
+	import { setApiConfig } from '$lib';
 	import { serverSideTableHTML } from '../data/codeBlocks';
 	import type { TableConfig } from '$lib/models/Models';
 
@@ -11,22 +13,31 @@
 		name: string;
 	};
 
-	const tableStore = writable<ServerTableType[]>([]);
+	let serverTableConfig: TableConfig<ServerTableType>;
 
-	const serverTableConfig: TableConfig<ServerTableType> = {
-		id: 'serverTable', // a unique id for the table
-		entityId: 3, // dataset ID
-		versionId: -1, // vesion ID
-		data: tableStore, // store to hold and retrieve data
-		serverSide: true, // serverSide needs to be set to true
-		// URL for the table to be fetched from
-		URL: 'https://dev.bexis2.uni-jena.de/api/datatable/',
-		token: '<your_token>' // API token to access the datasets
-	};
+	onMount(async () => {
+		setApiConfig('https://dev.bexis2.uni-jena.de/', 'admin', '123456');
+		const tableStore = writable<ServerTableType[]>([]);
+
+		serverTableConfig = {
+			id: 'serverTable', // a unique id for the table
+			data: tableStore, // store to hold and retrieve data
+			// URL for the table to be fetched from
+			pageSizes: [10, 25, 50, 100],
+			
+			server: {
+				baseUrl: 'https://dev.bexis2.uni-jena.de/api/datatable/',
+				entityId: 1, // dataset ID
+				versionId: -1, // version ID
+			}
+		};
+	});
 </script>
 
 <div id="serverTableExample">
 	<CodeContainer title="Server-side table" svelte={serverSideTableHTML}>
-		<Table config={serverTableConfig} />
+		{#if serverTableConfig}
+			<Table config={serverTableConfig} />
+		{/if}
 	</CodeContainer>
 </div>