From 3844c8dd28224848f2cc3db1182c6b06c70e8e6b Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Fri, 23 Feb 2024 15:11:20 -0500
Subject: [PATCH 01/32] feat(table): add pharos table component

---
 .storybook/initComponents.js                  |   2 +
 .../src/components/table/pharos-table.scss    |  35 +++++
 .../src/components/table/pharos-table.ts      | 146 ++++++++++++++++++
 .../table/pharos-table.wc.stories.jsx         |  79 ++++++++++
 packages/pharos/src/index.ts                  |   1 +
 packages/pharos/src/test/initComponents.ts    |   2 +
 6 files changed, 265 insertions(+)
 create mode 100644 packages/pharos/src/components/table/pharos-table.scss
 create mode 100644 packages/pharos/src/components/table/pharos-table.ts
 create mode 100644 packages/pharos/src/components/table/pharos-table.wc.stories.jsx

diff --git a/.storybook/initComponents.js b/.storybook/initComponents.js
index 7a4e59708..127671b0f 100644
--- a/.storybook/initComponents.js
+++ b/.storybook/initComponents.js
@@ -36,6 +36,7 @@ import {
   PharosSidenavSection,
   PharosTabs,
   PharosTab,
+  PharosTable,
   PharosTabPanel,
   PharosTextInput,
   PharosTextarea,
@@ -86,6 +87,7 @@ registerComponents('storybook', [
   PharosSidenavSection,
   PharosTabs,
   PharosTab,
+  PharosTable,
   PharosTabPanel,
   PharosTextInput,
   PharosTextarea,
diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss
new file mode 100644
index 000000000..8611dee94
--- /dev/null
+++ b/packages/pharos/src/components/table/pharos-table.scss
@@ -0,0 +1,35 @@
+:host {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.table {
+  border-collapse: collapse;
+
+  th {
+    border: 1px solid #eae8e1;
+    padding: var(--pharos-spacing-1-x);
+  }
+
+  td {
+    border: 1px solid #eae8e1;
+    padding: var(--pharos-spacing-1-x);
+  }
+}
+
+.table-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: var(--pharos-spacing-one-half-x);
+
+  .item-per-page-wrapper {
+    display: flex;
+    align-items: center;
+    column-gap: var(--pharos-spacing-one-half-x);
+
+    .item-per-page-selector {
+      width: 75px;
+    }
+  }
+}
diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
new file mode 100644
index 000000000..340ac9010
--- /dev/null
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -0,0 +1,146 @@
+import { PharosElement } from '../base/pharos-element';
+import ScopedRegistryMixin from '../../utils/mixins/scoped-registry';
+import { html } from 'lit';
+import { state } from 'lit/decorators.js';
+import type { TemplateResult, CSSResultArray } from 'lit';
+import { property } from 'lit/decorators.js';
+import { tableStyles } from './pharos-table.css';
+import { PharosSelect } from '../select/pharos-select';
+import { PharosPagination } from '../pagination/pharos-pagination';
+
+/**
+ * Pharos table component.
+ *
+ * @tag pharos-table
+
+ *
+ */
+export class PharosTable extends ScopedRegistryMixin(PharosElement) {
+  static elementDefinitions = {
+    'pharos-select': PharosSelect,
+    'pharos-pagination': PharosPagination,
+  };
+
+  /**
+   * Coloumn definition.
+   * @attr columns
+   * sample column:
+   * [
+   *  {
+   *    name: ID
+   *    field: id
+   *  },
+   *  {
+   *    name: Message
+   *    field: message
+   *  }
+   * ]
+   */
+  @property({ type: Array, reflect: true, attribute: 'columns' })
+  public columns = [];
+
+  /**
+   * Row data.
+   * @attr row-data
+   * sample row:
+   * [
+   *  {
+   *    id: 1,
+   *    message: first one
+   *  },
+   *  {
+   *    id: 2,
+   *    message: second one
+   *  }
+   * ]
+   */
+  @property({ type: Array, reflect: true, attribute: 'row-data' })
+  public rowData = [];
+
+  @state()
+  private _pageSize = 2;
+
+  @state()
+  private _currentPage = 1;
+
+  public static override get styles(): CSSResultArray {
+    return [tableStyles];
+  }
+
+  private _onItemPerPageChange(event: Event): void {
+    console.log(event);
+    // this._itemPerPage = event?.target?.value;
+  }
+
+  private _renderTableHeader(): TemplateResult[] {
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    return this.columns.map((column: any) => html`<th>${column.name}</th>`);
+  }
+
+  private _renderTableRows(): TemplateResult[] {
+    const currentDisplayingData = this.rowData.slice(
+      this._pageStartNumber() - 1,
+      this._pageEndNumber()
+    );
+    return currentDisplayingData.map((row: any) => {
+      const arr: TemplateResult[] = [];
+      this.columns.forEach((column: any) => {
+        arr.push(html`<td>${row[column.field]}</td>`);
+      });
+      return html`<tr>
+        ${arr}
+      </tr>`;
+    });
+  }
+
+  private _pageStartNumber(): number {
+    return (this._currentPage - 1) * this._pageSize + 1;
+  }
+
+  private _pageEndNumber(): number {
+    return Math.min(this.rowData.length, this._currentPage * this._pageSize);
+  }
+
+  private _onPrevPage(): void {
+    this._currentPage = Math.max(this._currentPage - 1, 0);
+  }
+
+  private _onNextPage(): void {
+    this._currentPage = Math.min(this._currentPage + 1, this.rowData.length);
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <table class="table">
+        <thead>
+          <tr>
+            ${this._renderTableHeader()}
+          </tr>
+        </thead>
+        <tbody>
+          ${this._renderTableRows()}
+        </tbody>
+      </table>
+      <div class="table-controls">
+        <div class="item-per-page-wrapper">
+          <span>Items per page</span>
+          <pharos-select class="item-per-page-selector" @change=${this._onItemPerPageChange}>
+            <option value="50" selected>50</option>
+            <option value="100" selected>100</option>
+          </pharos-select>
+          <span
+            >(Displaying ${this._pageStartNumber()}-${this._pageEndNumber()} of
+            ${this.rowData.length})</span
+          >
+        </div>
+        <pharos-pagination
+          current-page="${this._currentPage}"
+          total-results="${this.rowData.length}"
+          page-size="${this._pageSize}"
+          @prev-page="${this._onPrevPage}"
+          @next-page="${this._onNextPage}"
+        ></pharos-pagination>
+      </div>
+    `;
+  }
+}
diff --git a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
new file mode 100644
index 000000000..7015e603a
--- /dev/null
+++ b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
@@ -0,0 +1,79 @@
+// import { action } from '@storybook/addon-actions';
+import { html } from 'lit';
+
+import { configureDocsPage } from '@config/docsPageConfig';
+
+export default {
+  title: 'Components/Table',
+  component: 'pharos-table',
+  parameters: {
+    docs: { page: configureDocsPage('table') },
+    options: { selectedPanel: 'addon-controls' },
+  },
+};
+
+export const Base = {
+  render: ({ columns, rowData }) =>
+    html` <storybook-pharos-table .columns="${columns}" .rowData="${rowData}" /> `,
+  args: {
+    columns: [
+      {
+        name: 'Item',
+        field: 'item',
+      },
+      {
+        name: 'Filename',
+        field: 'filename',
+      },
+      {
+        name: 'Expired Date',
+        field: 'expired_date',
+      },
+      {
+        name: 'Created On',
+        field: 'created_on',
+      },
+      {
+        name: 'University',
+        field: 'university',
+      },
+    ],
+    rowData: [
+      {
+        item: 1,
+        filename: '12345.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+      {
+        item: 2,
+        filename: '123456.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+      {
+        item: 3,
+        filename: '123456.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+      {
+        item: 4,
+        filename: '123456.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+      {
+        item: 5,
+        filename: '123456.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+    ],
+  },
+};
diff --git a/packages/pharos/src/index.ts b/packages/pharos/src/index.ts
index 9d91f7ccf..74d8d53e7 100644
--- a/packages/pharos/src/index.ts
+++ b/packages/pharos/src/index.ts
@@ -15,6 +15,7 @@ export { PharosModal } from './components/modal/pharos-modal';
 export { PharosDropdownMenuItem } from './components/dropdown-menu/pharos-dropdown-menu-item';
 export { PharosDropdownMenu } from './components/dropdown-menu/pharos-dropdown-menu';
 export { PharosTab } from './components/tabs/pharos-tab';
+export { PharosTable } from './components/table/pharos-table';
 export { PharosTabs } from './components/tabs/pharos-tabs';
 export { PharosTabPanel } from './components/tabs/pharos-tab-panel';
 export { PharosPagination } from './components/pagination/pharos-pagination';
diff --git a/packages/pharos/src/test/initComponents.ts b/packages/pharos/src/test/initComponents.ts
index 55a1c98c2..f618583a7 100644
--- a/packages/pharos/src/test/initComponents.ts
+++ b/packages/pharos/src/test/initComponents.ts
@@ -36,6 +36,7 @@ import {
   PharosSidenavSection,
   PharosTabs,
   PharosTab,
+  PharosTable,
   PharosTabPanel,
   PharosTextInput,
   PharosTextarea,
@@ -86,6 +87,7 @@ registerComponents('test', [
   PharosSidenavSection,
   PharosTabs,
   PharosTab,
+  PharosTable,
   PharosTabPanel,
   PharosTextInput,
   PharosTextarea,

From ed0dc5bbd2b2e35ef97e27b929ad8e7d30dbe299 Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Tue, 27 Feb 2024 16:37:29 -0500
Subject: [PATCH 02/32] feat(table): add more to tables

---
 .../src/components/table/pharos-table.test.ts | 52 +++++++++++
 .../src/components/table/pharos-table.ts      | 87 +++++++++++++------
 .../table/pharos-table.wc.stories.jsx         | 12 ++-
 3 files changed, 122 insertions(+), 29 deletions(-)
 create mode 100644 packages/pharos/src/components/table/pharos-table.test.ts

diff --git a/packages/pharos/src/components/table/pharos-table.test.ts b/packages/pharos/src/components/table/pharos-table.test.ts
new file mode 100644
index 000000000..31f1692f9
--- /dev/null
+++ b/packages/pharos/src/components/table/pharos-table.test.ts
@@ -0,0 +1,52 @@
+import { fixture, expect } from '@open-wc/testing';
+import type { TemplateResult } from 'lit';
+
+import { html } from 'lit/static-html.js';
+
+import type { PharosTable } from './pharos-table';
+
+describe('pharos-table', () => {
+  let component: PharosTable;
+
+  beforeEach(async () => {
+    const columns = [
+      {
+        name: 'Item',
+        field: 'item',
+      },
+      {
+        name: 'Filename',
+        field: 'filename',
+      },
+    ];
+    const rowData = [
+      {
+        item: 1,
+        filename: '12345.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+      {
+        item: 2,
+        filename: '123456.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+    ];
+    component = await fixture(html`
+      <test-pharos-table .columns="${columns}" .rowData="${rowData}"> </test-pharos-table>
+    `);
+  });
+
+  it('is accessible', async () => {
+    await expect(component).to.be.accessible();
+  });
+
+  it('has 2 rows', async () => {
+    const rows = Array.prototype.slice.call(component.querySelectorAll(`tr`)) as TemplateResult[];
+
+    expect(rows.length).to.be.eq(2);
+  });
+});
diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 340ac9010..dfcfb41d1 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -1,6 +1,6 @@
 import { PharosElement } from '../base/pharos-element';
 import ScopedRegistryMixin from '../../utils/mixins/scoped-registry';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
 import type { TemplateResult, CSSResultArray } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -12,7 +12,9 @@ import { PharosPagination } from '../pagination/pharos-pagination';
  * Pharos table component.
  *
  * @tag pharos-table
-
+ *
+ * @fires pharos-table-prev-page - Fires when the table goes to previous page
+ * @fires pharos-table-next-page - Fires when the table goes to next page
  *
  */
 export class PharosTable extends ScopedRegistryMixin(PharosElement) {
@@ -37,7 +39,8 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
    * ]
    */
   @property({ type: Array, reflect: true, attribute: 'columns' })
-  public columns = [];
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  public columns: any[] = [];
 
   /**
    * Row data.
@@ -55,7 +58,16 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
    * ]
    */
   @property({ type: Array, reflect: true, attribute: 'row-data' })
-  public rowData = [];
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  public rowData: any[] = [];
+
+  @property({ type: Boolean, reflect: true, attribute: 'hide-pagination' })
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  public hidePagination: boolean = true;
+
+  @property({ type: Number, reflect: true, attribute: 'total-number' })
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  public totalResults: number = 0;
 
   @state()
   private _pageSize = 2;
@@ -63,13 +75,22 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   @state()
   private _currentPage = 1;
 
+  protected override firstUpdated(): void {
+    this._pageSize = this.hidePagination ? this.rowData.length : 2;
+    this.totalResults = this.hidePagination ? this.rowData.length : this.totalResults;
+  }
+
+  protected override updated(): void {
+    this._pageSize = this.hidePagination ? this.rowData.length : 2;
+    this.totalResults = this.hidePagination ? this.rowData.length : this.totalResults;
+  }
+
   public static override get styles(): CSSResultArray {
     return [tableStyles];
   }
 
-  private _onItemPerPageChange(event: Event): void {
-    console.log(event);
-    // this._itemPerPage = event?.target?.value;
+  private _onPageSizeChange(event: Event): void {
+    this._pageSize = Number((event.composedPath()[0] as Element).value);
   }
 
   private _renderTableHeader(): TemplateResult[] {
@@ -93,6 +114,35 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
     });
   }
 
+  private _renderPagination(): TemplateResult | typeof nothing {
+    return !this.hidePagination
+      ? html`<div class="table-controls">
+          <div class="item-per-page-wrapper">
+            <span>Items per page</span>
+            <pharos-select
+              class="item-per-page-selector"
+              value="${this._pageSize}"
+              @change=${this._onPageSizeChange}
+            >
+              <option value="2">2</option>
+              <option value="3">3</option>
+            </pharos-select>
+            <span
+              >(Displaying ${this._pageStartNumber()}-${this._pageEndNumber()} of
+              ${this.rowData.length})</span
+            >
+          </div>
+          <pharos-pagination
+            current-page="${this._currentPage}"
+            total-results="${this.totalResults}"
+            page-size="${this._pageSize}"
+            @prev-page="${this._onPrevPage}"
+            @next-page="${this._onNextPage}"
+          ></pharos-pagination>
+        </div>`
+      : nothing;
+  }
+
   private _pageStartNumber(): number {
     return (this._currentPage - 1) * this._pageSize + 1;
   }
@@ -103,10 +153,12 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
 
   private _onPrevPage(): void {
     this._currentPage = Math.max(this._currentPage - 1, 0);
+    this.dispatchEvent(new CustomEvent('pharos-table-prev-page'));
   }
 
   private _onNextPage(): void {
     this._currentPage = Math.min(this._currentPage + 1, this.rowData.length);
+    this.dispatchEvent(new CustomEvent('pharos-table-next-page'));
   }
 
   protected override render(): TemplateResult {
@@ -121,26 +173,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
           ${this._renderTableRows()}
         </tbody>
       </table>
-      <div class="table-controls">
-        <div class="item-per-page-wrapper">
-          <span>Items per page</span>
-          <pharos-select class="item-per-page-selector" @change=${this._onItemPerPageChange}>
-            <option value="50" selected>50</option>
-            <option value="100" selected>100</option>
-          </pharos-select>
-          <span
-            >(Displaying ${this._pageStartNumber()}-${this._pageEndNumber()} of
-            ${this.rowData.length})</span
-          >
-        </div>
-        <pharos-pagination
-          current-page="${this._currentPage}"
-          total-results="${this.rowData.length}"
-          page-size="${this._pageSize}"
-          @prev-page="${this._onPrevPage}"
-          @next-page="${this._onNextPage}"
-        ></pharos-pagination>
-      </div>
+      ${this._renderPagination()}
     `;
   }
 }
diff --git a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
index 7015e603a..ede9054d4 100644
--- a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
+++ b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
@@ -13,8 +13,15 @@ export default {
 };
 
 export const Base = {
-  render: ({ columns, rowData }) =>
-    html` <storybook-pharos-table .columns="${columns}" .rowData="${rowData}" /> `,
+  render: ({ columns, rowData, hidePagination }) =>
+    html`
+      <storybook-pharos-table
+        .columns="${columns}"
+        .rowData="${rowData}"
+        .hidePagination="${hidePagination}"
+        .totalResults="${5}"
+      />
+    `,
   args: {
     columns: [
       {
@@ -75,5 +82,6 @@ export const Base = {
         university: 'University of Michigan',
       },
     ],
+    hidePagination: true,
   },
 };

From ba2cba8a21779d4913edec6ae33b67dad34b37ac Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Thu, 29 Feb 2024 18:59:04 -0500
Subject: [PATCH 03/32] feat(table): implement page size dropdown

---
 .../src/components/table/pharos-table.ts      | 63 ++++++++++---------
 .../table/pharos-table.wc.stories.jsx         |  1 +
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index dfcfb41d1..4fa5ed45b 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -62,26 +62,27 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   public rowData: any[] = [];
 
   @property({ type: Boolean, reflect: true, attribute: 'hide-pagination' })
-  /* eslint-disable @typescript-eslint/no-explicit-any */
   public hidePagination: boolean = true;
 
   @property({ type: Number, reflect: true, attribute: 'total-number' })
-  /* eslint-disable @typescript-eslint/no-explicit-any */
   public totalResults: number = 0;
 
+  @property({ type: Array, reflect: true, attribute: 'page-size-options' })
+  public pageSizeOptions: number[] = [50, 100];
+
   @state()
-  private _pageSize = 2;
+  private _pageSize = 0;
 
   @state()
   private _currentPage = 1;
 
   protected override firstUpdated(): void {
-    this._pageSize = this.hidePagination ? this.rowData.length : 2;
+    this._pageSize = this.hidePagination ? this.rowData.length : this.pageSizeOptions[0];
     this.totalResults = this.hidePagination ? this.rowData.length : this.totalResults;
   }
 
   protected override updated(): void {
-    this._pageSize = this.hidePagination ? this.rowData.length : 2;
+    this._pageSize = this.hidePagination ? this.rowData.length : this._pageSize;
     this.totalResults = this.hidePagination ? this.rowData.length : this.totalResults;
   }
 
@@ -93,6 +94,24 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
     this._pageSize = Number((event.composedPath()[0] as Element).value);
   }
 
+  private _pageStartNumber(): number {
+    return (this._currentPage - 1) * this._pageSize + 1;
+  }
+
+  private _pageEndNumber(): number {
+    return Math.min(this.rowData.length, this._currentPage * this._pageSize);
+  }
+
+  private _onPrevPage(): void {
+    this._currentPage = Math.max(this._currentPage - 1, 0);
+    this.dispatchEvent(new CustomEvent('pharos-table-prev-page'));
+  }
+
+  private _onNextPage(): void {
+    this._currentPage = Math.min(this._currentPage + 1, this.rowData.length);
+    this.dispatchEvent(new CustomEvent('pharos-table-next-page'));
+  }
+
   private _renderTableHeader(): TemplateResult[] {
     /* eslint-disable @typescript-eslint/no-explicit-any */
     return this.columns.map((column: any) => html`<th>${column.name}</th>`);
@@ -114,18 +133,20 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
     });
   }
 
+  private _renderPageSizeOptions(): TemplateResult[] {
+    return this.pageSizeOptions.map(
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      (option: any) => html`<option value="${option}">${option}</option>`
+    );
+  }
+
   private _renderPagination(): TemplateResult | typeof nothing {
     return !this.hidePagination
       ? html`<div class="table-controls">
           <div class="item-per-page-wrapper">
             <span>Items per page</span>
-            <pharos-select
-              class="item-per-page-selector"
-              value="${this._pageSize}"
-              @change=${this._onPageSizeChange}
-            >
-              <option value="2">2</option>
-              <option value="3">3</option>
+            <pharos-select class="item-per-page-selector" @change=${this._onPageSizeChange}>
+              ${this._renderPageSizeOptions()}
             </pharos-select>
             <span
               >(Displaying ${this._pageStartNumber()}-${this._pageEndNumber()} of
@@ -143,24 +164,6 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
       : nothing;
   }
 
-  private _pageStartNumber(): number {
-    return (this._currentPage - 1) * this._pageSize + 1;
-  }
-
-  private _pageEndNumber(): number {
-    return Math.min(this.rowData.length, this._currentPage * this._pageSize);
-  }
-
-  private _onPrevPage(): void {
-    this._currentPage = Math.max(this._currentPage - 1, 0);
-    this.dispatchEvent(new CustomEvent('pharos-table-prev-page'));
-  }
-
-  private _onNextPage(): void {
-    this._currentPage = Math.min(this._currentPage + 1, this.rowData.length);
-    this.dispatchEvent(new CustomEvent('pharos-table-next-page'));
-  }
-
   protected override render(): TemplateResult {
     return html`
       <table class="table">
diff --git a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
index ede9054d4..9671bb986 100644
--- a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
+++ b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
@@ -20,6 +20,7 @@ export const Base = {
         .rowData="${rowData}"
         .hidePagination="${hidePagination}"
         .totalResults="${5}"
+        .pageSizeOptions="${[2, 4]}"
       />
     `,
   args: {

From b98a7d8a3552f1b7049b9c8a146f0a1e9099e6fc Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Fri, 1 Mar 2024 16:01:24 -0500
Subject: [PATCH 04/32] feat(table): add react storybook

---
 .../table/PharosTable.react.stories.jsx       | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 packages/pharos/src/components/table/PharosTable.react.stories.jsx

diff --git a/packages/pharos/src/components/table/PharosTable.react.stories.jsx b/packages/pharos/src/components/table/PharosTable.react.stories.jsx
new file mode 100644
index 000000000..8af5c63c0
--- /dev/null
+++ b/packages/pharos/src/components/table/PharosTable.react.stories.jsx
@@ -0,0 +1,93 @@
+import { PharosTable } from '../../react-components';
+import { configureDocsPage } from '@config/docsPageConfig';
+import { PharosContext } from '../../utils/PharosContext';
+
+export default {
+  title: 'Components/Table',
+  component: PharosTable,
+  decorators: [
+    (Story) => (
+      <PharosContext.Provider value={{ prefix: 'storybook' }}>
+        <Story />
+      </PharosContext.Provider>
+    ),
+  ],
+  parameters: {
+    docs: { page: configureDocsPage('table') },
+    options: { selectedPanel: 'addon-controls' },
+  },
+};
+
+export const Base = {
+  render: (args) => (
+    <PharosTable
+      columns={args.columns}
+      rowData={args.rowData}
+      hidePagination={args.hidePagination}
+      totalResults={5}
+      pageSizeOptions={[2, 4]}
+    ></PharosTable>
+  ),
+  args: {
+    columns: [
+      {
+        name: 'Item',
+        field: 'item',
+      },
+      {
+        name: 'Filename',
+        field: 'filename',
+      },
+      {
+        name: 'Expired Date',
+        field: 'expired_date',
+      },
+      {
+        name: 'Created On',
+        field: 'created_on',
+      },
+      {
+        name: 'University',
+        field: 'university',
+      },
+    ],
+    rowData: [
+      {
+        item: 1,
+        filename: '12345.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+      {
+        item: 2,
+        filename: '123456.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+      {
+        item: 3,
+        filename: '123456.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+      {
+        item: 4,
+        filename: '123456.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+      {
+        item: 5,
+        filename: '123456.jpg',
+        expired_date: '2020-1-1',
+        created_on: '2010-1-1',
+        university: 'University of Michigan',
+      },
+    ],
+    hidePagination: true,
+  },
+};

From 7376c7b7d0c64d005ec02e8e4f1c06baa702457e Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Fri, 1 Mar 2024 21:37:23 -0500
Subject: [PATCH 05/32] feat(table): add unit tests to table

---
 packages/pharos-site/initComponents.tsx       |   1 +
 .../src/components/table/pharos-table.test.ts | 135 ++++++++++++++----
 .../src/components/table/pharos-table.ts      |  21 ++-
 3 files changed, 121 insertions(+), 36 deletions(-)

diff --git a/packages/pharos-site/initComponents.tsx b/packages/pharos-site/initComponents.tsx
index 15fefdd22..db8c4dad5 100644
--- a/packages/pharos-site/initComponents.tsx
+++ b/packages/pharos-site/initComponents.tsx
@@ -39,6 +39,7 @@ if (typeof window !== `undefined`) {
     pharos.PharosSidenavSection,
     pharos.PharosTabs,
     pharos.PharosTab,
+    pharos.PharosTable,
     pharos.PharosTabPanel,
     pharos.PharosTextInput,
     pharos.PharosTextarea,
diff --git a/packages/pharos/src/components/table/pharos-table.test.ts b/packages/pharos/src/components/table/pharos-table.test.ts
index 31f1692f9..3e89f18f8 100644
--- a/packages/pharos/src/components/table/pharos-table.test.ts
+++ b/packages/pharos/src/components/table/pharos-table.test.ts
@@ -4,39 +4,54 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit/static-html.js';
 
 import type { PharosTable } from './pharos-table';
+import type { PharosLink } from '../link/pharos-link';
+import type { PharosPagination } from '../pagination/pharos-pagination';
+import type { PharosSelect } from '../select/pharos-select';
 
 describe('pharos-table', () => {
-  let component: PharosTable;
+  let component: PharosTable, componentWithPagination: PharosTable;
+  const columns = [
+    {
+      name: 'Item',
+      field: 'item',
+    },
+    {
+      name: 'Filename',
+      field: 'filename',
+    },
+  ];
+  const rowData = [
+    {
+      item: 1,
+      filename: '12345.jpg',
+      expired_date: '2020-1-1',
+      created_on: '2010-1-1',
+      university: 'University of Michigan',
+    },
+    {
+      item: 2,
+      filename: '123456.jpg',
+      expired_date: '2020-1-1',
+      created_on: '2010-1-1',
+      university: 'University of Michigan',
+    },
+  ];
 
   beforeEach(async () => {
-    const columns = [
-      {
-        name: 'Item',
-        field: 'item',
-      },
-      {
-        name: 'Filename',
-        field: 'filename',
-      },
-    ];
-    const rowData = [
-      {
-        item: 1,
-        filename: '12345.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-      {
-        item: 2,
-        filename: '123456.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-    ];
     component = await fixture(html`
-      <test-pharos-table .columns="${columns}" .rowData="${rowData}"> </test-pharos-table>
+      <test-pharos-table .columns="${columns}" .rowData="${rowData}" .totalResults="${2}">
+      </test-pharos-table>
+    `);
+
+    componentWithPagination = await fixture(html`
+      <test-pharos-table
+        .columns="${columns}"
+        .rowData="${rowData}"
+        .hidePagination="${false}"
+        .totalResults="${2}"
+        .pageSizeOptions="${[1, 2]}"
+      >
+      </test-pharos-table>
     `);
   });
 
@@ -44,9 +59,69 @@ describe('pharos-table', () => {
     await expect(component).to.be.accessible();
   });
 
-  it('has 2 rows', async () => {
-    const rows = Array.prototype.slice.call(component.querySelectorAll(`tr`)) as TemplateResult[];
+  it('is accessible with pagination', async () => {
+    await expect(componentWithPagination).to.be.accessible();
+  });
+
+  it('has 3 rows', async () => {
+    const rows = Array.prototype.slice.call(
+      component.renderRoot.querySelectorAll(`tr`)
+    ) as TemplateResult[];
+    expect(rows.length).to.be.eq(3);
+  });
 
+  it('render rows according to page size', async () => {
+    const rows = Array.prototype.slice.call(
+      componentWithPagination.renderRoot.querySelectorAll(`tr`)
+    ) as TemplateResult[];
     expect(rows.length).to.be.eq(2);
   });
+
+  it('update table after page size selection', async () => {
+    let rows = Array.prototype.slice.call(
+      componentWithPagination.renderRoot.querySelectorAll(`tr`)
+    ) as TemplateResult[];
+    expect(rows.length).to.be.eq(2);
+
+    const selectDropdown = componentWithPagination.renderRoot.querySelector(
+      `pharos-select`
+    ) as PharosSelect;
+    selectDropdown['_select'].value = '2';
+    selectDropdown['_select'].dispatchEvent(new Event('change'));
+
+    await componentWithPagination.updateComplete;
+
+    rows = Array.prototype.slice.call(
+      componentWithPagination.renderRoot.querySelectorAll(`tr`)
+    ) as TemplateResult[];
+    expect(rows.length).to.be.eq(3);
+  });
+
+  it('fires a custom event pwhen go to prev and next page', async () => {
+    let prevWasFired = false;
+    let nextWasFired = false;
+    const handlePrevPage = (): void => {
+      prevWasFired = true;
+    };
+    const handleNextPage = (): void => {
+      nextWasFired = true;
+    };
+    componentWithPagination.addEventListener('pharos-table-prev-page', handlePrevPage);
+    componentWithPagination.addEventListener('pharos-table-next-page', handleNextPage);
+
+    const pagination = componentWithPagination.renderRoot.querySelector(
+      `pharos-pagination`
+    ) as PharosPagination;
+    const nextPageLink = pagination.renderRoot.querySelector(`.next`) as PharosLink;
+    nextPageLink.click();
+    await componentWithPagination.updateComplete;
+
+    expect(nextWasFired).to.be.true;
+
+    const prevPageLink = pagination.renderRoot.querySelector(`.prev`) as PharosLink;
+    prevPageLink.click();
+    await componentWithPagination.updateComplete;
+
+    expect(prevWasFired).to.be.true;
+  });
 });
diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 4fa5ed45b..5476797d3 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -64,26 +64,28 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   @property({ type: Boolean, reflect: true, attribute: 'hide-pagination' })
   public hidePagination: boolean = true;
 
-  @property({ type: Number, reflect: true, attribute: 'total-number' })
+  @property({ type: Number, reflect: true, attribute: 'total-results' })
   public totalResults: number = 0;
 
   @property({ type: Array, reflect: true, attribute: 'page-size-options' })
   public pageSizeOptions: number[] = [50, 100];
 
   @state()
-  private _pageSize = 0;
+  private _pageSize = 50;
 
   @state()
   private _currentPage = 1;
 
   protected override firstUpdated(): void {
     this._pageSize = this.hidePagination ? this.rowData.length : this.pageSizeOptions[0];
-    this.totalResults = this.hidePagination ? this.rowData.length : this.totalResults;
+    this.totalResults =
+      this.hidePagination || !this.totalResults ? this.rowData.length : this.totalResults;
   }
 
   protected override updated(): void {
     this._pageSize = this.hidePagination ? this.rowData.length : this._pageSize;
-    this.totalResults = this.hidePagination ? this.rowData.length : this.totalResults;
+    this.totalResults =
+      this.hidePagination || !this.totalResults ? this.rowData.length : this.totalResults;
   }
 
   public static override get styles(): CSSResultArray {
@@ -91,7 +93,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   }
 
   private _onPageSizeChange(event: Event): void {
-    this._pageSize = Number((event.composedPath()[0] as Element).value);
+    this._pageSize = Number((event.composedPath()[0] as HTMLInputElement).value);
   }
 
   private _pageStartNumber(): number {
@@ -145,7 +147,14 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
       ? html`<div class="table-controls">
           <div class="item-per-page-wrapper">
             <span>Items per page</span>
-            <pharos-select class="item-per-page-selector" @change=${this._onPageSizeChange}>
+            <pharos-select
+              required
+              hideLabel
+              name="pharos-table-page-size-select"
+              class="item-per-page-selector"
+              @change=${this._onPageSizeChange}
+            >
+              <span slot="label">page size</span>
               ${this._renderPageSizeOptions()}
             </pharos-select>
             <span

From 0bd93270632d98bb862b4f6cea9074ace8044125 Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Fri, 1 Mar 2024 21:43:33 -0500
Subject: [PATCH 06/32] docs(table): add changeset

---
 .changeset/orange-fireants-impress.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/orange-fireants-impress.md

diff --git a/.changeset/orange-fireants-impress.md b/.changeset/orange-fireants-impress.md
new file mode 100644
index 000000000..e4ec07246
--- /dev/null
+++ b/.changeset/orange-fireants-impress.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': minor
+---
+
+Create table component

From fbed790d0100c967515927d1d040e4ddf495d87d Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Fri, 1 Mar 2024 22:01:26 -0500
Subject: [PATCH 07/32] feat(table): update storybook

---
 .../table/PharosTable.react.stories.jsx       | 73 +++--------------
 .../src/components/table/pharos-table.ts      |  3 +-
 .../table/pharos-table.wc.stories.jsx         | 81 ++++---------------
 .../pharos/src/components/table/storyArgs.ts  | 61 ++++++++++++++
 4 files changed, 88 insertions(+), 130 deletions(-)
 create mode 100644 packages/pharos/src/components/table/storyArgs.ts

diff --git a/packages/pharos/src/components/table/PharosTable.react.stories.jsx b/packages/pharos/src/components/table/PharosTable.react.stories.jsx
index 8af5c63c0..ce4e225b1 100644
--- a/packages/pharos/src/components/table/PharosTable.react.stories.jsx
+++ b/packages/pharos/src/components/table/PharosTable.react.stories.jsx
@@ -1,6 +1,7 @@
 import { PharosTable } from '../../react-components';
 import { configureDocsPage } from '@config/docsPageConfig';
 import { PharosContext } from '../../utils/PharosContext';
+import { defaultArgs } from './storyArgs';
 
 export default {
   title: 'Components/Table',
@@ -19,75 +20,21 @@ export default {
 };
 
 export const Base = {
+  render: (args) => (
+    <PharosTable columns={args.columns} rowData={args.rowData} hidePagination={true}></PharosTable>
+  ),
+  args: defaultArgs,
+};
+
+export const WithPagination = {
   render: (args) => (
     <PharosTable
       columns={args.columns}
       rowData={args.rowData}
-      hidePagination={args.hidePagination}
+      hidePagination={false}
       totalResults={5}
       pageSizeOptions={[2, 4]}
     ></PharosTable>
   ),
-  args: {
-    columns: [
-      {
-        name: 'Item',
-        field: 'item',
-      },
-      {
-        name: 'Filename',
-        field: 'filename',
-      },
-      {
-        name: 'Expired Date',
-        field: 'expired_date',
-      },
-      {
-        name: 'Created On',
-        field: 'created_on',
-      },
-      {
-        name: 'University',
-        field: 'university',
-      },
-    ],
-    rowData: [
-      {
-        item: 1,
-        filename: '12345.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-      {
-        item: 2,
-        filename: '123456.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-      {
-        item: 3,
-        filename: '123456.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-      {
-        item: 4,
-        filename: '123456.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-      {
-        item: 5,
-        filename: '123456.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-    ],
-    hidePagination: true,
-  },
+  args: defaultArgs,
 };
diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 5476797d3..d4601e5f6 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -148,8 +148,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
           <div class="item-per-page-wrapper">
             <span>Items per page</span>
             <pharos-select
-              required
-              hideLabel
+              hide-label
               name="pharos-table-page-size-select"
               class="item-per-page-selector"
               @change=${this._onPageSizeChange}
diff --git a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
index 9671bb986..df40acce7 100644
--- a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
+++ b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
@@ -1,5 +1,5 @@
-// import { action } from '@storybook/addon-actions';
 import { html } from 'lit';
+import { defaultArgs } from './storyArgs';
 
 import { configureDocsPage } from '@config/docsPageConfig';
 
@@ -13,76 +13,27 @@ export default {
 };
 
 export const Base = {
-  render: ({ columns, rowData, hidePagination }) =>
+  render: ({ columns, rowData }) =>
     html`
       <storybook-pharos-table
         .columns="${columns}"
         .rowData="${rowData}"
-        .hidePagination="${hidePagination}"
+        .hidePagination="${true}"
+      />
+    `,
+  args: defaultArgs,
+};
+
+export const WithPagination = {
+  render: ({ columns, rowData }) =>
+    html`
+      <storybook-pharos-table
+        .columns="${columns}"
+        .rowData="${rowData}"
+        .hidePagination="${false}"
         .totalResults="${5}"
         .pageSizeOptions="${[2, 4]}"
       />
     `,
-  args: {
-    columns: [
-      {
-        name: 'Item',
-        field: 'item',
-      },
-      {
-        name: 'Filename',
-        field: 'filename',
-      },
-      {
-        name: 'Expired Date',
-        field: 'expired_date',
-      },
-      {
-        name: 'Created On',
-        field: 'created_on',
-      },
-      {
-        name: 'University',
-        field: 'university',
-      },
-    ],
-    rowData: [
-      {
-        item: 1,
-        filename: '12345.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-      {
-        item: 2,
-        filename: '123456.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-      {
-        item: 3,
-        filename: '123456.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-      {
-        item: 4,
-        filename: '123456.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-      {
-        item: 5,
-        filename: '123456.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-    ],
-    hidePagination: true,
-  },
+  args: defaultArgs,
 };
diff --git a/packages/pharos/src/components/table/storyArgs.ts b/packages/pharos/src/components/table/storyArgs.ts
new file mode 100644
index 000000000..ba4217c8f
--- /dev/null
+++ b/packages/pharos/src/components/table/storyArgs.ts
@@ -0,0 +1,61 @@
+export const defaultArgs = {
+  columns: [
+    {
+      name: 'Item',
+      field: 'item',
+    },
+    {
+      name: 'Filename',
+      field: 'filename',
+    },
+    {
+      name: 'Expired Date',
+      field: 'expired_date',
+    },
+    {
+      name: 'Created On',
+      field: 'created_on',
+    },
+    {
+      name: 'University',
+      field: 'university',
+    },
+  ],
+  rowData: [
+    {
+      item: 1,
+      filename: '12345.jpg',
+      expired_date: '2020-1-1',
+      created_on: '2010-1-1',
+      university: 'University of Michigan',
+    },
+    {
+      item: 2,
+      filename: '123456.jpg',
+      expired_date: '2020-1-1',
+      created_on: '2010-1-1',
+      university: 'University of Michigan',
+    },
+    {
+      item: 3,
+      filename: '123456.jpg',
+      expired_date: '2020-1-1',
+      created_on: '2010-1-1',
+      university: 'University of Michigan',
+    },
+    {
+      item: 4,
+      filename: '123456.jpg',
+      expired_date: '2020-1-1',
+      created_on: '2010-1-1',
+      university: 'University of Michigan',
+    },
+    {
+      item: 5,
+      filename: '123456.jpg',
+      expired_date: '2020-1-1',
+      created_on: '2010-1-1',
+      university: 'University of Michigan',
+    },
+  ],
+};

From d182e5a3e058d26bba9a214504c54354829d0b11 Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Fri, 1 Mar 2024 22:50:59 -0500
Subject: [PATCH 08/32] feat(table): improve storybook reactivity

---
 .../table/PharosTable.react.stories.jsx        | 18 ++++++++++++++----
 .../table/pharos-table.wc.stories.jsx          | 18 ++++++++++++------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/pharos/src/components/table/PharosTable.react.stories.jsx b/packages/pharos/src/components/table/PharosTable.react.stories.jsx
index ce4e225b1..8de60f50a 100644
--- a/packages/pharos/src/components/table/PharosTable.react.stories.jsx
+++ b/packages/pharos/src/components/table/PharosTable.react.stories.jsx
@@ -21,9 +21,16 @@ export default {
 
 export const Base = {
   render: (args) => (
-    <PharosTable columns={args.columns} rowData={args.rowData} hidePagination={true}></PharosTable>
+    <PharosTable
+      columns={args.columns}
+      rowData={args.rowData}
+      hidePagination={args.hidePagination}
+    ></PharosTable>
   ),
-  args: defaultArgs,
+  args: {
+    ...defaultArgs,
+    hidePagination: true,
+  },
 };
 
 export const WithPagination = {
@@ -31,10 +38,13 @@ export const WithPagination = {
     <PharosTable
       columns={args.columns}
       rowData={args.rowData}
-      hidePagination={false}
+      hidePagination={args.hidePagination}
       totalResults={5}
       pageSizeOptions={[2, 4]}
     ></PharosTable>
   ),
-  args: defaultArgs,
+  args: {
+    ...defaultArgs,
+    hidePagination: false,
+  },
 };
diff --git a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
index df40acce7..9a0cdcf40 100644
--- a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
+++ b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
@@ -13,27 +13,33 @@ export default {
 };
 
 export const Base = {
-  render: ({ columns, rowData }) =>
+  render: ({ columns, rowData, hidePagination }) =>
     html`
       <storybook-pharos-table
         .columns="${columns}"
         .rowData="${rowData}"
-        .hidePagination="${true}"
+        .hidePagination="${hidePagination}"
       />
     `,
-  args: defaultArgs,
+  args: {
+    ...defaultArgs,
+    hidePagination: true,
+  },
 };
 
 export const WithPagination = {
-  render: ({ columns, rowData }) =>
+  render: ({ columns, rowData, hidePagination }) =>
     html`
       <storybook-pharos-table
         .columns="${columns}"
         .rowData="${rowData}"
-        .hidePagination="${false}"
+        .hidePagination="${hidePagination}"
         .totalResults="${5}"
         .pageSizeOptions="${[2, 4]}"
       />
     `,
-  args: defaultArgs,
+  args: {
+    ...defaultArgs,
+    hidePagination: false,
+  },
 };

From b2612d07837697d4514494a2e9e19d90d54b6d64 Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Mon, 4 Mar 2024 12:04:48 -0500
Subject: [PATCH 09/32] feat(table): add accessibility update

---
 .../components/table/PharosTable.react.stories.jsx |  2 ++
 .../pharos/src/components/table/pharos-table.ts    | 14 ++++++++++++--
 .../components/table/pharos-table.wc.stories.jsx   |  2 ++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/pharos/src/components/table/PharosTable.react.stories.jsx b/packages/pharos/src/components/table/PharosTable.react.stories.jsx
index 8de60f50a..ef27c016a 100644
--- a/packages/pharos/src/components/table/PharosTable.react.stories.jsx
+++ b/packages/pharos/src/components/table/PharosTable.react.stories.jsx
@@ -25,6 +25,7 @@ export const Base = {
       columns={args.columns}
       rowData={args.rowData}
       hidePagination={args.hidePagination}
+      caption={'An example table'}
     ></PharosTable>
   ),
   args: {
@@ -41,6 +42,7 @@ export const WithPagination = {
       hidePagination={args.hidePagination}
       totalResults={5}
       pageSizeOptions={[2, 4]}
+      caption={'An example table'}
     ></PharosTable>
   ),
   args: {
diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index d4601e5f6..d1d5e8878 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -70,6 +70,9 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   @property({ type: Array, reflect: true, attribute: 'page-size-options' })
   public pageSizeOptions: number[] = [50, 100];
 
+  @property({ type: String, reflect: true, attribute: 'caption' })
+  public caption: string = '';
+
   @state()
   private _pageSize = 50;
 
@@ -114,9 +117,13 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
     this.dispatchEvent(new CustomEvent('pharos-table-next-page'));
   }
 
-  private _renderTableHeader(): TemplateResult[] {
+  private _renderTableHeader(): TemplateResult[] | void[] {
     /* eslint-disable @typescript-eslint/no-explicit-any */
-    return this.columns.map((column: any) => html`<th>${column.name}</th>`);
+    return this.columns.map((column: any) => {
+      if (column.name) {
+        html`<th scope="col">${column.name}</th>`;
+      }
+    });
   }
 
   private _renderTableRows(): TemplateResult[] {
@@ -175,6 +182,9 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   protected override render(): TemplateResult {
     return html`
       <table class="table">
+        <caption>
+          ${this.caption}
+        </caption>
         <thead>
           <tr>
             ${this._renderTableHeader()}
diff --git a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
index 9a0cdcf40..0f575388d 100644
--- a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
+++ b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
@@ -19,6 +19,7 @@ export const Base = {
         .columns="${columns}"
         .rowData="${rowData}"
         .hidePagination="${hidePagination}"
+        caption="An example table"
       />
     `,
   args: {
@@ -36,6 +37,7 @@ export const WithPagination = {
         .hidePagination="${hidePagination}"
         .totalResults="${5}"
         .pageSizeOptions="${[2, 4]}"
+        caption="An example table"
       />
     `,
   args: {

From f3861a1c94238a976bfd45cfc631708fa67c678f Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Mon, 4 Mar 2024 12:12:31 -0500
Subject: [PATCH 10/32] feat(table): use pharos color

---
 packages/pharos/src/components/table/pharos-table.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss
index 8611dee94..c6168caf9 100644
--- a/packages/pharos/src/components/table/pharos-table.scss
+++ b/packages/pharos/src/components/table/pharos-table.scss
@@ -7,12 +7,12 @@
   border-collapse: collapse;
 
   th {
-    border: 1px solid #eae8e1;
+    border: 1px solid var(--pharos-color-marble-gray-base);
     padding: var(--pharos-spacing-1-x);
   }
 
   td {
-    border: 1px solid #eae8e1;
+    border: 1px solid var(--pharos-color-marble-gray-base);
     padding: var(--pharos-spacing-1-x);
   }
 }

From 1a9937670d92fb5a51e980b1dd772d42ddbedbbc Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Tue, 5 Mar 2024 10:00:26 -0500
Subject: [PATCH 11/32] feat(table): fix bug

---
 packages/pharos/src/components/table/pharos-table.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index d1d5e8878..d323c599d 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -117,11 +117,11 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
     this.dispatchEvent(new CustomEvent('pharos-table-next-page'));
   }
 
-  private _renderTableHeader(): TemplateResult[] | void[] {
+  private _renderTableHeader(): (TemplateResult | undefined)[] {
     /* eslint-disable @typescript-eslint/no-explicit-any */
     return this.columns.map((column: any) => {
       if (column.name) {
-        html`<th scope="col">${column.name}</th>`;
+        return html`<th scope="col">${column.name}</th>`;
       }
     });
   }

From 31f2164686a48f8e784278eaf8c2bfb9ef4c4fa6 Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Tue, 5 Mar 2024 10:07:55 -0500
Subject: [PATCH 12/32] feat(table): fix build issue

---
 packages/pharos/src/components/table/pharos-table.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index d323c599d..2e13e0f7f 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -122,6 +122,8 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
     return this.columns.map((column: any) => {
       if (column.name) {
         return html`<th scope="col">${column.name}</th>`;
+      } else {
+        return html`<tb></tb>`;
       }
     });
   }

From 878db09005ceb56db4481b8a8e8050783f11e55b Mon Sep 17 00:00:00 2001
From: Jialin He <38861633+jialin-he@users.noreply.github.com>
Date: Tue, 5 Mar 2024 13:10:12 -0500
Subject: [PATCH 13/32] Update
 packages/pharos/src/components/table/pharos-table.ts

Co-authored-by: Dane Hillard <github@danehillard.com>
---
 packages/pharos/src/components/table/pharos-table.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 2e13e0f7f..73598f94d 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -24,7 +24,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   };
 
   /**
-   * Coloumn definition.
+   * Column specification.
    * @attr columns
    * sample column:
    * [

From 1bcc0719824169ac6b6b98ebfb5f590ac71734c5 Mon Sep 17 00:00:00 2001
From: Jialin He <38861633+jialin-he@users.noreply.github.com>
Date: Tue, 5 Mar 2024 13:11:37 -0500
Subject: [PATCH 14/32] Update
 packages/pharos/src/components/table/pharos-table.ts

Co-authored-by: Dane Hillard <github@danehillard.com>
---
 packages/pharos/src/components/table/pharos-table.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 73598f94d..2ac6c8b72 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -45,15 +45,15 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   /**
    * Row data.
    * @attr row-data
-   * sample row:
+   * Example:
    * [
    *  {
    *    id: 1,
-   *    message: first one
+   *    message: "first one"
    *  },
    *  {
    *    id: 2,
-   *    message: second one
+   *    message: "second one"
    *  }
    * ]
    */

From a05a7e200c8971d77d9ec2692a18db1b6c1c9902 Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Wed, 6 Mar 2024 15:17:46 -0500
Subject: [PATCH 15/32] feat(table): fix pagination height and remove any type

---
 .../src/components/table/pharos-table.scss    |  4 +++
 .../src/components/table/pharos-table.ts      | 34 +++++++++++--------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss
index c6168caf9..e42831e5f 100644
--- a/packages/pharos/src/components/table/pharos-table.scss
+++ b/packages/pharos/src/components/table/pharos-table.scss
@@ -32,4 +32,8 @@
       width: 75px;
     }
   }
+
+  .pagination {
+    height: var(--pharos-spacing-one-and-a-half-x);
+  }
 }
diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 2ac6c8b72..d1d362c43 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -8,6 +8,15 @@ import { tableStyles } from './pharos-table.css';
 import { PharosSelect } from '../select/pharos-select';
 import { PharosPagination } from '../pagination/pharos-pagination';
 
+type ColumnSpecification = {
+  name: string;
+  field: string;
+};
+
+type RowData = {
+  [key: string]: string;
+};
+
 /**
  * Pharos table component.
  *
@@ -29,18 +38,17 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
    * sample column:
    * [
    *  {
-   *    name: ID
-   *    field: id
+   *    name: "ID"
+   *    field: "id"
    *  },
    *  {
-   *    name: Message
-   *    field: message
+   *    name: "Message"
+   *    field: "message"
    *  }
    * ]
    */
   @property({ type: Array, reflect: true, attribute: 'columns' })
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  public columns: any[] = [];
+  public columns: ColumnSpecification[] = [];
 
   /**
    * Row data.
@@ -58,8 +66,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
    * ]
    */
   @property({ type: Array, reflect: true, attribute: 'row-data' })
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  public rowData: any[] = [];
+  public rowData: RowData[] = [];
 
   @property({ type: Boolean, reflect: true, attribute: 'hide-pagination' })
   public hidePagination: boolean = true;
@@ -118,8 +125,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   }
 
   private _renderTableHeader(): (TemplateResult | undefined)[] {
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-    return this.columns.map((column: any) => {
+    return this.columns.map((column: ColumnSpecification) => {
       if (column.name) {
         return html`<th scope="col">${column.name}</th>`;
       } else {
@@ -133,9 +139,9 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
       this._pageStartNumber() - 1,
       this._pageEndNumber()
     );
-    return currentDisplayingData.map((row: any) => {
+    return currentDisplayingData.map((row: RowData) => {
       const arr: TemplateResult[] = [];
-      this.columns.forEach((column: any) => {
+      this.columns.forEach((column: ColumnSpecification) => {
         arr.push(html`<td>${row[column.field]}</td>`);
       });
       return html`<tr>
@@ -146,8 +152,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
 
   private _renderPageSizeOptions(): TemplateResult[] {
     return this.pageSizeOptions.map(
-      /* eslint-disable @typescript-eslint/no-explicit-any */
-      (option: any) => html`<option value="${option}">${option}</option>`
+      (option: number) => html`<option value="${option}">${option}</option>`
     );
   }
 
@@ -171,6 +176,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
             >
           </div>
           <pharos-pagination
+            class="pagination"
             current-page="${this._currentPage}"
             total-results="${this.totalResults}"
             page-size="${this._pageSize}"

From 9dc90ce83b337ae355b62246496c0f5dd5e8b11c Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Wed, 6 Mar 2024 16:17:38 -0500
Subject: [PATCH 16/32] feat(table): add unit test for start and end page
 number

---
 .../src/components/table/pharos-table.test.ts  | 18 ++++++++++++++++++
 .../src/components/table/pharos-table.ts       |  6 +++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/pharos/src/components/table/pharos-table.test.ts b/packages/pharos/src/components/table/pharos-table.test.ts
index 3e89f18f8..57531611b 100644
--- a/packages/pharos/src/components/table/pharos-table.test.ts
+++ b/packages/pharos/src/components/table/pharos-table.test.ts
@@ -77,6 +77,24 @@ describe('pharos-table', () => {
     expect(rows.length).to.be.eq(2);
   });
 
+  it('shows correct page start number according to page size', async () => {
+    let pageNumber = componentWithPagination.renderRoot.querySelector(`.page-number-display`);
+    expect(pageNumber?.innerHTML).contains('1-');
+    expect(pageNumber?.innerHTML).contains('1 of');
+
+    const selectDropdown = componentWithPagination.renderRoot.querySelector(
+      `pharos-select`
+    ) as PharosSelect;
+    selectDropdown['_select'].value = '2';
+    selectDropdown['_select'].dispatchEvent(new Event('change'));
+
+    await componentWithPagination.updateComplete;
+
+    pageNumber = componentWithPagination.renderRoot.querySelector(`.page-number-display`);
+    expect(pageNumber?.innerHTML).contains('1-');
+    expect(pageNumber?.innerHTML).contains('2 of');
+  });
+
   it('update table after page size selection', async () => {
     let rows = Array.prototype.slice.call(
       componentWithPagination.renderRoot.querySelectorAll(`tr`)
diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index d1d362c43..6870a63c0 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -8,12 +8,12 @@ import { tableStyles } from './pharos-table.css';
 import { PharosSelect } from '../select/pharos-select';
 import { PharosPagination } from '../pagination/pharos-pagination';
 
-type ColumnSpecification = {
+export type ColumnSpecification = {
   name: string;
   field: string;
 };
 
-type RowData = {
+export type RowData = {
   [key: string]: string;
 };
 
@@ -170,7 +170,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
               <span slot="label">page size</span>
               ${this._renderPageSizeOptions()}
             </pharos-select>
-            <span
+            <span class="page-number-display"
               >(Displaying ${this._pageStartNumber()}-${this._pageEndNumber()} of
               ${this.rowData.length})</span
             >

From c124c8d51ebf9851f5f970349f66e347accded93 Mon Sep 17 00:00:00 2001
From: Jialin He <38861633+jialin-he@users.noreply.github.com>
Date: Thu, 7 Mar 2024 09:55:11 -0500
Subject: [PATCH 17/32] Update
 packages/pharos/src/components/table/pharos-table.test.ts

Co-authored-by: Dane Hillard <github@danehillard.com>
---
 packages/pharos/src/components/table/pharos-table.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.test.ts b/packages/pharos/src/components/table/pharos-table.test.ts
index 57531611b..8f58c29df 100644
--- a/packages/pharos/src/components/table/pharos-table.test.ts
+++ b/packages/pharos/src/components/table/pharos-table.test.ts
@@ -63,7 +63,7 @@ describe('pharos-table', () => {
     await expect(componentWithPagination).to.be.accessible();
   });
 
-  it('has 3 rows', async () => {
+  it('has the correct number of rows', async () => {
     const rows = Array.prototype.slice.call(
       component.renderRoot.querySelectorAll(`tr`)
     ) as TemplateResult[];

From a54bfbac4267bbcd1765ec86114abbdeebdccbd4 Mon Sep 17 00:00:00 2001
From: Jialin He <38861633+jialin-he@users.noreply.github.com>
Date: Thu, 7 Mar 2024 09:55:18 -0500
Subject: [PATCH 18/32] Update
 packages/pharos/src/components/table/pharos-table.test.ts

Co-authored-by: Dane Hillard <github@danehillard.com>
---
 packages/pharos/src/components/table/pharos-table.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.test.ts b/packages/pharos/src/components/table/pharos-table.test.ts
index 8f58c29df..881d23a8d 100644
--- a/packages/pharos/src/components/table/pharos-table.test.ts
+++ b/packages/pharos/src/components/table/pharos-table.test.ts
@@ -70,7 +70,7 @@ describe('pharos-table', () => {
     expect(rows.length).to.be.eq(3);
   });
 
-  it('render rows according to page size', async () => {
+  it('renders rows according to page size', async () => {
     const rows = Array.prototype.slice.call(
       componentWithPagination.renderRoot.querySelectorAll(`tr`)
     ) as TemplateResult[];

From 0a1f1fe92f0f61c49166aad8b8a4602c7d64f1f2 Mon Sep 17 00:00:00 2001
From: Jialin He <38861633+jialin-he@users.noreply.github.com>
Date: Thu, 7 Mar 2024 09:55:27 -0500
Subject: [PATCH 19/32] Update
 packages/pharos/src/components/table/pharos-table.test.ts

Co-authored-by: Dane Hillard <github@danehillard.com>
---
 packages/pharos/src/components/table/pharos-table.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.test.ts b/packages/pharos/src/components/table/pharos-table.test.ts
index 881d23a8d..9bde1c811 100644
--- a/packages/pharos/src/components/table/pharos-table.test.ts
+++ b/packages/pharos/src/components/table/pharos-table.test.ts
@@ -95,7 +95,7 @@ describe('pharos-table', () => {
     expect(pageNumber?.innerHTML).contains('2 of');
   });
 
-  it('update table after page size selection', async () => {
+  it('updates correctly after page size selection', async () => {
     let rows = Array.prototype.slice.call(
       componentWithPagination.renderRoot.querySelectorAll(`tr`)
     ) as TemplateResult[];

From 01f43433d4b403d1eedab4a50f2b7a86066b8a0f Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Thu, 7 Mar 2024 11:38:00 -0500
Subject: [PATCH 20/32] feat(table): update row data type

---
 packages/pharos/src/components/table/pharos-table.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 6870a63c0..ac8f7e0ad 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -14,7 +14,7 @@ export type ColumnSpecification = {
 };
 
 export type RowData = {
-  [key: string]: string;
+  [key: string]: unknown;
 };
 
 /**

From 9bef87b64fcde5fd4c5f5223b7dd8e419ca96486 Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Tue, 12 Mar 2024 13:36:41 -0400
Subject: [PATCH 21/32] feat(table): update unit test

---
 .../pharos/src/components/table/pharos-table.test.ts     | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/pharos/src/components/table/pharos-table.test.ts b/packages/pharos/src/components/table/pharos-table.test.ts
index 9bde1c811..60e4c8a5c 100644
--- a/packages/pharos/src/components/table/pharos-table.test.ts
+++ b/packages/pharos/src/components/table/pharos-table.test.ts
@@ -78,9 +78,9 @@ describe('pharos-table', () => {
   });
 
   it('shows correct page start number according to page size', async () => {
-    let pageNumber = componentWithPagination.renderRoot.querySelector(`.page-number-display`);
-    expect(pageNumber?.innerHTML).contains('1-');
-    expect(pageNumber?.innerHTML).contains('1 of');
+    let pageNumber: HTMLElement | null =
+      componentWithPagination.renderRoot.querySelector(`.page-number-display`);
+    expect(pageNumber?.innerText).contains('Displaying 1-1 of 2');
 
     const selectDropdown = componentWithPagination.renderRoot.querySelector(
       `pharos-select`
@@ -91,8 +91,7 @@ describe('pharos-table', () => {
     await componentWithPagination.updateComplete;
 
     pageNumber = componentWithPagination.renderRoot.querySelector(`.page-number-display`);
-    expect(pageNumber?.innerHTML).contains('1-');
-    expect(pageNumber?.innerHTML).contains('2 of');
+    expect(pageNumber?.innerText).contains('Displaying 1-2 of 2');
   });
 
   it('updates correctly after page size selection', async () => {

From 10aa6bbb0e44eef7271a3c9ecb65adef0561a609 Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Tue, 12 Mar 2024 14:30:05 -0400
Subject: [PATCH 22/32] feat(table): add hide caption visually attribute

---
 .../pharos/src/components/table/pharos-table.scss |  6 ++++++
 .../pharos/src/components/table/pharos-table.ts   | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss
index e42831e5f..28ba5b9a7 100644
--- a/packages/pharos/src/components/table/pharos-table.scss
+++ b/packages/pharos/src/components/table/pharos-table.scss
@@ -37,3 +37,9 @@
     height: var(--pharos-spacing-one-and-a-half-x);
   }
 }
+
+.hide-table-caption {
+  visibility: hidden;
+  pointer-events: none;
+  position: absolute;
+}
diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index ac8f7e0ad..15c93904f 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -1,6 +1,7 @@
 import { PharosElement } from '../base/pharos-element';
 import ScopedRegistryMixin from '../../utils/mixins/scoped-registry';
 import { html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { state } from 'lit/decorators.js';
 import type { TemplateResult, CSSResultArray } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -80,6 +81,9 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   @property({ type: String, reflect: true, attribute: 'caption' })
   public caption: string = '';
 
+  @property({ type: String, reflect: true, attribute: 'hide-caption-visually' })
+  public hideCaptionVisually: boolean = true;
+
   @state()
   private _pageSize = 50;
 
@@ -93,6 +97,11 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   }
 
   protected override updated(): void {
+    if (!this.caption) {
+      throw new Error(
+        `Table must have an accessible name. Please provide a caption for the table using the caption attribute. You can hide it visually by setting hide-caption-visually to be true.`
+      );
+    }
     this._pageSize = this.hidePagination ? this.rowData.length : this._pageSize;
     this.totalResults =
       this.hidePagination || !this.totalResults ? this.rowData.length : this.totalResults;
@@ -190,7 +199,11 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   protected override render(): TemplateResult {
     return html`
       <table class="table">
-        <caption>
+        <caption
+          class="${classMap({
+            [`hide-table-caption`]: this.hideCaptionVisually,
+          })}"
+        >
           ${this.caption}
         </caption>
         <thead>

From 7d8920f192a3dd3e366cf63e14836eec2c50d1ff Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Tue, 12 Mar 2024 16:01:06 -0400
Subject: [PATCH 23/32] feat(table): update visually hidden css

---
 packages/pharos/src/components/table/pharos-table.scss | 10 +++++++---
 packages/pharos/src/components/table/pharos-table.ts   |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss
index 28ba5b9a7..0ecca7b41 100644
--- a/packages/pharos/src/components/table/pharos-table.scss
+++ b/packages/pharos/src/components/table/pharos-table.scss
@@ -38,8 +38,12 @@
   }
 }
 
-.hide-table-caption {
-  visibility: hidden;
-  pointer-events: none;
+.visually-hidden:not(:focus, :active) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
   position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 15c93904f..1ddcfaf35 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -82,7 +82,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   public caption: string = '';
 
   @property({ type: String, reflect: true, attribute: 'hide-caption-visually' })
-  public hideCaptionVisually: boolean = true;
+  public hideCaptionVisually: boolean = false;
 
   @state()
   private _pageSize = 50;
@@ -201,7 +201,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
       <table class="table">
         <caption
           class="${classMap({
-            [`hide-table-caption`]: this.hideCaptionVisually,
+            [`visually-hidden`]: this.hideCaptionVisually,
           })}"
         >
           ${this.caption}

From 0671f2de36e22747bf6fddd3c41c071661e87abf Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Tue, 12 Mar 2024 16:16:04 -0400
Subject: [PATCH 24/32] feat(table): use hidden mixin

---
 packages/pharos/src/components/table/pharos-table.scss | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss
index 0ecca7b41..9345d39b4 100644
--- a/packages/pharos/src/components/table/pharos-table.scss
+++ b/packages/pharos/src/components/table/pharos-table.scss
@@ -39,11 +39,5 @@
 }
 
 .visually-hidden:not(:focus, :active) {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
+  @include mixins.hidden;
 }

From 10a15ef429e8f8c97971924cd0e333a4c9c3cf9f Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Tue, 12 Mar 2024 16:43:17 -0400
Subject: [PATCH 25/32] feat(table): fix lint and bug

---
 .../src/components/table/pharos-table.scss    |  2 +
 .../table/pharos-table.wc.stories.jsx         | 38 +++++++++----------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss
index 9345d39b4..bd70c2bb1 100644
--- a/packages/pharos/src/components/table/pharos-table.scss
+++ b/packages/pharos/src/components/table/pharos-table.scss
@@ -1,3 +1,5 @@
+@use '../../utils/scss/mixins';
+
 :host {
   display: inline-flex;
   flex-direction: column;
diff --git a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
index 0f575388d..95c298107 100644
--- a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
+++ b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
@@ -13,15 +13,14 @@ export default {
 };
 
 export const Base = {
-  render: ({ columns, rowData, hidePagination }) =>
-    html`
-      <storybook-pharos-table
-        .columns="${columns}"
-        .rowData="${rowData}"
-        .hidePagination="${hidePagination}"
-        caption="An example table"
-      />
-    `,
+  render: ({ columns, rowData, hidePagination }) => html`
+    <storybook-pharos-table
+      .columns="${columns}"
+      .rowData="${rowData}"
+      .hidePagination="${hidePagination}"
+      caption="An example table"
+    />
+  `,
   args: {
     ...defaultArgs,
     hidePagination: true,
@@ -29,17 +28,16 @@ export const Base = {
 };
 
 export const WithPagination = {
-  render: ({ columns, rowData, hidePagination }) =>
-    html`
-      <storybook-pharos-table
-        .columns="${columns}"
-        .rowData="${rowData}"
-        .hidePagination="${hidePagination}"
-        .totalResults="${5}"
-        .pageSizeOptions="${[2, 4]}"
-        caption="An example table"
-      />
-    `,
+  render: ({ columns, rowData, hidePagination }) => html`
+    <storybook-pharos-table
+      .columns="${columns}"
+      .rowData="${rowData}"
+      .hidePagination="${hidePagination}"
+      .totalResults="${5}"
+      .pageSizeOptions="${[2, 4]}"
+      caption="An example table"
+    />
+  `,
   args: {
     ...defaultArgs,
     hidePagination: false,

From 1f1b2ac27de5c178d36f1b2187e9cc9826d06597 Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Tue, 12 Mar 2024 17:48:29 -0400
Subject: [PATCH 26/32] feat(table): fix unit tests

---
 packages/pharos/src/components/table/pharos-table.test.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.test.ts b/packages/pharos/src/components/table/pharos-table.test.ts
index 60e4c8a5c..e5370d465 100644
--- a/packages/pharos/src/components/table/pharos-table.test.ts
+++ b/packages/pharos/src/components/table/pharos-table.test.ts
@@ -39,7 +39,12 @@ describe('pharos-table', () => {
 
   beforeEach(async () => {
     component = await fixture(html`
-      <test-pharos-table .columns="${columns}" .rowData="${rowData}" .totalResults="${2}">
+      <test-pharos-table
+        .columns="${columns}"
+        .rowData="${rowData}"
+        .totalResults="${2}"
+        caption="test table"
+      >
       </test-pharos-table>
     `);
 
@@ -50,6 +55,7 @@ describe('pharos-table', () => {
         .hidePagination="${false}"
         .totalResults="${2}"
         .pageSizeOptions="${[1, 2]}"
+        caption="test table with pagination"
       >
       </test-pharos-table>
     `);

From c135b7573f40799d8f9f8e811020e6a43b596162 Mon Sep 17 00:00:00 2001
From: Jialin He <38861633+jialin-he@users.noreply.github.com>
Date: Wed, 13 Mar 2024 11:43:49 -0400
Subject: [PATCH 27/32] Update
 packages/pharos/src/components/table/pharos-table.ts

Co-authored-by: Dane Hillard <github@danehillard.com>
---
 packages/pharos/src/components/table/pharos-table.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 1ddcfaf35..fbf7ca7b3 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -99,7 +99,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   protected override updated(): void {
     if (!this.caption) {
       throw new Error(
-        `Table must have an accessible name. Please provide a caption for the table using the caption attribute. You can hide it visually by setting hide-caption-visually to be true.`
+        'Table must have an accessible name. Please provide a caption for the table using the `caption` attribute. You can hide the caption visually by setting the `hide-caption-visually` property.'
       );
     }
     this._pageSize = this.hidePagination ? this.rowData.length : this._pageSize;

From e4165476ca23800b663a7f80ff034223a325480a Mon Sep 17 00:00:00 2001
From: Jialin He <38861633+jialin-he@users.noreply.github.com>
Date: Wed, 13 Mar 2024 14:13:38 -0400
Subject: [PATCH 28/32] Update
 packages/pharos/src/components/table/pharos-table.test.ts

Co-authored-by: Brent Swisher <brent@brentswisher.com>
---
 packages/pharos/src/components/table/pharos-table.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.test.ts b/packages/pharos/src/components/table/pharos-table.test.ts
index e5370d465..5531cb6d2 100644
--- a/packages/pharos/src/components/table/pharos-table.test.ts
+++ b/packages/pharos/src/components/table/pharos-table.test.ts
@@ -120,7 +120,7 @@ describe('pharos-table', () => {
     expect(rows.length).to.be.eq(3);
   });
 
-  it('fires a custom event pwhen go to prev and next page', async () => {
+  it('fires a custom event when going to previous and next page', async () => {
     let prevWasFired = false;
     let nextWasFired = false;
     const handlePrevPage = (): void => {

From 4b6fcde3ee8928fc84f7037275fbd23ef4ef4797 Mon Sep 17 00:00:00 2001
From: Jialin He <38861633+jialin-he@users.noreply.github.com>
Date: Wed, 13 Mar 2024 14:28:54 -0400
Subject: [PATCH 29/32] Update
 packages/pharos/src/components/table/pharos-table.ts

Co-authored-by: Mat Harris <mat.harris@ithaka.org>
---
 packages/pharos/src/components/table/pharos-table.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index fbf7ca7b3..9ba90bb88 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -201,7 +201,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
       <table class="table">
         <caption
           class="${classMap({
-            [`visually-hidden`]: this.hideCaptionVisually,
+            [`visually-hidden`]: this.hideCaption,
           })}"
         >
           ${this.caption}

From bf20c8e8145b9f5308bbc581ae53cfa8a14e9223 Mon Sep 17 00:00:00 2001
From: Jialin He <38861633+jialin-he@users.noreply.github.com>
Date: Wed, 13 Mar 2024 14:29:06 -0400
Subject: [PATCH 30/32] Update
 packages/pharos/src/components/table/pharos-table.ts

Co-authored-by: Mat Harris <mat.harris@ithaka.org>
---
 packages/pharos/src/components/table/pharos-table.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 9ba90bb88..3a1d8aed3 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -81,7 +81,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   @property({ type: String, reflect: true, attribute: 'caption' })
   public caption: string = '';
 
-  @property({ type: String, reflect: true, attribute: 'hide-caption-visually' })
+  @property({ type: String, reflect: true, attribute: 'hide-caption' })
   public hideCaptionVisually: boolean = false;
 
   @state()

From b0103901ca7f8ae32a4b7b83d588e19fe68caeb2 Mon Sep 17 00:00:00 2001
From: Jialin He <38861633+jialin-he@users.noreply.github.com>
Date: Wed, 13 Mar 2024 14:29:18 -0400
Subject: [PATCH 31/32] Update
 packages/pharos/src/components/table/pharos-table.ts

Co-authored-by: Mat Harris <mat.harris@ithaka.org>
---
 packages/pharos/src/components/table/pharos-table.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 3a1d8aed3..00a565586 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -82,7 +82,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   public caption: string = '';
 
   @property({ type: String, reflect: true, attribute: 'hide-caption' })
-  public hideCaptionVisually: boolean = false;
+  public hideCaption: boolean = false;
 
   @state()
   private _pageSize = 50;

From 2161b85ffd600dbca4b103e700c7e7f4ea7b1d85 Mon Sep 17 00:00:00 2001
From: Jialin He <jialin.he@ithaka.org>
Date: Wed, 13 Mar 2024 15:41:04 -0400
Subject: [PATCH 32/32] feat(table): update attribute name and add unit test

---
 .../table/PharosTable.react.stories.jsx       |  8 +++---
 .../src/components/table/pharos-table.test.ts | 26 ++++++++++++++++++-
 .../src/components/table/pharos-table.ts      | 16 +++++-------
 .../table/pharos-table.wc.stories.jsx         | 12 ++++-----
 4 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/packages/pharos/src/components/table/PharosTable.react.stories.jsx b/packages/pharos/src/components/table/PharosTable.react.stories.jsx
index ef27c016a..2f87f7569 100644
--- a/packages/pharos/src/components/table/PharosTable.react.stories.jsx
+++ b/packages/pharos/src/components/table/PharosTable.react.stories.jsx
@@ -24,13 +24,13 @@ export const Base = {
     <PharosTable
       columns={args.columns}
       rowData={args.rowData}
-      hidePagination={args.hidePagination}
+      showPagination={args.showPagination}
       caption={'An example table'}
     ></PharosTable>
   ),
   args: {
     ...defaultArgs,
-    hidePagination: true,
+    showPagination: false,
   },
 };
 
@@ -39,7 +39,7 @@ export const WithPagination = {
     <PharosTable
       columns={args.columns}
       rowData={args.rowData}
-      hidePagination={args.hidePagination}
+      showPagination={args.showPagination}
       totalResults={5}
       pageSizeOptions={[2, 4]}
       caption={'An example table'}
@@ -47,6 +47,6 @@ export const WithPagination = {
   ),
   args: {
     ...defaultArgs,
-    hidePagination: false,
+    showPagination: true,
   },
 };
diff --git a/packages/pharos/src/components/table/pharos-table.test.ts b/packages/pharos/src/components/table/pharos-table.test.ts
index 5531cb6d2..2d3dce9a1 100644
--- a/packages/pharos/src/components/table/pharos-table.test.ts
+++ b/packages/pharos/src/components/table/pharos-table.test.ts
@@ -52,7 +52,7 @@ describe('pharos-table', () => {
       <test-pharos-table
         .columns="${columns}"
         .rowData="${rowData}"
-        .hidePagination="${false}"
+        .showPagination="${true}"
         .totalResults="${2}"
         .pageSizeOptions="${[1, 2]}"
         caption="test table with pagination"
@@ -148,3 +148,27 @@ describe('pharos-table', () => {
     expect(prevWasFired).to.be.true;
   });
 });
+
+it('throws an error if caption is not provided', async () => {
+  let errorThrown = false;
+  try {
+    await fixture(
+      html`<test-pharos-table
+        .columns="${[]}"
+        .rowData="${[]}"
+        .showPagination="${true}"
+        .totalResults="${2}"
+        .pageSizeOptions="${[1, 2]}"
+      >
+      </test-pharos-table> `
+    );
+  } catch (error) {
+    if (error instanceof Error) {
+      errorThrown = true;
+      expect(error?.message).to.be.equal(
+        'Table must have an accessible name. Please provide a caption for the table using the `caption` attribute. You can hide the caption visually by setting the `hide-caption-visually` property.'
+      );
+    }
+  }
+  expect(errorThrown).to.be.true;
+});
diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index 00a565586..3c67e60e4 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -69,8 +69,8 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   @property({ type: Array, reflect: true, attribute: 'row-data' })
   public rowData: RowData[] = [];
 
-  @property({ type: Boolean, reflect: true, attribute: 'hide-pagination' })
-  public hidePagination: boolean = true;
+  @property({ type: Boolean, reflect: true, attribute: 'show-pagination' })
+  public showPagination: boolean = false;
 
   @property({ type: Number, reflect: true, attribute: 'total-results' })
   public totalResults: number = 0;
@@ -91,9 +91,8 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   private _currentPage = 1;
 
   protected override firstUpdated(): void {
-    this._pageSize = this.hidePagination ? this.rowData.length : this.pageSizeOptions[0];
-    this.totalResults =
-      this.hidePagination || !this.totalResults ? this.rowData.length : this.totalResults;
+    this._pageSize = !this.showPagination ? this.rowData.length : this.pageSizeOptions[0];
+    this.totalResults = !this.totalResults ? this.rowData.length : this.totalResults;
   }
 
   protected override updated(): void {
@@ -102,9 +101,8 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
         'Table must have an accessible name. Please provide a caption for the table using the `caption` attribute. You can hide the caption visually by setting the `hide-caption-visually` property.'
       );
     }
-    this._pageSize = this.hidePagination ? this.rowData.length : this._pageSize;
-    this.totalResults =
-      this.hidePagination || !this.totalResults ? this.rowData.length : this.totalResults;
+    this._pageSize = !this.showPagination ? this.rowData.length : this._pageSize;
+    this.totalResults = !this.totalResults ? this.rowData.length : this.totalResults;
   }
 
   public static override get styles(): CSSResultArray {
@@ -166,7 +164,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   }
 
   private _renderPagination(): TemplateResult | typeof nothing {
-    return !this.hidePagination
+    return this.showPagination
       ? html`<div class="table-controls">
           <div class="item-per-page-wrapper">
             <span>Items per page</span>
diff --git a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
index 95c298107..c15154089 100644
--- a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
+++ b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx
@@ -13,26 +13,26 @@ export default {
 };
 
 export const Base = {
-  render: ({ columns, rowData, hidePagination }) => html`
+  render: ({ columns, rowData, showPagination }) => html`
     <storybook-pharos-table
       .columns="${columns}"
       .rowData="${rowData}"
-      .hidePagination="${hidePagination}"
+      .showPagination="${showPagination}"
       caption="An example table"
     />
   `,
   args: {
     ...defaultArgs,
-    hidePagination: true,
+    showPagination: false,
   },
 };
 
 export const WithPagination = {
-  render: ({ columns, rowData, hidePagination }) => html`
+  render: ({ columns, rowData, showPagination }) => html`
     <storybook-pharos-table
       .columns="${columns}"
       .rowData="${rowData}"
-      .hidePagination="${hidePagination}"
+      .showPagination="${showPagination}"
       .totalResults="${5}"
       .pageSizeOptions="${[2, 4]}"
       caption="An example table"
@@ -40,6 +40,6 @@ export const WithPagination = {
   `,
   args: {
     ...defaultArgs,
-    hidePagination: false,
+    showPagination: true,
   },
 };