@malloydata/render 0.0.105-dev231124203430 → 0.0.105-dev231127164722

package/.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link rel="preconnect" href="https://rsms.me/" />
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

package/dist/component/render.js

@@ -48,10 +48,31 @@ MalloyRender.styles = (0, lit_1.css) `
       --table-border: 1px solid #e5e7eb;
       --table-background: white;
       --table-gutter-size: 15px;
+      --table-pinned-background: #f5fafc;
+      --table-pinned-border: 1px solid #daedf3;
 
       font-family: Inter, system-ui, sans-serif;
       font-size: var(--table-font-size);
     }
+
+    @supports (font-variation-settings: normal) {
+      :host {
+        font-family:
+          InterVariable,
+          Inter,
+          system-ui sans-serif;
+
+        font-variant-numeric: tabular-nums;
+        font-feature-settings:
+          'cv01' 1,
+          'cv02' 1,
+          'cv03' 1,
+          'cv04' 1,
+          'cv09' 1,
+          'liga' 1,
+          'calt' 1;
+      }
+    }
   `;
 __decorate([
     (0, decorators_js_1.property)({ attribute: false })

package/dist/component/table.d.ts

@@ -1,9 +1,19 @@
 import { DataArray } from '@malloydata/malloy';
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 export declare class Table extends LitElement {
     static styles: import("lit").CSSResult;
     data: DataArray;
-    render(): import("lit-html").TemplateResult<1>;
+    rowLimit: number;
+    pinnedHeader: boolean;
+    protected _scrolling: boolean;
+    parentCtx: any;
+    ctx: {
+        root: boolean;
+    };
+    connectedCallback(): void;
+    private _handleScroll;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/component/table.js

@@ -32,7 +32,9 @@ exports.Table = void 0;
 const lit_1 = require("lit");
 const decorators_js_1 = require("lit/decorators.js");
 const class_map_js_1 = require("lit/directives/class-map.js");
+const context_1 = require("@lit/context");
 const util_1 = require("./util");
+const tableContext = (0, context_1.createContext)('table');
 // TODO: replace with an estimator per column
 function getColumnWidth() {
     return 130;
@@ -44,30 +46,45 @@ const getContentStyle = (f) => {
     }
     return '';
 };
-const renderCell = (f, value) => {
+const renderCell = (f, value, options) => {
     return (0, lit_1.html) `<div class="cell-wrapper">
-    <div class="cell-gutter-start"></div>
+    <div
+      class=${(0, class_map_js_1.classMap)({
+        'cell-gutter': true,
+        'hide-gutter-border': options.hideStartGutter,
+    })}
+    ></div>
     <div class="cell-content" style="${getContentStyle(f)}">${value}</div>
-    <div class="cell-gutter-end"></div>
+    <div
+      class=${(0, class_map_js_1.classMap)({
+        'cell-gutter': true,
+        'hide-gutter-border': options.hideEndGutter,
+    })}
+    ></div>
   </div>`;
 };
-const renderFieldContent = (row, f) => {
+const renderFieldContent = (row, f, options) => {
+    var _a;
     if (f.isExploreField()) {
         return (0, lit_1.html) `<malloy-table
       .data=${row.cell(f)}
+      .pinnedHeader=${(_a = options.pinnedHeader) !== null && _a !== void 0 ? _a : false}
+      .rowLimit=${options.pinnedHeader ? 1 : Infinity}
     ></malloy-table>`;
     }
-    return renderCell(f, row.cell(f).value);
+    if (options.pinnedHeader)
+        return renderCell(f, '', {
+            hideStartGutter: (0, util_1.isFirstChild)(f),
+            hideEndGutter: (0, util_1.isLastChild)(f),
+        });
+    return renderCell(f, row.cell(f).value, {
+        hideStartGutter: (0, util_1.isFirstChild)(f),
+        hideEndGutter: (0, util_1.isLastChild)(f),
+    });
 };
-const renderField = (row, f) => {
-    return (0, lit_1.html) `<td
-    class=${(0, class_map_js_1.classMap)({
-        'column-cell': true,
-        'hide-end-gutter': (0, util_1.isLastChild)(f),
-        'hide-start-gutter': (0, util_1.isFirstChild)(f),
-    })}
-  >
-    ${renderFieldContent(row, f)}
+const renderField = (row, f, options) => {
+    return (0, lit_1.html) `<td class="column-cell">
+    ${renderFieldContent(row, f, options)}
   </td>`;
 };
 const renderHeader = (f) => {
@@ -78,40 +95,118 @@ const renderHeader = (f) => {
     const isLast = (0, util_1.isLastChild)(f);
     const isParentLast = (0, util_1.isLastChild)(f.parentExplore);
     const hideEndGutter = isLast && (isParentLast || isParentNotAField);
-    return (0, lit_1.html) `<th
-    class=${(0, class_map_js_1.classMap)({
-        'column-cell': true,
-        'hide-end-gutter': hideEndGutter,
-        'hide-start-gutter': hideStartGutter,
+    return (0, lit_1.html) `<th class="column-cell">
+    ${renderCell(f, f.name, {
+        hideStartGutter,
+        hideEndGutter,
     })}
-  >
-    ${renderCell(f, f.name)}
   </th>`;
 };
 let Table = exports.Table = class Table extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.rowLimit = Infinity;
+        this.pinnedHeader = false;
+        this._scrolling = false;
+        this.ctx = { root: false };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (typeof this.parentCtx === 'undefined') {
+            this.ctx = {
+                root: true,
+            };
+        }
+    }
+    _handleScroll(e) {
+        const target = e.target;
+        this._scrolling = target.scrollTop > 0;
+    }
+    // If rendering a pinned header, render it within the current ShadowDOM root so we can use CSS to style the nested table headers when scrolling
+    createRenderRoot() {
+        if (this.pinnedHeader)
+            return this;
+        return super.createRenderRoot();
+    }
     render() {
         const fields = this.data.field.allFields;
         const headers = fields.map(f => renderHeader(f));
-        const rows = Array.from(this.data, row => (0, lit_1.html) `<tr>
-          ${fields.map(f => renderField(row, f))}
+        const renderOptions = {
+            pinnedHeader: this.pinnedHeader,
+        };
+        const rows = [];
+        let i = 0;
+        for (const row of this.data) {
+            if (i >= this.rowLimit)
+                break;
+            rows.push((0, lit_1.html) `<tr>
+          ${fields.map(f => renderField(row, f, renderOptions))}
         </tr>`);
-        return (0, lit_1.html) `<table>
-      <thead>
-        <tr>
-          ${headers}
-        </tr>
-      </thead>
-      <tbody>
-        ${rows}
-      </tbody>
-    </table>`;
+            i++;
+        }
+        const renderStickyHeader = () => {
+            if (this.ctx.root)
+                return (0, lit_1.html) `<div class="sticky-header">
+          <div class="sticky-header-content">
+            <malloy-table
+              class=${(0, class_map_js_1.classMap)({
+                    'pinned-header': true,
+                    'scrolled': this._scrolling,
+                })}
+              .rowLimit=${1}
+              .data=${this.data}
+              .pinnedHeader=${true}
+            ></malloy-table>
+          </div>
+        </div>`;
+        };
+        return (0, lit_1.html) `<div @scroll=${this._handleScroll} class="table-wrapper">
+      ${renderStickyHeader()}
+      <table>
+        <thead>
+          <tr>
+            ${headers}
+          </tr>
+        </thead>
+        <tbody>
+          ${rows}
+        </tbody>
+      </table>
+    </div>`;
     }
 };
 Table.styles = (0, lit_1.css) `
+    .table-wrapper {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow: auto;
+    }
+
+    .sticky-header {
+      position: sticky;
+      top: 0px;
+      z-index: 100;
+    }
+
+    .sticky-header-content {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      pointer-events: none;
+    }
+
+    .sticky-header-content th {
+      pointer-events: all;
+    }
+
     table {
       border-collapse: collapse;
       background: var(--table-background);
-      font-variant-numeric: tabular-nums;
+    }
+
+    th {
+      transition: background-color 0.25s;
     }
 
     table * {
@@ -154,29 +249,60 @@ Table.styles = (0, lit_1.css) `
       text-overflow: ellipsis;
     }
 
-    .cell-gutter-start {
+    .cell-gutter {
       border-top: var(--table-border);
       height: var(--table-row-height);
       width: var(--table-gutter-size);
+      transition: border-color 0.25s;
     }
 
-    .cell-gutter-end {
-      border-top: var(--table-border);
-      height: var(--table-row-height);
-      width: var(--table-gutter-size);
+    .cell-gutter.hide-gutter-border {
+      border-color: transparent;
+    }
+
+    .pinned-header table {
+      background: transparent;
+    }
+
+    .pinned-header th {
+      background: var(--table-background);
     }
 
-    .hide-end-gutter .cell-gutter-end {
-      border-top: none;
+    .pinned-header.scrolled th {
+      background: var(--table-pinned-background);
+      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
     }
 
-    .hide-start-gutter .cell-gutter-start {
-      border-top: none;
+    .pinned-header.scrolled {
+      .cell-content,
+      .cell-gutter,
+      .cell-gutter.hide-gutter-border {
+        border-top: var(--table-pinned-border);
+      }
     }
   `;
 __decorate([
     (0, decorators_js_1.property)({ attribute: false })
 ], Table.prototype, "data", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number })
+], Table.prototype, "rowLimit", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], Table.prototype, "pinnedHeader", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], Table.prototype, "_scrolling", void 0);
+__decorate([
+    (0, context_1.consume)({ context: tableContext }),
+    (0, decorators_js_1.property)({ attribute: false })
+], Table.prototype, "parentCtx", void 0);
+__decorate([
+    (0, context_1.provide)({ context: tableContext })
+], Table.prototype, "ctx", void 0);
+__decorate([
+    (0, decorators_js_1.eventOptions)({ passive: true })
+], Table.prototype, "_handleScroll", null);
 exports.Table = Table = __decorate([
     (0, decorators_js_1.customElement)('malloy-table')
 ], Table);

package/dist/stories/tables.stories.d.ts

@@ -28,3 +28,10 @@ export declare const Nested: {
         view: string;
     };
 };
+export declare const NestedCompact: {
+    args: {
+        source: string;
+        view: string;
+        classes: string;
+    };
+};

package/dist/stories/tables.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Nested = exports.Products2Column = exports.ProductsTableCustomTheme = exports.ProductsTable = void 0;
+exports.NestedCompact = exports.Nested = exports.Products2Column = exports.ProductsTableCustomTheme = exports.ProductsTable = void 0;
 const tables_malloy_raw_1 = __importDefault(require("./static/tables.malloy?raw"));
 const util_1 = require("./util");
 require("./themes.css");
@@ -11,11 +11,15 @@ require("../component/render");
 const meta = {
     title: 'Malloy Next/Tables',
     render: ({ classes }, context) => {
+        const parent = document.createElement('div');
+        parent.style.height = '1000px';
+        parent.style.position = 'relative';
         const el = document.createElement('malloy-render');
         if (classes)
             el.classList.add(classes);
         el.result = context.loaded['result'];
-        return el;
+        parent.appendChild(el);
+        return parent;
     },
     loaders: [(0, util_1.createLoader)(tables_malloy_raw_1.default)],
     argTypes: {},
@@ -46,4 +50,11 @@ exports.Nested = {
         view: 'nested',
     },
 };
+exports.NestedCompact = {
+    args: {
+        source: 'products',
+        view: 'nested',
+        classes: 'compact',
+    },
+};
 //# sourceMappingURL=tables.stories.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.105-dev231124203430",
+  "version": "0.0.105-dev231127164722",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@malloydata/malloy": "^0.0.105-dev231124203430",
+    "@lit/context": "^1.1.0",
+    "@malloydata/malloy": "^0.0.105-dev231127164722",
     "@types/luxon": "^2.4.0",
     "lit": "^3.0.2",
     "lodash": "^4.17.20",