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

aditi2708

aditi2708

Posted on August 10, 2022

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

Image description

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>



Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
aditi2708
aditi2708

Posted on August 10, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related