Show items as basic datatable, not fancy

Author: comfysquirrel

package-lock.json

@@ -12,6 +12,7 @@
 		"lint": "prettier --check ."
 	},
 	"devDependencies": {
+		"@flowbite-svelte-plugins/datatable": "^0.4.1",
 		"@sveltejs/adapter-auto": "^6.1.0",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.43.2",

package.json

@@ -38,3 +38,20 @@
 		display: none;
 	}
 }
+
+@source "../node_modules/simple-datatables/dist";
+@source "../node_modules/@flowbite-svelte-plugins/datatable/dist";
+
+.datatable-pagination .datatable-active a,
+.datatable-pagination .datatable-active a:focus,
+.datatable-pagination .datatable-active a:hover,
+.datatable-pagination .datatable-active button,
+.datatable-pagination .datatable-active button:focus,
+.datatable-pagination .datatable-active button:hover {
+	background-color: #ffe4de;
+	cursor: default;
+}
+
+.datatable-wrapper .datatable-table tbody tr.selected {
+	background-color: #fff1ee !important;
+}

src/app.css

@@ -10,7 +10,8 @@
 		Helper,
 		Label,
 		Fileupload,
-		Textarea
+		Textarea,
+		Table
 	} from 'flowbite-svelte';
 	import { ArrowUpRightFromSquareOutline, MoonOutline, SunOutline } from 'flowbite-svelte-icons';
 	import { ZipReader, BlobReader } from '@zip.js/zip.js';
@@ -20,34 +21,43 @@
 	let files: FileList | null = $state(null);
 
 	let reader;
-	let fileSizeString;
-	let entriesAll;
-	let entriesFiltered;
+	let allFiles;
+	let textureFiles;
 	let filteredBlocksText = $state('');
 
 	function handleOnChange(event: Event) {
-		console.log(files[0]);
+		// 	console.log(files[0]);
 		loadFile(files[0]);
 	}
 
+	function formatFilesForTable(files) {
+		return files.map((file) => ({ filename: file.filename }));
+	}
+
+	let items = $state([]);
+
 	async function loadFile(file) {
 		reader = await new ZipReader(new BlobReader(file));
 		// fileSizeString = `${Math.floor(reader.reader.size / 1e6)} MB`;
-		entriesAll = await reader.getEntries();
+		allFiles = await reader.getEntries();
+
+		// console.log(allFiles);
 
-		console.log(entriesAll);
+		textureFiles = allFiles.filter(filterTextures);
+		// let totalTextures = textureFiles.length;
+		textureFiles = textureFiles.filter(filterBlocks);
+		// let totalBlocks = textureFiles.length;
 
-		entriesFiltered = entriesAll.filter(filterTextures);
-		let totalTextures = entriesFiltered.length;
-		entriesFiltered = entriesFiltered.filter(filterBlocks);
-		let totalBlocks = entriesFiltered.length;
+		// console.log(textureFiles);
 
-		filteredBlocksText = entriesFiltered
+		filteredBlocksText = textureFiles
 			.reduce((accumulator, currentValue) => {
 				return `${accumulator}${currentValue.filename}\n`;
 			}, '')
 			.trim();
 
+		items = formatFilesForTable(textureFiles);
+
 		// fileInfoElement.innerText = `JAR size: ${fileSizeString}, All textures: ${totalTextures}, Block textures: ${totalBlocks}`;
 	}
 
@@ -107,7 +117,6 @@
 				bind:elementRef={fileuploadRef}
 				onchange={handleOnChange}
 				accept=".jar"
-				clearable
 			/>
 		</Card>
 
@@ -122,5 +131,9 @@
 				spellcheck="false"
 			/>
 		</Card>
+
+		<Card class="max-w-xl gap-2 p-4">
+			<Table {items}></Table>
+		</Card>
 	</div>
 </div>