[scss] react-data-grid 에서 기본 sorting 화살표 보여주기.

프로젝트에서 표가 들어가는 부분들은 react-data-grid 라는 라이브러리를 사용하고 있다. 

헤더를 클릭하면 내림차순, 오름차순, 정렬 기준 선택없음 총 세개의 상태를 보여주는데, 

정렬 기준 선택없음의 상태일 때는 화살표가 보이지 않아 화살표를 기본으로 보여주기 위한 방법을 찾았다.

바로 저 세모...

내림차순 & 오름차순이 될 때마다 애니메이션이 들어간 세모가 휘릭휘릭 바뀌기에 처음에는 그 세모가 들어갈 요소만을 선택해 span 의 last-child 뒤에 pseudo selector 를 이용해서 content 를 집어넣었는데, 그렇게 하니 한 번 집어넣은 가상 요소를 내림차순 혹은 오름차순 등 표가 선택될 때마다 안 보이게 해주는 것이 더 복잡해질 뿐이었다 ^ㅠ^

:has 를 사용하고 싶었으나 sass 에서는 변환이 안되어 사용이 어렵다는 것을 여러번 시도한 후에 깨달았고, :not 을 통해 span 안에 세모 모양의 svg 가 존재하는지 안하는지만을 체크하는 방법으로 노선을 변경했지만 -> 역시 pseudo element 를 보이게 하는 것은 쉬우나 클래스네임을 건드리지 않고 & html selector 를 사용하지 않는 방법으로 안 보이게 하는 방법이 좀 어렵...

머리 좀 비우고 다시 한 번 생각해보니 내가 너무 정확한, 작은 요소만을 정확하게 타게팅하려고 하는 것이 문제였다는 생각이 들었다. 다시 다른 페이지로 가서 해당 라이브러리가 쓰인 곳을 뜯어보니 더 큰 요소에서 클래스네임 외에도 바뀌는 attribute 가 있었다! 이 attribute 는 내림차순 & 오름차순일 때만 나타났기 때문에 default 세모가 나타날 자리에 클래스네임을 주고 & 그 클래스네임을 가진 요소 중에 해당 attribute 를 갖지 않은 요소들 중 맨 마지막 요소에만 적용을 시키는 식으로 scss 만으로 기본 sorting 화살표를 보여줄 수 있었다. 예이!

.default_sorting {
    &:not([aria-sort^='ascending'], [aria-sort^='descending']) {
        .rdg-header-sort-cell:last-child {
            &::after {
                content: '↕︎';
            }
        }
    }
}

실제 코드는 더 복잡한 층위지만,,, 뭐 대충이렇다. 

아, ^= 는 처음에 저 단어로 시작해야지만 해당이 되고, *= 는 마지막 부분에 저 단어가 들어있어도 해당이 된다!

 

출처:

stack overflow: How to select element that does not contain class

mdn: :not()