@ni/nimble-components 17.0.1 → 17.0.3

package/dist/esm/all-components.d.ts

@@ -28,6 +28,7 @@ import './switch';
 import './tab';
 import './tab-panel';
 import './table';
+import './table-column/text';
 import './tabs';
 import './tabs-toolbar';
 import './text-area';

package/dist/esm/all-components.js

@@ -28,6 +28,7 @@ import './switch';
 import './tab';
 import './tab-panel';
 import './table';
+import './table-column/text';
 import './tabs';
 import './tabs-toolbar';
 import './text-area';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

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

@@ -1,5 +1,6 @@
+import { ElementStyles, ViewTemplate } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
-import type { TableFieldValue } from '../../types';
+import type { TableCellRecord, TableCellState } from '../../types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-table-cell': TableCell;
@@ -9,6 +10,17 @@ declare global {
  * A styled cell that is used within the nimble-table-row.
  * @internal
  */
-export declare class TableCell extends FoundationElement {
-    data: TableFieldValue;
+export declare class TableCell<TCellRecord extends TableCellRecord = TableCellRecord> extends FoundationElement {
+    cellState?: TableCellState<TCellRecord>;
+    cellTemplate?: ViewTemplate;
+    cellStyles?: ElementStyles;
+    /**
+     * @internal
+     */
+    readonly cellContentContainer: HTMLElement;
+    private customCellView?;
+    connectedCallback(): void;
+    protected cellStateChanged(): void;
+    protected cellTemplateChanged(): void;
+    protected cellStylesChanged(prev?: ElementStyles, next?: ElementStyles): void;
 }

package/dist/esm/table/components/cell/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { observable } from '@microsoft/fast-element';
+import { defaultExecutionContext, observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
@@ -8,10 +8,40 @@ import { template } from './template';
  * @internal
  */
 export class TableCell extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.customCellView = undefined;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
+    }
+    cellStateChanged() {
+        this.customCellView?.bind(this.cellState, defaultExecutionContext);
+    }
+    cellTemplateChanged() {
+        if (this.isConnected) {
+            this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
+        }
+    }
+    cellStylesChanged(prev, next) {
+        if (prev) {
+            this.$fastController.removeStyles(prev);
+        }
+        if (next) {
+            this.$fastController.addStyles(next);
+        }
+    }
 }
 __decorate([
     observable
-], TableCell.prototype, "data", void 0);
+], TableCell.prototype, "cellState", void 0);
+__decorate([
+    observable
+], TableCell.prototype, "cellTemplate", void 0);
+__decorate([
+    observable
+], TableCell.prototype, "cellStyles", void 0);
 const nimbleTableCell = TableCell.compose({
     baseName: 'table-cell',
     template,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,iBAAiB;CAI/C;AADG;IADC,UAAU;uCACkB;AAGjC,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,uBAAuB,EAGvB,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAiBY,mBAAc,GAAc,SAAS,CAAC;IAmClD,CAAC;IAjCmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAC3C,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,oBAAoB,CAC5B,CAAC;IACN,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,uBAAuB,CAAC,CAAC;IACvE,CAAC;IAES,mBAAmB;QACzB,IAAI,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAC3C,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,oBAAoB,CAC5B,CAAC;SACL;IACL,CAAC;IAES,iBAAiB,CACvB,IAAoB,EACpB,IAAoB;QAEpB,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;SACxC;IACL,CAAC;CACJ;AAhDG;IADC,UAAU;4CACoC;AAG/C;IADC,UAAU;+CACwB;AAGnC;IADC,UAAU;6CACuB;AA4CtC,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}

package/dist/esm/table/components/cell/styles.js

@@ -2,10 +2,17 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { standardPadding } from '../../../theme-provider/design-tokens';
 export const styles = css `
-    ${display('flex')}
+    ${display('grid')}
 
     :host {
         padding: 0px calc(${standardPadding} / 2);
+        align-self: center;
+        height: 100%;
+    }
+
+    .cell-content-container {
+        overflow: hidden;
+        display: flex;
         align-items: center;
     }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;4BAGO,eAAe;;;CAG1C,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;4BAGO,eAAe;;;;;;;;;;CAU1C,CAAC"}

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

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

package/dist/esm/table/components/cell/template.js

@@ -1,8 +1,8 @@
-import { html } from '@microsoft/fast-element';
+import { html, ref } from '@microsoft/fast-element';
 // prettier-ignore
 export const template = html `
     <template role="cell">
-        ${x => x.data}
+        <div ${ref('cellContentContainer')} class="cell-content-container"></div>
     </template>
 `;
 //# sourceMappingURL=template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;;UAE7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;CAEpB,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;;eAExB,GAAG,CAAC,sBAAsB,CAAC;;CAEzC,CAAC"}

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

@@ -1,5 +1,6 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
-import type { TableFieldValue, TableRecord } from '../../types';
+import type { TableCellState, TableDataRecord } from '../../types';
+import type { TableColumn } from '../../../table-column/base';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-table-row': TableRow;
@@ -9,8 +10,9 @@ declare global {
  * A styled row that is used within the nimble-table.
  * @internal
  */
-export declare class TableRow<TData extends TableRecord = TableRecord> extends FoundationElement {
-    data?: TData;
-    columns: string[];
-    getCellValue(column: string): TableFieldValue;
+export declare class TableRow<TDataRecord extends TableDataRecord = TableDataRecord> extends FoundationElement {
+    dataRecord?: TDataRecord;
+    columns: TableColumn[];
+    getCellState(column: TableColumn): TableCellState;
+    private hasValidFieldNames;
 }

package/dist/esm/table/components/row/index.js

@@ -10,17 +10,32 @@ import { template } from './template';
 export class TableRow extends FoundationElement {
     constructor() {
         super(...arguments);
-        // TODO: Temporarily assume the set of columns will be an array of strings.
-        // Eventually, this will be an array of column definitions.
         this.columns = [];
     }
-    getCellValue(column) {
-        return this.data ? this.data[column] : undefined;
+    getCellState(column) {
+        const fieldNames = column.getDataRecordFieldNames();
+        if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {
+            const cellDataValues = fieldNames.map(field => this.dataRecord[field]);
+            const cellRecord = Object.fromEntries(column.cellRecordFieldNames.map((k, i) => [
+                k,
+                cellDataValues[i]
+            ]));
+            const columnConfig = column.getColumnConfig?.() ?? {};
+            const cellState = {
+                cellRecord,
+                columnConfig
+            };
+            return cellState;
+        }
+        return { cellRecord: {}, columnConfig: {} };
+    }
+    hasValidFieldNames(keys) {
+        return keys.every(key => key !== undefined);
     }
 }
 __decorate([
     observable
-], TableRow.prototype, "data", void 0);
+], TableRow.prototype, "dataRecord", void 0);
 __decorate([
     observable
 ], TableRow.prototype, "columns", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,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;AAStC;;;GAGG;AACH,MAAM,OAAO,QAEX,SAAQ,iBAAiB;IAF3B;;QAMI,2EAA2E;QAC3E,2DAA2D;QAEpD,YAAO,GAAa,EAAE,CAAC;IAKlC,CAAC;IAHU,YAAY,CAAC,MAAc;QAC9B,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACrD,CAAC;CACJ;AAVG;IADC,UAAU;sCACS;AAKpB;IADC,UAAU;yCACmB;AAOlC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,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;AActC;;;GAGG;AACH,MAAM,OAAO,QAEX,SAAQ,iBAAiB;IAF3B;;QAOW,YAAO,GAAkB,EAAE,CAAC;IA8BvC,CAAC;IA5BU,YAAY,CAAC,MAAmB;QACnC,MAAM,UAAU,GAAG,MAAM,CAAC,uBAAuB,EAAE,CAAC;QACpD,IAAI,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;YACxD,MAAM,cAAc,GAAG,UAAU,CAAC,GAAG,CACjC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAW,CAAC,KAAK,CAAC,CACnC,CAAC;YACF,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;gBACtC,CAAC;gBACD,cAAc,CAAC,CAAC,CAAC;aACpB,CAAC,CACL,CAAC;YACF,MAAM,YAAY,GAAG,MAAM,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,CAAC;YACtD,MAAM,SAAS,GAAmB;gBAC9B,UAAU;gBACV,YAAY;aACf,CAAC;YACF,OAAO,SAAS,CAAC;SACpB;QAED,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;IAChD,CAAC;IAEO,kBAAkB,CACtB,IAAoC;QAEpC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC;IAChD,CAAC;CACJ;AAjCG;IADC,UAAU;4CACqB;AAGhC;IADC,UAAU;yCACwB;AAgCvC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}

package/dist/esm/table/components/row/styles.js

@@ -2,16 +2,14 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { applicationBackgroundColor, borderWidth, controlHeight, fillHoverColor, tableRowBorderColor } from '../../../theme-provider/design-tokens';
 export const styles = css `
-    ${display('flex')}
+    ${display('grid')}
 
     :host {
         height: ${controlHeight};
         background: ${applicationBackgroundColor};
         border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
-    }
-
-    .cell {
-        flex: 1;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
     }
 
     :host(:hover) .cell {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,cAAc,EACd,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;sBACT,0BAA0B;+BACjB,WAAW,WAAW,mBAAmB;;;;;;;;sBAQlD,cAAc;;CAEnC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,cAAc,EACd,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;sBACT,0BAA0B;+BACjB,WAAW,WAAW,mBAAmB;;;;;;sBAMlD,cAAc;;CAEnC,CAAC"}

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

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

package/dist/esm/table/components/row/template.js

@@ -7,7 +7,9 @@ export const template = html `
         ${repeat(x => x.columns, html `
             <${DesignSystem.tagFor(TableCell)}
                 class="cell"
-                :data="${(x, c) => c.parent.getCellValue(x)}"
+                :cellTemplate="${x => x.cellTemplate}"
+                :cellStyles="${x => x.cellStyles}"
+                :cellState="${(x, c) => c.parent.getCellState(x)}"
             >
             </${DesignSystem.tagFor(TableCell)}>
         `)}

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/row/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;UAE5B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAQ;eAC9B,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;;yBAEpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAE,CAAC,CAAC,MAAmB,CAAC,YAAY,CAAC,CAAC,CAAC;;gBAEzD,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;SACrC,CAAC;;CAET,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/row/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;UAE5B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAuB;eAC7C,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;;iCAEZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;+BACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;8BAClB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;;gBAEhD,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;SACrC,CAAC;;CAET,CAAC"}

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

@@ -1,4 +1,5 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
+import type { TableColumn } from '../table-column/base';
 import type { TableRecord, TableRowState, TableValidity } from './types';
 declare global {
     interface HTMLElementTagNameMap {
@@ -15,8 +16,7 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
      * @internal
      */
     tableData: TableRowState<TData>[];
-    columns: string[];
-    columnHeaders: string[];
+    readonly columns: TableColumn[];
     get validity(): TableValidity;
     private readonly table;
     private options;

package/dist/esm/table/index.js

@@ -16,11 +16,7 @@ export class Table extends FoundationElement {
          * @internal
          */
         this.tableData = [];
-        // TODO: Temporarily expose the columns as a string array. This will ultimately be
-        // column definitions provided by slotted elements.
         this.columns = [];
-        // TODO: Temporarily expose the column headers as a string array.
-        this.columnHeaders = [];
         this.tableInitialized = false;
         this.tableValidator = new TableValidator();
         this.update = (state) => {
@@ -87,7 +83,7 @@ export class Table extends FoundationElement {
     refreshRows() {
         const rows = this.table.getRowModel().rows;
         this.tableData = rows.map(row => {
-            const rowState = { data: row.original };
+            const rowState = { record: row.original };
             return rowState;
         });
     }
@@ -96,8 +92,8 @@ export class Table extends FoundationElement {
         this.update(this.table.initialState);
         this.refreshRows();
     }
-    // Temporarily auto-detect the keys in TData to make columns.
-    // TODO: Remove this logic when another way to specify columns is provided.
+    // Generate columns for TanStack that correspond to all the keys in TData because all operations,
+    // such as grouping and sorting, will be performed on the data's records, not the values rendered within a cell.
     generateColumns() {
         if (this.data.length === 0) {
             return;
@@ -113,8 +109,6 @@ export class Table extends FoundationElement {
             return columnDef;
         });
         this.updateTableOptions({ columns: generatedColumns });
-        this.columnHeaders = generatedColumns.map(x => x.header);
-        this.columns = this.columnHeaders;
     }
 }
 __decorate([
@@ -129,9 +123,6 @@ __decorate([
 __decorate([
     observable
 ], Table.prototype, "columns", 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":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/table/template.js

@@ -1,30 +1,40 @@
-import { html, repeat } from '@microsoft/fast-element';
+import { html, repeat, slotted, when } from '@microsoft/fast-element';
 import { DesignSystem } from '@microsoft/fast-foundation';
 import { TableHeader } from './components/header';
 import { TableRow } from './components/row';
+import { TableColumn } from '../table-column/base';
+const isTableColumn = () => {
+    const filter = (value, _, __) => {
+        return value instanceof TableColumn;
+    };
+    return filter;
+};
 // prettier-ignore
 export const template = html `
     <template role="table">
         <div class="table-container">
             <div role="rowgroup" class="header-container">
                 <div class="header-row" role="row">
-                    ${repeat(x => x.columnHeaders, html `
+                    ${repeat(x => x.columns, html `
                         <${DesignSystem.tagFor(TableHeader)} class="header">
-                            ${x => x}
+                            ${x => x.textContent}
                         </${DesignSystem.tagFor(TableHeader)}>
                     `)}
                 </div>
             </div>
             <div class="table-viewport" role="rowgroup">
+            ${when(x => x.columns.length > 0, html `
                 ${repeat(x => x.tableData, html `
                     <${DesignSystem.tagFor(TableRow)}
-                        :data="${x => x.data}"
+                        :dataRecord="${x => x.record}"
                         :columns="${(_, c) => c.parent.columns}"
                     >
                     </${DesignSystem.tagFor(TableRow)}>
                 `)}
+            `)}
             </div>
         </div>
+        <slot ${slotted({ property: 'columns', filter: isTableColumn() })}></slot>
     </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,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAO;;;;;sBAKb,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAQ;2BACpC,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;8BAC7B,CAAC,CAAC,EAAE,CAAC,CAAC;4BACR,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;qBACvC,CAAC;;;;kBAIJ,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAe;uBACvC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;iCACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;oCACR,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAE,CAAC,CAAC,MAAgB,CAAC,OAAO;;wBAEjD,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;iBACpC,CAAC;;;;CAIjB,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,IAAI,EACJ,MAAM,EACN,OAAO,EACP,IAAI,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,aAAa,GAAG,GAAmB,EAAE;IACvC,MAAM,MAAM,GAAmB,CAC3B,KAAW,EACX,CAAS,EACT,EAAU,EACH,EAAE;QACT,OAAO,KAAK,YAAY,WAAW,CAAC;IACxC,CAAC,CAAC;IACF,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC;AAEF,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAO;;;;;sBAKb,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAa;2BACnC,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;8BAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;4BACpB,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;qBACvC,CAAC;;;;cAIR,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAO;kBACvC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAe;uBACvC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;uCACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oCAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAE,CAAC,CAAC,MAAgB,CAAC,OAAO;;wBAEjD,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;iBACpC,CAAC;aACL,CAAC;;;gBAGE,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC;;CAExE,CAAC"}

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

@@ -16,11 +16,27 @@ export declare type TableFieldValue = string | number | boolean | Date | null |
 export interface TableRecord {
     [key: TableFieldName]: TableFieldValue;
 }
+/** Represents a single row (element) in the Table's data  */
+export interface TableDataRecord extends TableRecord {
+}
+/**
+ * An object whose fields are defined by a particular TableColumn, which is used by the column's
+ * cellTemplate implementation.
+ */
+export interface TableCellRecord extends TableRecord {
+}
+export declare type TableStringField<FieldName extends TableFieldName> = {
+    [name in FieldName]: string | null | undefined;
+};
+export interface TableCellState<TCellRecord extends TableCellRecord = TableCellRecord, TColumnConfig = unknown> {
+    cellRecord: TCellRecord;
+    columnConfig: TColumnConfig;
+}
 export interface TableValidity {
     readonly duplicateRowId: boolean;
     readonly missingRowId: boolean;
     readonly invalidRowId: boolean;
 }
 export interface TableRowState<TData extends TableRecord = TableRecord> {
-    data: TData;
+    record: TData;
 }

package/dist/esm/table-column/base/index.d.ts

@@ -0,0 +1,31 @@
+import type { ElementStyles, ViewTemplate } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { TableCellRecord, TableCellState, TableFieldName } from '../../table/types';
+/**
+ * The base class for table columns
+ */
+export declare abstract class TableColumn<TCellRecord extends TableCellRecord = TableCellRecord, TColumnConfig = unknown> extends FoundationElement {
+    /**
+     * The template to use to render the cell content for the column
+     */
+    abstract cellTemplate: ViewTemplate<TableCellState<TCellRecord, TColumnConfig>>;
+    /**
+     * The style to apply to the cellTemplate
+     */
+    abstract cellStyles?: ElementStyles;
+    /**
+     * The names of the fields that should be present in TCellRecord.
+     * This array is parallel with the field names returned from `getDataRecordFieldNames()`.
+     */
+    abstract readonly cellRecordFieldNames: readonly TableFieldName[];
+    /**
+     * This method returns the relevant, static configuration a column requires its cellTemplate
+     * to have access to.
+     */
+    abstract getColumnConfig?(): TColumnConfig;
+    /**
+     * The names of the fields from the row's record that correlate to the data that will be in TCellRecord.
+     * This array is parallel with the field names specified by `cellRecordFieldNames`.
+     */
+    abstract getDataRecordFieldNames(): (TableFieldName | undefined)[];
+}

package/dist/esm/table-column/base/index.js

@@ -0,0 +1,7 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+/**
+ * The base class for table columns
+ */
+export class TableColumn extends FoundationElement {
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/table-column/base/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/base/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAO/D;;GAEG;AACH,MAAM,OAAgB,WAGpB,SAAQ,iBAAiB;CA6B1B"}

package/dist/esm/table-column/base/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/table-column/base/styles.js

@@ -0,0 +1,7 @@
+import { css } from '@microsoft/fast-element';
+export const styles = css `
+    :host {
+        display: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/table-column/base/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/table-column/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC"}

package/dist/esm/table-column/base/template.d.ts

@@ -0,0 +1 @@
+export declare const template: import("@microsoft/fast-element").ViewTemplate<any, any>;

package/dist/esm/table-column/base/template.js

@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+export const template = html `
+    <template>
+        <slot></slot>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/table-column/base/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/table-column/base/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;CAI3B,CAAC"}

package/dist/esm/table-column/text/index.d.ts

@@ -0,0 +1,18 @@
+import type { TableStringField, TableFieldName } from '../../table/types';
+import { TableColumn } from '../base';
+export declare type TableColumnTextCellRecord = TableStringField<'value'>;
+export interface TableColumnTextColumnConfig {
+    placeholder: string;
+}
+/**
+ * The table column for displaying strings.
+ */
+export declare class TableColumnText extends TableColumn<TableColumnTextCellRecord, TableColumnTextColumnConfig> {
+    cellRecordFieldNames: readonly ["value"];
+    fieldName?: string;
+    placeholder?: string;
+    readonly cellStyles: import("@microsoft/fast-element").ElementStyles;
+    readonly cellTemplate: import("@microsoft/fast-element").ViewTemplate<import("../../table/types").TableCellState<TableColumnTextCellRecord, TableColumnTextColumnConfig>, any>;
+    getColumnConfig(): TableColumnTextColumnConfig;
+    getDataRecordFieldNames(): (TableFieldName | undefined)[];
+}

package/dist/esm/table-column/text/index.js

@@ -0,0 +1,40 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { TableColumn } from '../base';
+import { styles } from '../base/styles';
+import { template } from '../base/template';
+import { cellStyles } from './styles';
+import { cellTemplate } from './template';
+/**
+ * The table column for displaying strings.
+ */
+export class TableColumnText extends TableColumn {
+    constructor() {
+        super(...arguments);
+        this.cellRecordFieldNames = ['value'];
+        this.cellStyles = cellStyles;
+        this.cellTemplate = cellTemplate;
+    }
+    getColumnConfig() {
+        return { placeholder: this.placeholder ?? '' };
+    }
+    getDataRecordFieldNames() {
+        return [this.fieldName];
+    }
+}
+__decorate([
+    attr({ attribute: 'field-name' })
+], TableColumnText.prototype, "fieldName", void 0);
+__decorate([
+    attr
+], TableColumnText.prototype, "placeholder", void 0);
+const nimbleTableColumnText = TableColumnText.compose({
+    baseName: 'table-column-text',
+    template,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleTableColumnText());
+//# sourceMappingURL=index.js.map

package/dist/esm/table-column/text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/text/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAO1C;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAGpC;IAHD;;QAIW,yBAAoB,GAAG,CAAC,OAAO,CAAU,CAAC;QAQjC,eAAU,GAAG,UAAU,CAAC;QAExB,iBAAY,GAAG,YAAY,CAAC;IAShD,CAAC;IAPU,eAAe;QAClB,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE,EAAE,CAAC;IACnD,CAAC;IAEM,uBAAuB;QAC1B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC;CACJ;AAhBG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;kDACR;AAG1B;IADC,IAAI;oDACuB;AAehC,MAAM,qBAAqB,GAAG,eAAe,CAAC,OAAO,CAAC;IAClD,QAAQ,EAAE,mBAAmB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,qBAAqB,EAAE,CAAC,CAAC"}

package/dist/esm/table-column/text/styles.d.ts

@@ -0,0 +1 @@
+export declare const cellStyles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/table-column/text/styles.js

@@ -0,0 +1,16 @@
+import { css } from '@microsoft/fast-element';
+import { bodyFont, bodyFontColor, controlLabelFontColor } from '../../theme-provider/design-tokens';
+export const cellStyles = css `
+    span {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .placeholder {
+        color: ${controlLabelFontColor};
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/table-column/text/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/table-column/text/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,qBAAqB,EACxB,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;gBAEb,QAAQ;iBACP,aAAa;;;;;;;iBAOb,qBAAqB;;CAErC,CAAC"}

package/dist/esm/table-column/text/template.d.ts

@@ -0,0 +1,3 @@
+import type { TableColumnTextCellRecord, TableColumnTextColumnConfig } from '.';
+import type { TableCellState } from '../../table/types';
+export declare const cellTemplate: import("@microsoft/fast-element").ViewTemplate<TableCellState<TableColumnTextCellRecord, TableColumnTextColumnConfig>, any>;