Merge pull request #104 from h-sphere/feat/configure-grid

Adding extra configuration options: default renderer and grid page size.

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.28.2 (2025-03-14)
+- Added ability to define default view (Grid, HTML or Markdown)
+- Added ability to configure default page size for the GRID view
+
 # 0.28.1 (2025-03-14)
 - Adding syntax highlighting for javascript (to be used with GRAPH view)
 

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "sqlseal",
 	"name": "SQLSeal",
-	"version": "0.28.1",
+	"version": "0.28.2",
 	"minAppVersion": "0.15.0",
 	"description": "Use SQL in your notes to query your vault files and CSV content.",
 	"author": "hypersphere",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqlseal",
-  "version": "0.28.1",
+  "version": "0.28.2",
   "description": "A plugin for Obsidian that allows you to run SQL queries on your notes.",
   "main": "main.js",
   "scripts": {

src/codeblockHandler/CodeblockProcessor.ts

@@ -42,7 +42,7 @@ export class CodeblockProcessor extends MarkdownRenderChild {
                     explain: false
                 },
                 query: '',
-                renderer: { options: '', type: 'GRID' },
+                renderer: { options: '', type: this.plugin.settings.defaultView.toUpperCase() },
                 tables: []
             
             }

src/main.ts

@@ -53,7 +53,7 @@ export default class SqlSealPlugin extends Plugin {
 		// REGISTERING VIEWS
 
 		this.rendererRegistry.register('sql-seal-internal-table', new TableRenderer(this.app, this.cellParserRegistar))
-		this.rendererRegistry.register('sql-seal-internal-grid', new GridRenderer(this.app, this.cellParserRegistar))
+		this.rendererRegistry.register('sql-seal-internal-grid', new GridRenderer(this.app, this, this.cellParserRegistar))
 		this.rendererRegistry.register('sql-seal-internal-markdown', new MarkdownRenderer(this.app))
 		this.rendererRegistry.register('sql-seal-internal-list', new ListRenderer(this.app, this.cellParserRegistar))
 		this.rendererRegistry.register('sql-seal-internal-template', new TemplateRenderer(this.app, this.cellParserRegistar))

src/renderer/GridRenderer.ts

@@ -5,6 +5,7 @@ import { RendererConfig } from "./rendererRegistry";
 import { parse } from 'json5'
 import { CellParser } from "../cellParser";
 import { ViewDefinition } from "../grammar/parser";
+import SqlSealPlugin from "../main";
 
 const getCurrentTheme = () => {
     return document.body.classList.contains('theme-dark') ? 'dark' : 'light';
@@ -28,6 +29,7 @@ class GridRendererCommunicator {
     constructor(
         private el: HTMLElement,
         private config: Partial<GridOptions>,
+        private plugin: SqlSealPlugin | null,
         private app: App,
         private cellParser: CellParser
     ) {
@@ -84,7 +86,8 @@ class GridRendererCommunicator {
             columnDefs: [],
             domLayout: 'autoHeight',
             enableCellTextSelection: true,
-            ensureDomOrder: true
+            paginationPageSize: this.plugin? this.plugin.settings.gridItemsPerPage : undefined,
+            // ensureDomOrder: true
         }, this.config)
         this.gridApi = createGrid(
             grid,
@@ -115,7 +118,7 @@ class GridRendererCommunicator {
 }
 
 export class GridRenderer implements RendererConfig {
-    constructor(private app: App, private readonly cellParser: CellParser) { }
+    constructor(private app: App, private readonly plugin: SqlSealPlugin | null, private readonly cellParser: CellParser) { }
     get viewDefinition(): ViewDefinition {
         return {
             name: this.rendererKey,
@@ -138,7 +141,7 @@ export class GridRenderer implements RendererConfig {
 
 
     render(config: Partial<GridOptions>, el: HTMLElement) {
-        const communicator = new GridRendererCommunicator(el, config, this.app, this.cellParser)
+        const communicator = new GridRendererCommunicator(el, config, this.plugin, this.app, this.cellParser)
         return {
             render: (data: any) => {
                 // FIXME: we need to update that.

src/renderer/rendererRegistry.ts

@@ -27,8 +27,6 @@ export class RendererRegistry {
     _extraFlags: Array<Flag> = []
     constructor() { }
 
-    private default = 'grid'
-
     register(uniqueName: string, config: RendererConfig) {
         if (this.renderers.has(uniqueName)) {
             throw new Error(`Renderer already registered for ${uniqueName}`)

src/settings/SQLSealSettingsTab.ts

@@ -6,6 +6,8 @@ export interface SQLSealSettings {
     enableJSONViewer: boolean;
     enableDynamicUpdates: boolean;
     enableSyntaxHighlighting: boolean;
+    defaultView: 'grid' | 'markdown' | 'html';
+    gridItemsPerPage: number
 }
 
 export const DEFAULT_SETTINGS: SQLSealSettings = {
@@ -13,7 +15,9 @@ export const DEFAULT_SETTINGS: SQLSealSettings = {
     enableEditing: true,
     enableJSONViewer: true,
     enableDynamicUpdates: true,
-    enableSyntaxHighlighting: true
+    enableSyntaxHighlighting: true,
+    defaultView: 'grid',
+    gridItemsPerPage: 20
 };
 
 
@@ -107,6 +111,46 @@ export class SQLSealSettingsTab extends PluginSettingTab {
                     this.callChanges()
                 }));
 
+
+        containerEl.createEl('h3', { text: 'Views' });
+        new Setting(containerEl)
+            .setName('Default View')
+            .setDesc('This view will be used by default when you don\'t provide any view definition in your query')
+            .addDropdown(dropdown => dropdown
+                .addOption('grid', 'Grid')
+                .addOption('html', 'HTML Table')
+                .addOption('markdown', 'Markdown Table')
+                .setValue(this.settings.defaultView)
+                .onChange(async (value) => {
+                    console.log(value)
+                    this.settings.defaultView = value as 'grid' | 'html' | 'markdown';
+                    if (!value) {
+                        this.settings.defaultView = DEFAULT_SETTINGS.defaultView
+                    }
+                    await this.plugin.saveData(this.settings);
+                    this.display();
+                    this.callChanges()
+                }));
+        containerEl.createEl('h4', { text: 'Grid View' });
+        new Setting(containerEl)
+            .setName('Items per page ')
+            .setDesc('How many items should display for each page of the Grid view')
+            .addDropdown(dropdown => dropdown
+                .addOption('20', '20')
+                .addOption('50', '50')
+                .addOption('100', '100')
+                .setValue(this.settings.gridItemsPerPage + '')
+                .onChange(async (value) => {
+                    this.settings.gridItemsPerPage = parseInt(value, 10);
+                    if (!value) {
+                        this.settings.gridItemsPerPage = DEFAULT_SETTINGS.gridItemsPerPage
+                    }
+                    await this.plugin.saveData(this.settings);
+                    this.display();
+                    this.callChanges()
+                }));
+
+
     }
 
     private callChanges() {

src/view/CSVView.ts

@@ -201,7 +201,7 @@ export class CSVView extends TextFileView {
         })
 
 
-        const grid = new GridRenderer(this.app, this.cellParser)
+        const grid = new GridRenderer(this.app, null, this.cellParser)
         const csvView = this;
         const api = grid.render({
             defaultColDef: {

versions.json

@@ -50,5 +50,6 @@
 	"0.26.0": "0.15.0",
 	"0.27.0": "0.15.0",
 	"0.28.0": "0.15.0",
-	"0.28.1": "0.15.0"
+	"0.28.1": "0.15.0",
+	"0.28.2": "0.15.0"
 }