UI component library based on Ant Design (Client-side only)
npm install @jerry-fd/uiA powerful and flexible data filter component library for React, providing multiple filter types with rich configuration options.
> ⚠️ Note: This is a client-side only component library. It does not support Server-Side Rendering (SSR) or React Server Components (RSC).
``bash
npm install @jerry-fd/data-filter
Features
- 📦 Multiple filter types (text, number, date, option, multi-option)
- 🎨 Customizable UI with modern design
- 🔍 Built-in search functionality
- 📅 Date picker with single and range modes
- 🔢 Number filter with single and range modes
- 🎯 Full TypeScript support
- ♿ Accessible (ARIA compliant)
- 🎛️ Controlled component with state management
Quick Start
`tsx
import React, { useState } from 'react';
import { DataFilter, FilterColumnDef, FiltersState } from '@jerry-fd/data-filter';
import '@jerry-fd/data-filter/styles';
import dayjs from 'dayjs';function App() {
const [filters, setFilters] = useState([]);
const columns: FilterColumnDef[] = [
{
type: 'text',
columnId: 'name',
displayName: 'Name',
icon: Heading1,
},
];
return (
columns={columns}
filters={filters}
onFiltersChange={setFilters}
/>
);
}
`Example
`tsx
import type { FilterColumnDef, FilterColumnOption, FiltersState } from '@jerry-fd/data-filter';
import { DataFilter } from '@jerry-fd/data-filter';
import dayjs from 'dayjs';type DataSchema = {
id: number;
name: string;
status: string;
tags: string[];
date: Date;
score: number;
};
const filterColumns: FilterColumnDef[] = [
{
type: 'text',
columnId: 'name',
displayName: 'Name',
icon: Heading1,
},
];
// Initialize with default filters (optional)
const defaultFilters: FiltersState = [
{
columnId: 'name',
type: 'text',
values: ['Search'],
},
];
function App() {
const [filters, setFilters] = useState(defaultFilters);
return (
columns={filterColumns}
filters={filters}
onFiltersChange={setFilters}
/>
);
}
export default App;
`API Reference
$3
| Prop | Type | Description |
|------|------|-------------|
|
columns | FilterColumnDef[] | Array of filter column definitions |
| filters | FiltersState | Current filter state (controlled) |
| onFiltersChange | (filters: FiltersState) => void | Callback when filters change |$3
Base properties for all filter types:
| Property | Type | Required | Description |
|----------|------|----------|-------------|
|
type | 'text' \| 'number' \| 'date' \| 'option' \| 'multiOption' | ✅ | Filter type |
| columnId | string | ✅ | Unique identifier for the filter |
| displayName | string | ✅ | Display name for the filter |
| icon | React.ReactNode | ❌ | Optional |$3
| Property | Type | Required | Description |
|----------|------|----------|-------------|
|
mode | 'single' \| 'range' | ✅ | Single value or range selection |
| min | number | ❌ | Minimum value (number only) |
| max | number | ❌ | Maximum value (number only) |
| showTime | boolean | ❌ | Show time picker (date only) |$3
| Property | Type | Required | Description |
|----------|------|----------|-------------|
|
options | FilterColumnOption[] | ✅ | Array of selectable options |$3
| Property | Type | Description |
|----------|------|-------------|
|
label | string | Display label |
| value | string | Option value |
| icon | React.ReactNode | Optional icon or visual indicator |$3
Array of active filter values:
`tsx
type FiltersState = Array<{
columnId: string;
type: 'text' | 'number' | 'date' | 'option' | 'multiOption';
values: any[];
}>;
``MIT