feat(datatable): select all buttion in wc batch actions (#20419)

Co-authored-by: Ariella Gilmore <ariellalgilmore@gmail.com>
Co-authored-by: Mahmoud <132728978+maradwan26@users.noreply.github.com>

Author: 3 people

packages/web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -83,7 +83,7 @@ export const Default = {
       >
 
       <cds-table-toolbar slot="toolbar">
-        <cds-table-batch-actions ?active="true">
+        <cds-table-batch-actions total-rows-count="6">
           <cds-button data-context="data-table"
             >Delete
             ${iconLoader(TrashCan, {

packages/web-components/src/components/data-table/table-batch-actions.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import styles from './data-table.scss?lit';
@@ -16,6 +16,7 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
  *
  * @element cds-table-batch-actions
  * @fires cds-table-batch-actions-cancel-clicked - The custom event fired after the Cancel button is clicked.
+ * @fires cds-table-batch-actions-select-all-clicked - The custom event fired after the Select all button is clicked.
  */
 
 @customElement(`${prefix}-table-batch-actions`)
@@ -31,6 +32,18 @@ class CDSTableBatchActions extends LitElement {
     );
   }
 
+  /**
+   * Handles `click` event on the Select all button.
+   */
+  private _handleSelectAll() {
+    this.dispatchEvent(
+      new CustomEvent(CDSTableBatchActions.eventClickSelectAll, {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   /**
    * `true` if this batch actions bar should be active.
    */
@@ -51,6 +64,14 @@ class CDSTableBatchActions extends LitElement {
   @property({ type: Number, attribute: 'selected-rows-count' })
   selectedRowsCount = 0;
 
+  /**
+   * Numeric representation of the total number of items in a table.
+   * This number is used in the select all button text
+   * This property controls the rendering of the Select all button
+   */
+  @property({ type: Number, attribute: 'total-rows-count' })
+  totalRowsCount = 0;
+
   /**
    * The table size.
    */
@@ -119,7 +140,9 @@ class CDSTableBatchActions extends LitElement {
     const {
       formatSelectedItemsCount,
       selectedRowsCount,
+      totalRowsCount,
       _handleCancel: handleCancel,
+      _handleSelectAll: handleSelectAll,
       size,
     } = this;
 
@@ -130,6 +153,18 @@ class CDSTableBatchActions extends LitElement {
         <p class="${prefix}--batch-summary__para">
           ${formatSelectedItemsCount({ count: selectedRowsCount })}
         </p>
+        ${totalRowsCount > 0
+          ? html`
+              <span class="${prefix}--batch-summary__divider">|</span>
+              <button
+                class="${prefix}--btn ${prefix}--btn--primary ${prefix}--batch-summary__select-all"
+                @click=${handleSelectAll}>
+                <slot name="select-all-button-content"
+                  >Select all (${totalRowsCount})</slot
+                >
+              </button>
+            `
+          : nothing}
       </div>
 
       <div class="${prefix}--action-list">
@@ -160,6 +195,13 @@ class CDSTableBatchActions extends LitElement {
     return `${prefix}-table-batch-actions-cancel-clicked`;
   }
 
+  /**
+   * The name of the custom event fired after the Select all button is clicked.
+   */
+  static get eventClickSelectAll() {
+    return `${prefix}-table-batch-actions-select-all-clicked`;
+  }
+
   static styles = styles;
 }