Skip to content

Commit 4dfc710

Browse files
Alyar666Alyar666
authored
DataGrid: Implement column reordering using keyboard navigation (DevExpress#29573)
Co-authored-by: Alyar <>
1 parent 9ec119a commit 4dfc710

File tree

52 files changed

+1741
-241
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1741
-241
lines changed

‎apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { Meta, StoryObj } from '@storybook/react';
22
import React, { useCallback, useState } from "react";
3+
import { countries } from './data';
34

45
import DataGrid, {
56
Column,
@@ -13,13 +14,126 @@ import DataGrid, {
1314
import DiscountCell from "./DiscountCell";
1415
import ODataStore from "devextreme/data/odata/store";
1516

17+
const columnOptions = {
18+
regularColumns: [
19+
'ID',
20+
'Country',
21+
'Area',
22+
'Population_Urban',
23+
'Population_Rural',
24+
'Population_Total',
25+
'GDP_Agriculture',
26+
'GDP_Industry',
27+
'GDP_Services',
28+
'GDP_Total',
29+
],
30+
customCommandColumns: [
31+
{
32+
type: 'buttons',
33+
fixedPosition: 'left',
34+
buttons: [{ text: 'text' }],
35+
},
36+
'ID',
37+
'Country',
38+
'Area',
39+
'Population_Urban',
40+
'Population_Rural',
41+
'Population_Total',
42+
'GDP_Agriculture',
43+
'GDP_Industry',
44+
'GDP_Services',
45+
'GDP_Total',
46+
],
47+
fixedColumns: [
48+
{
49+
dataField: 'ID',
50+
fixed: true,
51+
},
52+
{
53+
dataField: 'Country',
54+
fixed: true,
55+
},
56+
'Country',
57+
'Area',
58+
'Population_Urban',
59+
'Population_Rural',
60+
'Population_Total',
61+
'GDP_Agriculture',
62+
'GDP_Industry',
63+
{
64+
dataField: 'GDP_Services',
65+
fixed: true,
66+
fixedPosition: 'right'
67+
},
68+
{
69+
dataField: 'GDP_Total',
70+
fixed: true,
71+
fixedPosition: 'right'
72+
},
73+
],
74+
bandColumns: ['Country', 'Area', {
75+
caption: 'Population',
76+
columns: [{
77+
caption: 'Total',
78+
dataField: 'Population_Total',
79+
format: 'fixedPoint',
80+
}, {
81+
caption: 'Urban',
82+
dataField: 'Population_Urban',
83+
format: 'percent',
84+
}],
85+
}, {
86+
caption: 'Nominal GDP',
87+
columns: [{
88+
caption: 'Total, mln $',
89+
dataField: 'GDP_Total',
90+
format: 'fixedPoint',
91+
sortOrder: 'desc',
92+
}, {
93+
caption: 'By Sector',
94+
columns: [{
95+
caption: 'Agriculture',
96+
dataField: 'GDP_Agriculture',
97+
width: 95,
98+
format: {
99+
type: 'percent',
100+
precision: 1,
101+
},
102+
}, {
103+
caption: 'Industry',
104+
dataField: 'GDP_Industry',
105+
width: 80,
106+
format: {
107+
type: 'percent',
108+
precision: 1,
109+
},
110+
}, {
111+
caption: 'Services',
112+
dataField: 'GDP_Services',
113+
width: 85,
114+
format: {
115+
type: 'percent',
116+
precision: 1,
117+
},
118+
}],
119+
}],
120+
}],
121+
};
122+
16123
const meta: Meta<typeof DataGrid> = {
17124
title: 'Example/DataGrid',
18125
component: DataGrid,
19126
parameters: {
20127
// More on Story layout: https://storybook.js.org/docs/configure/story-layout
21128
layout: 'padded',
22129
},
130+
argTypes: {
131+
columns: {
132+
options: Object.keys(columnOptions),
133+
mapping: columnOptions,
134+
control: { type: 'radio' },
135+
},
136+
}
23137
};
24138

25139
export default meta;
@@ -101,3 +215,17 @@ export const Overview: Story = {
101215
);
102216
}
103217
}
218+
219+
export const ColumnReordering: Story = {
220+
args: {
221+
allowColumnReordering: true,
222+
rtlEnabled: false,
223+
columnHidingEnabled: true,
224+
dataSource: countries,
225+
// @ts-expect-error
226+
columns: 'regularColumns',
227+
columnFixing: {
228+
enabled: false
229+
},
230+
}
231+
}

‎apps/react-storybook/stories/examples/datagrid/data.ts‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
export const countries = [{
2+
ID: 1,
3+
Country: 'Brazil',
4+
Area: 8515767,
5+
Population_Urban: 0.85,
6+
Population_Rural: 0.15,
7+
Population_Total: 205809000,
8+
GDP_Agriculture: 0.054,
9+
GDP_Industry: 0.274,
10+
GDP_Services: 0.672,
11+
GDP_Total: 2353025,
12+
}, {
13+
ID: 2,
14+
Country: 'China',
15+
Area: 9388211,
16+
Population_Urban: 0.54,
17+
Population_Rural: 0.46,
18+
Population_Total: 1375530000,
19+
GDP_Agriculture: 0.091,
20+
GDP_Industry: 0.426,
21+
GDP_Services: 0.483,
22+
GDP_Total: 10380380,
23+
}, {
24+
ID: 3,
25+
Country: 'France',
26+
Area: 675417,
27+
Population_Urban: 0.79,
28+
Population_Rural: 0.21,
29+
Population_Total: 64529000,
30+
GDP_Agriculture: 0.019,
31+
GDP_Industry: 0.183,
32+
GDP_Services: 0.798,
33+
GDP_Total: 2846889,
34+
}, {
35+
ID: 4,
36+
Country: 'Germany',
37+
Area: 357021,
38+
Population_Urban: 0.75,
39+
Population_Rural: 0.25,
40+
Population_Total: 81459000,
41+
GDP_Agriculture: 0.008,
42+
GDP_Industry: 0.281,
43+
GDP_Services: 0.711,
44+
GDP_Total: 3859547,
45+
}, {
46+
ID: 5,
47+
Country: 'India',
48+
Area: 3287590,
49+
Population_Urban: 0.32,
50+
Population_Rural: 0.68,
51+
Population_Total: 1286260000,
52+
GDP_Agriculture: 0.174,
53+
GDP_Industry: 0.258,
54+
GDP_Services: 0.569,
55+
GDP_Total: 2047811,
56+
}, {
57+
ID: 6,
58+
Country: 'Italy',
59+
Area: 301230,
60+
Population_Urban: 0.69,
61+
Population_Rural: 0.31,
62+
Population_Total: 60676361,
63+
GDP_Agriculture: 0.02,
64+
GDP_Industry: 0.242,
65+
GDP_Services: 0.738,
66+
GDP_Total: 2147952,
67+
}, {
68+
ID: 7,
69+
Country: 'Japan',
70+
Area: 377835,
71+
Population_Urban: 0.93,
72+
Population_Rural: 0.07,
73+
Population_Total: 126920000,
74+
GDP_Agriculture: 0.012,
75+
GDP_Industry: 0.275,
76+
GDP_Services: 0.714,
77+
GDP_Total: 4616335,
78+
}, {
79+
ID: 8,
80+
Country: 'Russia',
81+
Area: 17098242,
82+
Population_Urban: 0.74,
83+
Population_Rural: 0.26,
84+
Population_Total: 146544710,
85+
GDP_Agriculture: 0.039,
86+
GDP_Industry: 0.36,
87+
GDP_Services: 0.601,
88+
GDP_Total: 1857461,
89+
}, {
90+
ID: 9,
91+
Country: 'United States',
92+
Area: 9147420,
93+
Population_Urban: 0.81,
94+
Population_Rural: 0.19,
95+
Population_Total: 323097000,
96+
GDP_Agriculture: 0.0112,
97+
GDP_Industry: 0.191,
98+
GDP_Services: 0.797,
99+
GDP_Total: 17418925,
100+
}, {
101+
ID: 10,
102+
Country: 'United Kingdom',
103+
Area: 244820,
104+
Population_Urban: 0.82,
105+
Population_Rural: 0.18,
106+
Population_Total: 65097000,
107+
GDP_Agriculture: 0.007,
108+
GDP_Industry: 0.21,
109+
GDP_Services: 0.783,
110+
GDP_Total: 2945146,
111+
}];
112+

0 commit comments

Comments
 (0)