fix(table): add a label for the "Select all rows" checkbox

Author: Kiarokh

etc/lime-elements.api.md

@@ -718,6 +718,7 @@ export namespace Components {
         "columns": Column[];
         "data": object[];
         "emptyMessage": string;
+        "language": Languages;
         "layout": Layout;
         "loading": boolean;
         "mode": 'local' | 'remote';
@@ -1845,6 +1846,7 @@ export namespace JSX {
         "columns"?: Column[];
         "data"?: object[];
         "emptyMessage"?: string;
+        "language"?: Languages;
         "layout"?: Layout;
         "loading"?: boolean;
         "mode"?: 'local' | 'remote';

src/components/table/table.tsx

@@ -22,6 +22,8 @@ import { ElementPool } from './element-pool';
 import { TableSelection } from './table-selection';
 import { mapLayout, Layout } from './layout';
 import { areRowsEqual } from './utils';
+import { Languages } from '../date-picker/date.types';
+import translate from '../../global/translations';
 
 const FIRST_PAGE = 1;
 
@@ -158,6 +160,12 @@ export class Table {
     @Prop()
     public selection: object[];
 
+    /**
+     * Defines the language for translations.
+     */
+    @Prop({ reflect: true })
+    public language: Languages = 'en';
+
     /**
      * Emitted when `mode` is `remote` and the table is loading new data. The
      * consumer is responsible for giving the table new data
@@ -852,13 +860,15 @@ export class Table {
                 style={{ display: showSelectAll ? 'inline-block' : 'none' }}
             >
                 <limel-checkbox
+                    class="hide-label"
                     onChange={this.selectAllOnChange}
                     disabled={this.data.length === 0}
                     checked={this.tableSelection?.hasSelection}
                     indeterminate={
                         this.tableSelection?.hasSelection &&
                         this.selection?.length < this.data.length
                     }
+                    label={this.getTranslation('table.select-all')}
                 />
             </div>
         );
@@ -877,4 +887,8 @@ export class Table {
             </div>
         );
     }
+
+    private getTranslation = (key: string) => {
+        return translate.get(key, this.language);
+    };
 }