Skip to content

Commit 7cdf4aa

Browse files
flagmanAndrewflagmanAndrew
committed
React
1 parent 6beb92b commit 7cdf4aa

File tree

12 files changed

+434
-499
lines changed

12 files changed

+434
-499
lines changed

‎React/src/App.css‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
.main {
1+
.tables {
2+
display: flex;
23
margin: 50px;
34
width: 90vw;
4-
}
5+
gap: 20px;
6+
}
7+
8+
.column {
9+
flex: 1;
10+
min-width: 0;
11+
}

‎React/src/App.tsx‎

Lines changed: 204 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,212 @@
1-
import { useCallback, useState } from 'react';
1+
import { useCallback, useState, useRef } from 'react';
22
import './App.css';
3+
import DataGrid, {
4+
Selection,
5+
Pager,
6+
Paging,
7+
Column,
8+
FilterRow,
9+
} from 'devextreme-react/data-grid';
10+
import type { DataGridRef, DataGridTypes } from 'devextreme-react/data-grid';
11+
import type { ScrollViewTypes } from 'devextreme-react/scroll-view';
12+
import type dxDataGrid from 'devextreme/ui/data_grid';
13+
import { customers } from './data/data';
314
import 'devextreme/dist/css/dx.material.blue.light.compact.css';
4-
import Button from 'devextreme-react/button';
15+
16+
interface ColumnOptions {
17+
[key: string]: any;
18+
}
19+
20+
const allowedPageSizes = [5, 10, 20];
21+
22+
function getColumnField(grid: dxDataGrid, fullName: string): string | null {
23+
const match = /\[(\d+)\]/.exec(fullName);
24+
const colIdx = match ? parseInt(match[1], 10) : null;
25+
if (colIdx === null) return null;
26+
return grid.columnOption(colIdx, 'dataField') as string;
27+
}
528

629
function App(): JSX.Element {
7-
var [count, setCount] = useState<number>(0);
8-
const clickHandler = useCallback(() => {
9-
setCount((prev) => prev + 1);
10-
}, [setCount]);
30+
const [pageSize, setPageSize] = useState(10);
31+
const [pageIndex, setPageIndex] = useState(0);
32+
const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
33+
const [columnFilterValues, setColumnFilterValues] = useState<ColumnOptions>({});
34+
const [columnSelectedFilterOps, setColumnSelectedFilterOps] = useState<ColumnOptions>({});
35+
const [columnSortOpts, setColumnSortOpts] = useState<ColumnOptions>({});
36+
37+
const mainGridRef = useRef<DataGridRef>(null);
38+
const dependentGridRef = useRef<DataGridRef>(null);
39+
const dependentScrollable = useRef<DataGridTypes.Scrollable | null>(null);
40+
41+
const updateFilterValue = useCallback((dataField: string, value: any) => {
42+
setColumnFilterValues((prev) => ({
43+
...prev,
44+
[dataField]: value,
45+
}));
46+
}, []);
47+
48+
const updateSelectedFilterOperation = useCallback((dataField: string, value: DataGridTypes.FilterOperation) => {
49+
setColumnSelectedFilterOps((prev) => ({
50+
...prev,
51+
[dataField]: value,
52+
}));
53+
}, []);
54+
55+
const onMainGridReady = useCallback((e: DataGridTypes.ContentReadyEvent) => {
56+
const scrollable = e.component.getScrollable();
57+
scrollable.on('scroll', (scrollEvent: ScrollViewTypes.ScrollEvent) => {
58+
if (dependentScrollable.current) {
59+
dependentScrollable.current.scrollTo(scrollEvent.scrollOffset);
60+
}
61+
});
62+
}, []);
63+
64+
const onDependentGridReady = useCallback((e: DataGridTypes.ContentReadyEvent) => {
65+
dependentScrollable.current = e.component.getScrollable();
66+
}, []);
67+
68+
const onOptionChanged = useCallback((e: DataGridTypes.OptionChangedEvent) => {
69+
const columnField = getColumnField(e.component, e.fullName);
70+
if (!columnField) return;
71+
72+
if (e.fullName.includes('sortOrder')) {
73+
if (dependentGridRef.current) {
74+
dependentGridRef.current.instance().clearSorting();
75+
}
76+
setColumnSortOpts((prev) => ({
77+
...Object.keys(prev).reduce((acc, key) => ({ ...acc, [key]: null }), {}),
78+
[columnField]: e.value,
79+
}));
80+
} else if (e.fullName.includes('filterValue')) {
81+
updateFilterValue(columnField, e.value);
82+
} else if (e.fullName.includes('selectedFilterOperation')) {
83+
updateSelectedFilterOperation(columnField, e.value);
84+
}
85+
}, [updateFilterValue, updateSelectedFilterOperation]);
86+
87+
const onSelectionChanged = useCallback((e: DataGridTypes.SelectionChangedEvent) => {
88+
setSelectedRowKeys(e.selectedRowKeys);
89+
}, []);
90+
91+
const onPageSizeChanged = useCallback((pageSize: number) => {
92+
setPageSize(pageSize);
93+
}, []);
94+
95+
const onPageIndexChanged = useCallback((pageIndex: number) => {
96+
setPageIndex(pageIndex);
97+
}, []);
98+
1199
return (
12-
<div className="main">
13-
<Button text={`Click count: ${count}`} onClick={clickHandler} />
100+
<div className="tables">
101+
<div className="column">
102+
<DataGrid
103+
ref={mainGridRef}
104+
dataSource={customers}
105+
keyExpr="ID"
106+
showBorders={true}
107+
height={440}
108+
selectedRowKeys={selectedRowKeys}
109+
onContentReady={onMainGridReady}
110+
onOptionChanged={onOptionChanged}
111+
onSelectionChanged={onSelectionChanged}
112+
>
113+
<Paging
114+
enabled={true}
115+
pageSize={pageSize}
116+
pageIndex={pageIndex}
117+
onPageSizeChange={onPageSizeChanged}
118+
onPageIndexChange={onPageIndexChanged}
119+
/>
120+
<Pager
121+
visible={true}
122+
showPageSizeSelector={true}
123+
allowedPageSizes={allowedPageSizes}
124+
showInfo={true}
125+
/>
126+
<FilterRow visible={true} />
127+
<Selection mode="single" />
128+
<Column
129+
dataField="CompanyName"
130+
selectedFilterOperation={columnSelectedFilterOps.CompanyName}
131+
filterValue={columnFilterValues.CompanyName}
132+
/>
133+
<Column
134+
dataField="City"
135+
selectedFilterOperation={columnSelectedFilterOps.City}
136+
filterValue={columnFilterValues.City}
137+
/>
138+
<Column
139+
dataField="State"
140+
selectedFilterOperation={columnSelectedFilterOps.State}
141+
filterValue={columnFilterValues.State}
142+
/>
143+
<Column
144+
dataField="Phone"
145+
selectedFilterOperation={columnSelectedFilterOps.Phone}
146+
filterValue={columnFilterValues.Phone}
147+
/>
148+
<Column
149+
dataField="Fax"
150+
selectedFilterOperation={columnSelectedFilterOps.Fax}
151+
filterValue={columnFilterValues.Fax}
152+
/>
153+
</DataGrid>
154+
</div>
155+
<div className="column">
156+
<DataGrid
157+
ref={dependentGridRef}
158+
dataSource={customers}
159+
keyExpr="ID"
160+
showBorders={true}
161+
height={440}
162+
selectedRowKeys={selectedRowKeys}
163+
onContentReady={onDependentGridReady}
164+
>
165+
<Paging
166+
enabled={true}
167+
pageSize={pageSize}
168+
pageIndex={pageIndex}
169+
/>
170+
<Pager
171+
visible={true}
172+
showPageSizeSelector={true}
173+
allowedPageSizes={allowedPageSizes}
174+
showInfo={true}
175+
/>
176+
<FilterRow visible={true} />
177+
<Selection mode="single" />
178+
<Column
179+
dataField="CompanyName"
180+
selectedFilterOperation={columnSelectedFilterOps.CompanyName}
181+
filterValue={columnFilterValues.CompanyName}
182+
sortOrder={columnSortOpts.CompanyName}
183+
/>
184+
<Column
185+
dataField="City"
186+
selectedFilterOperation={columnSelectedFilterOps.City}
187+
filterValue={columnFilterValues.City}
188+
sortOrder={columnSortOpts.City}
189+
/>
190+
<Column
191+
dataField="State"
192+
selectedFilterOperation={columnSelectedFilterOps.State}
193+
filterValue={columnFilterValues.State}
194+
sortOrder={columnSortOpts.State}
195+
/>
196+
<Column
197+
dataField="Phone"
198+
selectedFilterOperation={columnSelectedFilterOps.Phone}
199+
filterValue={columnFilterValues.Phone}
200+
sortOrder={columnSortOpts.Phone}
201+
/>
202+
<Column
203+
dataField="Fax"
204+
selectedFilterOperation={columnSelectedFilterOps.Fax}
205+
filterValue={columnFilterValues.Fax}
206+
sortOrder={columnSortOpts.Fax}
207+
/>
208+
</DataGrid>
209+
</div>
14210
</div>
15211
);
16212
}

‎React/src/components/orig_Grid.js‎

Lines changed: 0 additions & 73 deletions
This file was deleted.

0 commit comments

Comments
 (0)