<!-- source-hash: 7328c0a6f65fd12c32856a3433715721 -->
A React component that wraps `FiltersDropdown` to provide column-level filter UI for TanStack Table, reading and writing filter state directly on a `Column` instance.

## Key Components

### `DataTableColumnFilter`
The primary export — a client-side dropdown filter trigger rendered inside a table column header.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `column` | `Column<unknown, unknown>` | — | TanStack column instance (source of filter state) |
| `options` | `DataTableFilterOption[]` | — | Checkbox options shown in the dropdown |
| `placement` | `'bottom-start' \| 'bottom-end' \| 'bottom'` | `'bottom-start'` | Dropdown placement |
| `label` | `string` | — | Column label shown in the trigger and dropdown header |
| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Horizontal alignment of the trigger content |

### `DataTableColumnFilterProps`
TypeScript interface describing all accepted props.

### `EMPTY_ARRAY`
Module-level stable reference used to prevent unnecessary `useMemo` invalidations when no filter is active.

## Usage Example

```typescript
import { DataTableColumnFilter } from './data-table-column-filter'

// Inside a TanStack Table column header definition:
{
  header: ({ column }) => (
    <DataTableColumnFilter
      column={column}
      label="Status"
      options={[
        { label: 'Active', value: 'active' },
        { label: 'Inactive', value: 'inactive' },
      ]}
      placement="bottom-start"
      align="left"
    />
  ),
}
```

> **Note:** `column.setFilterValue(undefined)` is used instead of `[]` on reset/clear, keeping TanStack Table's `getIsFiltered()` accurate. The `activeCount > 0` check on the `Filter02Icon` highlights the icon in the accent color when a filter is applied.