<!-- source-hash: e750ae57313642f731dcbf7079870828 -->
Storybook stories for the `TableColumnFilterDropdown` component, demonstrating a compact filter icon button used in table column headers with checkbox-based filtering options.

## Key Components

- **`Default`** — Base state with no active filters; icon renders subtly
- **`WithActiveFilters`** — Pre-selected filters (`active`, `inactive`) causing the icon to highlight with accent color
- **`InTableHeaderContext`** — Decorates the story inside a styled table header row for visual context
- **`MultipleColumns`** — Side-by-side Status and Type filter dropdowns sharing a single `TableFilters` state via `useState`
- **`Interactive`** — Fully stateful story showing real-time filter selection feedback

## Usage Example

```typescript
import { TableColumnFilterDropdown } from '../components/ui/table/table-column-filter-dropdown'
import type { FilterOption, TableFilters } from '../components/ui/table/types'

const statusOptions: FilterOption[] = [
  { id: 'active', label: 'Active', value: 'active' },
  { id: 'inactive', label: 'Inactive', value: 'inactive' },
]

function TableHeader() {
  const [filters, setFilters] = useState<TableFilters>({})

  return (
    <div className="flex items-center gap-2">
      <span>Status</span>
      <TableColumnFilterDropdown
        columnKey="status"
        columnLabel="Status"
        filterOptions={statusOptions}
        filters={filters}
        onFilterChange={setFilters}
        placement="bottom-start"
      />
    </div>
  )
}
```

## Notes

- `placement` prop accepts `bottom-start`, `bottom-end`, or `bottom` (controllable via Storybook select)
- The filter icon highlights automatically when `filters[columnKey]` contains active selections
- `onFilterChange` receives the full updated `TableFilters` object, making it suitable for shared multi-column filter state