Prevent default sorting icon from rendering in "selection" column.

[teddieliljekvist]

So I have a table where I have column sorting and want to have a default Icon to indicate that sorting is possible. The problem is that the app also renders a default icon on the row-selection column.
I´ve tried display: none on the first of type but this only results in removing all of the icons.
Does anyone have a sollution for this or is anyone better than me at css and can explain how I can select for that specific element?

This is what the table jsx looks like:

<table className={styles.userTable} {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>
                  <div
                    {...column.getSortByToggleProps()}
                    style={{
                      cursor: 'pointer',
                      height: 30,
                      display: 'flex',
                      flexDirection: 'row',
                      justifyContent: 'left',
                      alignItems: 'center',
                    }}
                  >
                    {column.render('Header')}
                    <span className={styles.sortIconSpan}>
                      {column.isSorted ? (
                        column.isSortedDesc ? (
                          <>
                            <span className={styles.sortIcon}>
                              <IoIosArrowDown />
                            </span>
                          </>
                        ) : (
                          <>
                            <span className={styles.sortIcon}>
                              <IoIosArrowUp />
                            </span>
                          </>
                        )
                      ) : (
                        <>
                          <span className={styles.sortIcon}>
                            <MdUnfoldMore />
                          </span>
                        </>
                      )}
                    </span>
                  </div>
                  <div>{column.canFilter ? column.render('Filter') : null}</div>
                </th>
              ))}
            </tr>
          ))}
          <tr>
            <th
              colSpan={visibleColumns.length}
              style={{
                textAlign: 'left',
              }}
            >
              <GlobalFilter
                preGlobalFilteredRows={preGlobalFilteredRows}
                globalFilter={state.globalFilter}
                setGlobalFilter={setGlobalFilter}
              />
            </th>
          </tr>
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return (
                    <td
                      onClick={() => {
                        row.toggleRowSelected();
                      }}
                      {...cell.getCellProps()}
                    >
                      {cell.render('Cell')}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>

[teddieliljekvist]

Of course the minute after I reach out here for help I solved it myself.

For the record what I did was to wrap the columns in the conditional canSort property.

{column.canSort ? (
                      <span className={styles.sortIconSpan}>
                        {column.isSorted ? (
                          column.isSortedDesc ? (
                            <>
                              <span className={styles.sortIcon}>
                                <IoIosArrowDown />
                              </span>
                            </>
                          ) : (
                            <>
                              <span className={styles.sortIcon}>
                                <IoIosArrowUp />
                              </span>
                            </>
                          )
                        ) : (
                          <>
                            <span className={styles.defaultSortIcon}>
                              <MdUnfoldMore />
                            </span>
                          </>
                        )}
                      </span>
                    ) : null}