Neumorphism UI

Data Table

정렬, 필터, 페이지 이동, 행 선택이 필요한 데이터 목록에 사용합니다. 단순한 정적 행에는 Table을 사용하세요.

미리보기

워크스페이스 프로젝트 관리

하나의 테이블 상태로 프로젝트 검색·필터, 열 정렬, 페이지를 넘는 행 선택, 페이지 크기 변경을 처리합니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/data-table

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

워크스페이스 프로젝트 관리

npx shadcn@latest add @neumorphism-ui/data-table @neumorphism-ui/checkbox @neumorphism-ui/input @neumorphism-ui/select @neumorphism-ui/button
Registry JSON

사용법

데이터와 열을 정의하고 필요한 기능을 갖춘 TanStack 테이블을 생성해 DataTable에 전달하세요. 검색, 열 제목, 페이지 이동은 같은 테이블 인스턴스와 연결합니다.

"use client";

import { columnVisibilityFeature, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
import { DataTable } from "@/components/ui/data-table";

const features = tableFeatures({ columnVisibilityFeature, rowSelectionFeature, rowSortingFeature });
const data = [{ name: "Atlas", seats: 12 }, { name: "Beacon", seats: 4 }];
const columns = [
  { accessorKey: "name", header: "Project", enableSorting: false },
  { accessorKey: "seats", header: "Seats", enableSorting: false },
];

export default function Example() {
  const table = useTable({ features, data, columns });
  return <DataTable table={table} caption="Workspace projects" />;
}

API 레퍼런스

데이터와 상태는 TanStack Table 인스턴스가 소유하며 UI는 표의 렌더링을 담당합니다. 예제는 고정된 행 ID로 페이지와 필터가 바뀌어도 선택을 유지합니다. 데이터는 예시입니다.

컴포넌트속성타입기본값설명
DataTabletableReactTable<TFeatures, TData>—행 모델과 상태를 가진 TanStack Table 인스턴스입니다.
DataTablecaption / emptyMessage / childrenstring / ReactNode—표 제목, 빈 결과 문구, 검색·필터 도구를 전달합니다.
DataTablePaginationlabels / pageSizesPaginationLabels / number[]—이전·다음 버튼, 페이지 문구와 페이지 크기를 지정합니다.

접근성

  • 01

    표 제목과 열의 aria-sort, 키보드로 접근할 수 있는 스크롤 영역을 제공합니다.

  • 02

    현재 페이지 선택과 전체 선택 개수를 구분하세요. 서버 페이지 방식에서는 선택 상태를 별도로 관리해야 합니다.