Skip to content

Commit

Permalink
fix: dynamic row changes (#17895)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lee-chase
lee-chase authored Oct 30, 2024
1 parent e20b1c5 commit 75c827d
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 117 deletions.
217 changes: 109 additions & 108 deletions packages/web-components/src/components/data-table/stories/data-table-expansion.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,115 +255,116 @@ export const BatchExpansion = {
export const Playground = {
args: defaultArgs,
argTypes: controls,
render: ({
isSortable,
locale,
size,
useStaticWidth,
useZebraStyles,
}) => html`
<cds-table
expandable
?is-sortable=${isSortable}
locale="${locale}"
size="${size}"
?use-static-width="${useStaticWidth}"
?use-zebra-styles="${useZebraStyles}">
<cds-table-header-title slot="title">DataTable</cds-table-header-title>
<cds-table-header-description slot="description"
>With expansion</cds-table-header-description
>
render: ({ isSortable, locale, size, useStaticWidth, useZebraStyles }) => {
setTimeout(() => {
const tableBody = document.querySelector('cds-table-body');
if (tableBody) {
tableBody.innerHTML = `<cds-table-row>
<cds-table-cell>Load Balancer 3</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>3000</cds-table-cell>
<cds-table-cell>Round robin</cds-table-cell>
<cds-table-cell>Kevin's VM Groups</cds-table-cell>
<cds-table-cell
><cds-link disabled>Disabled</cds-link></cds-table-cell
>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>
<cds-table-row>
<cds-table-cell>Load Balancer 1</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>443</cds-table-cell>
<cds-table-cell>Round robin</cds-table-cell>
<cds-table-cell>Maureen's VM Groups</cds-table-cell>
<cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>
<cds-table-row>
<cds-table-cell>Load Balancer 2</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>80</cds-table-cell>
<cds-table-cell>DNS delegation</cds-table-cell>
<cds-table-cell>Andrew's VM Groups</cds-table-cell>
<cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>
<cds-table-row>
<cds-table-cell>Load Balancer 6</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>3000</cds-table-cell>
<cds-table-cell>Round robin</cds-table-cell>
<cds-table-cell>Marc's VM Groups</cds-table-cell>
<cds-table-cell
><cds-link disabled>Disabled</cds-link></cds-table-cell
>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>
<cds-table-row>
<cds-table-cell>Load Balancer 4</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>443</cds-table-cell>
<cds-table-cell>Round robin</cds-table-cell>
<cds-table-cell>Mel's VM Groups</cds-table-cell>
<cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>
<cds-table-row>
<cds-table-cell>Load Balancer 5</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>80</cds-table-cell>
<cds-table-cell>DNS delegation</cds-table-cell>
<cds-table-cell>Ronja's VM Groups</cds-table-cell>
<cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>`;
}
}, 1);

<cds-table-head>
<cds-table-header-row>
<cds-table-header-cell>Name</cds-table-header-cell>
<cds-table-header-cell>Protocol</cds-table-header-cell>
<cds-table-header-cell>Port</cds-table-header-cell>
<cds-table-header-cell>Rule</cds-table-header-cell>
<cds-table-header-cell>Attached groups</cds-table-header-cell>
<cds-table-header-cell>Status</cds-table-header-cell>
</cds-table-header-row>
</cds-table-head>
<cds-table-body>
<cds-table-row>
<cds-table-cell>Load Balancer 3</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>3000</cds-table-cell>
<cds-table-cell>Round robin</cds-table-cell>
<cds-table-cell>Kevin's VM Groups</cds-table-cell>
<cds-table-cell
><cds-link disabled>Disabled</cds-link></cds-table-cell
>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>
<cds-table-row>
<cds-table-cell>Load Balancer 1</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>443</cds-table-cell>
<cds-table-cell>Round robin</cds-table-cell>
<cds-table-cell>Maureen's VM Groups</cds-table-cell>
<cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>
<cds-table-row>
<cds-table-cell>Load Balancer 2</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>80</cds-table-cell>
<cds-table-cell>DNS delegation</cds-table-cell>
<cds-table-cell>Andrew's VM Groups</cds-table-cell>
<cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>
<cds-table-row>
<cds-table-cell>Load Balancer 6</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>3000</cds-table-cell>
<cds-table-cell>Round robin</cds-table-cell>
<cds-table-cell>Marc's VM Groups</cds-table-cell>
<cds-table-cell
><cds-link disabled>Disabled</cds-link></cds-table-cell
>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>
<cds-table-row>
<cds-table-cell>Load Balancer 4</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>443</cds-table-cell>
<cds-table-cell>Round robin</cds-table-cell>
<cds-table-cell>Mel's VM Groups</cds-table-cell>
<cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>
<cds-table-row>
<cds-table-cell>Load Balancer 5</cds-table-cell>
<cds-table-cell>HTTP</cds-table-cell>
<cds-table-cell>80</cds-table-cell>
<cds-table-cell>DNS delegation</cds-table-cell>
<cds-table-cell>Ronja's VM Groups</cds-table-cell>
<cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
</cds-table-row>
<cds-table-expanded-row>
<h6>Expandable row content</h6>
<div>Description here</div>
</cds-table-expanded-row>
</cds-table-body>
</cds-table>
`,
return html`
<cds-table
expandable
?is-sortable=${isSortable}
locale="${locale}"
size="${size}"
?use-static-width="${useStaticWidth}"
?use-zebra-styles="${useZebraStyles}">
<cds-table-header-title slot="title">DataTable</cds-table-header-title>
<cds-table-header-description slot="description"
>With expansion</cds-table-header-description
>
<cds-table-head>
<cds-table-header-row>
<cds-table-header-cell>Name</cds-table-header-cell>
<cds-table-header-cell>Protocol</cds-table-header-cell>
<cds-table-header-cell>Port</cds-table-header-cell>
<cds-table-header-cell>Rule</cds-table-header-cell>
<cds-table-header-cell>Attached groups</cds-table-header-cell>
<cds-table-header-cell>Status</cds-table-header-cell>
</cds-table-header-row>
</cds-table-head>
<cds-table-body> </cds-table-body>
</cds-table>
`;
},
};

const meta = {
Expand Down
13 changes: 13 additions & 0 deletions packages/web-components/src/components/data-table/table-body.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,12 @@ class CDSTableBody extends LitElement {
*/
private _handleSlotChange = () => {
this._updateZebra();
this.dispatchEvent(
new CustomEvent(
(this.constructor as typeof CDSTableBody).eventTableBodyContentChange,
{ bubbles: true, cancelable: false }
)
);
};

/**
Expand Down Expand Up @@ -80,6 +86,13 @@ class CDSTableBody extends LitElement {
return html` <slot @slotchange="${handleSlotChange}"></slot> `;
}

/**
* The name of the custom event fired after the body slot content changes
*/
static get eventTableBodyContentChange() {
return `${prefix}-table-body-content-change`;
}

static styles = styles;
}

Expand Down
42 changes: 33 additions & 9 deletions packages/web-components/src/components/data-table/table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,22 @@ class CDSTable extends HostListenerMixin(LitElement) {
this.withHeader = hasContent;
}

private _handleTableBodyChange() {
// cds-table-head or cds-table-body may have changed
this._tableBody = this.querySelector(
(this.constructor as typeof CDSTable).selectorTableBody
);
this._tableExpandedRows = this.querySelectorAll(
(this.constructor as typeof CDSTable).selectorTableExpandedRows
);
this._tableRows = this.querySelectorAll(
(this.constructor as typeof CDSTable).selectorTableRow
);

// update any row dependant features
this.updateExpandable();
}

private _handleSortAction(columnIndex, sortDirection) {
const rows = [...this._tableRows];

Expand Down Expand Up @@ -669,15 +685,19 @@ class CDSTable extends HostListenerMixin(LitElement) {
this.headerCount = this._tableHeaderRow.children.length;
}

updateExpandable() {
this._tableRows.forEach((e, index) => {
e.expandable = this.expandable;
e.setAttribute('sort-id', index);
});
this._tableHeaderRow.expandable = this.expandable;
this._tableHeaderRow.batchExpansion = this.batchExpansion;
this.headerCount += this.expandable ? 1 : -1;
}

updated(changedProperties) {
if (changedProperties.has('expandable')) {
this._tableRows.forEach((e, index) => {
e.expandable = this.expandable;
e.setAttribute('sort-id', index);
});
this._tableHeaderRow.expandable = this.expandable;
this._tableHeaderRow.batchExpansion = this.batchExpansion;
this.headerCount += this.expandable ? 1 : -1;
this.updateExpandable();
}

if (changedProperties.has('headerCount')) {
Expand Down Expand Up @@ -843,10 +863,14 @@ class CDSTable extends HostListenerMixin(LitElement) {
${false // TODO: replace with this.stickyHeader when feature is fully implemented
? html` <div class="${prefix}--data-table_inner-container">
<div class="${prefix}--data-table-content">
<slot></slot>
<slot
@cds-table-body-content-change="${this
._handleTableBodyChange}"></slot>
</div>
</div>`
: html`<slot></slot>`}
: html`<slot
@cds-table-body-content-change="${this
._handleTableBodyChange}"></slot>`}
`;
}

Expand Down

0 comments on commit 75c827d

Please sign in to comment.