-
Notifications
You must be signed in to change notification settings - Fork 2.2k
/
ColumnsReordering.tsx
127 lines (114 loc) · 3.3 KB
/
ColumnsReordering.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { useCallback, useMemo, useState } from 'react';
import DataGrid from '../../src';
import type { Column, SortColumn } from '../../src';
import type { Props } from './types';
interface Row {
readonly id: number;
readonly task: string;
readonly complete: number;
readonly priority: string;
readonly issueType: string;
}
function createRows(): Row[] {
const rows: Row[] = [];
for (let i = 1; i < 500; i++) {
rows.push({
id: i,
task: `Task ${i}`,
complete: Math.min(100, Math.round(Math.random() * 110)),
priority: ['Critical', 'High', 'Medium', 'Low'][Math.round(Math.random() * 3)],
issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.round(Math.random() * 3)]
});
}
return rows;
}
const columns: Column<Row>[] = [
{
key: 'id',
name: 'ID',
width: 80
},
{
key: 'task',
name: 'Title',
resizable: true,
sortable: true,
draggable: true
},
{
key: 'priority',
name: 'Priority',
resizable: true,
sortable: true,
draggable: true
},
{
key: 'issueType',
name: 'Issue Type',
resizable: true,
sortable: true,
draggable: true
},
{
key: 'complete',
name: '% Complete',
resizable: true,
sortable: true,
draggable: true
}
];
export default function ColumnsReordering({ direction }: Props) {
const [rows] = useState(createRows);
const [columnsOrder, setColumnsOrder] = useState((): readonly number[] =>
columns.map((_, index) => index)
);
const [sortColumns, setSortColumns] = useState<readonly SortColumn[]>([]);
const onSortColumnsChange = useCallback((sortColumns: SortColumn[]) => {
setSortColumns(sortColumns.slice(-1));
}, []);
const reorderedColumns = useMemo(() => {
return columnsOrder.map((index) => columns[index]);
}, [columnsOrder]);
const sortedRows = useMemo((): readonly Row[] => {
if (sortColumns.length === 0) return rows;
const { columnKey, direction } = sortColumns[0];
let sortedRows: Row[] = [...rows];
switch (columnKey) {
case 'task':
case 'priority':
case 'issueType':
sortedRows = sortedRows.sort((a, b) => a[columnKey].localeCompare(b[columnKey]));
break;
case 'complete':
sortedRows = sortedRows.sort((a, b) => a[columnKey] - b[columnKey]);
break;
default:
}
return direction === 'DESC' ? sortedRows.reverse() : sortedRows;
}, [rows, sortColumns]);
function onColumnsReorder(sourceKey: string, targetKey: string) {
setColumnsOrder((columnsOrder) => {
const sourceColumnOrderIndex = columnsOrder.findIndex(
(index) => columns[index].key === sourceKey
);
const targetColumnOrderIndex = columnsOrder.findIndex(
(index) => columns[index].key === targetKey
);
const sourceColumnOrder = columnsOrder[sourceColumnOrderIndex];
const newColumnsOrder = columnsOrder.toSpliced(sourceColumnOrderIndex, 1);
newColumnsOrder.splice(targetColumnOrderIndex, 0, sourceColumnOrder);
return newColumnsOrder;
});
}
return (
<DataGrid
columns={reorderedColumns}
rows={sortedRows}
sortColumns={sortColumns}
onSortColumnsChange={onSortColumnsChange}
direction={direction}
defaultColumnOptions={{ width: '1fr' }}
onColumnsReorder={onColumnsReorder}
/>
);
}