@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-data-table.js

@@ -0,0 +1,812 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import "./tt-checkbox.js";
+import "./tt-skeleton.js";
+import "./tt-empty-state.js";
+import "./tt-dropdown-menu.js";
+import "./tt-icon.js";
+import { srOnly } from "./sr-only.js";
+/*
+  Rows kept in the page above and below the visible ones while
+  virtualized, so a fast scroll or a Tab to the next row lands on a row
+  that already exists instead of a blank.
+*/
+const OVERSCAN = 5;
+/** A row's height before the first one is measured: the default density. */
+const ROW_ESTIMATE = 49;
+/**
+ * Working table: sorting, selection, row actions, sticky header, and
+ * loading and empty states. With visible-rows it is virtualized: a box
+ * that many rows tall, holding only the rows in view, so ten thousand
+ * rows scroll as smoothly as ten.
+ *
+ * It owns nothing. Sort state and selection come in as properties and
+ * changes go out as events, so the page stays the single source of truth
+ * and can put either in a URL. Sorting itself is the page's job too: it
+ * knows whether the data is an in-memory array or a server query.
+ */
+let TTDataTable = class TTDataTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.rows = [];
+        /*
+          The table's name for screen readers, announced on entering it
+          ("Team members, table"). Same word and job as tt-table's label. A
+          heading above the table names it for sighted readers only.
+        */
+        this.label = "";
+        this.selectable = false;
+        this.selected = [];
+        // Same menu on every row. Leave empty for no actions column.
+        this.rowActions = [];
+        this.loading = false;
+        this.loadingRows = 5;
+        this.emptyHeading = "Nothing here yet";
+        this.emptyDescription = "";
+        // Rows respond to clicks. Only set this when there is somewhere to go.
+        this.clickableRows = false;
+        /*
+          How many rows tall the table is, as a box that scrolls. Only the rows
+          in view (plus a few spare) exist in the page, so the cost of a scroll
+          stays the same at 10,000 rows as at 10. 0, the default, shows every
+          row as a plain table.
+      
+          Virtualized rows need one height each, so their cells stay on one
+          line and long values end in an ellipsis.
+        */
+        this.visibleRows = 0;
+        // The row at the top of the scroll box, from its scroll position.
+        this.firstInView = 0;
+        // Measured from the rendered page, so density, touch and themes all count.
+        this.rowHeight = 0;
+        this.headerHeight = 0;
+        /*
+          Column widths, measured once and then fixed. A table sizes columns
+          from the rows it holds, and a virtualized one holds different rows at
+          every scroll, so unfixed columns would jump sideways while scrolling.
+      
+          A table that fits its box keeps them as shares (%), so it still fits
+          when the box narrows. One wider than its box keeps pixels and scrolls
+          sideways, as the plain table does, rather than squeezing every column
+          into an ellipsis on a phone.
+        */
+        this.columnWidths = [];
+        this.widthUnit = "%";
+        this.frame = 0;
+        this.wrapWidth = 0;
+        this.lastRange = "";
+        this.handleScroll = () => {
+            if (!this.virtual || this.frame)
+                return;
+            this.frame = requestAnimationFrame(() => {
+                this.frame = 0;
+                this.syncToScroll();
+                this.announceRange();
+            });
+        };
+    }
+    /*
+      What a row's selection checkbox is called.
+  
+      "Select row" repeated twenty times tells a screen-reader user which
+      control they are on but nothing about what it does. The first column
+      is the closest thing to a row's name that a generic table can know,
+      so "Select Adriatik" comes out of the data rather than a guess.
+    */
+    rowLabel(row) {
+        const name = this.rowName(row);
+        return name ? `Select ${name}` : "Select row";
+    }
+    /*
+      Only plain text names a row. A rich first cell (a template with an
+      avatar and two lines) stringified to "[object Object]", which a screen
+      reader then read out on every row.
+    */
+    rowName(row) {
+        const first = this.columns[0];
+        const value = first ? row[first.key] : undefined;
+        return typeof value === "string" || typeof value === "number" ? String(value) : "";
+    }
+    get virtual() {
+        return this.visibleRows > 0 && !this.loading && this.rows.length > 0;
+    }
+    /** The slice of rows in the page: the ones in view plus OVERSCAN each side. */
+    get inPage() {
+        const count = this.rows.length;
+        if (!this.virtual)
+            return { start: 0, end: count };
+        // Clamped, because rows can shrink while the box is scrolled far down.
+        const first = Math.max(0, Math.min(this.firstInView, count - this.visibleRows));
+        return {
+            start: Math.max(0, first - OVERSCAN),
+            end: Math.min(count, first + this.visibleRows + OVERSCAN),
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Measured again after the first render (firstUpdated) or a reconnect.
+        if (this.hasUpdated)
+            this.observeWidth();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        cancelAnimationFrame(this.frame);
+        this.frame = 0;
+        this.resizeObserver?.disconnect();
+    }
+    firstUpdated() {
+        this.observeWidth();
+    }
+    updated() {
+        if (this.virtual)
+            this.measureSoon();
+        else if (this.columnWidths.length > 0)
+            this.columnWidths = [];
+    }
+    /* A new width makes the fixed column widths wrong: measure them again. */
+    observeWidth() {
+        if (typeof ResizeObserver === "undefined" || !this.wrap)
+            return;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = new ResizeObserver(([entry]) => {
+            const width = Math.round(entry.contentRect.width);
+            if (width === this.wrapWidth)
+                return;
+            this.wrapWidth = width;
+            if (this.columnWidths.length > 0)
+                this.columnWidths = [];
+        });
+        this.resizeObserver.observe(this.wrap);
+    }
+    /*
+      Measuring happens a frame after rendering, never inside updated():
+      each measurement can change state, and a change during an update
+      would schedule another update straight away.
+    */
+    measureSoon() {
+        if (this.frame)
+            return;
+        this.frame = requestAnimationFrame(() => {
+            this.frame = 0;
+            this.measure();
+        });
+    }
+    measure() {
+        if (!this.virtual)
+            return;
+        const changed = (a, b) => Math.abs(a - b) > 0.5;
+        const row = this.renderRoot.querySelector("tbody tr.row");
+        const rowHeight = row?.getBoundingClientRect().height ?? 0;
+        if (rowHeight > 0 && changed(rowHeight, this.rowHeight))
+            this.rowHeight = rowHeight;
+        const header = this.renderRoot.querySelector("thead tr");
+        const headerHeight = header?.getBoundingClientRect().height ?? 0;
+        if (headerHeight > 0 && changed(headerHeight, this.headerHeight))
+            this.headerHeight = headerHeight;
+        if (this.columnWidths.length === 0) {
+            const widths = [...this.renderRoot.querySelectorAll("thead th")].map((cell) => cell.getBoundingClientRect().width);
+            const total = widths.reduce((sum, width) => sum + width, 0);
+            if (widths.length > 0 && widths.every((width) => width > 0)) {
+                const fits = total <= (this.wrap?.clientWidth ?? 0) + 1;
+                this.widthUnit = fits ? "%" : "px";
+                this.columnWidths = fits ? widths.map((width) => (width / total) * 100) : widths;
+            }
+        }
+        // The scroll position can move without a scroll the table hears
+        // about: rows shrinking under it clamp it.
+        this.syncToScroll();
+        this.announceRange();
+    }
+    syncToScroll() {
+        if (!this.wrap)
+            return;
+        // Half a pixel of slack: scrollTop is rounded, rows are not, and 300
+        // rows down must not read as 299.
+        const first = Math.floor((this.wrap.scrollTop + 0.5) / (this.rowHeight || ROW_ESTIMATE));
+        if (first !== this.firstInView)
+            this.firstInView = first;
+    }
+    /*
+      Which rows are in view, as indexes into rows (end excluded), each time
+      that changes. Enough to fetch the next page from a server before the
+      person scrolls into it.
+    */
+    announceRange() {
+        const count = this.rows.length;
+        const start = Math.max(0, Math.min(this.firstInView, count - this.visibleRows));
+        const end = Math.min(count, start + this.visibleRows);
+        const key = `${start}:${end}:${count}`;
+        if (key === this.lastRange)
+            return;
+        this.lastRange = key;
+        this.dispatchEvent(new CustomEvent("tt-range-change", {
+            detail: { start, end, total: count },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    get hasActions() {
+        return this.rowActions.length > 0;
+    }
+    get columnCount() {
+        return (this.columns.length + (this.selectable ? 1 : 0) + (this.hasActions ? 1 : 0));
+    }
+    /*
+      Both answer for the rows ON SCREEN, compared by id, never by count.
+  
+      `selected` can hold ids that are not in `rows`: picked before a filter
+      hid them, or on another page. Comparing lengths then lies. Pick three
+      rows, filter to three different ones, and the header claimed "all
+      selected" while nothing visible was ticked.
+    */
+    get allSelected() {
+        return (this.rows.length > 0 &&
+            this.rows.every((row) => this.selected.includes(row.id)));
+    }
+    get someSelected() {
+        return (!this.allSelected &&
+            this.rows.some((row) => this.selected.includes(row.id)));
+    }
+    emitSelection(next) {
+        this.dispatchEvent(new CustomEvent("tt-selection-change", {
+            detail: { selected: next },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    toggleAll(event) {
+        // tt-checkbox emits its own composed tt-change. Without this it would
+        // reach the page too, arriving after ours with no `selected` in it.
+        event.stopPropagation();
+        /*
+          Select-all applies to what is currently on screen, which is what a
+          user means by "all" when a filter is active. It adds or removes ONLY
+          those rows: a selection made before the filter, now hidden, is not
+          the header checkbox's to throw away.
+        */
+        const visible = this.rows.map((r) => r.id);
+        this.emitSelection(this.allSelected
+            ? this.selected.filter((id) => !visible.includes(id))
+            : [...this.selected, ...visible.filter((id) => !this.selected.includes(id))]);
+    }
+    toggleRow(id, event) {
+        event.stopPropagation();
+        this.emitSelection(this.selected.includes(id)
+            ? this.selected.filter((s) => s !== id)
+            : [...this.selected, id]);
+    }
+    /*
+      Cycles ascending, descending, then off. The third state matters: once
+      sorted there is otherwise no way back to the original order, which is
+      usually meaningful (newest first, or whatever the server chose).
+    */
+    toggleSort(column) {
+        if (!column.sortable)
+            return;
+        let next;
+        if (this.sort?.key !== column.key) {
+            next = { key: column.key, direction: "asc" };
+        }
+        else if (this.sort.direction === "asc") {
+            next = { key: column.key, direction: "desc" };
+        }
+        else {
+            next = undefined;
+        }
+        this.dispatchEvent(new CustomEvent("tt-sort", {
+            detail: { sort: next },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    clickRow(row) {
+        if (!this.clickableRows)
+            return;
+        this.dispatchEvent(new CustomEvent("tt-row-click", {
+            detail: { row },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    chooseAction(row, event) {
+        // The menu's tt-menu-select is generic. Re-emit it as something the page
+        // can act on: which action, on which row.
+        event.stopPropagation();
+        const { value } = event.detail;
+        this.dispatchEvent(new CustomEvent("tt-row-action", {
+            detail: { action: value, row },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    static { this.styles = [
+        srOnly,
+        css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: block;
+      font-family: var(--tt-font-sans);
+    }
+
+    .wrap {
+      width: 100%;
+      overflow-x: auto;
+      box-sizing: border-box;
+
+      background: var(--tt-card);
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-lg);
+
+      -webkit-overflow-scrolling: touch;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: var(--tt-text-sm);
+    }
+
+    /*
+      Sticky header: the column labels stay put while the body scrolls,
+      so you never lose track of what a column means in a long list.
+
+      It sticks to .wrap, not to the page. overflow-x: auto turns .wrap
+      into a scroll container on BOTH axes, and sticky always pins to the
+      nearest one. So it only works once the consumer gives the wrap a
+      height (::part(wrap) { max-height }). There is no way to scroll
+      sideways inside a box AND stick to the page's scroll; that is CSS,
+      not a choice made here.
+    */
+    thead th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+
+      /* The same pair as tt-table, so a colour theme tints every table header. */
+      background: var(--tt-table-header);
+      color: var(--tt-table-header-foreground);
+
+      padding: var(--tt-space-3) var(--tt-space-4);
+
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-semibold);
+      text-align: left;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      white-space: nowrap;
+    }
+
+    th.end,
+    td.end {
+      text-align: right;
+    }
+
+    td {
+      padding: var(--tt-space-3) var(--tt-space-4);
+      border-top: 1px solid var(--tt-border);
+      color: var(--tt-foreground);
+      line-height: var(--tt-leading-snug);
+      vertical-align: middle;
+    }
+
+    tbody tr {
+      transition: background var(--tt-duration-fast) var(--tt-ease);
+    }
+
+    tbody tr:hover {
+      background: var(--tt-accent);
+    }
+
+    tbody tr.clickable {
+      cursor: pointer;
+    }
+
+    /* Selected sits after hover so it wins, and gets its own darker
+       hover so a selected row still reacts to the pointer. */
+    tbody tr.selected {
+      background: color-mix(in srgb, var(--tt-primary) 8%, transparent);
+    }
+
+    tbody tr.selected:hover {
+      background: color-mix(in srgb, var(--tt-primary) 14%, transparent);
+    }
+
+    tbody tr:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    /* Sort controls are real buttons so the header is keyboard reachable.
+       A th with a click handler is not. */
+    .sort {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--tt-space-1);
+
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: inherit;
+
+      font: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      letter-spacing: inherit;
+      text-transform: inherit;
+
+      cursor: pointer;
+    }
+
+    .sort:hover {
+      color: var(--tt-foreground);
+    }
+
+    .sort:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+      border-radius: var(--tt-radius-sm);
+    }
+
+    /* Reserve the arrow's space always, so a header does not shift
+       sideways the moment you sort by it. The icon is always rendered and
+       only faded, so it holds its own width. */
+    .arrow {
+      display: inline-flex;
+      opacity: 0;
+    }
+
+    .sorted {
+      color: var(--tt-foreground);
+    }
+
+    .sorted .arrow {
+      opacity: 1;
+    }
+
+    /* width:1% on a table cell means "as narrow as the content allows".
+       The other columns absorb the leftover space. */
+    .select-cell,
+    .actions-cell {
+      width: 1%;
+      white-space: nowrap;
+    }
+
+    .select-cell {
+      padding-right: 0;
+    }
+
+    .actions-cell {
+      text-align: right;
+    }
+
+    .state {
+      padding: var(--tt-space-6);
+    }
+
+    /* Virtualized: a box that scrolls on its own, and does not hand the
+       scroll on to the page when it reaches an end. */
+    .wrap.virtual {
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+
+    table.fixed {
+      table-layout: fixed;
+    }
+
+    /* One line per cell, so every row is the one height the window math
+       assumes. Data cells only: the checkbox and menu keep their focus
+       rings. */
+    .virtual td.cell {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    tr.spacer td {
+      padding: 0;
+      border: 0;
+    }
+
+    /* Tighter sides on phones: a third column fits instead of scrolling. */
+    @media (max-width: 480px) {
+      thead th,
+      td {
+        padding-inline: var(--tt-space-3);
+      }
+
+      tr.spacer td {
+        padding: 0;
+      }
+    }
+
+    tbody tr.spacer:hover {
+      background: transparent;
+    }
+
+  `,
+    ]; }
+    renderHeader() {
+        return html `
+      <thead>
+        <tr aria-rowindex=${ifDefined(this.virtual ? 1 : undefined)}>
+          ${this.selectable
+            ? html `
+                <th class="select-cell">
+                  <!--
+                    The checkbox names ITSELF, but its label lives in a
+                    nested shadow root, and a table header cell is judged
+                    on its own text. Same pattern as the actions column
+                    above: the column gets a name, the control gets a name,
+                    and they are not the same sentence.
+                  -->
+                  <span class="sr-only">Select</span>
+                  <tt-checkbox
+                    label="Select all rows"
+                    label-hidden
+                    .checked=${this.allSelected}
+                    .indeterminate=${this.someSelected}
+                    @tt-change=${this.toggleAll}
+                  ></tt-checkbox>
+                </th>
+              `
+            : ""}
+          ${this.columns.map((column) => {
+            const isSorted = this.sort?.key === column.key;
+            const direction = this.sort?.direction;
+            return html `
+              <th
+                class=${column.align === "end" ? "end" : ""}
+                style=${ifDefined(column.width ? `width:${column.width}` : undefined)}
+                aria-sort=${ifDefined(!column.sortable
+                ? undefined
+                : !isSorted
+                    ? "none"
+                    : direction === "asc"
+                        ? "ascending"
+                        : "descending")}
+              >
+                ${column.sortable
+                ? html `
+                      <button
+                        class="sort ${isSorted ? "sorted" : ""}"
+                        type="button"
+                        @click=${() => this.toggleSort(column)}
+                      >
+                        ${column.label}
+                        <span class="arrow" aria-hidden="true">
+                          <tt-icon
+                            name=${direction === "desc" ? "arrow-down" : "arrow-up"}
+                            size="12px"
+                          ></tt-icon>
+                        </span>
+                      </button>
+                    `
+                : column.label}
+              </th>
+            `;
+        })}
+          ${this.hasActions
+            ? html `<th class="actions-cell">
+                <span class="sr-only">Actions</span>
+              </th>`
+            : ""}
+        </tr>
+      </thead>
+    `;
+    }
+    renderLoading() {
+        return html `
+      <tbody aria-busy="true">
+        ${Array.from({ length: this.loadingRows }, () => html `
+            <tr>
+              <td colspan=${this.columnCount}>
+                <tt-skeleton variant="text"></tt-skeleton>
+              </td>
+            </tr>
+          `)}
+      </tbody>
+    `;
+    }
+    renderRow(row, index) {
+        const isSelected = this.selected.includes(row.id);
+        return html `
+      <tr
+        class="row ${this.clickableRows ? "clickable" : ""} ${isSelected
+            ? "selected"
+            : ""}"
+        aria-rowindex=${ifDefined(this.virtual ? index + 2 : undefined)}
+        tabindex=${ifDefined(this.clickableRows ? 0 : undefined)}
+        @click=${() => this.clickRow(row)}
+        @keydown=${(e) => {
+            /*
+              Only a key pressed on the row ITSELF. Keys bubble, so Enter on
+              the row's checkbox or its actions menu reaches this handler
+              too, and opening the menu would also navigate away. target is
+              where the key was pressed; currentTarget is this <tr>.
+            */
+            if (e.target !== e.currentTarget)
+                return;
+            if (this.clickableRows && e.key === "Enter")
+                this.clickRow(row);
+        }}
+      >
+        ${this.selectable
+            ? html `
+              <td class="select-cell" @click=${(e) => e.stopPropagation()}>
+                <tt-checkbox
+                  .label=${this.rowLabel(row)}
+                  label-hidden
+                  .checked=${isSelected}
+                  @tt-change=${(e) => this.toggleRow(row.id, e)}
+                ></tt-checkbox>
+              </td>
+            `
+            : ""}
+        ${this.columns.map((column) => html `
+            <td class="cell ${column.align === "end" ? "end" : ""}">
+              ${row[column.key] ?? ""}
+            </td>
+          `)}
+        ${this.hasActions
+            ? html `
+              <td
+                class="actions-cell"
+                @click=${(e) => e.stopPropagation()}
+              >
+                <tt-dropdown-menu
+                  .items=${this.rowActions}
+                  label=${this.rowName(row) ? `Actions for ${this.rowName(row)}` : "Actions"}
+                  @tt-menu-select=${(e) => this.chooseAction(row, e)}
+                ></tt-dropdown-menu>
+              </td>
+            `
+            : ""}
+      </tr>
+    `;
+    }
+    /*
+      The rows in view, with a spacer row above and below standing in for
+      the rest, so the scrollbar is as long as the whole table. Keyed by id,
+      so a row keeps its element (and its focus, its open menu) while the
+      window slides over it.
+    */
+    renderRows() {
+        const { start, end } = this.inPage;
+        const height = this.rowHeight || ROW_ESTIMATE;
+        const spacer = (rows) => rows > 0
+            ? html `<tr class="spacer" aria-hidden="true" style="height: ${rows * height}px">
+            <td colspan=${this.columnCount}></td>
+          </tr>`
+            : "";
+        return html `
+      ${spacer(start)}
+      ${repeat(this.rows.slice(start, end), (row) => row.id, (row, offset) => this.renderRow(row, start + offset))}
+      ${spacer(this.rows.length - end)}
+    `;
+    }
+    render() {
+        const virtual = this.virtual;
+        const fixed = virtual && this.columnWidths.length > 0;
+        // The header, the rows in view and the two borders of .wrap.
+        const boxHeight = (this.headerHeight || ROW_ESTIMATE) + this.visibleRows * (this.rowHeight || ROW_ESTIMATE) + 2;
+        return html `
+      <div
+        class="wrap ${virtual ? "virtual" : ""}"
+        part="wrap"
+        style=${ifDefined(virtual ? `max-height: ${boxHeight}px` : undefined)}
+        @scroll=${this.handleScroll}
+      >
+        <table
+          part="table"
+          class=${fixed ? "fixed" : ""}
+          aria-label=${ifDefined(this.label || undefined)}
+          aria-rowcount=${ifDefined(virtual ? this.rows.length + 1 : undefined)}
+        >
+          ${fixed
+            ? html `<colgroup>
+                ${this.columnWidths.map((width) => html `<col style="width: ${width}${this.widthUnit}" />`)}
+              </colgroup>`
+            : ""}
+          ${this.renderHeader()}
+          ${this.loading
+            ? this.renderLoading()
+            : html `
+                <tbody>
+                  ${this.rows.length === 0
+                ? html `
+                        <tr>
+                          <td class="state" colspan=${this.columnCount}>
+                            <tt-empty-state
+                              heading=${this.emptyHeading}
+                              description=${this.emptyDescription}
+                            >
+                              <slot name="empty-actions" slot="actions"></slot>
+                            </tt-empty-state>
+                          </td>
+                        </tr>
+                      `
+                : this.renderRows()}
+                </tbody>
+              `}
+        </table>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTDataTable.prototype, "columns", void 0);
+__decorate([
+    property({ type: Array })
+], TTDataTable.prototype, "rows", void 0);
+__decorate([
+    property({ type: String })
+], TTDataTable.prototype, "label", void 0);
+__decorate([
+    property({ type: Object })
+], TTDataTable.prototype, "sort", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTDataTable.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Array })
+], TTDataTable.prototype, "selected", void 0);
+__decorate([
+    property({ type: Array, attribute: "row-actions" })
+], TTDataTable.prototype, "rowActions", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTDataTable.prototype, "loading", void 0);
+__decorate([
+    property({ type: Number, attribute: "loading-rows" })
+], TTDataTable.prototype, "loadingRows", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-heading" })
+], TTDataTable.prototype, "emptyHeading", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-description" })
+], TTDataTable.prototype, "emptyDescription", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "clickable-rows" })
+], TTDataTable.prototype, "clickableRows", void 0);
+__decorate([
+    property({ type: Number, attribute: "visible-rows" })
+], TTDataTable.prototype, "visibleRows", void 0);
+__decorate([
+    state()
+], TTDataTable.prototype, "firstInView", void 0);
+__decorate([
+    state()
+], TTDataTable.prototype, "rowHeight", void 0);
+__decorate([
+    state()
+], TTDataTable.prototype, "headerHeight", void 0);
+__decorate([
+    state()
+], TTDataTable.prototype, "columnWidths", void 0);
+__decorate([
+    state()
+], TTDataTable.prototype, "widthUnit", void 0);
+__decorate([
+    query(".wrap")
+], TTDataTable.prototype, "wrap", void 0);
+TTDataTable = __decorate([
+    customElement("tt-data-table")
+], TTDataTable);
+export { TTDataTable };
+//# sourceMappingURL=tt-data-table.js.map