Highlight AnalyticalTable

Hello, I have a table with a button in one of the cells. When clicking the button, it open a window and I also want the relevant row in the table to be highlighted.

Appreciate ideas 😃 Thanks!

        <AnalyticalTable
            header={
                <FlexBox
                    className="m-2.5 w-full"
                    justifyContent="SpaceBetween"
                >
                    <Title
                        level="H2"
                        style={{ paddingLeft: '5px' }}
                        className="font-sapFontFamily font-black leading-5 text-base text-[#1D2D3E]"
                    >
                        <b>Top 20</b>
                    </Title>
                </FlexBox>
            }
            columns={[
                {
                    Header: 'Name',
                    accessor: 'class_desc',
                    disableResizing: true,
                },
                {
                    Header: 'Suppliers',
                    accessor: 'supplier_count',
                    disableResizing: true,
                    width: 90,
                    hAlign: 'Right',
                },
                {
                    Header: '% Total',
                    accessor: 'total_perc',
                    disableResizing: true,
                    width: 120,
                    hAlign: 'Right',
                },
                {
                    Header: '',
                    id: 'supplier-actions',
                    width: 70,
                    disableResizing: true,
                    Cell: ({ row }) => {
                        return (
                            <FlexBox>
                                <Button
                                    icon="edit"
                                    onClick={() => {
                                        navigate(
                                            `? open some page`
                                        )
                                    }}
                                />
                            </FlexBox>
                        )
                    },
                },
            ]}
            data={currCategories}
            loading={loading}
            visibleRows={numRows.toString()}
        ></AnalyticalTable>

[giladvidal]

Thanks @Lukas742 for helping in both options.

[Lukas742]

This looks more like the default selection behavior to me, if this is really meant for indication of navigation only, this could be confusing when working with tables in different applications.

To change the background color of the row you can create a plugin hook and add/overwrite styles there. codeSandbox