데이터를 표현하는 가장 단순한 방법이 테이블일 것이다. 생각보다 테이블은 많은 곳에 응용할 수 있고 많이 사용하는 만큼 정확한 디자인이 필요하다!
Row 스타일
그리드 : 모든 셀의 border를 준 스타일 셀간 구별이 편하지만 시각적 방해가 심하다.
가로선 : 모든 셀의 border를 위 아래만 준 스타일 가장 일반적으로 많이 사용
행마다 다른 배경색 : 짝수 혹은 홀수 마다 행을 다르게 적용한 스타일
미적용 : 아무런 스타일 없이 그대로 적용 위치파악이 어려워 아주 적은 데이터셋에 적용
대비
헤더 : 폰트, 배경을 통해 헤더부분만 강조한다.
셀 : 셀에서 계층구조를 준다 4500명(10%)라면 10%는 경시헤 표현, 혹은 색상을 이용해 상승 하락을 표현하기도 한다.
footer: 푸터행은 따로 강조해 일반 행과 구별한다.
정렬
영문-한글은 좌측정렬, 숫자는 우측정렬이 기본이고 헤더는 셀을 따라간다.
숫자표시는 monospace를 사용해 한눈에 들어오도록 한다
라인
라인의 크기는 축약40px, 일반48px, 여유56px을 따른다.
간격
셀은 좌우로 최소 16px씩의 공간의 여유를 두어야한다.
하위 텍스트
만약 테이블 셀중 중요도가 낮거나 연관된 경우 계층구조를 두고 다른 셀의 하위 구조로 둔다
(ex 이름 아래 이메일)
기능
헤더 고정 : 행의 개수가 많아서 스크롤이 필요하다면 헤더를 fix하는 것도 방법이다.
열 고정 : 속성이 많은 경우 id와 같은 속성열을 fix한다.
Hover액션 : 행에 hover시 수정, 편집과 같은 이벤트 실행 인터페이스를 보여준다.
체크박스 : 여러셀을 동시에 작업할 경우 체크박스를 이용해 선택하고 추가적으로 이벤트를 실행할 수 있도록 한다. 헤더에 추가적으로 전체선택 전체취소 토글도 좋은 방법이다.
필터 : 필터 인터페이스를 만들어 대용량 데이터에서 필요한 데이터만 볼수 있도록 한다.
pagenation : 많은 데이터를 보여줄 때 사용가능
정렬 : 헤더클릭을 통해 원하는 열기준 데이터 정렬이 가능 하도록 한다.
출처: https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a
