Colorer les lignes et les en-têtes d'un tableau avec BootStrap

Bonjour tout le monde,

J'ai besoin d'afficher 3 types de données avec des champs différents dans le même tableau. Pour ce faire, je veux avoir 3 en-têtes avec une couleur différente pour chacun.

J'utilise bootstrap (boosted pour être plus précis qui est la charte graphique basé sur bootstrap de là où je fais mon stage) pour faire mon design et mon code est en Javascript avec React.

J'ai écrit le code suivant pour faire cela (j'ai essayé de le simplifier mais il est normalement reproductible) :

Code:

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
 
import * as React from "react";
import { useEffect, useState } from "react";
import { nanoid } from "nanoid";
 
//props object
type IPropsTable={
    currentDatas: (DataType1 | DataType2 | DataType3 | undefined;
}
 
const TableRequest: React.FC<IPropsTable> = ({ currentDatas }) => {
 
    const [existData1, setExistData1] = useState(false);
    const [existData2, setExistData2] = useState(false);
    const [existData3, setExistData3] = useState(false);
 
    useEffect(()=>{
        if (currentDatas) {
            currentDatas.map((currentData) => {
                if (currentData.type === "data1") {
                    setExistData1(true);
                } else if (currentData.type === "data2") {
                    setExistData2(true);
                } else if (currentData.type === "data3") {
                    setExistData3(true);
                }
            })
        }
    },[currentDatas])   
 
    function renderTableHeaderData1() {
        let header = ['someField1', 'someField2']
 
        return header.map((key, index) => {
           return <th key={index}  scope="col">{key.toUpperCase()}</th>
        })
    }
 
    function renderTableHeaderData2() {
        let header = ['someOtherField1', 'someOtherField2']
 
        return header.map((key, index) => {
           return <th key={index}  scope="col">{key.toUpperCase()}</th>
        })
    }
 
    function renderTableHeaderData3() {
        let header = ['someOtherOtherField1', 'someOtherOtherField2']
 
        return header.map((key, index) => {
           return <th key={index}  scope="col">{key.toUpperCase()}</th>
        })
    }
 
    function renderTableData() {
        if(currentDatas){
            return currentDatas.map((session) => {
                if (session.type === "data1") {
                    return (
                        <tr key={nanoid()} className="warning">
                            <td>{session.someField1}</td>
                            <td>{session.someField2}</td>
                        </tr>
                    )
                } else if (session.type === "data2") {
                    return (
                        <tr key={nanoid()} className="info">
                            <td>{session.someOtherField1}</td>
                            <td>{session.someOtherField2}</td>
                        </tr>
                    )
                } else if (session.type === "data3") {
                    return (
                        <tr key={nanoid()} className="success">
                            <td>{session.someOtherOtherField1}</td>
                            <td>{session.someOtherOtherField2}</td>
                        </tr>
                    )
                }
            })
        } else{return undefined}
    }  
 
    return (
        <>
            <div>
                <table className="table table-sm">
                    <caption>Result Search</caption>
                    <thead>
                        {existData1? 
                            <tr className="thead-warning">{renderTableHeaderData1()}</tr>
                            : <></>
                        }
                        {existData2? 
                            <tr className="thead-info">{renderTableHeaderData2()}</tr>
                            : <></>
                        }
                        {existData3? 
                            <tr className="thead-success">{renderTableHeaderData3()}</tr>
                            : <></>
                        }
                    </thead>
                    <tbody>
                        {renderTableData()}
                    </tbody>
                </table>
            </div>
        </>
    )
}
 
export default TableRequest;

Comme vous pouvez le voir dans le code ci-dessus, j'assigne une classe css à chacun de mes <tr> (warning pour data1, info pour data2 et success pour data3). Mais lorsque mon composant est rendu, aucune couleur n'apparaît et le tableau est complètement blanc, que ce soit pour chacun des trois en-têtes ou pour les données contenues dans chaque ligne du tableau.

L'image ci-dessous montre le tableau que j'obtiens avec le code actuel qui est tout blanc (les grands rectangles sur l'image servent à couvrir les données sensibles) :
Pièce jointe 622204

J'ai essayé d'utiliser les classes thead-warning, thead-info et thead-success pour les classes css de mon en-tête de tableau tr, elles semblaient plus adaptées. Mais même résultat, aucune couleur n'est affichée.

Est-ce que quelqu'un voit ce que je fais de mal et pourrait me guider dans la bonne direction, je ne comprends vraiment pas où est mon problème.