Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

data-grid extend localization #2344

Merged
merged 3 commits into from
Oct 10, 2024
Merged

data-grid extend localization #2344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f74e009
feat: table options localization
tshimber Jul 31, 2024
3569324
feat: localization for expand / collapse in data grid
tshimber Aug 29, 2024
61d53f2
fix: storybook fixed
tshimber Aug 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,6 @@ export interface Cell {
rowIndex,
columnIndex,
isAutoWidthCheck,
localization,
}): HTMLElement;
}
16 changes: 12 additions & 4 deletions packages/components/src/components/data-grid/cell-handlers/html-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
<scale-button
variant="secondary"
size="small"
icon-only
inner-aria-label={`Activate to ${
content.isExpanded ? 'collapse' : 'expand'
} content`}
inner-aria-label={getAriaLabel()}
onClick={() => {
content.isExpanded = !content.isExpanded;
component.forceRender++;
Expand Down
12 changes: 10 additions & 2 deletions packages/components/src/components/data-grid/data-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -797,7 +800,11 @@ export class DataGrid {
icon-only
data-sortable={this.isSortable}
>
<scale-icon-service-settings accessibilityTitle="Table options"></scale-icon-service-settings>
<scale-icon-service-settings
accessibilityTitle={
this.localization?.tableOptions || 'Table options'
}
></scale-icon-service-settings>
</scale-button>
<scale-menu-flyout-list>
{this.isSortable && (
Expand Down Expand Up @@ -1311,6 +1318,7 @@ export class DataGrid {
component: this,
rowIndex,
columnIndex,
localization: this.localization,
})}
</td>
);
Expand Down
40 changes: 20 additions & 20 deletions packages/components/src/components/data-grid/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 10 additions & 0 deletions packages/components/src/html/data-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
},
description: `(optional) Title for sortable columns`,
control: { type: null },
},
},
height: {
table: {
type: { summary: 'string' },
Expand Down Expand Up @@ -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: {
Expand Down
Loading