fix(table): upgrade gridjs to version 6.0.6

.github/workflows/dev.yml

@@ -20,7 +20,10 @@ jobs:
         uses: borales/[email protected]
 
       - name: Install node_modules
-        run: yarn install
+        run: yarn install --forzen-lockfile
+
+      - name: Install playwright browsers
+        run: yarn playwright install
 
       - name: Format the code
         run: yarn run format

.github/workflows/main.yml

@@ -18,7 +18,7 @@ jobs:
         uses: borales/[email protected]
 
       - name: Install node_modules
-        run: yarn install
+        run: yarn install --frozen-lockfile
 
       - name: Build Storybook
         run: sudo yarn run storybook:build

.github/workflows/publish.yml

@@ -15,7 +15,7 @@ jobs:
         uses: borales/[email protected]
 
       - name: Install node_modules
-        run: yarn install
+        run: yarn install --frozen-lockfile
 
       - name: Build ARC
         run: sudo yarn run build

package.json

@@ -54,7 +54,7 @@
     "@floating-ui/dom": "^0.3.1",
     "@lit-labs/react": "^1.1.0",
     "date-fns": "^2.29.1",
-    "gridjs": "^5.0.2",
+    "gridjs": "6.0.6",
     "lit": "^2.4.1",
     "react": "^18.2.0",
     "tabbable": "^5.3.3"
@@ -82,6 +82,7 @@
     "@web/dev-server-rollup": "^0.3.19",
     "@web/rollup-plugin-html": "^1.10.1",
     "@web/test-runner": "^0.13.31",
+    "@web/test-runner-playwright": "^0.10.1",
     "babel-loader": "^8.2.3",
     "babel-plugin-template-html-minifier": "^4.1.0",
     "concurrently": "^7.3.0",

src/components/table/ArcTable.ts

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { Grid, Row, createElement, UserConfig } from 'gridjs';
+import { Grid, Row, createElement, Config } from 'gridjs';
 import { TCell, TColumn } from 'gridjs/dist/src/types';
 import { Language } from 'gridjs/dist/src/i18n/language';
 import { ComponentChildren, ComponentType, Attributes } from 'preact';
@@ -81,11 +81,10 @@ export default class ArcTable extends LitElement {
         error: 'An error occurred while fetching your data.',
         ...this.language,
       },
-      pagination: {
-        enabled: this.pagination,
+      pagination: this.pagination ? {
         limit: this.paginationLimit,
         summary: this.paginationSummary,
-      },
+      } : false,
       resizable: this.resizable,
       sort: this.sort,
       search: this.search,
@@ -109,7 +108,15 @@ export default class ArcTable extends LitElement {
   private _addTableListeners() {
     this._grid.on('rowClick', (...args) => this._emitTableEvent(TABLE_EVENTS.ROW_CLICK, args));
     this._grid.on('cellClick', (...args) => this._emitTableEvent(TABLE_EVENTS.CELL_CLICK, args));
-    this._grid.on('ready', () => this._emitTableEvent(TABLE_EVENTS.TABLE_READY));
+    this._grid.config.store.subscribe((state, prevState) => {
+      const status: number = state?.status as number ?? 0;
+      const prevStatus: number = prevState?.status as number ?? 0;
+      if (prevStatus < status) {
+        if (prevStatus === 2 && status === 3) {
+          this._emitTableEvent(TABLE_EVENTS.TABLE_READY);
+        }
+      }
+    });
   }
 
   /* Method used to format a table cell. */
@@ -122,7 +129,7 @@ export default class ArcTable extends LitElement {
    * GridJS provides support for more advanced features than the arc-table requires.
    * To allow the flexibility that GridJS provides, the given userConfig needs to be checked.
    * */
-  updateConfig(userConfig: Partial<UserConfig>) {
+  updateConfig(userConfig: Partial<Config>) {
     const keys = Object.keys(userConfig);
 
     /* Make sure there are actual properties given. */
@@ -135,7 +142,7 @@ export default class ArcTable extends LitElement {
     this._grid.forceRender();
 
     /* Each property of the component itself will also require an update, but only if they exist in the ArcTable API */
-    keys.forEach((key: keyof UserConfig) => {
+    keys.forEach((key: keyof Config) => {
       if (!(key in this)) return; // Make sure that the given key exists on the ArcTable (this) class.
       (this as any)[key] = userConfig[key]; // Update the value of a given key.
     });

src/components/table/arc-table.test.ts

@@ -147,7 +147,6 @@ describe('ArcTable', () => {
       /* When there is no data, there's a single row with an alert. */
       expect(getTableBody().children.length).to.equal(1);
       expect(element.pagination).to.be.false;
-      expect(element.search).to.be.false;
 
       /* Update the configuration */
       element.updateConfig({
@@ -160,7 +159,7 @@ describe('ArcTable', () => {
       });
 
       /* Wait for the underlying GridJS instance to finish rendering. */
-      await waitUntil(() => tableReadySpy.calledTwice);
+      await waitUntil(() => tableReadySpy.calledThrice);
 
       expect(getTableBody().children.length).to.equal(2);
       expect(element.pagination).to.be.true;
@@ -219,10 +218,12 @@ describe('ArcTable', () => {
           ['John', 'Doe'],
           ['Jane', 'Doe'],
         ],
+        pagination: true,
+        search: true,
       });
 
       /* Wait for the underlying GridJS instance to finish rendering. */
-      await waitUntil(() => tableReadySpy.calledTwice);
+      await waitUntil(() => tableReadySpy.calledThrice);
 
       const rows = getTableBody().children;
       const firstRow = rows[0] as HTMLTableRowElement;

web-test-runner.config.mjs

@@ -1,5 +1,6 @@
 import { esbuildPlugin } from '@web/dev-server-esbuild';
 import { fromRollup } from '@web/dev-server-rollup';
+import { playwrightLauncher } from '@web/test-runner-playwright';
 import rollupReplace from '@rollup/plugin-replace';
 
 const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
@@ -9,6 +10,13 @@ export default /** @type {import('@web/test-runner').TestRunnerConfig} */ ({
   /** Test files to run */
   files: 'src/**/*.test.ts',
 
+  /** Browsers to run tests on */
+  browsers: [
+    playwrightLauncher({ product: 'chromium' }),
+    // playwrightLauncher({ product: 'webkit' }),
+    // playwrightLauncher({ product: 'firefox' }),
+  ],
+
   /** Resolve bare module imports */
   nodeResolve: {
     exportConditions: ['browser', 'development'],