Data table

데이터 테이블

Shadcn UI 구성 요소 및 Tanstack 테이블 로 구축 된 데이터 테이블입니다.

• Tanstack-Table
• Shadcn-ui

이 테이블은 Shadcn 문서에있는 훌륭한 튜토리얼 및 예제에 따라 구축되어 확장되었습니다.

구성

이 프로젝트는 React-Vite를 기반으로하며 TypeScript를 사용합니다.

• React Vite 설치 및 지침을 따르십시오. 프로젝트 작성 :

 $ npm create vite@latest

• Shadcn 및 Tailwind를 설치하십시오 : 링크를 따르십시오

• 그런 다음 각 Shadcn 구성 요소를 별도로 설치합니다.

 $ npx shadcn-ui@latest add dropdown-menu
$ npx shadcn-ui@latest add button

데이터

이 표는 가상의 직원 목록을 보여줍니다.

데이터는 단순히 실제 데이터베이스에서 가져 오기보다는 프로젝트 자체의 배열의 가짜 데이터입니다.

특징

테이블의 기능입니다.

도구 모음 :

• 검색 필드 : 이름 별 동적 검색.
• 패싯 필터 : 열 값으로 필터링 ( 위치 , 상태 ); 값은 열 값에 따라 동적으로 나열됩니다.
  • 활성 필터와 클리어 필터 - 버튼을 표시하는 필터 태그 .
• 열 가시성 : 표시되는 열을 선택하는 버튼.
• 재설정 : 모든 필터 및 선택을 지우겠습니다.

테이블:

• 정렬 : 선택한 열은 오름차순 또는 내림차순으로 정렬 할 수 있습니다.
• 행 선택 : 첫 번째 열 확인란은 행을 선택합니다.
• 추가 작업 드롭 다운 : 각 행에는 행 끝에 추가 작업이 표시됩니다. 첫 번째는 현재 기능적이며 직원 ID를 클립 보드에 복사하고 토스트 메시지를 표시합니다.
• 열 재주문 : 마지막 행에는 열이 오른쪽 또는 왼쪽으로 이동하는 화살표가 있습니다.

보행인:

• 선택된 행에 대한 정보 : 선택한 행 수를 보여줍니다.
• 페이지 당 동적 행 버튼 : 사용하면 페이지 당 행을 5 단계로 증가 시키거나 줄일 수 있습니다.
• Pagination 버튼 : 앞으로, 뒤로, 마지막 또는 첫 페이지로 이동합니다.

열 가시성 :

---

페이스 필터 드롭 다운 :

---

태그 필터 및 클리어 버튼 :

---

더 많은 행동 :

---

보행인:

구조 ?

테이블은 3 가지 주요 부분으로 구성됩니다.

1. 데이터를 가져오고 테이블 구성 요소를 렌더링하는 페이지 구성 요소.
2. 테이블 구성 요소.
3. 열 변수 개별 열 내용의 구조 및 스타일을 포함하는 변수.

재사용 가능한 구성 요소 :

1. Pagination은 구성 요소에 있으며 다른 테이블에 대해 재사용 할 수 있습니다.
2. 측면 필터는 긴 코드가 필요하며 자체 구성 요소로 분리됩니다. 다른 테이블에 대해 재사용 할 수 있습니다.
3. 작은 팝업 토스트는 자체 재사용 가능한 구성 요소입니다.

다음 단계?

table 테이블 구성 요소를 재사용 가능한 구성 요소로 추상화하고 작은 구성 요소로 나눕니다.

table이 테이블 데이터를 소품으로 전달하지 않도록 컨텍스트를 소개합니다 -> 다른 구성 요소에서 발생할 수 있으므로 데이터 조작 방법을 처리하기가 더 쉽습니다.

기술

• 반응-비이트
• Shadcn ui
• Tanstack-Table
• 아이콘에 반응합니다
• 꼬리 바람
• TypeScript