diff --git a/src/renderer/TableRenderer.ts b/src/renderer/TableRenderer.ts index 59bc492..992e931 100644 --- a/src/renderer/TableRenderer.ts +++ b/src/renderer/TableRenderer.ts @@ -17,12 +17,12 @@ export class TableRenderer implements RendererConfig { return 'html' } get viewDefinition(): ViewDefinition { - return { - name: this.rendererKey, - argument: 'viewClassNames?', - singleLine: true - } + return { + name: this.rendererKey, + argument: 'viewClassNames?', + singleLine: true } + } validateConfig(config: string): HTMLRendererConfig { if (!config) { @@ -40,28 +40,46 @@ export class TableRenderer implements RendererConfig { return { render: ({ columns, data }: any) => { el.empty() - const container = el.createDiv({ - cls: ['sqlseal-table-container', ...config.classNames] - }) let tableClasses = ['sqlseal'] + let adjustLayout = false + let classNames = [...config.classNames] + + // To make sure templates like minimal work properly + if (classNames.contains('dataview')) { + tableClasses.push('dataview', 'table-view-table') + adjustLayout = true + classNames = classNames.filter(c => c !== 'dataview') + } + + const container = el.createDiv({ + cls: ['sqlseal-table-container', ...classNames] + }) + const table = container.createEl("table", { cls: tableClasses }) // HEADER - const header = table.createEl("thead").createEl("tr") + const header = table.createEl("thead", { + cls: adjustLayout ? ['table-view-thead'] : [] + }).createEl("tr") columns.forEach((c: string) => { header.createEl("th", { text: c }) }) - const body = table.createEl("tbody") + const body = table.createEl("tbody", { cls: adjustLayout ? ['table-view-tbody'] : [] }) data.forEach((d: any) => { const row = body.createEl("tr") columns.forEach((c: any) => { - row.createEl("td", { text: cellParser.render(d[c]) as string }) - + const parsed = cellParser.render(d[c]) as string + if (adjustLayout) { + const td = row.createEl("td") + td.createSpan({ text: parsed }) + } else { + row.createEl("td", { text: parsed }) + } }) }) }, diff --git a/styles.css b/styles.css index 1594a89..6eaf31a 100644 --- a/styles.css +++ b/styles.css @@ -12,6 +12,10 @@ position: relative; } +.block-language-sqlseal { + overflow-y: auto; +} + .sqlseal-error { padding: 1em; background: #b80f0f; @@ -284,4 +288,11 @@ .cm-indent + :is(.cm-sqlseal-block-query, .cm-sqlseal-block-view, .cm-sqlseal-block-flag, .cm-sqlseal-block-table)::before { display: none; +} + + +/* Obsidian Minimal Styles */ +.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer>.cm-content>:has(>.block-language-sqlseal table.dataview) { + width: var(--container-dataview-table-width); + max-width: var(--container-table-max-width); } \ No newline at end of file