Table Toolbar

Betav1.0.0

테이블 상단의 액션 바. 타이틀+카운트, 검색, 생성/삭제 액션, 그리고 정렬·필터·설정·인쇄 아이콘 툴을 한 줄에 배치합니다. 엔터프라이즈 ListReport 헤더 패턴.

Loading…

import {
  TableToolbar,
  TableToolbarTitle,
  TableToolbarSpacer,
  TableToolbarSeparator,
  TableToolbarSearch,
  TableToolbarButton,
  TableToolbarIconButton,
  SortIcon, FilterIcon, SettingsIcon, PrinterIcon,
} from "@/components/ui/table-toolbar";

<TableToolbar>
  <TableToolbarTitle count={15}>Sales Orders</TableToolbarTitle>
  <TableToolbarSpacer />
  <TableToolbarSearch value={q} onChange={setQ} />
  <TableToolbarButton variant="primary">Create</TableToolbarButton>
  <TableToolbarButton>Delete</TableToolbarButton>
  <TableToolbarSeparator />
  <TableToolbarIconButton label="Sort"><SortIcon /></TableToolbarIconButton>
  <TableToolbarIconButton label="Filter" count={1}><FilterIcon /></TableToolbarIconButton>
  <TableToolbarIconButton label="Settings"><SettingsIcon /></TableToolbarIconButton>
  <TableToolbarIconButton label="Print"><PrinterIcon /></TableToolbarIconButton>
</TableToolbar>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/table-toolbar.json

Composition

TableToolbar
├── TableToolbarTitle (count)
├── TableToolbarSpacer — 좌/우 분리
├── TableToolbarSearch (value/onChange)
├── TableToolbarButton (variant=primary)
├── TableToolbarSeparator
└── TableToolbarIconButton (label, count) — Sort/Filter/Settings/Print

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
clsx	`2.1.1`
tailwind-merge	`3.6.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

utils