react-kd-grid 5.0.1

package/README.md

@@ -0,0 +1,309 @@
+# React KD Grid
+
+A feature-rich, performant React data grid component with virtualization, grouping, filtering, sorting, and export capabilities.
+
+> **Note**: This package requires a license key for production use.
+
+## 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 { KDGrid } 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 }}>
+      <KDGrid
+        licenseKey="YOUR_LICENSE_KEY"
+        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 (
+    <KDGrid
+      licenseKey="YOUR_LICENSE_KEY"
+      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",
+});
+
+<KDGrid
+  licenseKey="YOUR_LICENSE_KEY"
+  // ... 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 });
+};
+
+<KDGrid
+  licenseKey="YOUR_LICENSE_KEY"
+  // ... other props
+  onRowClick={handleRowClick}
+  onCellClick={handleCellClick}
+  onSelectedRowsChange={handleSelectionChange}
+  onSort={handleSort}
+  selectable={true}
+/>;
+```
+
+## API Reference
+
+### KDGrid Props
+
+| Prop                   | Type                                                      | Default              | Description                                           |
+| ---------------------- | --------------------------------------------------------- | -------------------- | ----------------------------------------------------- |
+| `licenseKey`           | `string`                                                  | Required             | License key for the grid (will not render without it) |
+| `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`           | `PaginationOptions`                                       | `{ enabled: false }` | Pagination configuration                              |
+| `loading`              | `boolean`                                                 | `false`              | Show loading state or skeleton                        |
+| `editable`             | `boolean`                                                 | `false`              | Enable grid-level inline editing                      |
+| `onRowSelect`          | `(row: GridRow) => void`                                  | Optional             | Row selection callback                                |
+| `onSelectedRowsChange` | `(selectedRows: Set<string \| number>) => void`           | Optional             | Selection change callback                             |
+| `onFilterChange`       | `(filters: ServerFilterChangePayload) => void`            | Optional             | Filter change callback                                |
+| `onSort`               | `(columnKey: string, direction: 'asc' \| 'desc') => void` | Optional             | Sort change callback                                  |
+| `onCellEdit`           | `(params: CellEditParams) => void`                        | Optional             | Called when a cell edit is committed                  |
+
+### Imperative API (via React Ref)
+
+The `KDGrid` component exposes several methods through its ref:
+
+| Method              | Params                      | Description                               |
+| ------------------- | --------------------------- | ----------------------------------------- |
+| `scrollToRow`       | `(rowId: string \| number)` | Scrolls to a specific row by its ID       |
+| `scrollToColumn`    | `(columnKey: string)`       | Scrolls to a specific column by its key   |
+| `expandAllGroups`   | `()`                        | Expands all collapsed groups              |
+| `collapseAllGroups` | `()`                        | Collapses all expanded groups             |
+| `clearAllFilters`   | `()`                        | Clears global and column-specific filters |
+
+### 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/components/CellEditor.d.ts

@@ -0,0 +1,23 @@
+/**
+ * CellEditor
+ *
+ * Renders the appropriate input control for an inline cell edit session.
+ * Lifecycle:
+ *   • mounts → auto-focuses, selects all existing text
+ *   • Enter / Tab → commit  (Tab also moves focus to next cell conceptually)
+ *   • Escape      → cancel
+ *   • blur        → commit  (unless blur was caused by Escape)
+ *
+ * Props are intentionally minimal — the parent hook owns the "editing cell"
+ * identity; this component only owns the *draft value* and input DOM state.
+ */
+import type { GridColumn, GridRow } from "../types";
+interface CellEditorProps {
+    column: GridColumn;
+    row: GridRow;
+    initialValue: any;
+    onCommit: (newValue: any) => void;
+    onCancel: () => void;
+}
+export declare const CellEditor: ({ column, row, initialValue, onCommit, onCancel, }: CellEditorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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,39 @@
+import React from "react";
+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;
+    /** Minimum column width enforced during drag-resize. Defaults to 80px. */
+    minResizeWidth?: number;
+}
+export declare const GridHeader: React.MemoExoticComponent<{
+    ({ 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, minResizeWidth, }: GridHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export {};

package/dist/components/GridRows.d.ts

@@ -0,0 +1,53 @@
+import { CSSProperties, MouseEvent } from "react";
+import { GridRow, GridColumn, VirtualizedRange, ContextMenuItem, RowEventParams, CellClickParams, CellContextMenuParams } 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?: (params: RowEventParams) => void;
+    onRowDoubleClick?: (params: RowEventParams) => void;
+    onRowClick?: (params: RowEventParams) => void;
+    onCellClick?: (params: CellClickParams) => void;
+    isCellFocused?: (rowId: string | number, columnKey: string) => boolean;
+    isCellSelected?: (rowId: string | number, columnKey: string) => boolean;
+    onCellContextMenu?: (params: CellContextMenuParams) => void;
+    onCellMouseDown?: (args: {
+        row: GridRow;
+        column: GridColumn;
+        event: MouseEvent;
+    }) => void;
+    onCellMouseEnter?: (args: {
+        row: GridRow;
+        column: GridColumn;
+        event: MouseEvent;
+    }) => void;
+    /** Custom items for the row right-click context menu. */
+    contextMenuItems?: ContextMenuItem[];
+    getRowId?: (row: GridRow) => string | number;
+    /** Returns true when a specific (rowId, columnKey) pair is currently being edited. */
+    isEditing?: (rowId: string | number, columnKey: string) => boolean;
+    /** Called when the user double-clicks (or presses F2 on) an editable cell. */
+    onStartEdit?: (row: GridRow, column: GridColumn) => void;
+    /** Called by CellEditor when the user commits a value. */
+    onCommitEdit?: (newValue: any) => void;
+    /** Called by CellEditor when the user cancels without saving. */
+    onCancelEdit?: () => void;
+    /** The current edit initial value — passed down to CellEditor to initialise draft state. */
+    editingInitialValue?: any;
+}
+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, contextMenuItems, getRowId, isEditing, onStartEdit, onCommitEdit, onCancelEdit, editingInitialValue, }: GridRowsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+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, KDGridProps } 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?: KDGridProps["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/LicenseError.d.ts

@@ -0,0 +1,9 @@
+/**
+ * LicenseError
+ *
+ * Shown inside the grid body when an invalid or missing `licenseKey` is
+ * detected. Rendering it in the body (rather than replacing the entire
+ * component) keeps the column header visible so consumers can still see
+ * the grid structure and understand what data *should* be there.
+ */
+export declare const LicenseError: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/NoDataMessage.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+interface NoDataMessageProps {
+    hasFilters?: boolean;
+    hasData?: boolean;
+    /** Custom text message. Overridden by `renderer` if both are set. */
+    message?: string;
+    /** Fully custom empty-state renderer — takes precedence over `message`. */
+    renderer?: () => ReactNode;
+}
+export declare const NoDataMessage: ({ hasFilters, hasData, message, renderer, }: NoDataMessageProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PaginationControls.d.ts

@@ -0,0 +1,18 @@
+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: import("react").MemoExoticComponent<{
+    ({ paginationConfig, currentPage, isServerLoading, selectedRowsCount, totalDataLength, filteredDataLength, paginationMode, onPageChange, onPageSizeChange, }: PaginationControlsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+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,18 @@
+import { GridRow, ContextMenuItem } from "../types";
+/** Ready-made starter items — ONLY for development / demos.
+ *  All items are no-ops in dev environments (they log in DEV only).
+ *  Do NOT rely on these in production; wire your own `contextMenuItems`. */
+export declare const defaultContextMenuItems: ContextMenuItem[];
+interface RowContextMenuProps {
+    row: GridRow;
+    position: {
+        x: number;
+        y: number;
+    };
+    isVisible: boolean;
+    onClose: () => void;
+    /** Custom menu items. If not provided the menu will not render. */
+    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,66 @@
+import { ReactNode, ChangeEvent } from "react";
+import type { Density, BulkActionOption, SavedFilter, ExportFormat } from "../types";
+interface ColumnVisibility {
+    [columnKey: string]: boolean;
+}
+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[];
+    loading?: 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: import("react").MemoExoticComponent<{
+    ({ globalFilter, filteredDataLength, totalDataLength, 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;
+    displayName: string;
+}>;
+export {};