Feature/1364 data grid review

packages/components/grid/index.ts

@@ -6,4 +6,5 @@ export * from './src/grid.js';
 export * from './src/select-column.js';
 export * from './src/selection-column.js';
 export * from './src/sort-column.js';
+export * from './src/sorter.js';
 export * from './src/text-field-column.js';

packages/components/grid/register.ts

@@ -6,6 +6,7 @@ import { Grid } from './src/grid.js';
 import { GridSelectColumn } from './src/select-column.js';
 import { GridSelectionColumn } from './src/selection-column.js';
 import { GridSortColumn } from './src/sort-column.js';
+import { GridSorter } from './src/sorter.js';
 import { GridTextFieldColumn } from './src/text-field-column.js';
 
 customElements.define('sl-grid', Grid);
@@ -16,4 +17,5 @@ customElements.define('sl-grid-filter-column', GridFilterColumn);
 customElements.define('sl-grid-select-column', GridSelectColumn);
 customElements.define('sl-grid-selection-column', GridSelectionColumn);
 customElements.define('sl-grid-sort-column', GridSortColumn);
+customElements.define('sl-grid-sorter', GridSorter);
 customElements.define('sl-grid-text-field-column', GridTextFieldColumn);

packages/components/grid/src/column-group.spec.ts

@@ -0,0 +1,104 @@
+import { setupIgnoreWindowResizeObserverLoopErrors } from '@lit-labs/virtualizer/support/resize-observer-errors.js';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../register.js';
+import { type Grid } from './grid.js';
+
+setupIgnoreWindowResizeObserverLoopErrors(beforeEach, afterEach);
+
+describe('sl-column-group', () => {
+  let el: Grid;
+
+  describe('defaults', () => {
+    beforeEach(async () => {
+      el = await fixture(html`
+        <sl-grid>
+          <sl-grid-column-group header="Name">
+            <sl-grid-column path="firstName"></sl-grid-column>
+            <sl-grid-column path="lastName"></sl-grid-column>
+          </sl-grid-column-group>
+          <sl-grid-column-group header="Grades">
+            <sl-grid-column path="grades.biology"></sl-grid-column>
+            <sl-grid-column path="grades.maths"></sl-grid-column>
+            <sl-grid-column path="grades.english"></sl-grid-column>
+            <sl-grid-column path="age"></sl-grid-column>
+          </sl-grid-column-group>
+        </sl-grid>
+      `);
+      el.items = [{ firstName: 'John', lastName: 'Doe', grades: { biology: 'A', maths: 'B', english: 'B+' } }];
+      await el.updateComplete;
+
+      // Give grid time to render the table structure
+      await new Promise(resolve => setTimeout(resolve, 100));
+      await el.updateComplete;
+    });
+
+    it('should render column headers', () => {
+      const columns = Array.from(el.renderRoot.querySelectorAll('th')).map(col => col.textContent);
+
+      expect(columns).to.deep.equal([
+        'Name',
+        'Grades',
+        'First name',
+        'Last name',
+        'Biology',
+        'Maths',
+        'English',
+        'Age'
+      ]);
+    });
+
+    it('should have the correct width', () => {
+      const cells = Array.from(el.renderRoot.querySelectorAll('th'));
+      expect(cells.map(cell => Math.floor(parseFloat(getComputedStyle(cell).width)))).to.deep.equal([
+        300, 481, 151, 148, 128, 120, 128, 103
+      ]);
+    });
+
+    // it('should emit an sl-column-update event after clicking the checkbox', async () => {
+    //   const columnUpdateEvent = spy();
+    //   const columnGoup = el.querySelector('sl-grid-column-group:first-of-type') as GridColumnGroup;
+    //   columnGoup?.addEventListener('sl-column-update', columnUpdateEvent);
+
+    //   const newColumn = document.createElement('sl-grid-column');
+    //   await new Promise(resolve => setTimeout(resolve, 100));
+
+    //   columnGoup?.appendChild(newColumn);
+
+    //   // expect(columnUpdateEvent).to.have.been.called;
+    //   expect(columnGoup?.columns).to.equal(3);
+    // });
+  });
+
+  describe('explicit width', () => {
+    beforeEach(async () => {
+      el = await fixture(html`
+        <sl-grid>
+          <sl-grid-column-group header="Name">
+            <sl-grid-column path="firstName"></sl-grid-column>
+            <sl-grid-column path="lastName"></sl-grid-column>
+          </sl-grid-column-group>
+          <sl-grid-column-group header="Grades" width="600">
+            <sl-grid-column path="grades.biology"></sl-grid-column>
+            <sl-grid-column path="grades.maths"></sl-grid-column>
+            <sl-grid-column path="grades.english"></sl-grid-column>
+          </sl-grid-column-group>
+        </sl-grid>
+      `);
+
+      el.items = [{ firstName: 'John', lastName: 'Doe', grades: { biology: 'A', maths: 'B', english: 'B+' } }];
+      await el.updateComplete;
+
+      // Give grid time to render the table structure
+      await new Promise(resolve => setTimeout(resolve, 100));
+      await el.updateComplete;
+    });
+
+    it('should have the correct width when one is set explicitly', () => {
+      const cells = Array.from(el.renderRoot.querySelectorAll('th'));
+      expect(cells.map(cell => Math.floor(parseFloat(getComputedStyle(cell).width)))).to.deep.equal([
+        209, 600, 177, 175, 155, 147, 155
+      ]);
+    });
+  });
+});

packages/components/grid/src/column-group.ts

@@ -1,4 +1,3 @@
-import { getNameByPath } from '@sl-design-system/shared';
 import { type PropertyValues, type TemplateResult, html } from 'lit';
 import { state } from 'lit/decorators.js';
 import { GridColumn } from './column.js';
@@ -35,7 +34,7 @@ export class GridColumnGroup<T = unknown> extends GridColumn<T> {
   }
 
   override renderHeader(): TemplateResult {
-    return html`<th colspan=${this.columns.length}>${this.header ?? getNameByPath(this.path)}</th>`;
+    return html`<th colspan=${Math.max(this.columns.length, 1)}>${this.header}</th>`;
   }
 
   #onSlotchange(event: Event & { target: HTMLSlotElement }): void {

packages/components/grid/src/column.spec.ts

@@ -0,0 +1,100 @@
+import { setupIgnoreWindowResizeObserverLoopErrors } from '@lit-labs/virtualizer/support/resize-observer-errors.js';
+import { expect, fixture } from '@open-wc/testing';
+import { Avatar } from '@sl-design-system/avatar';
+import { html } from 'lit';
+import { Person } from 'tools/example-data/index.js';
+import '../register.js';
+import { GridColumnDataRenderer } from './column.js';
+import { type Grid } from './grid.js';
+
+setupIgnoreWindowResizeObserverLoopErrors(beforeEach, afterEach);
+
+describe('sl-column', () => {
+  let el: Grid;
+  let cells: HTMLElement[];
+
+  describe('defaults', () => {
+    beforeEach(async () => {
+      el = await fixture(html`
+        <sl-grid>
+          <sl-grid-column path="firstName"></sl-grid-column>
+          <sl-grid-column path="lastName"></sl-grid-column>
+          <sl-grid-column path="age" align="end" grow="3"></sl-grid-column>
+        </sl-grid>
+      `);
+      el.items = [
+        { firstName: 'John', lastName: 'Doe', age: 20 },
+        { firstName: 'Jane', lastName: 'Smith', age: 40 }
+      ];
+      await el.updateComplete;
+
+      // Give grid time to render the table structure
+      await new Promise(resolve => setTimeout(resolve, 100));
+      await el.updateComplete;
+
+      cells = Array.from(el.renderRoot.querySelectorAll('tbody tr:first-of-type td'));
+    });
+
+    it('should render column headers', () => {
+      const columns = Array.from(el.renderRoot.querySelectorAll('th')).map(col => col.textContent);
+
+      expect(columns).to.deep.equal(['First name', 'Last name', 'Age']);
+    });
+
+    it('should have the right justify-content value', () => {
+      expect(cells.map(cell => getComputedStyle(cell).justifyContent)).to.deep.equal(['start', 'start', 'end']);
+    });
+
+    it('should have the right grow value', () => {
+      expect(cells.map(cell => getComputedStyle(cell).flexGrow)).to.deep.equal(['1', '1', '3']);
+    });
+
+    it('should have the right parts', () => {
+      expect(cells.map(cell => cell.getAttribute('part'))).to.deep.equal([
+        'data first-name',
+        'data last-name',
+        'data age'
+      ]);
+    });
+  });
+
+  describe('custom renderer', () => {
+    beforeEach(async () => {
+      const avatarRenderer: GridColumnDataRenderer<Person> = ({ firstName, lastName }) => {
+        return html`<sl-avatar .displayName=${[firstName, lastName].join(' ')} size="sm"></sl-avatar>`;
+      };
+
+      el = await fixture(html`
+        <sl-grid>
+          <sl-grid-column
+            header="Person"
+            .renderer=${avatarRenderer}
+            .scopedElements=${{
+              'sl-avatar': Avatar
+            }}
+          ></sl-grid-column>
+          <sl-grid-column path="age" parts="number"></sl-grid-column>
+        </sl-grid>
+      `);
+      el.items = [
+        { firstName: 'John', lastName: 'Doe', age: 20 },
+        { firstName: 'Jane', lastName: 'Smith', age: 40 }
+      ];
+      await el.updateComplete;
+
+      // Give grid time to render the table structure
+      await new Promise(resolve => setTimeout(resolve, 100));
+      await el.updateComplete;
+
+      cells = Array.from(el.renderRoot.querySelectorAll('tbody tr:first-of-type td'));
+    });
+
+    it('should render the elements set with the custom renderer', () => {
+      expect(cells[0]).to.contain('sl-avatar');
+    });
+
+    it('should have the right parts, including one set on the column', () => {
+      expect(cells.map(cell => cell.getAttribute('part'))).to.deep.equal(['data', 'data number age']);
+    });
+  });
+});

packages/components/grid/src/column.ts

@@ -43,7 +43,7 @@ export class GridColumn<T = any> extends LitElement {
   #width?: number;
 
   /** The alignment of the content within the column. */
-  @property() align: GridColumnAlignment = 'start';
+  @property() align?: GridColumnAlignment;
 
   /**
    * Automatically sets the width of the column based on the column contents when this is set to `true`.
@@ -160,6 +160,7 @@ export class GridColumn<T = any> extends LitElement {
     if (typeof this.parts === 'string') {
       parts = this.parts.split(' ');
     } else if (typeof this.parts === 'function' && item) {
+      // TODO: what does this do? How can parts ever be a function? According to the typing this should not be possible.
       parts = this.parts(item)?.split(' ') ?? [];
     }