@ni/nimble-components 15.5.4 → 15.5.5

package/dist/esm/table/index.d.ts

@@ -1,4 +1,5 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
+import type { TableRecord } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-table': Table;
@@ -7,5 +8,17 @@ declare global {
 /**
  * A nimble-styled table.
  */
-export declare class Table extends FoundationElement {
+export declare class Table<TData extends TableRecord = TableRecord> extends FoundationElement {
+    data: TData[];
+    tableData: string[][];
+    columnHeaders: string[];
+    private readonly table;
+    private options;
+    private readonly tableInitialized;
+    constructor();
+    dataChanged(prev: TData[] | undefined, next: TData[] | undefined): void;
+    private refreshRows;
+    private updateTableOptions;
+    private readonly update;
+    private generateColumns;
 }

package/dist/esm/table/index.js

@@ -1,11 +1,105 @@
+import { __decorate } from "tslib";
+import { observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { createTable as tanStackCreateTable, getCoreRowModel as tanStackGetCoreRowModel } from '@tanstack/table-core';
 import { styles } from './styles';
 import { template } from './template';
 /**
  * A nimble-styled table.
  */
 export class Table extends FoundationElement {
+    constructor() {
+        super();
+        this.data = [];
+        // TODO: Temporarily expose the table data as arrays of strings.
+        this.tableData = [];
+        // TODO: Temporarily expose the column headers as a string array.
+        this.columnHeaders = [];
+        this.tableInitialized = false;
+        this.update = (state) => {
+            this.table.setOptions(prev => ({
+                ...prev,
+                ...this.options,
+                state,
+                onStateChange: (updater) => {
+                    const updatedState = typeof updater === 'function'
+                        ? updater(state)
+                        : updater;
+                    this.update(updatedState);
+                }
+            }));
+        };
+        this.options = {
+            data: [],
+            onStateChange: (_) => { },
+            getCoreRowModel: tanStackGetCoreRowModel(),
+            columns: [],
+            state: {},
+            renderFallbackValue: null,
+            autoResetAll: false
+        };
+        this.table = tanStackCreateTable(this.options);
+        this.tableInitialized = true;
+    }
+    dataChanged(prev, next) {
+        if ((!prev || prev.length === 0) && next && next.length > 0) {
+            this.generateColumns();
+        }
+        // Ignore any updates that occur prior to the TanStack table being initialized.
+        if (this.tableInitialized) {
+            this.updateTableOptions({ data: this.data });
+            this.refreshRows();
+        }
+    }
+    // TODO: For now, assume all cells can be rendered as strings. Ultimately, the data
+    // should be passed to nimble-row elements to use the view template from a column definition.
+    refreshRows() {
+        const tableData = [];
+        const rows = this.table.getRowModel().rows;
+        for (const row of rows) {
+            const rowArray = [];
+            for (const cell of row.getVisibleCells()) {
+                const cellValue = cell.getValue();
+                const stringValue = cellValue == null ? '' : cellValue.toString();
+                rowArray.push(stringValue);
+            }
+            tableData.push(rowArray);
+        }
+        this.tableData = tableData;
+    }
+    updateTableOptions(updatedOptions) {
+        this.options = { ...this.options, ...updatedOptions };
+        this.update(this.table.initialState);
+    }
+    // Temporarily auto-detect the keys in TData to make columns.
+    // TODO: Remove this logic when another way to specify columns is provided.
+    generateColumns() {
+        if (this.data.length === 0) {
+            return;
+        }
+        const firstItem = this.data[0];
+        const keys = Object.keys(firstItem);
+        const generatedColumns = keys.map(key => {
+            const columnDef = {
+                id: key,
+                accessorKey: key,
+                header: key
+            };
+            return columnDef;
+        });
+        this.updateTableOptions({ columns: generatedColumns });
+        this.columnHeaders = generatedColumns.map(x => x.header);
+    }
 }
+__decorate([
+    observable
+], Table.prototype, "data", void 0);
+__decorate([
+    observable
+], Table.prototype, "tableData", void 0);
+__decorate([
+    observable
+], Table.prototype, "columnHeaders", void 0);
 const nimbleTable = Table.compose({
     baseName: 'table',
     template,

package/dist/esm/table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,KAAM,SAAQ,iBAAiB;CAAG;AAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,QAAQ,EAAE,OAAO;IACjB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/table/styles.js

@@ -1,6 +1,28 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
+import { bodyFont, bodyFontColor } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}
+
+    .table-container {
+        width: 100%;
+        height: 100%;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+    }
+
+    .table-header {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .table-row {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .table-cell {
+        flex: 1;
+    }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/table/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;CACpB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAE1E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;gBAKL,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;CAgB7B,CAAC"}

package/dist/esm/table/template.d.ts

@@ -1,2 +1,2 @@
 import type { Table } from '.';
-export declare const template: import("@microsoft/fast-element").ViewTemplate<Table, any>;
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Table<import("./types").TableRecord>, any>;

package/dist/esm/table/template.js

@@ -1,3 +1,23 @@
-import { html } from '@microsoft/fast-element';
-export const template = html ` <template> Nimble table here </template> `;
+import { html, repeat } from '@microsoft/fast-element';
+// prettier-ignore
+export const template = html `
+    <template>
+        <div class="table-container">
+            <div class="table-header">
+                ${repeat(x => x.columnHeaders, html `
+                    <span class="table-cell">${x => x}</span>
+                `)}
+            </div>
+            <div class="table-viewport">
+                ${repeat(x => x.tableData, html `
+                    <div class="table-row">
+                        ${repeat(x => x, html `
+                            <span class="table-cell">${x => x}</span>
+                        `)}
+                    </div>
+                `)}
+            </div>
+        </div>
+    </template>
+`;
 //# sourceMappingURL=template.js.map

package/dist/esm/table/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAO,4CAA4C,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGvD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAO;;;;kBAIjB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAQ;+CACZ,CAAC,CAAC,EAAE,CAAC,CAAC;iBACpC,CAAC;;;kBAGA,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAU;;0BAE/B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAQ;uDACE,CAAC,CAAC,EAAE,CAAC,CAAC;yBACpC,CAAC;;iBAET,CAAC;;;;CAIjB,CAAC"}

package/dist/esm/table/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * TableFieldName describes the type associated with keys within
+ * a table's records.
+ */
+export declare type TableFieldName = string;
+/**
+ * TableFieldValue describes the type associated with values within
+ * a table's records.
+ */
+export declare type TableFieldValue = string | number | boolean | Date | null | undefined;
+/**
+ * TableRecord describes the data structure that backs a single row in a table.
+ * It is made up of fields, which are key/value pairs that have a key of type
+ * TableFieldName and a value of type TableFieldValue.
+ */
+export interface TableRecord {
+    [key: TableFieldName]: TableFieldValue;
+}

package/dist/esm/table/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/table/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/table/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "15.5.4",
+  "version": "15.5.5",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
@@ -50,6 +50,7 @@
     "@microsoft/fast-foundation": "^2.46.11",
     "@microsoft/fast-web-utilities": "^5.4.1",
     "@ni/nimble-tokens": "^4.3.0",
+    "@tanstack/table-core": "^8.7.0",
     "@types/d3-scale": "^4.0.2",
     "d3-scale": "^4.0.2",
     "hex-rgb": "^5.0.0",