shadcn table 다운로드 -Shadcn shadcn table 소스 코드 다운로드

shadcn table

기타 소스코드

1.0.0

다운로드

Shadcn 테이블

서버 측 정렬, 필터링 및 페이지 매김이있는 Shadcn 테이블입니다. create-t3-app 으로 부트 스트랩됩니다.

Shadcn 테이블

경고이 프로젝트는 여전히 개발 중이며 생산 사용이 준비되지 않았습니다.
새로운 기술 (PPR, React Compiler)을 사용하여 변경 될 수 있으며 응용 프로그램을 중단시킬 수 있습니다.

기술 스택

프레임 워크 : Next.js
스타일링 : Tailwind CSS
UI 구성 요소 : Shadcn/UI
테이블 패키지 : Tanstack/React-Table
데이터베이스 : 네온
ORM : 이슬비 ORM
검증 : Zod

특징

서버 측 페이지 매김, 정렬 및 필터링 ( useDataTable 후크를 통해)
사용자 정의 가능한 열 ( dataTable 및 columns 소품)
동적 인 Defounced 검색 필터 및 패싯 필터 ( filterFields Prop)
검색, 필터 및 동작이있는 동적 Data-Table-Toolbar
고급 필터링과 같은 선택적 Notion ( enableAdvancedFilter Prop)
행 선택에 플로팅 바와 같은 선형 Linear ( floatingBar Prop)

현지에서 실행

저장소를 복제하십시오

git clone https://github.com/sadmann7/shadcn-table

PNPM을 사용하여 종속성을 설치하십시오
```
pnpm install
```
.env.example 을 .env 로 복사하고 변수를 업데이트하십시오.
```
cp .env.example .env
```
개발 서버를 시작하십시오
```
pnpm run dev
```
데이터베이스 스키마를 푸시하십시오
```
pnpm run db:push
```

나만의 테이블을 만듭니다

정확한 특정 위치에서 다음 폴더와 파일을 프로젝트에 (구성) 복사하십시오.

src/components/data-table
src/db/index.ts
src/hooks
src/lib
src/types

또한 필요한 Shadcn 구성 요소 및 기타 필요한 패키지를 다음 명령으로 설치하십시오.

pnpm dlx shadcn@latest init

pnpm dlx shadcn@latest add badge button calendar checkbox command dialog dropdown-menu form input label popover select separator skeleton sonner table toggle-group tooltip drawer

pnpm add drizzle-orm postgres @tanstack/react-table zod @t3-oss/env-nextjs
pnpm add -D drizzle-kit dotenv-cli pg tsx

환경 변수를 구성한 다음 데이터베이스 URL을 설정합니다.이 예에서는 PlanetScale MySQL2 데이터베이스를 사용하고 있습니다. 우리의 스키마도 이것을 사용하여 만들어 질 것입니다.
데이터베이스 조치 :이를 위해 선택한 ORM을 사용할 수 있지만이 특정 예를 위해 Drizzle ORM 및 Neon을 사용하고 있습니다.
예를 들어 tasks 테이블을 사용하겠습니다.
- @/db/schema.ts 에서 테이블 스키마를 만듭니다
- 관련 ZOD 유효성 검사 @/lib/validations/tasks.ts 파일을 만듭니다
테이블 설정
- 파일 생성 : page.tsx 작성하고 필요한 경우 앱 디렉토리에서 layout.tsx 작성하십시오.
- 복사 디렉토리 : ./_components 및 ./_lib 디렉토리를 프로젝트에 복사하십시오.
- 쿼리/돌연변이 업데이트 : 데이터베이스 작업과 일치하도록 ./_lib/queries.ts 및 ./_lib/actions.ts 수정하십시오.
- 플로팅 바 업데이트 : 업데이트 ./_components/tasks-table-floating-bar.tsx 는 테이블의 작업에 맞게 일치합니다 (선택 사항).
- 테이블 열 정의 : 업데이트 ./_components/tasks-table-columns.tsx 를 사용하여 열 헤더, 작업, 검색 가능 및 여과 가능한 열을 정의합니다.
- 설정 데이터 가져 오기 : in ./page.tsx , getTasksPromise , getTaskCountByStatus 및 getTaskCountByPriority 정의.
- 가져 오기 데이터 : ./_components/tasks-table.tsx 에서 React.use hook를 사용하여 getTasksPromise 약속을 소비하십시오. 약속은 suspense 경계를 유발하기 위해 전달됩니다.
- 테이블 열 메모리 : ./_components/tasks-table.tsx , React.useMemo hook를 사용하여 ./_components/tasks-table-columns.tsx 에 정의 된 메모 컬링.
- 데이터 테이블 후크 사용 : ./_components/tasks-table.tsx 에서 서버-면적 페이지 매김, 정렬 및 필터링을 처리하려면 ./hooks/useTasksTable.tsx .
- 작업 테이블 제공 업체 제거 : ./components/tasks-table-provider.tsx 에서 제공자를 제거하십시오. 이 공급자는 Floating Bar 및 Advanced Filter와 같은 추가 기능을 전시하는 데 사용됩니다.