Skip to content

Commit f00f7f8

Browse files
felix-icofelix-ico
authored
Fix/data grid sortable title (#2143)
* fix: only show sortable title when column is actually sortable * docs: document new prop
1 parent e78af7c commit f00f7f8

File tree

3 files changed

+31
-20
lines changed

3 files changed

+31
-20
lines changed

‎packages/components/src/components/data-grid/data-grid.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,8 @@ export class DataGrid {
107107
@Prop() styles: any;
108108
/** (optional) Set to false to hide table, used for nested tables to re-render upon toggle */
109109
@Prop() visible?: boolean = true;
110+
/** (optional) Title for sortable columns */
111+
@Prop() sortableColumnTitle?: string = 'Activate to sort column';
110112
/**
111113
* (optional) set localization for sort, toggle and select/deselect table
112114
* Default is English.
@@ -1008,7 +1010,7 @@ export class DataGrid {
10081010
}
10091011
return (
10101012
<th
1011-
title="Activate to sort column"
1013+
title={sortable ? this.sortableColumnTitle : undefined}
10121014
{...props}
10131015
{...(sortable
10141016
? {

‎packages/components/src/components/data-grid/readme.md

+20-19
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,26 @@
55

66
## Properties
77

8-
| Property | Attribute | Description | Type | Default |
9-
| ---------------- | ----------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------- |
10-
| `fields` | `fields` | Input fields config array | `any` | `undefined` |
11-
| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` |
12-
| `heading` | `heading` | (optional) Heading string | `string` | `''` |
13-
| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` |
14-
| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` |
15-
| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` |
16-
| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` |
17-
| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` |
18-
| `localization` | -- | (optional) set localization for sort, toggle and select/deselect table Default is English. | `{ sortBy: string; toggle: string; select: string; }` | `undefined` |
19-
| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` |
20-
| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` |
21-
| `rows` | `rows` | Input data array | `any` | `undefined` |
22-
| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` |
23-
| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `string[]` | `[]` |
24-
| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` |
25-
| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` |
26-
| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` |
8+
| Property | Attribute | Description | Type | Default |
9+
| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------- |
10+
| `fields` | `fields` | Input fields config array | `any` | `undefined` |
11+
| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` |
12+
| `heading` | `heading` | (optional) Heading string | `string` | `''` |
13+
| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` |
14+
| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` |
15+
| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` |
16+
| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` |
17+
| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` |
18+
| `localization` | -- | (optional) set localization for sort, toggle and select/deselect table Default is English. | `{ sortBy: string; toggle: string; select: string; }` | `undefined` |
19+
| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` |
20+
| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` |
21+
| `rows` | `rows` | Input data array | `any` | `undefined` |
22+
| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` |
23+
| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `string[]` | `[]` |
24+
| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` |
25+
| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns | `string` | `'Activate to sort column'` |
26+
| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` |
27+
| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` |
2728

2829

2930
## Events

‎packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx

+8
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,14 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
3535
description: `(optional) Heading string`,
3636
control: { type: null },
3737
},
38+
sortableColumnTitle: {
39+
table: {
40+
type: { summary: 'string' },
41+
defaultValue: { summary: 'Activate to sort column' },
42+
},
43+
description: `(optional) Title for sortable columns`,
44+
control: { type: null },
45+
},
3846
height: {
3947
table: {
4048
type: { summary: 'string' },

0 commit comments

Comments
 (0)