diff --git a/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts b/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
index 59ed61527c..4ea393cb61 100644
--- a/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
+++ b/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
@@ -30,5 +30,6 @@ export interface Cell {
rowIndex,
columnIndex,
isAutoWidthCheck,
+ localization,
}): HTMLElement;
}
diff --git a/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx
index 00a2acd381..f77e71ce8e 100644
--- a/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx
+++ b/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx
@@ -20,16 +20,24 @@ export const HTMLCell: Cell = {
// Skip check as content width is always the same
return rows[0][columnIndex];
},
- render: ({ content, component }) => {
+ render: ({ content, component, localization }) => {
+ const getAriaLabel = () => {
+ if (localization?.expand && localization?.collapse) {
+ return content.isExpanded
+ ? localization?.collapse
+ : localization?.expand;
+ }
+ return `Activate to ${
+ content.isExpanded ? 'collapse' : 'expand'
+ } content`;
+ };
return (
content && (
{
content.isExpanded = !content.isExpanded;
component.forceRender++;
diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx
index 24d643781a..240b978ad9 100644
--- a/packages/components/src/components/data-grid/data-grid.tsx
+++ b/packages/components/src/components/data-grid/data-grid.tsx
@@ -112,13 +112,16 @@ export class DataGrid {
/** (optional) Title for sortable columns */
@Prop() sortableColumnTitle?: string = 'Activate to sort column';
/**
- * (optional) set localization for sort, toggle and select/deselect table
+ * (optional) set localization for sort, toggle, select/deselect, table options, expand/collapse (html cell)
* Default is English.
*/
@Prop() localization?: {
sortBy: string;
toggle: string;
select: string;
+ tableOptions: string;
+ expand?: string;
+ collapse?: string;
};
/* 4. Events (alphabetical) */
/** Event triggered every time the editable cells are changed, updating the original rows data */
@@ -797,7 +800,11 @@ export class DataGrid {
icon-only
data-sortable={this.isSortable}
>
-
+
{this.isSortable && (
@@ -1311,6 +1318,7 @@ export class DataGrid {
component: this,
rowIndex,
columnIndex,
+ localization: this.localization,
})}
);
diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md
index c607a5f84e..ba1f894f5b 100644
--- a/packages/components/src/components/data-grid/readme.md
+++ b/packages/components/src/components/data-grid/readme.md
@@ -5,26 +5,26 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------- |
-| `fields` | `fields` | Input fields config array | `any` | `undefined` |
-| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` |
-| `heading` | `heading` | (optional) Heading string | `string` | `''` |
-| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` |
-| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` |
-| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` |
-| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` |
-| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` |
-| `localization` | -- | (optional) set localization for sort, toggle and select/deselect table Default is English. | `{ sortBy: string; toggle: string; select: string; }` | `undefined` |
-| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` |
-| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` |
-| `rows` | `rows` | Input data array | `any` | `undefined` |
-| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` |
-| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `string[]` | `[]` |
-| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` |
-| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns | `string` | `'Activate to sort column'` |
-| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` |
-| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` |
+| Property | Attribute | Description | Type | Default |
+| --------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| `fields` | `fields` | Input fields config array | `any` | `undefined` |
+| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` |
+| `heading` | `heading` | (optional) Heading string | `string` | `''` |
+| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` |
+| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` |
+| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` |
+| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` |
+| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` |
+| `localization` | -- | (optional) set localization for sort, toggle, select/deselect, table options, expand/collapse (html cell) Default is English. | `{ sortBy: string; toggle: string; select: string; tableOptions: string; expand?: string; collapse?: string; }` | `undefined` |
+| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` |
+| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` |
+| `rows` | `rows` | Input data array | `any` | `undefined` |
+| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` |
+| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `string[]` | `[]` |
+| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` |
+| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns | `string` | `'Activate to sort column'` |
+| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` |
+| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` |
## Events
diff --git a/packages/components/src/html/data-grid.html b/packages/components/src/html/data-grid.html
index ca25564166..d7b917b42f 100644
--- a/packages/components/src/html/data-grid.html
+++ b/packages/components/src/html/data-grid.html
@@ -805,11 +805,21 @@
],
];
+ const localization = {
+ sortBy: 'SortLoc',
+ toggle: 'ToggleLoc',
+ select: 'SelectLoc',
+ tableOptions: 'OptionsLoc',
+ expand: 'Klicken Sie zu expanden',
+ collapse: 'Klicken Sie zu collapsen',
+ };
+
// Pass in data
const table = document.querySelector('#table1');
table.fields = fields;
table.rows = rows;
+ table.localization = localization;
// table.addEventListener('scaleEdit', ({ detail }) => {
// const { rows, rowIndex, columnIndex, value } = detail;
diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
index 4c38c09346..47d83e740b 100644
--- a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
+++ b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
@@ -42,7 +42,7 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
},
description: `(optional) Title for sortable columns`,
control: { type: null },
- },
+ },
height: {
table: {
type: { summary: 'string' },
@@ -111,7 +111,7 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
table: {
type: { summary: 'object' },
},
- description: `(optional) localization object for sort by, toogle visibility and select/deselect all. The default value is English`,
+ description: `(optional) localization object for sort by, toogle visibility, select/deselect all, table settings, expand/collapse buttons. The default value is English. To provide localization, use object with next keys: 'sortBy', 'toggle', 'select', 'tableOptions', 'expand', 'collapse'`,
control: { type: null },
},
shadeAlternate: {