뒤로
manki kim
manki kim ·

Flutter DataGrid 개발 노트 - 행의 그룹핑

Flutter 데이터그리드 패키지인 PlutoGrid 의 행 그룹핑 기능을 개발 하고 있습니다.

대부분의 기능이 구현되었지만 발목을 잡는 기능 하나가 있습니다.

구현된 기능을 우선으로, 발목을 잡는 기능은 문서 마지막 섹션에서 확인 하실 수 있습니다.



[개발 완료] 컬럼에 의한 행 그룹핑

  • 복수의 컬럼으로 멀티 그룹핑 가능. (이미지는 2개의 컬럼으로 그룹핑)
  • 동적으로 그룹상태를 변경하거나 해제 가능.
  • 그룹핑 된 상태에서 행의 추가 및 삭제 가능. (멀티 셀렉트 가능)



[개발완료] 그룹핑 된 상태에서의 정렬



[개발완료] 그룹핑 된 상태에서 필터링



[개발완료] 그룹핑 된 상태에서 페이지네이션

  • 가장 상위의 그룹행을 기준으로 페이지네이션.



[개발중] 선택 된 특정 행 또는 그룹들을 드래그하여 이동

  • 위 이미지는 그룹핑 되지 않은 상태에서의 행 이동 입니다.(기존 버전)



  • 위 이미지는 그룹핑 된 상태에서 특정 행들을 불규칙적으로 선택하여 드래그 합니다.


아직 구현하지 않은 기능으로 UI/UX 적인 고민에 빠져 있습니다.

선택 된 행이 그룹이거나 어떤 그룹의 하위 행이거나 하는 상태가 중첩 되어 있습니다.

그룹인 경우는 접혀 있거나 펼쳐져 있을 수 있습니다.

그룹은 또다른 그룹을 포함 할 수 있습니다.

각 그룹의 하위 행 또는 하위 그룹은 컬럼을 기준으로 동일한 값의 조건으로 묶여 있습니다.


이러한 조건들 속에서 행을 이동 한 결과는,

경우에 따라 하위 행이 모두 다른 행으로 이동하여 해당 그룹행은 삭제 되거나

접혀 있는 그룹으로 행을 이동 하는 경우는 사용자가 펼쳐야 결과를 확인 할 수 있습니다.

또한, 이동 결과가 중복된 조건으로 그룹된 상태가 되면 중복 된 행은 삭제되고 삭제된 그룹의 하위 행들을 남아 있는 그룹의 하위 행으로 포함 시켜야 합니다.


행의 그룹핑 기능의 거의 마지막 단계인데 행의 이동이 발목을 잡네요.

개발적으로는 구현이 어렵지 않지만 사용자가 행의 이동의 결과를 쉽게 이해 할 수 있게

UI/UX 를 구현하는 것이 어렵습니다.



PlutoGrid

멀티 플랫폼 데이터그리드 Flutter 패키지

6

댓글

로그인 후 댓글을 남길 수 있습니다.

박종한
박종한

오 플러터 웹을 위한 기능인건가요?? 아니면 태블릿PC를 겨냥한 기능인가요? 플러터 웹을 사용하면 어떤 이점이 있나요?(리액트 등과 비교해서)

manki kim
manki kim

Flutter 가 지원하는 플랫폼에서 모두 동작 합니다. 모바일, 웹, 윈도우, 맥, 리눅스. 제 패키지 사용자들을 분석 할 수 없어서 정확하진 않지만 Github Issue 를 참고해보면 주로 웹, 데스크톱이며 모바일에서도 사용되긴 합니다. 리엑트와 비교 했을 때 이점이라면, 멀티 플랫폼 지원이 아닐까 생각합니다.

강명균
강명균

제가 이해한 대로 생각나는 것을 혹시 도움될까 하여 남깁니다. (단순 의견입니다. 잘못 이해하고 있거나, 말이 안 된다면 그냥 무시해 주세요) 그룹핑을 위한 행이 따로 존재하고, 상위 분류를 선택해서 옮기면 그 밑에 있는 것들은 같이 움직이는 것 같습니다. 그룹의 상/하위를 나누는 것을 레벨이라고 표현하겠습니다. 그리고 구조를 잘 모르기 때문에 개발이 가능하다는 전제로 말씀드립니다. 여기서 3가지 경우로 나눌 수 있을 것 같습니다. 1) 그룹을 선택한 후, 같은 레벨의 그룹이 접혀져 있는 곳 아래로 옮긴다면 단순 위치조정을 기대할 것 같습니다. 이 경우에 만약 최상위의 그룹 행끼리라면 단순 이동이 될 테고(이 때 최상위 그룹 변경이 되는 것보다는 위치 조정을 원할 것 같습니다),  중간이나 하위 그룹행을 선택해서 역시 접혀 있는 같은 레벨의 그룹행(다른 상위 그룹에 속한) 밑에 옮길 때 위치 조정과 함께 상위 그룹은 바뀔 것으로 기대할 것 같습니다. 2) 만약 선택해서 옮기는 그룹 행이 그보다 낮은 레벨의 그룹 행에 들어간다면 윗 글에서 말씀하신 것처럼 해당 그룹행을 삭제하고 하위의 그룹들을 바뀐 상위 그룹 밑에 넣는 것을 기대할 것 같습니다. -> 이 경우 조금 애매한 점이, 예를 들어 상-중-하의 그룹핑이 있을 때 '상'의 그룹을 선택해서 '하'의 위치에 넣는 경우,  옮겨지는 그룹의 여러 '중'그룹들이 옮겨지는 위치의 '중'그룹으로 모두 바뀌는 게 아니고, '중'그룹을 유지한채 '상'그룹만 바뀌는 걸 기대하지 않을까 싶습니다. 3) 낮은 레벨의 그룹 행을 선택하여, 접혀져 있는 더 상위의 그룹 행 밑에 넣는 경우, 부자연스럽지만 접혀져 있는 상위 그룹으로 소속이 바뀌거나, 아예 안 옮겨지는게 맞지 않을까 싶습니다. 다만 위의 경우는 선택한 행들이 모두 같은 레벨일 경우이고, 서로 다른 레벨의 행을 선택하면 각자의 방식대로 처리하면 될 것 같은데, 아래와 같은 문제가 있을 것 같습니다. -> 1)과 3)의 경우가 섞여 버리면, 단순 이동과 그룹 변동이 섞이게 됩니다. 예를 들어 숫자-알파벳-한글로 그룹핑 구조가 되어 있다고 치고, 숫자 '3'의 최상위 그룹과 숫자 '4'에 속하는 한글 그룹 '가'를 같이 선택한 다음, 접혀져 있는 숫자 '1'의 최상위 그룹 밑으로 옮긴다면, 숫자 '3'의 그룹은 단순이동이지만 한글 '가'의 그룹은 최상위 그룹 '4'를 다른 것으로 바꿔야 합니다. 이 때 숫자 '1'로 가야 할지, 숫자 '3'으로 갈지인데 둘 다 아주 자연스럽지는 않은 것 같습니다. 의도된 행동으로 나올 것 같지는 않아, 이 경우 그래도 같이 선택한 것이 같은 그룹으로 묶기 위한 의도라고 봐서, 숫자 '3'으로 바꾼다고 알림창을 띄우고 유저가 선택하도록 하는게 어떨까 싶습니다. ( 2)의 경우는 1)과 3)과 섞여도 각각 따로 처리가 될 것 같습니다)

manki kim
manki kim

오~ 많이 도움이 될거 같습니다. 개발하는데 참고하겠습니다. 말씀해주신 정책대로 잘 구현만 하면 될거 같습니다. 감사합니다.~~~

강명균
강명균

만약 도움이 되었다면 다행입니다. 좋은 패키지 만들어 주셔서 감사합니다.