Skip to content

Commit

Permalink
feat: localization for expand / collapse in data grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@tshimber
tshimber committed Aug 29, 2024
1 parent f74e009 commit 3569324
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 25 deletions.
1 change: 1 addition & 0 deletions packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
View file
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
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
5 changes: 4 additions & 1 deletion packages/components/src/components/data-grid/data-grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,14 +112,16 @@ export class DataGrid {
/** (optional) Title for sortable columns */
@Prop() sortableColumnTitle?: string = 'Activate to sort column';
/**
* (optional) set localization for sort, toggle, select/deselect, table options
* (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 @@ -1316,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
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, select/deselect, table options Default is English. | `{ sortBy: string; toggle: string; select: string; tableOptions: 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
2 changes: 2 additions & 0 deletions packages/components/src/html/data-grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -810,6 +810,8 @@
toggle: 'ToggleLoc',
select: 'SelectLoc',
tableOptions: 'OptionsLoc',
expand: 'Klicken Sie zu expanden',
collapse: 'Klicken Sie zu collapsen',
};

// Pass in data
Expand Down

0 comments on commit 3569324

Please sign in to comment.