Render performance for big sqlite files

README.md

@@ -1,11 +1,11 @@
-SQLite Viewer GUI Program written in Rust using Tauri + NextJS
+# SQLite Viewer V0.4
 
 [ TODO LIST ]
 
 - [ ] Make a web version ( if possible )
 - [ ] Add Linux and MacOS Builds
 - [ ] Handle Sqlite with password
-- [ ] Render performance for big sqlite files
+- [x] Render performance for big sqlite files
 - [x] Execute SQL command tab
 - [x] Schema Generator
 - [ ] Sort by column
@@ -17,23 +17,19 @@ SQLite Viewer GUI Program written in Rust using Tauri + NextJS
 
 **1- Browse All Your SQLite Tables.**
 
-![photo](https://i.ibb.co/SBzVnFX/Browse.png)
+![photo](https://i.ibb.co/ZYJSDwx/brow.png)
 
 **2- Database Structure View.**
 
-![photo](https://i.ibb.co/8zGSBHN/Struct.png)
+![photo](https://i.ibb.co/fCGJVMk/stuct.png)
 
 **3- Execute SQL Commands**
 
-![photo](https://i.ibb.co/SnTXqwy/execute.png)
+![photo](https://i.ibb.co/JnMy5cH/execute.png)
 
-**4- Errors are easy to recognize**
+**4- Light and Dark mode**
 
-![photo](https://i.ibb.co/Xtb0pZT/error.png)
-
-**5- Light and Dark mode**
-
-![photo](https://i.ibb.co/XpC9Mwm/image.png)
+![photo](https://i.ibb.co/tP84yCS/light.png)
 
 ##
 

src-tauri/tauri.conf.json

@@ -63,8 +63,8 @@
  "windows": [
  {
  "fullscreen": false,
- "height": 600,
- "minHeight": 600,
+ "height": 630,
+ "minHeight": 630,
  "resizable": true,
  "title": "SQLite Viewer",
  "width": 800,

src/app/browse.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { Columns } from "@/types";
 import { SetStateAction } from "react";
 import {
@@ -27,8 +28,25 @@ interface BrowseProps {
  records: Columns;
 }
 
+const ROWS_PER_PAGE = 100;
+
 export default function Browse(props: BrowseProps) {
  const { setSelectedTable, tables, selectedTable, records } = props;
+ const [currentPage, setCurrentPage] = useState(1);
+
+ const startIndex = (currentPage - 1) * ROWS_PER_PAGE;
+ const endIndex = startIndex + ROWS_PER_PAGE;
+
+ const totalPages = Math.ceil(
+ // @ts-ignore
+ records[selectedTable]?.[Object.keys(records[selectedTable])[0]]?.length /
+ ROWS_PER_PAGE
+ );
+
+ const handleChangePage = (page: number) => {
+ setCurrentPage(page);
+ };
+
  return (
  <div className="w-full">
  <div className="px-2 flex gap-2 items-center">
@@ -62,35 +80,83 @@ export default function Browse(props: BrowseProps) {
  </div>
  <div className="mt-2 h-[420px] overflow-auto">
  {selectedTable && records[selectedTable] && (
- <Table>
- <TableHeader>
- <TableRow>
- {Object.keys(records[selectedTable]).map((column, index) => (
- <TableHead key={index}>{column}</TableHead>
- ))}
- </TableRow>
- </TableHeader>
- <TableBody>
- {records[selectedTable][
- Object.keys(records[selectedTable])[0]
- ].map((_, rowIndex) => (
- <TableRow key={rowIndex}>
- {Object.keys(records[selectedTable]).map(
- (column, columnIndex) => (
- <TableCell
- key={columnIndex}
- className="max-w-[150px] truncate hover:max-w-full"
- >
- <span>{records[selectedTable][column][rowIndex]}</span>
- </TableCell>
- )
- )}
+ <>
+ <Table>
+ <TableHeader>
+ <TableRow>
+ {Object.keys(records[selectedTable]).map((column, index) => (
+ <TableHead key={index}>{column}</TableHead>
+ ))}
  </TableRow>
- ))}
- </TableBody>
- </Table>
+ </TableHeader>
+ <TableBody>
+ {records[selectedTable][Object.keys(records[selectedTable])[0]]
+ .slice(startIndex, endIndex)
+ .map((_, rowIndex) => (
+ <TableRow key={rowIndex}>
+ {Object.keys(records[selectedTable]).map(
+ (column, columnIndex) => (
+ <TableCell
+ key={columnIndex}
+ className="max-w-[150px] truncate"
+ >
+ <span>
+ {
+ records[selectedTable][column][
+ rowIndex + startIndex
+ ]
+ }
+ </span>
+ </TableCell>
+ )
+ )}
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </>
  )}
  </div>
+ <Pagination
+ currentPage={currentPage}
+ totalPages={totalPages}
+ onPageChange={handleChangePage}
+ />
  </div>
  );
 }
+
+interface PaginationProps {
+ currentPage: number;
+ totalPages: number;
+ onPageChange: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+ currentPage,
+ totalPages,
+ onPageChange,
+}) => {
+ // @ts-ignore
+ const pageNumbers = [...Array(totalPages).keys()].map((num) => num + 1);
+
+ return (
+ <ul className="flex overflow-x-scroll">
+ {pageNumbers.map((page) => (
+ <li
+ key={page}
+ className={`grow ${
+ currentPage === page ? "bg-primary text-background" : "bg-secondary"
+ }`}
+ >
+ <button
+ className={`page-link p-2 text-center w-full`}
+ onClick={() => onPageChange(page)}
+ >
+ {page}
+ </button>
+ </li>
+ ))}
+ </ul>
+ );
+};

src/app/execute.tsx

@@ -68,10 +68,7 @@ export default function ExecuteSQL({ table }: { table: string }) {
  {result.map((row, index) => (
  <TableRow key={index}>
  {Object.values(row).map((value, index) => (
- <TableCell
- key={index}
- className="max-w-[150px] truncate hover:max-w-full"
- >
+ <TableCell key={index} className="max-w-[150px] truncate">
  {value}
  </TableCell>
  ))}

src/app/layout.tsx

@@ -26,10 +26,12 @@ export default function RootLayout({
  disableTransitionOnChange
  >
  {children}
- <footer className="p-4 fixed bottom-0 w-full bg-background">
+ <footer className="p-4 fixed bottom-0 w-full bg-background border-t border-secondary">
  <div className="flex justify-between items-center">
  <Toggle />
- SQLite Viewer V0.3
+ <span className="hover:animate-bounce animate-pulse">
+ SQLite Viewer V0.4
+ </span>
  </div>
  </footer>
  </ThemeProvider>

src/app/load.tsx

@@ -59,33 +59,37 @@ export default function Load({ path }: { path: string }) {
 
  return (
  <div className="w-full">
- <Tabs defaultValue="structure">
- <TabsList className="w-full flex gap-2">
- <TabsTrigger value="structure" className="grow">
- Structure
- </TabsTrigger>
- <TabsTrigger value="browse" className="grow">
- Browse Data
- </TabsTrigger>
- <TabsTrigger value="execute" className="grow">
- Execute SQL
- </TabsTrigger>
- </TabsList>
- <TabsContent value="structure">
- <Structure tablesInfo={tablesInfo} />
- </TabsContent>
- <TabsContent value="browse">
- <Browse
- tables={tables}
- selectedTable={selectedTable}
- records={records}
- setSelectedTable={setSelectedTable}
- />
- </TabsContent>
- <TabsContent value="execute">
- <ExecuteSQL table={tables[0]} />
- </TabsContent>
- </Tabs>
+ {selectedTable ? (
+ <Tabs defaultValue="structure">
+ <TabsList className="w-full flex gap-2">
+ <TabsTrigger value="structure" className="grow">
+ Structure
+ </TabsTrigger>
+ <TabsTrigger value="browse" className="grow">
+ Browse Data
+ </TabsTrigger>
+ <TabsTrigger value="execute" className="grow">
+ Execute SQL
+ </TabsTrigger>
+ </TabsList>
+ <TabsContent value="structure">
+ <Structure tablesInfo={tablesInfo} />
+ </TabsContent>
+ <TabsContent value="browse">
+ <Browse
+ tables={tables}
+ selectedTable={selectedTable}
+ records={records}
+ setSelectedTable={setSelectedTable}
+ />
+ </TabsContent>
+ <TabsContent value="execute">
+ <ExecuteSQL table={tables[0]} />
+ </TabsContent>
+ </Tabs>
+ ) : (
+ <h1 className="text-2xl w-full mt-20 text-center">Loading Data..</h1>
+ )}
  </div>
  );
 }

src/app/structure.tsx

@@ -19,7 +19,7 @@ import {
 export default function Structure({ tablesInfo }: { tablesInfo: TableInfos }) {
  return (
  <div className="w-full">
- <Accordion type="single" collapsible className="w-full">
+ <Accordion type="multiple" className="w-full">
  {Object.keys(tablesInfo).map((table, index) => (
  <div key={index} className="flex flex-col">
  <AccordionItem value={table}>

src/components/theme/toggle.tsx

@@ -22,7 +22,7 @@ export default function Toggle() {
  <span className="sr-only">Toggle theme</span>
  </Button>
  </DropdownMenuTrigger>
- <DropdownMenuContent align="end">
+ <DropdownMenuContent align="start">
  <DropdownMenuItem onClick={() => setTheme("light")}>
  Light
  </DropdownMenuItem>