Navigation
The navigation feature allows you to track the focused cell and to focus a cell from outside the VirtualTable component.
Overview
Appuyez sur @ pour sélectionner une colonne
Current Cell:
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
import React, { useState } from 'react';
import VirtualTable from "../../../../../src/components/VirtualTable"
import { data } from "./mock";
const columns = [{
key: 'id',
header: '#'
}, {
key: 'first_name',
header: 'Firstname',
size: 1
}, {
key: 'last_name',
header: 'Lastname',
size: 1
}, {
key: 'full_name',
header: 'Fullname',
size: 1
} ];
const NavigationBasic = () => {
const [currentCell, setCurrentCell] = useState();
function handleFocusChange({ to }) {
if (!to) {
setCurrentCell('--');
} else {
setCurrentCell(`Line: ${to[0]}, Column: ${columns[to[1]].key}`);
}
}
return (
<>
<VirtualTable
config={{
alwaysInEdition: true,
columns
}}
data={data}
onFocusChange={handleFocusChange}
tableKeyName="doc-navigation-Basic"
/>
<div>Current Cell: {currentCell}</div>
</>
);
};
export default NavigationBasic;Set focus
Appuyez sur @ pour sélectionner une colonne
Current Cell:
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
import React, { useState, useRef } from 'react';
import VirtualTable from "../../../../../src/components/VirtualTable"
import { data } from "./mock";
const columns = [{
key: 'id',
header: '#'
}, {
key: 'first_name',
header: 'Firstname',
size: 1
}, {
key: 'last_name',
header: 'Lastname',
size: 1
}, {
key: 'full_name',
header: 'Fullname',
size: 1
} ];
const columns2 = [{
key: 'id',
header: '#'
}, {
key: 'first_name',
header: 'Firstname',
size: 1
}, {
key: 'test',
header: 'pseudo',
size: 1,
}, {
key: 'last_name',
header: 'Lastname',
size: 1
}, {
key: 'full_name',
header: 'Fullname',
size: 1
} ];
const NavigationSetFocus = () => {
const [currentCell, setCurrentCell] = useState();
const tableRef = useRef();
const [sup, setSup] = useState(false);
function handleFocusChange({ to }) {
if (!to) {
setCurrentCell('--');
} else {
setCurrentCell(`Line: ${to[0]}, Column: ${columns[to[1]].key}`);
}
}
function handleClick(rowIndex, columnIndex) {
tableRef?.current?.setCurrentCell(rowIndex, columnIndex);
}
return (
<>
<VirtualTable
config={{
alwaysInEdition: true,
columns: sup ? columns2 : columns
}}
data={data}
onFocusChange={handleFocusChange}
tableKeyName="doc-navigation-SetFocus"
ref={tableRef}
/>
<div>Current Cell: {currentCell}</div>
<button onClick={() => setSup((prev) => !prev)}>Toogle column</button>
<button onClick={() => handleClick(1, 2)}>Line 1, col 2</button>
<button onClick={() => handleClick(4, 0)}>Line 4, col 0</button>
</>
);
};
export default NavigationSetFocus;