react-table でホバー時に別の内容を表示したい

やりたいこと

Youtube Studio のコンテンツのテーブルをホバーさせた時に、背景カラーと一緒に要素が変わるのをみて、面白そうだったので実装してみようと思いました。

実装

使用技術

• React
• react-table
• Chakra UI

コード

ホバー動作の検知

onMouseEnter と onMouseLeave を使って、状態を変化させています。

// 略
const [selectedContentId, setSelectedContentId] = useState('');
// 略
<Tbody {...getTableBodyProps()}>
{page.map((row) => {
    prepareRow(row);
    return (
    <Tr
        {...row.getRowProps()}
        key={row.id}
        onMouseEnter={() => {
            setSelectedContentId(row.original.content_id);
        }}
        onMouseLeave={() => {
            setSelectedContentId('');
        }}
        backgroundColor={
            row.original.content_id === selectedContentId
                ? 'gray.100'
                : ''
        }
    >
        {row.cells.map((cell) => (
        <Td {...cell.getCellProps()} key={cell.getCellProps().key}>
            {cell.render('Cell')}
        </Td>
        ))}
    </Tr>
    );
})}
</Tbody>

ホバーかどうか判定・出し分け

カラム(Cell)ごとに、出し分ける分岐を書いています。

const columns: Column<Type>[] = useMemo(
    () => [
        {
            Header: 'title',
            accessor: 'title',
            Cell: (row) => {
                return (
                    {row.row.original.content_id === selectedContentId ?
                    // ホバーが当たった時の表示内容
                        <TableHoveredColumn/>
                    :
                    // ホバーが当たっていない時の表示内容
                        <TableColumn/>
                } 
// 略