@internetarchive/ads-table 0.0.7 → 1.0.0

package/dist/ads-table.js

@@ -0,0 +1,439 @@
+import { __decorate } from "tslib";
+// interface class for a Lit component class that contains table data
+import { css, html, LitElement, } from "lit";
+import { property, state, query, customElement } from "lit/decorators.js";
+import { EventHelpers } from "@internetarchive/ads-library";
+import { getUserOS, UserOperatingSystem } from "@internetarchive/ads-library";
+export class AdsTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        // base list of data that this class sorts
+        this.rows = [];
+        this.noDataText = "No items found";
+        this.defaultSortDirection = "ascending";
+        this.sortDirection = this.defaultSortDirection;
+        // list of selected rows in order of least to most recently added
+        this.selectedRowIds = [];
+        this.isLoading = false;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("selectedRowIds")) {
+            // report selected rows to parent via an event
+            this.emitEvent("row-select", { selectedRows: this.selectedRows });
+        }
+        // if rows change, re-ensure selected rows exist in table
+        if (this.rowsDidUpdate(changedProperties)) {
+            this.filterSelectedRowsToExistingRows();
+        }
+    }
+    // rather than compare references, determine if 'this.rows' has updated. an update occurs if:
+    // - row list is a different size
+    // - any elements in the sorted list may have changed place
+    rowsDidUpdate(changedProperties) {
+        // if the sort properties change, assume the elements have rearranged
+        if (changedProperties.has("sortKey") ||
+            changedProperties.has("sortDirection")) {
+            return true;
+        }
+        if (!changedProperties.has("rows") || !changedProperties.get("rows")) {
+            return false;
+        }
+        const oldRowIds = changedProperties.get("rows").map((row) => row.id);
+        // first check length. if list length changes, rows have changed.
+        if (oldRowIds.length !== this.rows.length) {
+            return true;
+        }
+        // otherwise, if they're the same size, compare individual items and ensure they're the same set of items
+        const newRowsIdsSet = new Set(this.rows.map((row) => row.id));
+        return !oldRowIds.every((id) => newRowsIdsSet.has(id));
+    }
+    emitEvent(eventName, detail = {}) {
+        this.dispatchEvent(EventHelpers.createEvent(eventName, detail ? { detail } : {}));
+    }
+    get visibleColumns() {
+        return this.columns.filter(({ isHidden }) => !isHidden);
+    }
+    get rowsById() {
+        return Object.fromEntries(this.rows.map((row) => [row.id, row]));
+    }
+    get sortedRows() {
+        var _a;
+        // if sorting has been done already, return the rows as-is.
+        if (this.selectedColumn.preSorted) {
+            return this.rows;
+        }
+        const sortByPrimaryKey = this.getSortFunction(this.sortColumnDataType, this.sortDirection);
+        const sortBySecondaryKey = this.getSortFunction(this.secondarySortDataType, ((_a = this.secondarySortDataType) === null || _a === void 0 ? void 0 : _a.defaultSortDirection) || this.sortDirection);
+        return this.rows.sort((rowA, rowB) => {
+            // sort by primary key: the selected column and direction
+            const sortResult = (sortByPrimaryKey === null || sortByPrimaryKey === void 0 ? void 0 : sortByPrimaryKey(rowA.data, rowB.data)) || 0;
+            // if sort result on primary sort key is inconclusive, use secondary sort data type
+            if (sortResult === 0) {
+                return (sortBySecondaryKey === null || sortBySecondaryKey === void 0 ? void 0 : sortBySecondaryKey(rowA.data, rowB.data)) || 0;
+            }
+            else {
+                return sortResult;
+            }
+        });
+    }
+    // rows highlighted by user
+    get selectedRows() {
+        return this.selectedRowIds.map((id) => this.rowsById[id]).filter((x) => x);
+    }
+    // the column you are currently sorting by
+    get selectedColumn() {
+        return this.columnByKey[this.sortKey];
+    }
+    // handler for when a user clicks on a column header
+    onColumnClick(column, defaultSortDirection = this
+        .defaultSortDirection) {
+        if (this.sortKey === column.key) {
+            // toggle the sort direction if the column you are clicking is already sorted
+            this.sortDirection =
+                this.sortDirection === "ascending" ? "descending" : "ascending";
+        }
+        else {
+            // otherwise, sort by the column you clicked on, and in the default sort direction
+            this.sortKey = column.key;
+            this.sortDirection =
+                column.dataType.defaultSortDirection || defaultSortDirection;
+        }
+        this.emitEvent("column-click", {
+            column,
+            sortKey: this.sortKey,
+            sortDirection: this.sortDirection,
+        });
+    }
+    // a map of column keys to their respective data types so we don't have to call .find everywhere
+    get columnByKey() {
+        return Object.fromEntries(this.columns.map((col) => [col.key, col]));
+    }
+    // data type of the currently sorted column
+    get sortColumnDataType() {
+        if (this.sortKey) {
+            return this.columnByKey[this.sortKey].dataType;
+        }
+        else {
+            return undefined;
+        }
+    }
+    // data type of the secondary sort column
+    get secondarySortDataType() {
+        if (this.secondarySortKey) {
+            return this.columnByKey[this.secondarySortKey].dataType;
+        }
+        else {
+            return undefined;
+        }
+    }
+    // swaps the parameters of the sort function to reverse the sort direction
+    getSortFunction(dataType, sortDirection) {
+        if (!dataType) {
+            return undefined;
+        }
+        if (sortDirection === "ascending") {
+            // return the original comparison function
+            return dataType.compare;
+        }
+        else if (dataType.compare !== undefined) {
+            // swap compare function parameters for descending
+            return (a, b) => { var _a; return ((_a = dataType.compare) === null || _a === void 0 ? void 0 : _a.call(dataType, b, a)) || 0; };
+        }
+        else {
+            return undefined;
+        }
+    }
+    renderArrowIcon(columnKey) {
+        if (columnKey !== this.sortKey) {
+            return html ``;
+        }
+        else if (this.sortDirection === "ascending") {
+            return html `▲`;
+        }
+        else {
+            return html `▼`;
+        }
+    }
+    get selectedRowIdsSet() {
+        return new Set(this.selectedRowIds);
+    }
+    get rowIdsSet() {
+        return new Set(this.rows.map((row) => row.id));
+    }
+    isSelected(row) {
+        return this.selectedRowIdsSet.has(row.id);
+    }
+    toggleRowSelected(rowId) {
+        if (this.selectedRowIdsSet.has(rowId)) {
+            // row is already selected: filter out clicked id
+            this.selectedRowIds = this.selectedRowIds.filter((id) => id !== rowId);
+        }
+        else {
+            // row is not yet selected: append clicked id
+            this.selectedRowIds = [...this.selectedRowIds, rowId];
+        }
+    }
+    get lastSelectedRowId() {
+        return this.selectedRowIds[this.selectedRowIds.length - 1];
+    }
+    get indexOfLastSelectedRow() {
+        return this.rows.findIndex((row) => row.id === this.lastSelectedRowId);
+    }
+    // select rows in order from the last selected element up til the given index
+    groupRowSelect(rowIndex) {
+        const getRowsToAdd = () => {
+            // get rows between index of last selected until index of selected row
+            if (rowIndex > this.indexOfLastSelectedRow) {
+                return this.rows.filter((_, i) => rowIndex >= i && i >= this.indexOfLastSelectedRow);
+            }
+            else {
+                // reverse order of adding rows since clicked index is lower than last selected
+                return this.rows
+                    .filter((_, i) => this.indexOfLastSelectedRow >= i && i >= rowIndex)
+                    .reverse();
+            }
+        };
+        const rowIdsToAdd = getRowsToAdd().map((row) => row.id);
+        const rowIdsSet = new Set(rowIdsToAdd);
+        // first remove ids you are about to re-add, so they'll be in renewed order
+        this.selectedRowIds = this.selectedRowIds.filter((id) => !rowIdsSet.has(id));
+        // finally, add the new rows
+        this.selectedRowIds = [...this.selectedRowIds, ...rowIdsToAdd];
+    }
+    onRowClick(event, clickedRow, rowIndex) {
+        const userOs = getUserOS();
+        // meta (cmd) key for mac, control key for non-mac
+        const macHoldingHotKey = userOs === UserOperatingSystem.MAC && event.metaKey;
+        const nonMacHoldingHotKey = userOs !== UserOperatingSystem.MAC && event.ctrlKey;
+        // if holding meta on mac or ctrl on windows/linux, toggle individual row selection
+        if (macHoldingHotKey || nonMacHoldingHotKey) {
+            this.toggleRowSelected(clickedRow.id);
+        }
+        else if (event.shiftKey) {
+            // if holding shift, select rows between this selection and the last selection
+            this.groupRowSelect(rowIndex);
+        }
+        else {
+            // clicking a row will select just that row.
+            this.selectedRowIds = [clickedRow.id];
+        }
+        this.filterSelectedRowsToExistingRows();
+        // emit event so users can hook into this action
+        this.emitEvent("row-click", { row: clickedRow });
+    }
+    // filter selected down to rows that actually exist in the table
+    filterSelectedRowsToExistingRows() {
+        this.selectedRowIds = this.selectedRowIds.filter((id) => this.rowIdsSet.has(id));
+    }
+    onRowDoubleClick(clickedRow) {
+        // emit event so users can hook into this event
+        this.emitEvent("row-double-click", { row: clickedRow });
+    }
+    // All keyboard events implemented through this method.
+    onKeyDown(event) {
+        var _a;
+        switch (event.key) {
+            case "ArrowUp":
+            case "ArrowDown":
+                event.preventDefault();
+                // shift focus to table element when navigating with arrow keys
+                (_a = this.tableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                return this.onUpDownArrowKey(event.key);
+        }
+    }
+    onUpDownArrowKey(key) {
+        if (this.selectedRowIds.length === 0) {
+            // select the first row if none are selected
+            this.selectedRowIds = [this.rows[0].id];
+            return;
+        }
+        // offset in the proper direction of the arrow
+        const indexOffset = key === "ArrowUp" ? -1 : 1;
+        const newSelectedRowIndex = this.constrainIndex(this.indexOfLastSelectedRow + indexOffset);
+        const newSelectedRowId = this.rows[newSelectedRowIndex].id;
+        this.selectedRowIds = [newSelectedRowId];
+    }
+    // ensures index values are kept to the closest in-bounds index
+    constrainIndex(index) {
+        return Math.max(Math.min(index, this.rows.length - 1), 0);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // attach keyboard listener
+        window.addEventListener("keydown", (e) => this.onKeyDown(e));
+    }
+    render() {
+        return html `
+      <table id="main-table" tabindex="0">
+        <thead>
+          <tr>
+            ${this.visibleColumns.map((column) => html `
+                <th
+                  @click=${() => this.onColumnClick(column)}
+                  class=${column.dataType.compare ? "sortable" : ""}
+                  style=${`flex: ${column.flexRatio}`}
+                >
+                  ${column.label}
+                  ${column.dataType.compare
+            ? html `<span>${this.renderArrowIcon(column.key)}</span>`
+            : ""}
+                </th>
+              `)}
+          </tr>
+        </thead>
+        <tbody>
+          ${!this.isLoading
+            ? this.sortedRows.map((row, index) => html `
+                  <tr
+                    @click=${(e) => this.onRowClick(e, row, index)}
+                    @dblclick=${() => this.onRowDoubleClick(row)}
+                    class=${this.isSelected(row) ? "row-selected" : ""}
+                    data-row-selected=${this.isSelected(row)}
+                    data-id=${row.id}
+                  >
+                    ${this.visibleColumns.map((column) => html `
+                        <td style=${`flex: ${column.flexRatio}`}>
+                          ${column.dataType.format(row.data)}
+                        </td>
+                      `)}
+                  </tr>
+                `)
+            : html `
+                <tr>
+                  <td class="no-data">Loading...</td>
+                </tr>
+              `}
+          ${!this.isLoading && this.sortedRows.length === 0
+            ? html `
+                <tr>
+                  <td class="no-data">${this.noDataText}</td>
+                </tr>
+              `
+            : null}
+        </tbody>
+      </table>
+    `;
+    }
+}
+AdsTable.styles = css `
+    table {
+      display: flex;
+      flex-direction: column;
+      user-select: none;
+      border-collapse: collapse;
+    }
+
+    thead,
+    tbody {
+      display: flex;
+      flex-direction: column;
+    }
+
+    thead {
+      background: #2a282c;
+    }
+
+    tbody {
+      scrollbar-gutter: stable;
+    }
+
+    tr {
+      display: flex;
+      width: 100%;
+      min-height: 40px;
+      flex-shrink: 0;
+    }
+
+    tr.row-selected {
+      background: #ccddf2;
+    }
+
+    td.no-data {
+      font-style: italic;
+      justify-content: center;
+    }
+
+    td,
+    th {
+      display: flex;
+      flex: 1;
+      justify-content: flex-start;
+      align-items: center;
+      padding: 0 12px;
+      height: 40px;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    th {
+      color: white;
+    }
+
+    th.sortable {
+      cursor: pointer;
+    }
+
+    th.sortable:hover {
+      background: #525252;
+    }
+
+    th span {
+      padding-left: 5px;
+    }
+
+    td {
+      border-bottom: 1px solid #bbbbbb;
+    }
+  `;
+__decorate([
+    query("#main-table")
+], AdsTable.prototype, "tableElement", void 0);
+__decorate([
+    property({ type: Array })
+], AdsTable.prototype, "rows", void 0);
+__decorate([
+    state()
+], AdsTable.prototype, "sortDirection", void 0);
+__decorate([
+    state()
+], AdsTable.prototype, "selectedRowIds", void 0);
+__decorate([
+    state()
+], AdsTable.prototype, "isLoading", void 0);
+// a simple, generic, out-of-the box implementation of AdsTable
+let AdsSimpleTable = class AdsSimpleTable extends AdsTable {
+    constructor() {
+        var _a;
+        super(...arguments);
+        // columns are exposed as a parameter like rows, not a class member to implement
+        this.columns = [];
+        this.secondarySortKey = undefined;
+        // sort key is automatically held in state
+        this.sortKey = (_a = this.columns[0]) === null || _a === void 0 ? void 0 : _a.key;
+    }
+    updated(changedProperties) {
+        var _a;
+        super.updated(changedProperties);
+        if (changedProperties.has("columns")) {
+            this.sortKey = (_a = this.columns[0]) === null || _a === void 0 ? void 0 : _a.key;
+        }
+    }
+};
+__decorate([
+    property({ type: Array })
+], AdsSimpleTable.prototype, "columns", void 0);
+__decorate([
+    property({ type: String })
+], AdsSimpleTable.prototype, "secondarySortKey", void 0);
+__decorate([
+    state()
+], AdsSimpleTable.prototype, "sortKey", void 0);
+AdsSimpleTable = __decorate([
+    customElement("ads-simple-table")
+], AdsSimpleTable);
+export { AdsSimpleTable };
+//# sourceMappingURL=ads-table.js.map

package/dist/ads-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ads-table.js","sourceRoot":"","sources":["../src/ads-table.ts"],"names":[],"mappings":"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","sourcesContent":["// interface class for a Lit component class that contains table data\nimport {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  PropertyValues,\n  TemplateResult,\n} from \"lit\";\nimport {\n  SortComparisonFunction,\n  TableColumn,\n  TableDataType,\n  TableRow,\n} from \"./types\";\nimport { property, state, query, customElement } from \"lit/decorators.js\";\nimport { EventHelpers } from \"@internetarchive/ads-library\";\nimport { getUserOS, UserOperatingSystem } from \"@internetarchive/ads-library\";\n\nexport abstract class AdsTable<T> extends LitElement {\n  @query(\"#main-table\") tableElement: HTMLTableElement | undefined;\n\n  // base list of data that this class sorts\n  @property({ type: Array }) rows: TableRow<T>[] = [];\n\n  // abstract members to override\n  protected abstract columns: TableColumn<T>[];\n  protected abstract sortKey: keyof T | undefined;\n  protected abstract secondarySortKey: keyof T | undefined;\n\n  protected noDataText: string = \"No items found\";\n\n  protected readonly defaultSortDirection: \"ascending\" | \"descending\" =\n    \"ascending\";\n\n  @state() protected sortDirection: \"ascending\" | \"descending\" =\n    this.defaultSortDirection;\n\n  // list of selected rows in order of least to most recently added\n  @state() protected selectedRowIds: string[] = [];\n\n  @state() isLoading: boolean = false;\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has(\"selectedRowIds\")) {\n      // report selected rows to parent via an event\n      this.emitEvent(\"row-select\", { selectedRows: this.selectedRows });\n    }\n\n    // if rows change, re-ensure selected rows exist in table\n    if (this.rowsDidUpdate(changedProperties)) {\n      this.filterSelectedRowsToExistingRows();\n    }\n  }\n\n  // rather than compare references, determine if 'this.rows' has updated. an update occurs if:\n  // - row list is a different size\n  // - any elements in the sorted list may have changed place\n  protected rowsDidUpdate(changedProperties: PropertyValues): boolean {\n    // if the sort properties change, assume the elements have rearranged\n    if (\n      changedProperties.has(\"sortKey\") ||\n      changedProperties.has(\"sortDirection\")\n    ) {\n      return true;\n    }\n    if (!changedProperties.has(\"rows\") || !changedProperties.get(\"rows\")) {\n      return false;\n    }\n    const oldRowIds: string[] = (\n      changedProperties.get(\"rows\") as TableRow<T>[]\n    ).map((row: TableRow<T>) => row.id);\n    // first check length. if list length changes, rows have changed.\n    if (oldRowIds.length !== this.rows.length) {\n      return true;\n    }\n    // otherwise, if they're the same size, compare individual items and ensure they're the same set of items\n    const newRowsIdsSet: Set<string> = new Set(this.rows.map((row) => row.id));\n    return !oldRowIds.every((id) => newRowsIdsSet.has(id));\n  }\n\n  protected emitEvent(eventName: string, detail = {}) {\n    this.dispatchEvent(\n      EventHelpers.createEvent(eventName, detail ? { detail } : {}),\n    );\n  }\n\n  protected get visibleColumns(): TableColumn<T>[] {\n    return this.columns.filter(({ isHidden }) => !isHidden);\n  }\n\n  protected get rowsById(): { [key: string]: TableRow<T> } {\n    return Object.fromEntries<TableRow<T>>(\n      this.rows.map((row) => [row.id, row]),\n    );\n  }\n\n  protected get sortedRows(): TableRow<T>[] {\n    // if sorting has been done already, return the rows as-is.\n    if (this.selectedColumn.preSorted) {\n      return this.rows;\n    }\n    const sortByPrimaryKey = this.getSortFunction(\n      this.sortColumnDataType,\n      this.sortDirection,\n    );\n    const sortBySecondaryKey = this.getSortFunction(\n      this.secondarySortDataType,\n      this.secondarySortDataType?.defaultSortDirection || this.sortDirection,\n    );\n    return this.rows.sort((rowA, rowB) => {\n      // sort by primary key: the selected column and direction\n      const sortResult = sortByPrimaryKey?.(rowA.data, rowB.data) || 0;\n      // if sort result on primary sort key is inconclusive, use secondary sort data type\n      if (sortResult === 0) {\n        return sortBySecondaryKey?.(rowA.data, rowB.data) || 0;\n      } else {\n        return sortResult;\n      }\n    });\n  }\n\n  // rows highlighted by user\n  protected get selectedRows(): TableRow<T>[] {\n    return this.selectedRowIds.map((id) => this.rowsById[id]).filter((x) => x);\n  }\n\n  // the column you are currently sorting by\n  protected get selectedColumn(): TableColumn<T> {\n    return this.columnByKey[this.sortKey as string];\n  }\n\n  // handler for when a user clicks on a column header\n  protected onColumnClick(\n    column: TableColumn<T>,\n    defaultSortDirection: \"ascending\" | \"descending\" = this\n      .defaultSortDirection,\n  ): void {\n    if (this.sortKey === column.key) {\n      // toggle the sort direction if the column you are clicking is already sorted\n      this.sortDirection =\n        this.sortDirection === \"ascending\" ? \"descending\" : \"ascending\";\n    } else {\n      // otherwise, sort by the column you clicked on, and in the default sort direction\n      this.sortKey = column.key;\n      this.sortDirection =\n        column.dataType.defaultSortDirection || defaultSortDirection;\n    }\n    this.emitEvent(\"column-click\", {\n      column,\n      sortKey: this.sortKey,\n      sortDirection: this.sortDirection,\n    });\n  }\n\n  // a map of column keys to their respective data types so we don't have to call .find everywhere\n  protected get columnByKey(): {\n    [columnKey: string]: TableColumn<T>;\n  } {\n    return Object.fromEntries<TableColumn<T>>(\n      this.columns.map((col) => [col.key, col]),\n    );\n  }\n\n  // data type of the currently sorted column\n  protected get sortColumnDataType(): TableDataType<T> | undefined {\n    if (this.sortKey) {\n      return this.columnByKey[this.sortKey as string].dataType;\n    } else {\n      return undefined;\n    }\n  }\n\n  // data type of the secondary sort column\n  protected get secondarySortDataType(): TableDataType<T> | undefined {\n    if (this.secondarySortKey) {\n      return this.columnByKey[this.secondarySortKey as string].dataType;\n    } else {\n      return undefined;\n    }\n  }\n\n  // swaps the parameters of the sort function to reverse the sort direction\n  protected getSortFunction(\n    dataType: TableDataType<T> | undefined,\n    sortDirection: \"ascending\" | \"descending\",\n  ): SortComparisonFunction<T> | undefined {\n    if (!dataType) {\n      return undefined;\n    }\n    if (sortDirection === \"ascending\") {\n      // return the original comparison function\n      return dataType.compare;\n    } else if (dataType.compare !== undefined) {\n      // swap compare function parameters for descending\n      return (a, b) => dataType.compare?.(b, a) || 0;\n    } else {\n      return undefined;\n    }\n  }\n\n  protected renderArrowIcon(columnKey: keyof T): TemplateResult {\n    if (columnKey !== this.sortKey) {\n      return html``;\n    } else if (this.sortDirection === \"ascending\") {\n      return html`▲`;\n    } else {\n      return html`▼`;\n    }\n  }\n\n  protected get selectedRowIdsSet(): Set<string> {\n    return new Set(this.selectedRowIds);\n  }\n\n  protected get rowIdsSet(): Set<string> {\n    return new Set(this.rows.map((row) => row.id));\n  }\n\n  protected isSelected(row: TableRow<T>): boolean {\n    return this.selectedRowIdsSet.has(row.id);\n  }\n\n  protected toggleRowSelected(rowId: string): void {\n    if (this.selectedRowIdsSet.has(rowId)) {\n      // row is already selected: filter out clicked id\n      this.selectedRowIds = this.selectedRowIds.filter((id) => id !== rowId);\n    } else {\n      // row is not yet selected: append clicked id\n      this.selectedRowIds = [...this.selectedRowIds, rowId];\n    }\n  }\n\n  protected get lastSelectedRowId(): string {\n    return this.selectedRowIds[this.selectedRowIds.length - 1];\n  }\n\n  protected get indexOfLastSelectedRow(): number {\n    return this.rows.findIndex((row) => row.id === this.lastSelectedRowId);\n  }\n\n  // select rows in order from the last selected element up til the given index\n  protected groupRowSelect(rowIndex: number): void {\n    const getRowsToAdd = (): TableRow<T>[] => {\n      // get rows between index of last selected until index of selected row\n      if (rowIndex > this.indexOfLastSelectedRow) {\n        return this.rows.filter(\n          (_, i) => rowIndex >= i && i >= this.indexOfLastSelectedRow,\n        );\n      } else {\n        // reverse order of adding rows since clicked index is lower than last selected\n        return this.rows\n          .filter((_, i) => this.indexOfLastSelectedRow >= i && i >= rowIndex)\n          .reverse();\n      }\n    };\n    const rowIdsToAdd: string[] = getRowsToAdd().map((row) => row.id);\n    const rowIdsSet: Set<string> = new Set(rowIdsToAdd);\n    // first remove ids you are about to re-add, so they'll be in renewed order\n    this.selectedRowIds = this.selectedRowIds.filter(\n      (id) => !rowIdsSet.has(id),\n    );\n    // finally, add the new rows\n    this.selectedRowIds = [...this.selectedRowIds, ...rowIdsToAdd];\n  }\n\n  protected onRowClick(\n    event: MouseEvent,\n    clickedRow: TableRow<T>,\n    rowIndex: number,\n  ): void {\n    const userOs = getUserOS();\n    // meta (cmd) key for mac, control key for non-mac\n    const macHoldingHotKey =\n      userOs === UserOperatingSystem.MAC && event.metaKey;\n    const nonMacHoldingHotKey =\n      userOs !== UserOperatingSystem.MAC && event.ctrlKey;\n    // if holding meta on mac or ctrl on windows/linux, toggle individual row selection\n    if (macHoldingHotKey || nonMacHoldingHotKey) {\n      this.toggleRowSelected(clickedRow.id);\n    } else if (event.shiftKey) {\n      // if holding shift, select rows between this selection and the last selection\n      this.groupRowSelect(rowIndex);\n    } else {\n      // clicking a row will select just that row.\n      this.selectedRowIds = [clickedRow.id];\n    }\n    this.filterSelectedRowsToExistingRows();\n    // emit event so users can hook into this action\n    this.emitEvent(\"row-click\", { row: clickedRow });\n  }\n\n  // filter selected down to rows that actually exist in the table\n  protected filterSelectedRowsToExistingRows() {\n    this.selectedRowIds = this.selectedRowIds.filter((id) =>\n      this.rowIdsSet.has(id),\n    );\n  }\n\n  protected onRowDoubleClick(clickedRow: TableRow<T>): void {\n    // emit event so users can hook into this event\n    this.emitEvent(\"row-double-click\", { row: clickedRow });\n  }\n\n  // All keyboard events implemented through this method.\n  protected onKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n        event.preventDefault();\n        // shift focus to table element when navigating with arrow keys\n        this.tableElement?.focus();\n        return this.onUpDownArrowKey(event.key);\n    }\n  }\n\n  protected onUpDownArrowKey(key: \"ArrowUp\" | \"ArrowDown\"): void {\n    if (this.selectedRowIds.length === 0) {\n      // select the first row if none are selected\n      this.selectedRowIds = [this.rows[0].id];\n      return;\n    }\n    // offset in the proper direction of the arrow\n    const indexOffset = key === \"ArrowUp\" ? -1 : 1;\n    const newSelectedRowIndex = this.constrainIndex(\n      this.indexOfLastSelectedRow + indexOffset,\n    );\n    const newSelectedRowId = this.rows[newSelectedRowIndex].id;\n    this.selectedRowIds = [newSelectedRowId];\n  }\n\n  // ensures index values are kept to the closest in-bounds index\n  protected constrainIndex(index: number): number {\n    return Math.max(Math.min(index, this.rows.length - 1), 0);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    // attach keyboard listener\n    window.addEventListener(\"keydown\", (e: KeyboardEvent) => this.onKeyDown(e));\n  }\n\n  render() {\n    return html`\n      <table id=\"main-table\" tabindex=\"0\">\n        <thead>\n          <tr>\n            ${this.visibleColumns.map(\n              (column) => html`\n                <th\n                  @click=${() => this.onColumnClick(column)}\n                  class=${column.dataType.compare ? \"sortable\" : \"\"}\n                  style=${`flex: ${column.flexRatio}`}\n                >\n                  ${column.label}\n                  ${column.dataType.compare\n                    ? html`<span>${this.renderArrowIcon(column.key)}</span>`\n                    : \"\"}\n                </th>\n              `,\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${!this.isLoading\n            ? this.sortedRows.map(\n                (row, index) => html`\n                  <tr\n                    @click=${(e: MouseEvent) => this.onRowClick(e, row, index)}\n                    @dblclick=${() => this.onRowDoubleClick(row)}\n                    class=${this.isSelected(row) ? \"row-selected\" : \"\"}\n                    data-row-selected=${this.isSelected(row)}\n                    data-id=${row.id}\n                  >\n                    ${this.visibleColumns.map(\n                      (column) => html`\n                        <td style=${`flex: ${column.flexRatio}`}>\n                          ${column.dataType.format(row.data)}\n                        </td>\n                      `,\n                    )}\n                  </tr>\n                `,\n              )\n            : html`\n                <tr>\n                  <td class=\"no-data\">Loading...</td>\n                </tr>\n              `}\n          ${!this.isLoading && this.sortedRows.length === 0\n            ? html`\n                <tr>\n                  <td class=\"no-data\">${this.noDataText}</td>\n                </tr>\n              `\n            : null}\n        </tbody>\n      </table>\n    `;\n  }\n\n  static styles: CSSResultGroup = css`\n    table {\n      display: flex;\n      flex-direction: column;\n      user-select: none;\n      border-collapse: collapse;\n    }\n\n    thead,\n    tbody {\n      display: flex;\n      flex-direction: column;\n    }\n\n    thead {\n      background: #2a282c;\n    }\n\n    tbody {\n      scrollbar-gutter: stable;\n    }\n\n    tr {\n      display: flex;\n      width: 100%;\n      min-height: 40px;\n      flex-shrink: 0;\n    }\n\n    tr.row-selected {\n      background: #ccddf2;\n    }\n\n    td.no-data {\n      font-style: italic;\n      justify-content: center;\n    }\n\n    td,\n    th {\n      display: flex;\n      flex: 1;\n      justify-content: flex-start;\n      align-items: center;\n      padding: 0 12px;\n      height: 40px;\n\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      min-width: 0;\n    }\n\n    th {\n      color: white;\n    }\n\n    th.sortable {\n      cursor: pointer;\n    }\n\n    th.sortable:hover {\n      background: #525252;\n    }\n\n    th span {\n      padding-left: 5px;\n    }\n\n    td {\n      border-bottom: 1px solid #bbbbbb;\n    }\n  `;\n}\n\n// a simple, generic, out-of-the box implementation of AdsTable\n@customElement(\"ads-simple-table\")\nexport class AdsSimpleTable<T> extends AdsTable<T> {\n  // columns are exposed as a parameter like rows, not a class member to implement\n  @property({ type: Array }) columns: TableColumn<T>[] = [];\n\n  @property({ type: String }) secondarySortKey: keyof T | undefined = undefined;\n\n  // sort key is automatically held in state\n  @state() sortKey: keyof T | undefined = this.columns[0]?.key;\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has(\"columns\")) {\n      this.sortKey = this.columns[0]?.key;\n    }\n  }\n}\n"]}