How to position header, sorting and filtering icons in one line in table header using React Table

[ghost]

Hello,

this is the code for stackoverflow topic: https://stackoverflow.com/questions/70645557/how-to-position-all-elements-of-table-header-in-one-line-using-react-table?noredirect=1#comment124885410_70645557 the code looks much better in stackoverflow.

In the project we use React Table to render table data. I need to fix a bug and need to achieve the result that all elements in React Table column header are in one line. So far title and arrow for sorting are in one line, but filtering icon is below

This is how current code looks like
<StyledTableHeader
key={idx}
isSorted={column.isSorted}
key={column.id}

<span
    {...column.getHeaderProps(
        column.getSortByToggleProps(),
        {
            className:
                column.collapse
                    ? 'collapse'
                    : '',
        }
    )}
>
    {column.render('Header')}
</span>
<span>
    {column.isSorted ? (
        column.isSortedDesc ? (
            <StyledArrowDownwardIcon />
        ) : (
            <StyledArrowUpwardIcon />
        )
    ) : (
        ''
    )}
</span>
{columnsCount > 5 ? (
    <StyledHeaderDivFlex>
        {column.canFilter
            ? column.render(
                  'Filter'
              )
            : null}
    </StyledHeaderDivFlex>
) : (
    <StyledHeaderDivBlock>
        {column.canFilter
            ? column.render(
                  'Filter'
              )
            : null}
    </StyledHeaderDivBlock>
)}

when I wrap all elements of header into div and give props to have flex-direction row it partly works. You can see in the picture below that filtering icon actually goes inline with header, but sorting icon disappears. When I press on the header it only changes color to orange and I can see that sorting works, but it does not display sorting icon.

<StyledTableHeader
key={idx}
isSorted={column.isSorted}
key={column.id}

<div
    style={{
        display: 'flex',
        flexDirection: 'row',
    }}
>
<span
    {...column.getHeaderProps(
        column.getSortByToggleProps(),
        {
            className:
                column.collapse
                    ? 'collapse'
                    : '',
        }
    )}
>
    {column.render('Header')}
</span>
<span>
    {column.isSorted ? (
        column.isSortedDesc ? (
            <StyledArrowDownwardIcon />
        ) : (
            <StyledArrowUpwardIcon />
        )
    ) : (
        ''
    )}
</span>
{columnsCount > 5 ? (
    <StyledHeaderDivFlex>
        {column.canFilter
            ? column.render(
                  'Filter'
              )
            : null}
    </StyledHeaderDivFlex>
) : (
    <StyledHeaderDivBlock>
        {column.canFilter
            ? column.render(
                  'Filter'
              )
            : null}
    </StyledHeaderDivBlock>
)}
</div>

I have tried also to give to display:flex; flex-direction:row, but it then goes crazy and it gives this propertly to parent for all headers, not touching single column header.

Can You please advise how I can fix it ?

thanks !!!!

Appreciate Your support