I need to display 3 types of data with different fields in the same table. To do this, I want to have 3 headers with a different color each.

I use bootstrap to make my design and my code is in Javascript with React.

I wrote the following code to do this (I tried to simplify it but it is normally reproducible)

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;

As you can see in the code above, I assign a css class to each of my <tr> (warning for data1, info for data2 and success for data3). But when my component is rendered, no color appears and the table is completely white, either for each of the three headers or for the data contained in each row of the table.

I tried using the thead-warning, thead-info and thead-success classes for my table header tr css classes, they seemed to be more suitable. But same result, no color is displayed.

Does anyone see what I'm doing wrong and could guide me in the right direction, I really don't understand where my problem is.

CodePudding user response：

Use <tr > or <tr > (depends what color you want).

Example:

<tr >
        <td>Success</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>

CodePudding user response：

My problem was with the name of the className I was using to color my table. By using bg-success instead of table-success everything works normally. But I don't understand why the table-success class doesn't work as in this example: example with table-success