I am working with an empty array in React that I translate into state. When the array is empty, I want to insert a text that says "no match events yet..." into a react-bootstrap Table's tbody.
In the current setup, I am struggling to center the text in the middle of the Card.
const [matchEvents, setMatchEvents] = useState([]);
return (
<Card>
<Table size="sm">
<thead>
<tr>
<th style={{ width: "33.33%" }}>Event</th>
<th style={{ width: "33.33%" }}>Time</th>
<th style={{ width: "33.33%" }}>Period</th>
</tr>
</thead>
{matchEvents.length !== 0 ? (
<tbody>
{
//Code for mapping object to table goes here
}
</tbody>
) : (
<tbody>
<tr>
<td />
<td
style={{
display: "flex",
position: "absolute",
}}
>
No Match Events Yet...
</td>
<td />
</tr>
</tbody>
)}
</Table>
</Card>
);
To try and achieve the desired alignment, I attempted adding <tr> and <td> as placeholders at the top to position the text in the center of the card. However, I encountered issues with inline styling and overriding them using !important.