@dile/crud 2.6.4 → 2.7.1

package/components/list/crud-data-grid.js

@@ -0,0 +1,5 @@
+import { DileCrudDataGrid } from './src/DileCrudDataGrid.js';
+
+if (!customElements.get('dile-crud-data-grid')) {
+  customElements.define('dile-crud-data-grid', DileCrudDataGrid);
+}

package/components/list/crud-data-grid.spec.js

@@ -0,0 +1,192 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { CrudConfigBuilder } from '../../lib/CrudConfigBuilder.js';
+import './crud-data-grid.js';
+import '@dile/ui/components/data-grid/data-grid.js';
+
+describe('dile-crud-data-grid', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const sampleColumns = [
+    { field: 'id', header: 'ID' },
+    { field: 'name', header: 'Name' },
+  ];
+
+  const sampleItems = [
+    { id: 1, name: 'Item A' },
+    { id: 2, name: 'Item B', deleted_at: '2026-01-01' },
+  ];
+
+  async function createGrid(customConfig = {}, props = {}) {
+    const config = new CrudConfigBuilder('https://example.test/api/items', customConfig).getConfig();
+    const el = document.createElement('dile-crud-data-grid');
+    el.config = config;
+    el.items = props.items ?? sampleItems;
+    el.selectedIds = props.selectedIds ?? [];
+    document.body.appendChild(el);
+    await el.updateComplete;
+    return el;
+  }
+
+  function innerGrid(el) {
+    return el.shadowRoot.querySelector('dile-data-grid');
+  }
+
+  it('builds columns from config.grid.columns and auto-appends an Actions column by default', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns } });
+
+    expect(el.columns.length).toBe(3);
+    expect(el.columns[0]).toEqual(sampleColumns[0]);
+    expect(el.columns[1]).toEqual(sampleColumns[1]);
+    expect(el.columns[2].header).toBe('Actions');
+    expect(el.columns[2].align).toBe('right');
+    expect(el.columns[2].width).toBe('110px');
+    expect(el.columns[2].hideCardLabel).toBe(true);
+  });
+
+  it('does not append an Actions column when config.grid.hideActionsColumn is true', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns, hideActionsColumn: true } });
+
+    expect(el.columns.length).toBe(2);
+  });
+
+  it('does not append an Actions column when actions are globally disabled', async () => {
+    const el = await createGrid({
+      grid: { columns: sampleColumns },
+      customization: { disableListActions: true },
+    });
+
+    expect(el.columns.length).toBe(2);
+  });
+
+  it('honors actionsColumnHeader, actionsColumnWidth and actionsColumnAlign overrides', async () => {
+    const el = await createGrid({
+      grid: {
+        columns: sampleColumns,
+        actionsColumnHeader: 'Ops',
+        actionsColumnWidth: '150px',
+        actionsColumnAlign: 'center',
+      },
+    });
+
+    const actionsColumn = el.columns[el.columns.length - 1];
+    expect(actionsColumn.header).toBe('Ops');
+    expect(actionsColumn.width).toBe('150px');
+    expect(actionsColumn.align).toBe('center');
+  });
+
+  it('falls back to config.labels.actionsHeader when grid.actionsColumnHeader is not set', async () => {
+    const el = await createGrid({
+      grid: { columns: sampleColumns },
+      labels: { actionsHeader: 'Manage' },
+    });
+
+    const actionsColumn = el.columns[el.columns.length - 1];
+    expect(actionsColumn.header).toBe('Manage');
+  });
+
+  it('renders dile-crud-item-actions in the Actions column wired with .item and .config', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns } });
+
+    const grid = innerGrid(el);
+    const actionsElements = grid.shadowRoot.querySelectorAll('dile-crud-item-actions');
+    expect(actionsElements.length).toBe(sampleItems.length);
+    expect(actionsElements[0].item).toEqual(sampleItems[0]);
+    expect(actionsElements[0].config).toBe(el.config);
+  });
+
+  it('derives selectable from !config.customization.hideCheckboxSelection by default', async () => {
+    const elHidden = await createGrid({ grid: { columns: sampleColumns }, customization: { hideCheckboxSelection: true } });
+    expect(innerGrid(elHidden).selectable).toBe(false);
+
+    const elShown = await createGrid({ grid: { columns: sampleColumns }, customization: { hideCheckboxSelection: false } });
+    expect(innerGrid(elShown).selectable).toBe(true);
+  });
+
+  it('lets config.grid.selectable override the customization.hideCheckboxSelection default', async () => {
+    const elForcedOff = await createGrid({
+      grid: { columns: sampleColumns, selectable: false },
+      customization: { hideCheckboxSelection: false },
+    });
+    expect(innerGrid(elForcedOff).selectable).toBe(false);
+
+    const elForcedOn = await createGrid({
+      grid: { columns: sampleColumns, selectable: true },
+      customization: { hideCheckboxSelection: true },
+    });
+    expect(innerGrid(elForcedOn).selectable).toBe(true);
+  });
+
+  it('forwards stickyFirstColumn, striped, responsiveMode and emptyMessage with sensible defaults', async () => {
+    const elDefaults = await createGrid({ grid: { columns: sampleColumns } });
+    const gridDefaults = innerGrid(elDefaults);
+    expect(gridDefaults.stickyFirstColumn).toBe(true);
+    expect(gridDefaults.striped).toBe(true);
+    expect(gridDefaults.responsiveMode).toBe('auto');
+    expect(gridDefaults.emptyMessage).toBe('No data available');
+
+    const elOverrides = await createGrid({
+      grid: {
+        columns: sampleColumns,
+        stickyFirstColumn: false,
+        striped: false,
+        responsiveMode: 'cards',
+        emptyMessage: 'Nothing here',
+      },
+    });
+    const gridOverrides = innerGrid(elOverrides);
+    expect(gridOverrides.stickyFirstColumn).toBe(false);
+    expect(gridOverrides.striped).toBe(false);
+    expect(gridOverrides.responsiveMode).toBe('cards');
+    expect(gridOverrides.emptyMessage).toBe('Nothing here');
+  });
+
+  it('always forces sort-mode to external regardless of config', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns } });
+    expect(innerGrid(el).sortMode).toBe('external');
+  });
+
+  it('wires computeRowId from config.computeItemId so selection matches custom ids', async () => {
+    const el = await createGrid(
+      {
+        grid: { columns: sampleColumns, selectable: true },
+        computeItemId: (item) => `custom-${item.id}`,
+      },
+      { selectedIds: ['custom-2'] }
+    );
+
+    const checkboxes = innerGrid(el).shadowRoot.querySelectorAll('dile-checkbox');
+    expect(checkboxes[0].checked).toBe(false);
+    expect(checkboxes[1].checked).toBe(true);
+  });
+
+  it('leaves computeRowId unset when config.computeItemId is not a function', async () => {
+    const el = document.createElement('dile-crud-data-grid');
+    el.config = { grid: { columns: sampleColumns } };
+    el.items = sampleItems;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.computeRowId).toBeNull();
+  });
+
+  it('applies the is-deleted row class to rows whose deleted_at is truthy', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns } });
+
+    const rows = innerGrid(el).shadowRoot.querySelectorAll('tbody tr');
+    expect(rows[0].classList.contains('is-deleted')).toBe(false);
+    expect(rows[1].classList.contains('is-deleted')).toBe(true);
+  });
+
+  it('does not throw and still appends the Actions column when config is null', async () => {
+    const el = document.createElement('dile-crud-data-grid');
+    el.items = sampleItems;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.columns.length).toBe(1);
+    expect(el.columns[0].header).toBe('Actions');
+    expect(innerGrid(el)).toBeTruthy();
+  });
+});

package/components/list/crud-item-actions.js

@@ -0,0 +1,5 @@
+import { DileCrudItemActions } from './src/DileCrudItemActions.js';
+
+if (!customElements.get('dile-crud-item-actions')) {
+  customElements.define('dile-crud-item-actions', DileCrudItemActions);
+}

package/components/list/crud-item-actions.spec.js

@@ -0,0 +1,122 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { html } from 'lit';
+import { CrudConfigBuilder } from '../../lib/CrudConfigBuilder.js';
+import { DileCrudItemActions } from './src/DileCrudItemActions.js';
+import './crud-item-actions.js';
+
+describe('dile-crud-item-actions', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const sampleItem = { id: 10, name: 'Sample Item', deleted_at: null };
+  const deletedItem = { id: 20, name: 'Deleted Item', deleted_at: '2026-01-01' };
+
+  it('renders edit and delete buttons by default', async () => {
+    const el = document.createElement('dile-crud-item-actions');
+    el.item = sampleItem;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const editBtn = el.shadowRoot.querySelector('dile-button.edit');
+    const deleteBtn = el.shadowRoot.querySelector('dile-button.delete');
+    const restoreBtn = el.shadowRoot.querySelector('dile-button.restore');
+
+    expect(editBtn).toBeTruthy();
+    expect(deleteBtn).toBeTruthy();
+    expect(restoreBtn).toBeNull();
+  });
+
+  it('renders restore button when item has deleted_at or isDeleted is true', async () => {
+    const el = document.createElement('dile-crud-item-actions');
+    el.item = deletedItem;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const editBtn = el.shadowRoot.querySelector('dile-button.edit');
+    const deleteBtn = el.shadowRoot.querySelector('dile-button.delete');
+    const restoreBtn = el.shadowRoot.querySelector('dile-button.restore');
+
+    expect(editBtn).toBeNull();
+    expect(deleteBtn).toBeNull();
+    expect(restoreBtn).toBeTruthy();
+  });
+
+  it('respects global customization and item-level callbacks from config', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/items', {
+      customization: {
+        disableEdit: false,
+        disableDelete: true,
+      },
+      isItemEditable: (item) => item.id !== 99,
+      computeItemId: (item) => `custom-${item.id}`,
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-item-actions');
+    el.item = { id: 99, name: 'Not editable' };
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    // Both edit (via isItemEditable returning false) and delete (via disableDelete: true) should be hidden
+    expect(el.shadowRoot.querySelector('dile-button.edit')).toBeNull();
+    expect(el.shadowRoot.querySelector('dile-button.delete')).toBeNull();
+  });
+
+  it('hides all actions when disableListActions is true in config', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/items', {
+      customization: {
+        disableListActions: true,
+      },
+    }).getConfig();
+
+    expect(DileCrudItemActions.hasActions(config)).toBe(false);
+
+    const el = document.createElement('dile-crud-item-actions');
+    el.item = sampleItem;
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('dile-button.edit')).toBeNull();
+    expect(el.shadowRoot.querySelector('dile-button.delete')).toBeNull();
+    expect(el.shadowRoot.querySelector('dile-button.restore')).toBeNull();
+  });
+
+  it('DileCrudItemActions.hasActions returns false if edit, delete and restore are all disabled', () => {
+    const config = new CrudConfigBuilder('https://example.test/api/items', {
+      customization: {
+        disableEdit: true,
+        disableDelete: true,
+        disableRestore: true,
+      },
+    }).getConfig();
+
+    expect(DileCrudItemActions.hasActions(config)).toBe(false);
+  });
+
+  it('dispatches crud-item-edit with computed itemId from config', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/items', {
+      computeItemId: (item) => `computed-${item.id}`,
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-item-actions');
+    el.item = sampleItem;
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    let emittedDetail = null;
+    el.addEventListener('crud-item-edit', (e) => {
+      emittedDetail = e.detail;
+    });
+
+    const editBtn = el.shadowRoot.querySelector('dile-button.edit');
+    editBtn.click();
+
+    expect(emittedDetail).toEqual({
+      item: sampleItem,
+      itemId: 'computed-10',
+    });
+  });
+});

package/components/list/crud-list.spec.js

@@ -0,0 +1,255 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { html } from 'lit';
+import { CrudConfigBuilder } from '../../lib/CrudConfigBuilder.js';
+import './crud-list.js';
+import './crud-data-grid.js';
+import '@dile/ui/components/data-grid/data-grid.js';
+
+describe('dile-crud-list grid template integration', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const sampleElements = [
+    { id: 1, name: 'Customer A', email: 'a@example.com' },
+    { id: 2, name: 'Customer B', email: 'b@example.com' },
+  ];
+
+  it('renders default dile-crud-list-item when templates.grid is not provided', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      templates: {
+        item: (item) => html`<span class="item-name">${item.name}</span>`,
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    el.config = config;
+    el.elements = sampleElements;
+    el.loading = false;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const listItems = el.shadowRoot.querySelectorAll('dile-crud-list-item');
+    expect(listItems.length).toBe(2);
+
+    const gridContainer = el.shadowRoot.querySelector('.grid-container');
+    expect(gridContainer).toBeNull();
+  });
+
+  it('renders generic dile-crud-data-grid when config.grid.columns is defined', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      grid: {
+        columns: [
+          { field: 'id', header: 'ID' },
+          { field: 'name', header: 'Customer Name' },
+        ],
+        striped: true,
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    el.config = config;
+    el.elements = sampleElements;
+    el.loading = false;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const listItems = el.shadowRoot.querySelectorAll('dile-crud-list-item');
+    expect(listItems.length).toBe(0);
+
+    const crudDataGrid = el.shadowRoot.querySelector('dile-crud-data-grid');
+    expect(crudDataGrid).toBeTruthy();
+    expect(crudDataGrid.items).toEqual(sampleElements);
+    expect(crudDataGrid.columns.length).toBe(3); // id, name + automatically injected Actions
+    expect(crudDataGrid.columns[2].header).toBe('Actions');
+  });
+
+  it('hides actions in traditional list items when disableListActions is true', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      customization: {
+        disableListActions: true,
+      },
+      templates: {
+        item: (item) => html`<span class="item-name">${item.name}</span>`,
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    el.config = config;
+    el.elements = sampleElements;
+    el.loading = false;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const listItems = el.shadowRoot.querySelectorAll('dile-crud-list-item');
+    expect(listItems.length).toBe(2);
+
+    for (const item of listItems) {
+      const actionsDiv = item.shadowRoot.querySelector('.actions');
+      expect(actionsDiv).toBeNull();
+    }
+  });
+
+  it('renders custom grid template when templates.grid is configured', async () => {
+    let receivedElements = null;
+    let receivedActionIds = null;
+
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      templates: {
+        grid: (elements, actionIds) => {
+          receivedElements = elements;
+          receivedActionIds = actionIds;
+          return html`
+            <dile-data-grid
+              .items="${elements}"
+              .selectedIds="${actionIds}"
+              selectable
+              .columns="${[
+                { field: 'id', header: 'ID' },
+                { field: 'name', header: 'Name' },
+              ]}"
+            ></dile-data-grid>
+          `;
+        },
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    el.config = config;
+    el.elements = sampleElements;
+    el.actionIds = [2];
+    el.loading = false;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const listItems = el.shadowRoot.querySelectorAll('dile-crud-list-item');
+    expect(listItems.length).toBe(0);
+
+    const gridContainer = el.shadowRoot.querySelector('.grid-container');
+    expect(gridContainer).toBeTruthy();
+
+    const dataGrid = el.shadowRoot.querySelector('dile-data-grid');
+    expect(dataGrid).toBeTruthy();
+    expect(receivedElements).toEqual(sampleElements);
+    expect(receivedActionIds).toEqual([2]);
+  });
+
+  it('updates sort when dile-data-grid-sort is dispatched', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      templates: {
+        grid: (elements, actionIds) => html`
+          <dile-data-grid
+            .items="${elements}"
+            sort-mode="external"
+            .columns="${[
+              { field: 'name', header: 'Name', sortable: true },
+            ]}"
+          ></dile-data-grid>
+        `,
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    el.config = config;
+    el.elements = sampleElements;
+    el.loading = false;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    let sortApplied = null;
+    el.setSort = (sortObj) => {
+      sortApplied = sortObj;
+    };
+
+    const gridContainer = el.shadowRoot.querySelector('.grid-container');
+    gridContainer.dispatchEvent(
+      new CustomEvent('dile-data-grid-sort', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          field: 'name',
+          direction: 'asc',
+        },
+      })
+    );
+
+    expect(sortApplied).toEqual({
+      sortField: 'name',
+      sortDirection: 'asc',
+    });
+  });
+
+  it('updates sort when dile-data-grid-sort is dispatched from the config.grid.columns branch', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      grid: {
+        columns: [
+          { field: 'name', header: 'Name', sortable: true },
+        ],
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    el.config = config;
+    el.elements = sampleElements;
+    el.loading = false;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    let sortApplied = null;
+    el.setSort = (sortObj) => {
+      sortApplied = sortObj;
+    };
+
+    const gridContainer = el.shadowRoot.querySelector('.grid-container');
+    gridContainer.dispatchEvent(
+      new CustomEvent('dile-data-grid-sort', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          field: 'name',
+          direction: 'desc',
+        },
+      })
+    );
+
+    expect(sortApplied).toEqual({
+      sortField: 'name',
+      sortDirection: 'desc',
+    });
+  });
+
+  it('prefers templates.grid over config.grid.columns when both are configured', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      grid: {
+        columns: [
+          { field: 'id', header: 'ID' },
+        ],
+      },
+      templates: {
+        grid: (elements, actionIds) => html`
+          <dile-data-grid
+            .items="${elements}"
+            .columns="${[{ field: 'name', header: 'Name' }]}"
+          ></dile-data-grid>
+        `,
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    el.config = config;
+    el.elements = sampleElements;
+    el.loading = false;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('dile-crud-data-grid')).toBeNull();
+    expect(el.shadowRoot.querySelector('dile-data-grid')).toBeTruthy();
+  });
+});

package/components/list/index.js

@@ -1,5 +1,7 @@
 export { DileCrudList } from "./src/DileCrudList.js";
-export { DileCrudListItem } from ".src/DileCrudListItem.js";
-export { DileCrudListPaginationLinks } from ".src/DileCrudListPaginationLinks.js";
+export { DileCrudListItem } from "./src/DileCrudListItem.js";
+export { DileCrudItemActions } from "./src/DileCrudItemActions.js";
+export { DileCrudDataGrid } from "./src/DileCrudDataGrid.js";
+export { DileCrudListPaginationLinks } from "./src/DileCrudListPaginationLinks.js";
 export { DileCrudListService } from "./src/DileCrudListService.js";
 export { DileCrudSelectAll } from "./src/DileCrudSelectAll.js";

package/components/list/src/DileCrudDataGrid.js

@@ -0,0 +1,89 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/data-grid/data-grid.js';
+import { DileCrudItemActions } from './DileCrudItemActions.js';
+import '../crud-item-actions.js';
+
+export class DileCrudDataGrid extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      items: { type: Array },
+      selectedIds: { type: Array },
+      config: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+    this.items = [];
+    this.selectedIds = [];
+    this.config = null;
+  }
+
+  get columns() {
+    const configuredCols = this.config?.grid?.columns || [];
+    const cols = [...configuredCols];
+
+    const hideActions = Boolean(this.config?.grid?.hideActionsColumn);
+
+    if (!hideActions && DileCrudItemActions.hasActions(this.config)) {
+      const customActionsHeader = this.config?.grid?.actionsColumnHeader || this.config?.labels?.actionsHeader || 'Actions';
+      const customActionsWidth = this.config?.grid?.actionsColumnWidth || '110px';
+      const customActionsAlign = this.config?.grid?.actionsColumnAlign || 'right';
+
+      cols.push({
+        header: customActionsHeader,
+        align: customActionsAlign,
+        width: customActionsWidth,
+        hideCardLabel: true,
+        render: (item) => html`
+          <dile-crud-item-actions
+            .item=${item}
+            .config=${this.config}
+          ></dile-crud-item-actions>
+        `,
+      });
+    }
+
+    return cols;
+  }
+
+  get computeRowId() {
+    const computeItemId = this.config?.computeItemId;
+    if (typeof computeItemId !== 'function') {
+      return null;
+    }
+    return (row) => computeItemId(row);
+  }
+
+  get rowClass() {
+    return (row) => (row?.deleted_at ? 'is-deleted' : '');
+  }
+
+  render() {
+    const gridConfig = this.config?.grid || {};
+
+    return html`
+      <dile-data-grid
+        .items=${this.items}
+        .columns=${this.columns}
+        .selectedIds=${this.selectedIds}
+        .computeRowId=${this.computeRowId}
+        .rowClass=${this.rowClass}
+        ?selectable=${gridConfig.selectable !== undefined ? gridConfig.selectable : !this.config?.customization?.hideCheckboxSelection}
+        ?sticky-first-column=${gridConfig.stickyFirstColumn !== undefined ? gridConfig.stickyFirstColumn : true}
+        ?striped=${gridConfig.striped !== undefined ? gridConfig.striped : true}
+        responsive-mode=${gridConfig.responsiveMode || 'auto'}
+        empty-message=${gridConfig.emptyMessage || 'No data available'}
+        sort-mode="external"
+      ></dile-data-grid>
+    `;
+  }
+}