Tabulator tables. nice in theory. Too bad nothing fucking works.

package.json

@@ -32,7 +32,6 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
-		"@types/tabulator-tables": "^6.2.3",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"eslint": "^8.28.0",
@@ -50,10 +49,12 @@
 		"@sveltejs/adapter-node": "^1.3.1",
 		"@sveltejs/kit": "^1.27.6",
 		"dotenv": "^16.3.1",
-		"tabulator-tables": "^6.2.3",
+		"tsc-alias": "^1.8.10",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2",
-		"vitest": "^0.34.0"
+		"vitest": "^0.34.0",
+		"wx-svelte-core": "^1.3.1",
+		"wx-svelte-grid": "^1.3.3"
 	},
 	"eslintConfig": {
 		"extends": [

src/lib/DataTable.svelte

@@ -1,41 +1,19 @@
 <script lang='ts'>
 
-	import {TabulatorFull as Tabulator} from 'tabulator-tables';
-	import {onMount} from 'svelte';
+	import { Grid } from 'wx-svelte-grid';
+	import { Willow } from 'wx-svelte-grid';
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	export let data: any[];
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	export let columns: any[] = [];
 
-	let tableComponent:HTMLDivElement;
-
-	onMount(() => {
-		new Tabulator(tableComponent, {
-			data,
-			columns,
-			layout            : 'fitColumns',
-			reactiveData      : true,
-			headerSortElement : '<i class="fas fas-sm fa-arrow-up"></i>',
-			autoColumns       : columns.length > 0 ? false : true,
-			pagination        : true,
-			paginationSize    : 50,
-		});
-	});
-
 </script>
 
-	<div bind:this={tableComponent}></div>
+	<Willow>
+		<Grid {data} {columns} />
+	</Willow>
 
 	<svelte:head>
-<!--	<script
-			type="text/javascript"
-			src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"
-		></script>
--->
-		<link
-			href="/css/tabulator.min.css"
-			rel="stylesheet"
-		>
-		<link href="/css/tabulator.css" rel="stylesheet">
 	</svelte:head>
+