Analytics

TableToolbar

Dark Mode

테이블 상단 기능 바. useDataTable의 toolbarProps를 스프레드하면 검색·필터·정렬·필드 관리·건수·선택 삭제가 자동 연동됩니다. hideXxx props로 개별 기능을 비활성화할 수 있습니다.

import { TableToolbar } from "@/shared/ui/widget/analytics/table"

빌트인 기능 전체

다중 정렬, 필터 드롭다운, 필드 가시성, 검색 범위 선택, 커스텀 액션 버튼이 모두 포함된 형태입니다. useDataTable의 toolbarProps를 스프레드하면 이 구성이 자동으로 적용됩니다.

toolbarProps 스프레드 (권장)

// useDataTable의 toolbarProps를 스프레드 — 모든 기능 자동 연동
const table = useDataTable({ data, columns, pageSize: 10, editable: true });

<TableToolbar
  {...table.toolbarProps}
  onAddRow={handleAddRow}
  onAddColumn={handleAddColumn}
  onDeleteSelected={table.removeSelectedRows}
  onClearSelection={table.clearSelection}
/>

심플 모드 (검색 + 커스텀 액션)

빌트인 기능 없이 검색과 커스텀 actions만 사용하는 가장 간단한 형태입니다. 빌트인 props를 전달하지 않으면 해당 버튼이 자동으로 숨겨집니다.

심플 모드

// 빌트인 기능 숨기고 검색 + 커스텀 액션만
<TableToolbar
  searchPlaceholder="포트폴리오 검색..."
  hideFilter
  hideSort
  hideColumnVisibility
  actions={<ToolbarButton icon={Plus} label="추가" />}
/>

개별 Props 직접 구성

useDataTable 없이 직접 상태를 관리할 때의 전체 props 구성 예시입니다.

수동 구성

// 개별 Props로 직접 구성
<TableToolbar
  searchValue={search}
  onSearchChange={setSearch}
  filters={filters}
  onFilterChange={setFilters}
  onClearFilters={() => setFilters([])}
  filterableColumns={filterableColumns}
  sortConfigs={sortConfigs}
  onSortConfigsChange={setSortConfigs}
  sortableColumns={sortableColumns}
  visibleKeys={visibleKeys}
  onVisibleKeysChange={setVisibleKeys}
  allColumns={allColumns}
  totalCount={data.length}
  // 선택 삭제 — 콜백 전달 시 자동 표시
  selectedCount={selectedCount}
  onDeleteSelected={handleDelete}
  onClearSelection={handleClear}
  // 행/열 추가 — 콜백 전달 시 자동 표시
  onAddRow={handleAddRow}
  onAddColumn={handleAddColumn}
  // 개별 기능 숨기기
  hideViews
/>

빌트인 기능 상세

1. 필터 드롭다운

filterableColumns에 지정된 각 컬럼의 고유값을 체크박스로 표시합니다. 여러 컬럼에 동시에 필터를 적용할 수 있으며, 활성 필터 수가 뱃지로 표시됩니다.

관련 props: filterableColumns, filters, onFilterChange, onClearFilters, activeFilterCount

2. 검색 범위 선택

검색 바의 / 키를 클릭하면 검색 대상 컬럼을 선택하는 팝오버가 열립니다. 선택하면 해당 컬럼만 대상으로 검색합니다. null이면 전체 컬럼 대상으로 검색합니다.

관련 props: searchableColumns, searchKey, onSearchKeyChange

3. 보여줄 필드 선택

'필드' 드롭다운으로 테이블에 표시할 컬럼을 토글합니다. 기본값은 전체 선택이며, 숨긴 컬럼 수가 뱃지로 표시됩니다.

관련 props: allColumns, visibleKeys, onVisibleKeysChange

4. 다중 정렬

'정렬' 버튼 클릭 시 다중 정렬 모달이 열립니다. 1차·2차·3차 정렬 컬럼을 추가/삭제/순서 변경할 수 있으며, 각각 오름차순/내림차순을 선택합니다.

관련 props: sortableColumns, sortConfigs, onSortConfigsChange

5. 커스텀 슬롯

actions (중앙), trailing (우측 끝) 슬롯으로 커스텀 버튼을 배치할 수 있습니다. ToolbarButton 컴포넌트로 Toolbar UI와 일관된 버튼을 만들 수 있습니다.

Props

TableToolbar

Prop	Type	Required	Default	설명
`searchValue`	`string`	—	''	검색 입력 값. toolbarProps 자동 포함.
`onSearchChange`	`(value: string) => void`	—	—	검색 값 변경 콜백.
`filters`	`FilterValue[]` { columnKey: string; comparison: FilterComparison; value: string }[]	—	—	활성 필터 목록.
`onFilterChange`	`(filters: FilterValue[]) => void`	—	—	필터 변경 콜백.
`filterableColumns`	`{ key: string; label: string }[]`	—	—	필터 가능 컬럼 목록.
`sortConfigs`	`SortConfig[]`	—	—	다중 정렬 설정.
`onSortConfigsChange`	`(configs: SortConfig[]) => void`	—	—	정렬 변경 콜백.
`sortableColumns`	`{ key: string; label: string }[]`	—	—	정렬 가능 컬럼 목록.
`visibleKeys`	`string[]`	—	—	표시 중인 컬럼 키.
`onVisibleKeysChange`	`(keys: string[]) => void`	—	—	컬럼 가시성 변경 콜백.
`allColumns`	`{ key: string; label: string }[]`	—	—	전체 컬럼 목록.
`sourceGroups`	`SourceGroup[]`	—	—	소스 그룹. 필드 드롭다운에서 소스별 구분 + 색상 변경.
`onSourceColorChange`	`(sourceId: string, color: string) => void`	—	—	소스 그룹 색상 변경 콜백.
`totalCount`	`number`	—	—	전체 건수. toolbarProps 자동 포함.
`selectedCount`	`number`	—	—	선택된 행 수. toolbarProps 자동 포함.
`onDeleteSelected`	`() => void`	—	—	선택 행 삭제 콜백. 설정 시 삭제 바 자동 표시.
`onClearSelection`	`() => void`	—	—	선택 해제 콜백.
`onAddRow`	`() => void`	—	—	행 추가 콜백. 설정 시 행 추가 버튼 표시.
`onAddColumn`	`() => void`	—	—	열 추가 콜백. 설정 시 열 추가 버튼 표시.
`views`	`SavedView[]`	—	—	저장된 뷰 목록.
`onSaveView`	`(name: string) => void`	—	—	뷰 저장 콜백. 설정 시 뷰 관리 버튼 표시.
`onLoadView`	`(viewId: string) => void`	—	—	뷰 로드 콜백.
`hideSearch`	`boolean`	—	false	검색 바 숨김.
`hideFilter`	`boolean`	—	false	필터 버튼 숨김.
`hideColumnVisibility`	`boolean`	—	false	필드 관리 버튼 숨김.
`hideSort`	`boolean`	—	false	정렬 버튼 숨김.
`hideViews`	`boolean`	—	false	뷰 관리 버튼 숨김.
`hideSelection`	`boolean`	—	false	선택 삭제 바 숨김.
`hideAddRow`	`boolean`	—	false	행 추가 버튼 숨김.
`hideAddColumn`	`boolean`	—	false	열 추가 버튼 숨김.
`actions`	`ReactNode`	—	—	커스텀 액션 슬롯.
`trailing`	`ReactNode`	—	—	우측 끝 커스텀 영역.
`className`	`string`	—	—	추가 클래스.

ToolbarButton

Prop	Type	Required	Default	설명
`icon`	`ComponentType<{ className?: string }>`	✓	—	아이콘 컴포넌트.
`onClick`	`() => void`	—	—	클릭 핸들러.
`label`	`string`	—	—	접근성 라벨.
`active`	`boolean`	—	—	활성 상태 스타일.
`children`	`ReactNode`	—	—	아이콘 옆 텍스트.