Question: How to achieve the expanded view when a table item is clicked?

On clicking the table item the entire column is selected and displayed and the other columns are not displayed. On clicking the item again a card with more details is displayed.

 <Tbody>
                    {data.map((d) => (
                        <Tr>
                            <Td>{d.Employee}</Td>
                            <Td>{d.HrsWorked}</Td>
                            <Td>{d.Overtime}</Td>
                            <Td>{d.SubmitedOn}</Td>
                            <Td>{d.ApprovedBy}</Td>
                            <Td>{d.ApprovedOn}</Td>
                            <Td>{d.Status}</Td>

                        </Tr>
                    ))}

                </Tbody>