yisu-kim / patient-information-table

환자 정보를 보여주는 테이블 & 차트

View Demo

About The Project

환자 정보 테이블

테이블 페이지네이션

테이블 컬럼 기준 정렬

테이블 컬럼 기준 필터링

테이블 상세 정보 행

Built With

• React
• TypeScript
• axios
• styled-components

Getting Started

Installation

To install packages:

yarn install

To serve the app:

yarn start

Features

1. 환자 정보를 탐색할 수 있는 테이블 컴포넌트

   • API 호출을 통해 환자 정보 가져오기
   • 환자 id, 성별, 생년월일, 나이, 인종, 민족, 사망 여부 컬럼 및 데이터 표현
   • 버튼을 통해 페이지 이동 가능, 한 페이지당 row 갯수 선택 가능, 데이터 총합 관련 정보 표시
   • 환자 id, 성별, 생년월일, 인종, 민족, 사망여부 컬럼으로 정렬 가능

2. 테이블 필터링

   • API 호출을 통해 필터링 정보 가져오기
   • 성별, 나이, 인종, 민족, 사망 여부 컬럼으로 필터링 가능
   • 이 중 나이 컬럼의 경우 단일 값이 아닌 범위로 필터링

3. 환자 상세 정보 표현

   • API 호출을 통해 선택한 환자의 상세 정보 가져오기
   • 환자 정보를 표현하는 행 클릭 시 그 아래 상세 정보를 보여주는 행 추가
   • 상세 정보에는 전체 방문 수와 진단 정보 표현