react-kd-grid 1.0.0

package/README.md

@@ -0,0 +1,270 @@
+# React KD Grid
+
+A feature-rich, performant React data grid component with virtualization, grouping, filtering, sorting, and export capabilities.
+
+## Features
+
+- **Virtualization**: Efficiently render large datasets with both vertical and horizontal virtualization
+- **Grouping**: Multi-level grouping with expandable/collapsible groups
+- **Filtering**: Global and column-specific filtering with multiple filter types
+- **Sorting**: Multi-column sorting with customizable sort functions
+- **Pagination**: Client and server-side pagination support
+- **Export**: Export data to CSV, JSON, and Excel formats
+- **Selection**: Row and cell selection with keyboard navigation
+- **Responsive**: Flexible column sizing with flex support
+- **Accessibility**: Full keyboard navigation and screen reader support
+- **TypeScript**: Built with TypeScript for excellent type safety
+
+## Installation
+
+```bash
+npm install react-kd-grid
+```
+
+## Basic Usage
+
+```tsx
+import React from 'react';
+import { CustomDataGrid } from 'react-kd-grid';
+
+const columns = [
+  { key: 'id', header: 'ID', width: 80 },
+  { key: 'name', header: 'Name', width: 200, sortable: true },
+  { key: 'email', header: 'Email', width: 300, sortable: true },
+  { key: 'department', header: 'Department', width: 150, sortable: true },
+  { key: 'salary', header: 'Salary', width: 120, sortable: true, aggregate: 'avg' }
+];
+
+const data = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', department: 'Engineering', salary: 75000 },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', department: 'Marketing', salary: 65000 },
+  // ... more data
+];
+
+function App() {
+  return (
+    <div style={{ height: 600 }}>
+      <CustomDataGrid
+        data={data}
+        columns={columns}
+        getRowId={(row) => row.id}
+        height={600}
+        filterable={true}
+        sortable={true}
+        groupable={true}
+        virtualized={true}
+        pagination={{
+          enabled: true,
+          mode: 'client',
+          pageSize: 20
+        }}
+      />
+    </div>
+  );
+}
+```
+
+## Advanced Features
+
+### Column Configuration
+
+```tsx
+const columns = [
+  {
+    key: 'status',
+    header: 'Status',
+    width: 120,
+    filterable: {
+      type: 'multiselect',
+      options: [
+        { label: 'Active', value: 'active' },
+        { label: 'Inactive', value: 'inactive' },
+        { label: 'Pending', value: 'pending' }
+      ]
+    },
+    formatter: (value) => value.toUpperCase(),
+    aggregate: 'count'
+  },
+  {
+    key: 'createdAt',
+    header: 'Created',
+    width: 150,
+    filterable: {
+      type: 'date',
+      placeholder: 'Filter by date...'
+    },
+    formatter: (value) => new Date(value).toLocaleDateString()
+  },
+  {
+    key: 'actions',
+    header: 'Actions',
+    width: 100,
+    cellRenderer: (value, row) => (
+      <button onClick={() => handleEdit(row)}>Edit</button>
+    )
+  }
+];
+```
+
+### Server-Side Operations
+
+```tsx
+function ServerGrid() {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [pagination, setPagination] = useState({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  });
+
+  const handleServerPagination = async (page: number, pageSize: number) => {
+    setLoading(true);
+    const result = await fetchServerData(page, pageSize);
+    setData(result.data);
+    setPagination(prev => ({ ...prev, page, pageSize, total: result.total }));
+    setLoading(false);
+  };
+
+  const handleServerFilter = async (filters: any) => {
+    setLoading(true);
+    const result = await fetchFilteredData(filters);
+    setData(result.data);
+    setLoading(false);
+  };
+
+  return (
+    <CustomDataGrid
+      data={data}
+      columns={columns}
+      pagination={{
+        enabled: true,
+        mode: 'server',
+        pageSize: pagination.pageSize,
+        serverConfig: {
+          onPageChange: handleServerPagination,
+          loading: loading,
+          totalRows: pagination.total
+        }
+      }}
+      onFilterChange={handleServerFilter}
+      isLoading={loading}
+    />
+  );
+}
+```
+
+### Custom Styling
+
+```tsx
+const customRowStyle = (row) => ({
+  backgroundColor: row.status === 'active' ? '#f0fff4' : '#fff5f5'
+});
+
+const customCellStyle = (value, row) => ({
+  color: row.priority === 'high' ? '#dc2626' : '#1f2937'
+});
+
+<CustomDataGrid
+  // ... other props
+  rowStyle={customRowStyle}
+  columns={columns.map(col => ({
+    ...col,
+    cellStyle: customCellStyle
+  }))}
+/>
+```
+
+### Event Handling
+
+```tsx
+const handleRowClick = (row, event) => {
+  console.log('Row clicked:', row);
+};
+
+const handleCellClick = ({ row, column, value, event }) => {
+  console.log('Cell clicked:', { row, column, value });
+};
+
+const handleSelectionChange = (selectedRows) => {
+  console.log('Selected rows:', Array.from(selectedRows));
+};
+
+const handleSort = (columnKey, direction) => {
+  console.log('Sort changed:', { columnKey, direction });
+};
+
+<CustomDataGrid
+  // ... other props
+  onRowClick={handleRowClick}
+  onCellClick={handleCellClick}
+  onSelectedRowsChange={handleSelectionChange}
+  onSort={handleSort}
+  selectable={true}
+/>
+```
+
+## API Reference
+
+### CustomDataGrid Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `GridRow[]` | Required | Array of data rows to display |
+| `columns` | `GridColumn[]` | Required | Array of column definitions |
+| `getRowId` | `(row: GridRow) => string \| number` | Optional | Function to extract unique ID from row |
+| `height` | `number` | 400 | Grid height in pixels |
+| `density` | `'sm' \| 'md' \| 'lg'` | `'md'` | Row density (affects row height) |
+| `selectable` | `boolean` | `false` | Enable row selection |
+| `filterable` | `boolean` | `true` | Enable filtering |
+| `sortable` | `boolean` | `true` | Enable sorting |
+| `groupable` | `boolean` | `false` | Enable grouping |
+| `virtualized` | `boolean` | `true` | Enable virtualization |
+| `pagination` | `PaginationConfig` | `{ enabled: false }` | Pagination configuration |
+| `isLoading` | `boolean` | `false` | Show loading state |
+| `onRowSelect` | `(row: GridRow) => void` | Optional | Row selection callback |
+| `onSelectedRowsChange` | `(selectedRows: Set<string \| number>) => void` | Optional | Selection change callback |
+| `onFilterChange` | `(filters: FilterChangePayload) => void` | Optional | Filter change callback |
+| `onSort` | `(columnKey: string, direction: 'asc' \| 'desc') => void` | Optional | Sort change callback |
+
+### Column Definition
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `key` | `string` | Required | Unique column identifier |
+| `header` | `string` | Required | Column header text |
+| `width` | `number` | 100 | Column width in pixels |
+| `flex` | `boolean \| number` | `false` | Flexible column sizing |
+| `sortable` | `boolean` | `true` | Enable column sorting |
+| `filterable` | `boolean \| ColumnFilter` | `false` | Enable column filtering |
+| `formatter` | `(value: any) => string` | Optional | Custom value formatter |
+| `cellRenderer` | `(value: any, row: GridRow) => ReactNode` | Optional | Custom cell renderer |
+| `aggregate` | `'sum' \| 'avg' \| 'min' \| 'max' \| function` | Optional | Group aggregate function |
+| `footer_aggregate` | `'count' \| 'sum' \| 'avg' \| 'min' \| 'max' \| function` | Optional | Footer aggregate function |
+
+## Performance Tips
+
+1. **Enable Virtualization**: For datasets with > 1000 rows, always enable virtualization
+2. **Use Server-Side Operations**: For very large datasets, use server-side pagination and filtering
+3. **Optimize Renderers**: Avoid creating new objects/functions in cell renderers
+4. **Limit Column Count**: Horizontal virtualization kicks in at 50+ columns
+5. **Use Memoization**: Memoize expensive calculations in formatters and renderers
+
+## Browser Support
+
+- Chrome 80+
+- Firefox 75+
+- Safari 13+
+- Edge 80+
+
+## License
+
+MIT License - see LICENSE file for details.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Support
+
+If you encounter any issues or have questions, please [open an issue](https://github.com/yourusername/react-kd-grid/issues) on GitHub.

package/dist/CustomGrid.d.ts

@@ -0,0 +1,3 @@
+import { CustomDataGridProps, CustomDataGridRef } from "./types";
+export declare const CustomDataGrid: import("react").ForwardRefExoticComponent<CustomDataGridProps & import("react").RefAttributes<CustomDataGridRef>>;
+export default CustomDataGrid;

package/dist/components/ColumnFilterSelector.d.ts

@@ -0,0 +1,18 @@
+interface ColumnFilterSelectorProps {
+    columns: Array<{
+        key: string;
+        header: string;
+        filterable?: {
+            type?: string;
+            options?: Array<{
+                label: string;
+                value: string | number;
+            }>;
+            placeholder?: string;
+        };
+    }>;
+    columnFilters: Record<string, any>;
+    onColumnFilter?: (columnKey: string, filter: any) => void;
+}
+export declare const ColumnFilterSelector: ({ columns, columnFilters, onColumnFilter, }: ColumnFilterSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CustomSelect.d.ts

@@ -0,0 +1,14 @@
+interface Option {
+    label: string;
+    value: string;
+}
+interface CustomSelectProps {
+    options: Option[];
+    value?: string;
+    placeholder?: string;
+    onChange: (value: string) => void;
+    searchable?: boolean;
+    className?: string;
+}
+export declare const CustomSelect: ({ options, value, placeholder, onChange, searchable, className, }: CustomSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FooterAggregate.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { GridColumn, GridRow } from "../types";
+interface FooterAggregateProps {
+    columns: (GridColumn & {
+        width: number;
+    })[];
+    data: GridRow[];
+    selectable: boolean;
+    /** Resolved row height so footer matches density */
+    rowHeight: number;
+    /** Pinned columns (same semantics as grid body) */
+    pinnedColumns?: Set<string>;
+    getRowId?: (row: GridRow) => string | number;
+}
+export declare const FooterAggregate: React.NamedExoticComponent<FooterAggregateProps>;
+export {};

package/dist/components/GridHeader.d.ts

@@ -0,0 +1,33 @@
+import { GridColumn, SortConfig, ActiveFilters, ColumnFilterValue, GridRow } from "../types";
+interface GridHeaderProps {
+    pinnedColumns: GridColumn[];
+    unpinnedColumns: GridColumn[];
+    hvPadLeft?: number;
+    hvPadRight?: number;
+    headerHeight: number;
+    sortConfig: SortConfig;
+    columnFilters: ActiveFilters;
+    selectable: boolean;
+    selectedRows: Set<string | number>;
+    totalRows: number;
+    data: GridRow[];
+    onSort: (key: string) => void;
+    onColumnFilter: (key: string, filter: ColumnFilterValue | null) => void;
+    onSelectAll: () => void;
+    onColumnResize?: (columnKey: string, width: number) => void;
+    pinnedKeySet?: Set<string>;
+    onColumnPin?: (columnKey: string, pinned: boolean) => void;
+    groupable?: boolean;
+    groupedByColumn?: string | null;
+    onGroupBy?: (columnKey: string | null) => void;
+    groupedByColumns?: string[];
+    onGroupToggle?: (columnKey: string, nextGrouped: boolean) => void;
+    onAutosizeColumn?: (columnKey: string) => void;
+    onAutosizeAllColumns?: () => void;
+    onResetColumns?: () => void;
+    columnOrder: string[];
+    onColumnOrderChange: (order: string[]) => void;
+    paginationMode?: "client" | "server" | null;
+}
+export declare const GridHeader: ({ pinnedColumns, unpinnedColumns, hvPadLeft, hvPadRight, headerHeight, sortConfig, columnFilters, selectable, selectedRows, totalRows, data, onSort, onColumnFilter, onSelectAll, onColumnResize, pinnedKeySet, onColumnPin, groupable, groupedByColumn, onGroupBy, groupedByColumns, onGroupToggle, onAutosizeColumn, onAutosizeAllColumns, onResetColumns, columnOrder, onColumnOrderChange, paginationMode, }: GridHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/GridRows.d.ts

@@ -0,0 +1,49 @@
+import { CSSProperties, MouseEvent } from "react";
+import { GridRow, GridColumn, VirtualizedRange } from "../types";
+interface GridRowsProps {
+    data: GridRow[];
+    columns: GridColumn[];
+    selectedRows: Set<string | number>;
+    virtualized: boolean;
+    virtualizedRange: VirtualizedRange;
+    rowHeight: number;
+    selectable: boolean;
+    isRowSelectable?: (row: GridRow) => boolean;
+    onRowSelect: (rowId: string | number, isSelected: boolean) => void;
+    pinnedColumns?: Set<string>;
+    hvPadLeft?: number;
+    hvPadRight?: number;
+    rowStyle?: (row: GridRow) => CSSProperties | undefined;
+    globalFilter?: string;
+    onContextMenu?: (row: GridRow, event: MouseEvent) => void;
+    onRowDoubleClick?: (row: GridRow, event: MouseEvent) => void;
+    onRowClick?: (row: GridRow, event: MouseEvent) => void;
+    onCellClick?: (args: {
+        row: GridRow;
+        column: GridColumn;
+        value: any;
+        event: MouseEvent;
+    }) => void;
+    isCellFocused?: (rowId: string | number, columnKey: string) => boolean;
+    isCellSelected?: (rowId: string | number, columnKey: string) => boolean;
+    onCellContextMenu?: (args: {
+        row: GridRow;
+        column: GridColumn;
+        value: any;
+        displayValue: string;
+        event: MouseEvent;
+    }) => void;
+    onCellMouseDown?: (args: {
+        row: GridRow;
+        column: GridColumn;
+        event: MouseEvent;
+    }) => void;
+    onCellMouseEnter?: (args: {
+        row: GridRow;
+        column: GridColumn;
+        event: MouseEvent;
+    }) => void;
+    getRowId?: (row: GridRow) => string | number;
+}
+export declare const GridRows: import("react").MemoExoticComponent<({ data, columns, selectedRows, virtualized, virtualizedRange, rowHeight, selectable, isRowSelectable, onRowSelect, pinnedColumns, hvPadLeft, hvPadRight, rowStyle, globalFilter, onContextMenu, onRowDoubleClick, onRowClick, onCellClick, isCellFocused, isCellSelected, onCellContextMenu, onCellMouseDown, onCellMouseEnter, getRowId, }: GridRowsProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/GroupBar.d.ts

@@ -0,0 +1,12 @@
+import type { GridColumn } from "../types";
+interface GroupBarProps {
+    columns: GridColumn[];
+    groupedKeys: string[];
+    onRemove: (columnKey: string) => void;
+    onReorder: (newOrder: string[]) => void;
+    onDropColumnKey: (columnKey: string) => void;
+    onToggleExpandAll?: () => void;
+    isAnyExpanded?: boolean;
+}
+export declare const GroupBar: ({ columns, groupedKeys, onRemove, onReorder, onDropColumnKey, onToggleExpandAll, isAnyExpanded, }: GroupBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/GroupHeader.d.ts

@@ -0,0 +1,29 @@
+import { GridRow, CustomDataGridProps } from "../types";
+interface GroupHeaderProps {
+    row: GridRow & {
+        _isGroupHeader?: boolean;
+        _groupKey?: string;
+        _groupCount?: number;
+    };
+    isExpanded: boolean;
+    onToggle: (groupKey: string) => void;
+    viewportWidth: number;
+    selectable: boolean;
+    rowHeight?: number;
+    /**
+     * Optional function to map a column key to its display label (header).
+     * If not provided, the raw column key will be used as a fallback.
+     */
+    getHeaderLabel?: (columnKey: string) => string;
+    /**
+     * Optional function to map a column key and raw group value to a display label.
+     * Useful to apply the column's formatter for group headers.
+     */
+    getValueLabel?: (columnKey: string, rawValue: any) => string;
+    /**
+     * Optional custom renderer for actions on grouped rows.
+     */
+    renderGroupActions?: CustomDataGridProps["renderGroupActions"];
+}
+export declare const GroupHeader: import("react").MemoExoticComponent<({ row, isExpanded, onToggle, viewportWidth, selectable, rowHeight, getHeaderLabel, getValueLabel, renderGroupActions, }: GroupHeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/NoDataMessage.d.ts

@@ -0,0 +1,7 @@
+interface NoDataMessageProps {
+    hasFilters?: boolean;
+    hasData?: boolean;
+    message?: string;
+}
+export declare const NoDataMessage: ({ hasFilters, hasData, message, }: NoDataMessageProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PaginationControls.d.ts

@@ -0,0 +1,15 @@
+import { PaginationConfig } from "../types";
+interface PaginationControlsProps {
+    paginationConfig: PaginationConfig;
+    currentPage: number;
+    isServerLoading: boolean;
+    selectedRowsCount: number;
+    totalDataLength: number;
+    filteredDataLength?: number;
+    paginationMode?: "client" | "server";
+    onPageChange: (page: number, pageSize: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    showNoDataMessage?: boolean;
+}
+export declare const PaginationControls: ({ paginationConfig, currentPage, isServerLoading, selectedRowsCount, totalDataLength, filteredDataLength, paginationMode, onPageChange, onPageSizeChange, }: PaginationControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Popover.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { type Placement } from "@floating-ui/react";
+interface PopoverProps {
+    open: boolean;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+    placement?: Placement;
+    offset?: number;
+    sameWidth?: boolean;
+    maxHeight?: number | string;
+    zIndex?: number;
+    className?: string;
+    children: React.ReactNode;
+    shouldIgnoreClose?: (target: Node) => boolean;
+}
+export declare const Popover: React.FC<PopoverProps>;
+export default Popover;

package/dist/components/RowContextMenu.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { GridRow } from "../types";
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onClick: (row: GridRow) => void;
+    disabled?: boolean;
+    separator?: boolean;
+}
+interface RowContextMenuProps {
+    row: GridRow;
+    position: {
+        x: number;
+        y: number;
+    };
+    isVisible: boolean;
+    onClose: () => void;
+    menuItems?: ContextMenuItem[];
+}
+export declare const RowContextMenu: ({ row, position, isVisible, onClose, menuItems, }: RowContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SearchToolbar.d.ts

@@ -0,0 +1,79 @@
+import { ReactNode, ChangeEvent } from "react";
+import type { Density } from "../types";
+export type ExportFormat = "csv" | "json" | "xlsx";
+export type BulkAction = "delete" | "archive" | "copy" | "edit" | "export";
+export interface BulkActionOption {
+    id: BulkAction;
+    label: string;
+    icon: ReactNode;
+    onClick: (selectedRows: Set<string | number>) => void;
+    disabled?: boolean;
+    destructive?: boolean;
+}
+interface ColumnVisibility {
+    [columnKey: string]: boolean;
+}
+interface SavedFilter {
+    id: string;
+    name: string;
+    globalFilter: string;
+    columnFilters: Record<string, any>;
+}
+interface SearchToolbarProps {
+    globalFilter: string;
+    filteredDataLength: number;
+    totalDataLength: number;
+    paginationMode?: "client" | "server";
+    totalRows?: number;
+    selectedRowsCount?: number;
+    selectedRows?: Set<string | number>;
+    showExport?: boolean;
+    showRefresh?: boolean;
+    showColumnToggle?: boolean;
+    showBulkActions?: boolean;
+    showSavedFilters?: boolean;
+    columns?: Array<{
+        key: string;
+        header: string;
+        visible?: boolean;
+        filterOptions?: Array<{
+            label: string;
+            value: string | number;
+        }>;
+        filterType?: "text" | "select" | "multiselect";
+        filterable?: any;
+    }>;
+    columnVisibility?: ColumnVisibility;
+    columnFilters?: Record<string, any>;
+    savedFilters?: SavedFilter[];
+    bulkActions?: BulkActionOption[];
+    isLoading?: boolean;
+    exportOptions?: {
+        enabled: boolean;
+        formats?: ExportFormat[];
+        filename?: string;
+        onExport?: (format: ExportFormat, exportSelected: boolean) => void;
+    };
+    onGlobalFilterChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClearFilters?: () => void;
+    onRefresh?: () => void;
+    onColumnVisibilityChange?: (columnKey: string, visible: boolean) => void;
+    onColumnFilter?: (columnKey: string, filter: any) => void;
+    onSaveFilter?: (filter: Omit<SavedFilter, "id">) => void;
+    onLoadFilter?: (filter: SavedFilter) => void;
+    onDeleteFilter?: (filterId: string) => void;
+    onRowSelect?: (selectedRows: number[]) => void;
+    onToggleFilters?: (show: boolean) => void;
+    onResetColumns?: () => void;
+    columnOrder?: string[];
+    onColumnOrderChange?: (order: string[]) => void;
+    pinnedColumns?: Set<string>;
+    onScrollToColumn?: (columnKey: string) => void;
+    density?: Density;
+    onDensityChange?: (density: Density) => void;
+    showDensityControl?: boolean;
+    customLeftContent?: ReactNode;
+    customRightContent?: ReactNode;
+}
+export declare const SearchToolbar: ({ globalFilter, filteredDataLength, selectedRowsCount, selectedRows, showExport, showColumnToggle, showBulkActions, columns, columnVisibility, columnFilters, bulkActions, exportOptions, onGlobalFilterChange, onClearFilters, onColumnVisibilityChange, onColumnFilter, onResetColumns, columnOrder, onColumnOrderChange, pinnedColumns, onScrollToColumn, density, onDensityChange, showDensityControl, customLeftContent, customRightContent, }: SearchToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filters/BooleanFilter.d.ts

@@ -0,0 +1,7 @@
+import { ColumnFilterValue } from "../../types";
+interface BooleanFilterProps {
+    value: ColumnFilterValue | null;
+    onChange: (value: ColumnFilterValue | null) => void;
+}
+export declare const BooleanFilter: ({ value, onChange }: BooleanFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filters/DateFilter.d.ts

@@ -0,0 +1,9 @@
+import { ColumnFilterValue } from "../../types";
+interface DateFilterProps {
+    value: ColumnFilterValue | null;
+    onChange: (value: ColumnFilterValue | null) => void;
+    min?: number;
+    max?: number;
+}
+export declare const DateFilter: ({ value, onChange, min, max }: DateFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filters/FilterContent.d.ts

@@ -0,0 +1,9 @@
+import { ColumnFilterValue, GridColumn, GridRow } from "../../types";
+interface FilterContentProps {
+    column: GridColumn;
+    data: GridRow[];
+    value: ColumnFilterValue | null;
+    onChange: (val: ColumnFilterValue | null) => void;
+}
+export declare const FilterContent: ({ column, data, value, onChange }: FilterContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filters/FilterPopup.d.ts

@@ -0,0 +1,2 @@
+import { FilterPopupProps } from "../../types";
+export declare const FilterPopup: ({ column, data, currentFilter, onApplyFilter, onClose, position, autoApply, }: FilterPopupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/filters/MultiselectFilter.d.ts

@@ -0,0 +1,10 @@
+import { ColumnFilterValue, FilterOption, GridRow } from "../../types";
+interface MultiselectFilterProps {
+    value: ColumnFilterValue | null;
+    onChange: (value: ColumnFilterValue | null) => void;
+    options?: FilterOption[];
+    data: GridRow[];
+    columnKey: string;
+}
+export declare const MultiselectFilter: ({ value, onChange, options, data, columnKey, }: MultiselectFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filters/NumberFilter.d.ts

@@ -0,0 +1,9 @@
+import { ColumnFilterValue } from "../../types";
+interface NumberFilterProps {
+    value: ColumnFilterValue | null;
+    onChange: (value: ColumnFilterValue | null) => void;
+    min?: number;
+    max?: number;
+}
+export declare const NumberFilter: ({ value, onChange, min, max, }: NumberFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filters/TextFilter.d.ts

@@ -0,0 +1,8 @@
+import { ColumnFilterValue } from "../../types";
+interface TextFilterProps {
+    value: ColumnFilterValue | null;
+    onChange: (value: ColumnFilterValue | null) => void;
+    placeholder?: string;
+}
+export declare const TextFilter: ({ value, onChange, placeholder, }: TextFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filters/index.d.ts

@@ -0,0 +1,6 @@
+export { TextFilter } from './TextFilter';
+export { NumberFilter } from './NumberFilter';
+export { DateFilter } from './DateFilter';
+export { MultiselectFilter } from './MultiselectFilter';
+export { BooleanFilter } from './BooleanFilter';
+export { FilterPopup } from './FilterPopup';