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
| function MonComposant() {
const [data, setData] = useState([]);
const [statut, setStatut] = useState([]);
const [assign, setAssign] = useState([]);
const [dataLoaded, setDataLoaded] = useState(false);
...
useEffect(() => {
Promise.all([
fetch(`${config.SERVER_URL}/data/get`).then(resp => resp.json()).then(result => {setData(result)}),
fetch(`${config.SERVER_URL}/statut/get`).then(resp => resp.json()).then(result => {setStatut(result)}), // récupère la liste des statuts
fetch(`${config.SERVER_URL}/assign/get`).then(resp => resp.json()).then(result => setAssign(result)), // récupère la liste des utilisateurs
]).then(setDataLoaded(true))
}, []);
...
const columns = useMemo(
() => [
{
accessorKey: "nom",
header: "Nom",
},
{
accessorKey: "statut_nom",
header: "Statut",
filterVariant: 'select',
filterSelectOptions: statut.map(s => s.nom),
},
{
accessorKey: "assign_nom",
header: "Assigné à",
filterVariant: 'select',
filterSelectOptions: assign.map(u => u.login),
},
],
[dataLoaded]
);
const table = useMaterialReactTable({
columns,
data,
enableEditing: true,
enableRowSelection: true,
...
});
...
return (
<MaterialReactTable table={table} />
);
} |
