Column Filter

Betav1.0.0

엔터프라이즈 데이터 테이블의 컬럼 헤더 필터 패턴 (SAP UI5 ResponsiveTable 참고). 헤더 라벨 옆 깔때기 아이콘 → 클릭 시 Popover 로 컬럼 단위 필터(텍스트 contains / 다중 선택). 활성 필터는 아이콘이 강조됩니다. 값은 부모(테이블)가 관리하는 controlled 컴포넌트.

Loading…

import {
  ColumnFilter,
  ColumnFilterHead,
} from "@/components/ui/column-filter";
import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
} from "@/components/ui/table";

const [orderNo, setOrderNo] = React.useState("");
const [statuses, setStatuses] = React.useState<string[]>([]);

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>
        <ColumnFilterHead label="Sales Order No.">
          <ColumnFilter
            type="text"
            title="Sales Order No."
            value={orderNo}
            onChange={setOrderNo}
            placeholder="500009…"
          />
        </ColumnFilterHead>
      </TableHead>

      <TableHead>
        <ColumnFilterHead label="Status">
          <ColumnFilter
            type="select"
            title="Status"
            value={statuses}
            onChange={setStatuses}
            options={[
              { value: "New", label: "New" },
              { value: "Delivered", label: "Delivered" },
            ]}
          />
        </ColumnFilterHead>
      </TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>{/* … 필터된 rows */}</TableBody>
</Table>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/column-filter.json

Composition

ColumnFilterHead
├── Label (컬럼 이름)
└── ColumnFilter (깔때기 트리거)
    ├── type="text" — Input contains
    └── type="select" — Checkbox 다중 선택

Dependencies

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

npm packages

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

Groudit components

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