react-kd-grid 1.2.1 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ColumnFilterSelector.d.ts +18 -0
- package/dist/components/CustomSelect.d.ts +14 -0
- package/dist/components/FooterAggregate.d.ts +16 -0
- package/dist/components/GridHeader.d.ts +33 -0
- package/dist/components/GridRows.d.ts +49 -0
- package/dist/components/GroupBar.d.ts +12 -0
- package/dist/components/GroupHeader.d.ts +29 -0
- package/dist/components/NoDataMessage.d.ts +7 -0
- package/dist/components/PaginationControls.d.ts +15 -0
- package/dist/components/Popover.d.ts +17 -0
- package/dist/components/RowContextMenu.d.ts +22 -0
- package/dist/components/SearchToolbar.d.ts +79 -0
- package/dist/components/filters/BooleanFilter.d.ts +7 -0
- package/dist/components/filters/DateFilter.d.ts +9 -0
- package/dist/components/filters/FilterContent.d.ts +9 -0
- package/dist/components/filters/FilterPopup.d.ts +2 -0
- package/dist/components/filters/MultiselectFilter.d.ts +10 -0
- package/dist/components/filters/NumberFilter.d.ts +9 -0
- package/dist/components/filters/TextFilter.d.ts +8 -0
- package/dist/components/filters/index.d.ts +6 -0
- package/dist/components/ui/DatePicker.d.ts +10 -0
- package/dist/constants.d.ts +1 -0
- package/dist/core/DataGrid/DataGrid.d.ts +3 -0
- package/dist/core/DataGrid.d.ts +3 -0
- package/dist/hooks/useAdvancedFiltering.d.ts +16 -0
- package/dist/hooks/useDataWorker.d.ts +10 -0
- package/dist/hooks/useExport.d.ts +15 -0
- package/dist/hooks/useFilteringAndSorting.d.ts +16 -0
- package/dist/hooks/useGrouping.d.ts +28 -0
- package/dist/hooks/usePagination.d.ts +28 -0
- package/dist/hooks/useSelection.d.ts +13 -0
- package/dist/hooks/useVirtualization.d.ts +17 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.esm.js +10776 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +10776 -0
- package/dist/index.js.map +1 -0
- package/dist/types.d.ts +424 -0
- package/dist/utils/highlightText.d.ts +15 -0
- package/dist/workers/dataWorker.d.ts +16 -0
- package/package.json +14 -14
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface ColumnFilterSelectorProps {
|
|
2
|
+
columns: Array<{
|
|
3
|
+
key: string;
|
|
4
|
+
header: string;
|
|
5
|
+
filterable?: {
|
|
6
|
+
type?: string;
|
|
7
|
+
options?: Array<{
|
|
8
|
+
label: string;
|
|
9
|
+
value: string | number;
|
|
10
|
+
}>;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
};
|
|
13
|
+
}>;
|
|
14
|
+
columnFilters: Record<string, any>;
|
|
15
|
+
onColumnFilter?: (columnKey: string, filter: any) => void;
|
|
16
|
+
}
|
|
17
|
+
export declare const ColumnFilterSelector: ({ columns, columnFilters, onColumnFilter, }: ColumnFilterSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
interface Option {
|
|
2
|
+
label: string;
|
|
3
|
+
value: string;
|
|
4
|
+
}
|
|
5
|
+
interface CustomSelectProps {
|
|
6
|
+
options: Option[];
|
|
7
|
+
value?: string;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
onChange: (value: string) => void;
|
|
10
|
+
searchable?: boolean;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const CustomSelect: ({ options, value, placeholder, onChange, searchable, className, }: CustomSelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { GridColumn, GridRow } from "../types";
|
|
3
|
+
interface FooterAggregateProps {
|
|
4
|
+
columns: (GridColumn & {
|
|
5
|
+
width: number;
|
|
6
|
+
})[];
|
|
7
|
+
data: GridRow[];
|
|
8
|
+
selectable: boolean;
|
|
9
|
+
/** Resolved row height so footer matches density */
|
|
10
|
+
rowHeight: number;
|
|
11
|
+
/** Pinned columns (same semantics as grid body) */
|
|
12
|
+
pinnedColumns?: Set<string>;
|
|
13
|
+
getRowId?: (row: GridRow) => string | number;
|
|
14
|
+
}
|
|
15
|
+
export declare const FooterAggregate: React.NamedExoticComponent<FooterAggregateProps>;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { GridColumn, SortConfig, ActiveFilters, ColumnFilterValue, GridRow } from "../types";
|
|
2
|
+
interface GridHeaderProps {
|
|
3
|
+
pinnedColumns: GridColumn[];
|
|
4
|
+
unpinnedColumns: GridColumn[];
|
|
5
|
+
hvPadLeft?: number;
|
|
6
|
+
hvPadRight?: number;
|
|
7
|
+
headerHeight: number;
|
|
8
|
+
sortConfig: SortConfig;
|
|
9
|
+
columnFilters: ActiveFilters;
|
|
10
|
+
selectable: boolean;
|
|
11
|
+
selectedRows: Set<string | number>;
|
|
12
|
+
totalRows: number;
|
|
13
|
+
data: GridRow[];
|
|
14
|
+
onSort: (key: string) => void;
|
|
15
|
+
onColumnFilter: (key: string, filter: ColumnFilterValue | null) => void;
|
|
16
|
+
onSelectAll: () => void;
|
|
17
|
+
onColumnResize?: (columnKey: string, width: number) => void;
|
|
18
|
+
pinnedKeySet?: Set<string>;
|
|
19
|
+
onColumnPin?: (columnKey: string, pinned: boolean) => void;
|
|
20
|
+
groupable?: boolean;
|
|
21
|
+
groupedByColumn?: string | null;
|
|
22
|
+
onGroupBy?: (columnKey: string | null) => void;
|
|
23
|
+
groupedByColumns?: string[];
|
|
24
|
+
onGroupToggle?: (columnKey: string, nextGrouped: boolean) => void;
|
|
25
|
+
onAutosizeColumn?: (columnKey: string) => void;
|
|
26
|
+
onAutosizeAllColumns?: () => void;
|
|
27
|
+
onResetColumns?: () => void;
|
|
28
|
+
columnOrder: string[];
|
|
29
|
+
onColumnOrderChange: (order: string[]) => void;
|
|
30
|
+
paginationMode?: "client" | "server" | null;
|
|
31
|
+
}
|
|
32
|
+
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;
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { CSSProperties, MouseEvent } from "react";
|
|
2
|
+
import { GridRow, GridColumn, VirtualizedRange } from "../types";
|
|
3
|
+
interface GridRowsProps {
|
|
4
|
+
data: GridRow[];
|
|
5
|
+
columns: GridColumn[];
|
|
6
|
+
selectedRows: Set<string | number>;
|
|
7
|
+
virtualized: boolean;
|
|
8
|
+
virtualizedRange: VirtualizedRange;
|
|
9
|
+
rowHeight: number;
|
|
10
|
+
selectable: boolean;
|
|
11
|
+
isRowSelectable?: (row: GridRow) => boolean;
|
|
12
|
+
onRowSelect: (rowId: string | number, isSelected: boolean) => void;
|
|
13
|
+
pinnedColumns?: Set<string>;
|
|
14
|
+
hvPadLeft?: number;
|
|
15
|
+
hvPadRight?: number;
|
|
16
|
+
rowStyle?: (row: GridRow) => CSSProperties | undefined;
|
|
17
|
+
globalFilter?: string;
|
|
18
|
+
onContextMenu?: (row: GridRow, event: MouseEvent) => void;
|
|
19
|
+
onRowDoubleClick?: (row: GridRow, event: MouseEvent) => void;
|
|
20
|
+
onRowClick?: (row: GridRow, event: MouseEvent) => void;
|
|
21
|
+
onCellClick?: (args: {
|
|
22
|
+
row: GridRow;
|
|
23
|
+
column: GridColumn;
|
|
24
|
+
value: any;
|
|
25
|
+
event: MouseEvent;
|
|
26
|
+
}) => void;
|
|
27
|
+
isCellFocused?: (rowId: string | number, columnKey: string) => boolean;
|
|
28
|
+
isCellSelected?: (rowId: string | number, columnKey: string) => boolean;
|
|
29
|
+
onCellContextMenu?: (args: {
|
|
30
|
+
row: GridRow;
|
|
31
|
+
column: GridColumn;
|
|
32
|
+
value: any;
|
|
33
|
+
displayValue: string;
|
|
34
|
+
event: MouseEvent;
|
|
35
|
+
}) => void;
|
|
36
|
+
onCellMouseDown?: (args: {
|
|
37
|
+
row: GridRow;
|
|
38
|
+
column: GridColumn;
|
|
39
|
+
event: MouseEvent;
|
|
40
|
+
}) => void;
|
|
41
|
+
onCellMouseEnter?: (args: {
|
|
42
|
+
row: GridRow;
|
|
43
|
+
column: GridColumn;
|
|
44
|
+
event: MouseEvent;
|
|
45
|
+
}) => void;
|
|
46
|
+
getRowId?: (row: GridRow) => string | number;
|
|
47
|
+
}
|
|
48
|
+
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>;
|
|
49
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { GridColumn } from "../types";
|
|
2
|
+
interface GroupBarProps {
|
|
3
|
+
columns: GridColumn[];
|
|
4
|
+
groupedKeys: string[];
|
|
5
|
+
onRemove: (columnKey: string) => void;
|
|
6
|
+
onReorder: (newOrder: string[]) => void;
|
|
7
|
+
onDropColumnKey: (columnKey: string) => void;
|
|
8
|
+
onToggleExpandAll?: () => void;
|
|
9
|
+
isAnyExpanded?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare const GroupBar: ({ columns, groupedKeys, onRemove, onReorder, onDropColumnKey, onToggleExpandAll, isAnyExpanded, }: GroupBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { GridRow, KDGridProps } from "../types";
|
|
2
|
+
interface GroupHeaderProps {
|
|
3
|
+
row: GridRow & {
|
|
4
|
+
_isGroupHeader?: boolean;
|
|
5
|
+
_groupKey?: string;
|
|
6
|
+
_groupCount?: number;
|
|
7
|
+
};
|
|
8
|
+
isExpanded: boolean;
|
|
9
|
+
onToggle: (groupKey: string) => void;
|
|
10
|
+
viewportWidth: number;
|
|
11
|
+
selectable: boolean;
|
|
12
|
+
rowHeight?: number;
|
|
13
|
+
/**
|
|
14
|
+
* Optional function to map a column key to its display label (header).
|
|
15
|
+
* If not provided, the raw column key will be used as a fallback.
|
|
16
|
+
*/
|
|
17
|
+
getHeaderLabel?: (columnKey: string) => string;
|
|
18
|
+
/**
|
|
19
|
+
* Optional function to map a column key and raw group value to a display label.
|
|
20
|
+
* Useful to apply the column's formatter for group headers.
|
|
21
|
+
*/
|
|
22
|
+
getValueLabel?: (columnKey: string, rawValue: any) => string;
|
|
23
|
+
/**
|
|
24
|
+
* Optional custom renderer for actions on grouped rows.
|
|
25
|
+
*/
|
|
26
|
+
renderGroupActions?: KDGridProps["renderGroupActions"];
|
|
27
|
+
}
|
|
28
|
+
export declare const GroupHeader: import("react").MemoExoticComponent<({ row, isExpanded, onToggle, viewportWidth, selectable, rowHeight, getHeaderLabel, getValueLabel, renderGroupActions, }: GroupHeaderProps) => import("react/jsx-runtime").JSX.Element>;
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { PaginationConfig } from "../types";
|
|
2
|
+
interface PaginationControlsProps {
|
|
3
|
+
paginationConfig: PaginationConfig;
|
|
4
|
+
currentPage: number;
|
|
5
|
+
isServerLoading: boolean;
|
|
6
|
+
selectedRowsCount: number;
|
|
7
|
+
totalDataLength: number;
|
|
8
|
+
filteredDataLength?: number;
|
|
9
|
+
paginationMode?: "client" | "server";
|
|
10
|
+
onPageChange: (page: number, pageSize: number) => void;
|
|
11
|
+
onPageSizeChange: (pageSize: number) => void;
|
|
12
|
+
showNoDataMessage?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare const PaginationControls: ({ paginationConfig, currentPage, isServerLoading, selectedRowsCount, totalDataLength, filteredDataLength, paginationMode, onPageChange, onPageSizeChange, }: PaginationControlsProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type Placement } from "@floating-ui/react";
|
|
3
|
+
interface PopoverProps {
|
|
4
|
+
open: boolean;
|
|
5
|
+
anchorEl: HTMLElement | null;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
placement?: Placement;
|
|
8
|
+
offset?: number;
|
|
9
|
+
sameWidth?: boolean;
|
|
10
|
+
maxHeight?: number | string;
|
|
11
|
+
zIndex?: number;
|
|
12
|
+
className?: string;
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
shouldIgnoreClose?: (target: Node) => boolean;
|
|
15
|
+
}
|
|
16
|
+
export declare const Popover: React.FC<PopoverProps>;
|
|
17
|
+
export default Popover;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { GridRow } from "../types";
|
|
3
|
+
export interface ContextMenuItem {
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
icon?: ReactNode;
|
|
7
|
+
onClick: (row: GridRow) => void;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
separator?: boolean;
|
|
10
|
+
}
|
|
11
|
+
interface RowContextMenuProps {
|
|
12
|
+
row: GridRow;
|
|
13
|
+
position: {
|
|
14
|
+
x: number;
|
|
15
|
+
y: number;
|
|
16
|
+
};
|
|
17
|
+
isVisible: boolean;
|
|
18
|
+
onClose: () => void;
|
|
19
|
+
menuItems?: ContextMenuItem[];
|
|
20
|
+
}
|
|
21
|
+
export declare const RowContextMenu: ({ row, position, isVisible, onClose, menuItems, }: RowContextMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { ReactNode, ChangeEvent } from "react";
|
|
2
|
+
import type { Density } from "../types";
|
|
3
|
+
export type ExportFormat = "csv" | "json" | "xlsx";
|
|
4
|
+
export type BulkAction = "delete" | "archive" | "copy" | "edit" | "export";
|
|
5
|
+
export interface BulkActionOption {
|
|
6
|
+
id: BulkAction;
|
|
7
|
+
label: string;
|
|
8
|
+
icon: ReactNode;
|
|
9
|
+
onClick: (selectedRows: Set<string | number>) => void;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
destructive?: boolean;
|
|
12
|
+
}
|
|
13
|
+
interface ColumnVisibility {
|
|
14
|
+
[columnKey: string]: boolean;
|
|
15
|
+
}
|
|
16
|
+
interface SavedFilter {
|
|
17
|
+
id: string;
|
|
18
|
+
name: string;
|
|
19
|
+
globalFilter: string;
|
|
20
|
+
columnFilters: Record<string, any>;
|
|
21
|
+
}
|
|
22
|
+
interface SearchToolbarProps {
|
|
23
|
+
globalFilter: string;
|
|
24
|
+
filteredDataLength: number;
|
|
25
|
+
totalDataLength: number;
|
|
26
|
+
paginationMode?: "client" | "server";
|
|
27
|
+
totalRows?: number;
|
|
28
|
+
selectedRowsCount?: number;
|
|
29
|
+
selectedRows?: Set<string | number>;
|
|
30
|
+
showExport?: boolean;
|
|
31
|
+
showRefresh?: boolean;
|
|
32
|
+
showColumnToggle?: boolean;
|
|
33
|
+
showBulkActions?: boolean;
|
|
34
|
+
showSavedFilters?: boolean;
|
|
35
|
+
columns?: Array<{
|
|
36
|
+
key: string;
|
|
37
|
+
header: string;
|
|
38
|
+
visible?: boolean;
|
|
39
|
+
filterOptions?: Array<{
|
|
40
|
+
label: string;
|
|
41
|
+
value: string | number;
|
|
42
|
+
}>;
|
|
43
|
+
filterType?: "text" | "select" | "multiselect";
|
|
44
|
+
filterable?: any;
|
|
45
|
+
}>;
|
|
46
|
+
columnVisibility?: ColumnVisibility;
|
|
47
|
+
columnFilters?: Record<string, any>;
|
|
48
|
+
savedFilters?: SavedFilter[];
|
|
49
|
+
bulkActions?: BulkActionOption[];
|
|
50
|
+
isLoading?: boolean;
|
|
51
|
+
exportOptions?: {
|
|
52
|
+
enabled: boolean;
|
|
53
|
+
formats?: ExportFormat[];
|
|
54
|
+
filename?: string;
|
|
55
|
+
onExport?: (format: ExportFormat, exportSelected: boolean) => void;
|
|
56
|
+
};
|
|
57
|
+
onGlobalFilterChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
58
|
+
onClearFilters?: () => void;
|
|
59
|
+
onRefresh?: () => void;
|
|
60
|
+
onColumnVisibilityChange?: (columnKey: string, visible: boolean) => void;
|
|
61
|
+
onColumnFilter?: (columnKey: string, filter: any) => void;
|
|
62
|
+
onSaveFilter?: (filter: Omit<SavedFilter, "id">) => void;
|
|
63
|
+
onLoadFilter?: (filter: SavedFilter) => void;
|
|
64
|
+
onDeleteFilter?: (filterId: string) => void;
|
|
65
|
+
onRowSelect?: (selectedRows: number[]) => void;
|
|
66
|
+
onToggleFilters?: (show: boolean) => void;
|
|
67
|
+
onResetColumns?: () => void;
|
|
68
|
+
columnOrder?: string[];
|
|
69
|
+
onColumnOrderChange?: (order: string[]) => void;
|
|
70
|
+
pinnedColumns?: Set<string>;
|
|
71
|
+
onScrollToColumn?: (columnKey: string) => void;
|
|
72
|
+
density?: Density;
|
|
73
|
+
onDensityChange?: (density: Density) => void;
|
|
74
|
+
showDensityControl?: boolean;
|
|
75
|
+
customLeftContent?: ReactNode;
|
|
76
|
+
customRightContent?: ReactNode;
|
|
77
|
+
}
|
|
78
|
+
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;
|
|
79
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ColumnFilterValue } from "../../types";
|
|
2
|
+
interface BooleanFilterProps {
|
|
3
|
+
value: ColumnFilterValue | null;
|
|
4
|
+
onChange: (value: ColumnFilterValue | null) => void;
|
|
5
|
+
}
|
|
6
|
+
export declare const BooleanFilter: ({ value, onChange }: BooleanFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ColumnFilterValue } from "../../types";
|
|
2
|
+
interface DateFilterProps {
|
|
3
|
+
value: ColumnFilterValue | null;
|
|
4
|
+
onChange: (value: ColumnFilterValue | null) => void;
|
|
5
|
+
min?: number;
|
|
6
|
+
max?: number;
|
|
7
|
+
}
|
|
8
|
+
export declare const DateFilter: ({ value, onChange, min, max }: DateFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ColumnFilterValue, GridColumn, GridRow } from "../../types";
|
|
2
|
+
interface FilterContentProps {
|
|
3
|
+
column: GridColumn;
|
|
4
|
+
data: GridRow[];
|
|
5
|
+
value: ColumnFilterValue | null;
|
|
6
|
+
onChange: (val: ColumnFilterValue | null) => void;
|
|
7
|
+
}
|
|
8
|
+
export declare const FilterContent: ({ column, data, value, onChange }: FilterContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ColumnFilterValue, FilterOption, GridRow } from "../../types";
|
|
2
|
+
interface MultiselectFilterProps {
|
|
3
|
+
value: ColumnFilterValue | null;
|
|
4
|
+
onChange: (value: ColumnFilterValue | null) => void;
|
|
5
|
+
options?: FilterOption[];
|
|
6
|
+
data: GridRow[];
|
|
7
|
+
columnKey: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const MultiselectFilter: ({ value, onChange, options, data, columnKey, }: MultiselectFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ColumnFilterValue } from "../../types";
|
|
2
|
+
interface NumberFilterProps {
|
|
3
|
+
value: ColumnFilterValue | null;
|
|
4
|
+
onChange: (value: ColumnFilterValue | null) => void;
|
|
5
|
+
min?: number;
|
|
6
|
+
max?: number;
|
|
7
|
+
}
|
|
8
|
+
export declare const NumberFilter: ({ value, onChange, min, max, }: NumberFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ColumnFilterValue } from "../../types";
|
|
2
|
+
interface TextFilterProps {
|
|
3
|
+
value: ColumnFilterValue | null;
|
|
4
|
+
onChange: (value: ColumnFilterValue | null) => void;
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const TextFilter: ({ value, onChange, placeholder, }: TextFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { TextFilter } from './TextFilter';
|
|
2
|
+
export { NumberFilter } from './NumberFilter';
|
|
3
|
+
export { DateFilter } from './DateFilter';
|
|
4
|
+
export { MultiselectFilter } from './MultiselectFilter';
|
|
5
|
+
export { BooleanFilter } from './BooleanFilter';
|
|
6
|
+
export { FilterPopup } from './FilterPopup';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface DatePickerProps {
|
|
3
|
+
name?: string;
|
|
4
|
+
label?: string;
|
|
5
|
+
value: string | null;
|
|
6
|
+
onChange: (value: string | null) => void;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const DatePicker: React.FC<DatePickerProps>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const SELECT_COL_WIDTH = 48;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { GridRow, GridColumn, ActiveFilters, ColumnFilterValue } from "../types";
|
|
2
|
+
interface UseAdvancedFilteringProps {
|
|
3
|
+
data: GridRow[];
|
|
4
|
+
columns: GridColumn[];
|
|
5
|
+
}
|
|
6
|
+
export declare const useAdvancedFiltering: ({ data, columns, }: UseAdvancedFilteringProps) => {
|
|
7
|
+
globalFilter: string;
|
|
8
|
+
setGlobalFilter: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
9
|
+
columnFilters: ActiveFilters;
|
|
10
|
+
filteredData: GridRow[];
|
|
11
|
+
setColumnFilter: (columnKey: string, filter: ColumnFilterValue | null) => void;
|
|
12
|
+
clearColumnFilter: (columnKey: string) => void;
|
|
13
|
+
clearAllFilters: () => void;
|
|
14
|
+
getActiveFilterCount: () => number;
|
|
15
|
+
};
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { GridRow, GridColumn } from "../types";
|
|
2
|
+
export type ExportFormat = "csv" | "json" | "xlsx";
|
|
3
|
+
interface UseExportProps {
|
|
4
|
+
data: GridRow[];
|
|
5
|
+
columns: GridColumn[];
|
|
6
|
+
selectedRows?: Set<string | number>;
|
|
7
|
+
filename?: string;
|
|
8
|
+
columnVisibility?: Record<string, boolean>;
|
|
9
|
+
}
|
|
10
|
+
export declare const useExport: ({ data, columns, selectedRows, filename, columnVisibility, }: UseExportProps) => {
|
|
11
|
+
exportData: (format: ExportFormat, exportSelected?: boolean) => void;
|
|
12
|
+
canExportSelected: boolean;
|
|
13
|
+
selectedCount: number;
|
|
14
|
+
};
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ChangeEvent } from "react";
|
|
2
|
+
import { SortConfig, GridRow, GridColumn } from "../types";
|
|
3
|
+
interface UseFilteringAndSortingProps {
|
|
4
|
+
data: GridRow[];
|
|
5
|
+
columns: GridColumn[];
|
|
6
|
+
}
|
|
7
|
+
export declare const useFilteringAndSorting: ({ data, columns, }: UseFilteringAndSortingProps) => {
|
|
8
|
+
sortConfig: SortConfig;
|
|
9
|
+
filters: Record<string, string>;
|
|
10
|
+
globalFilter: string;
|
|
11
|
+
filteredData: GridRow[];
|
|
12
|
+
handleSort: (key: string) => void;
|
|
13
|
+
handleFilter: (key: string, value: string) => void;
|
|
14
|
+
handleGlobalFilterChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
15
|
+
};
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { GridRow, GroupConfig, GridColumn } from "../types";
|
|
2
|
+
interface UseGroupingProps {
|
|
3
|
+
data: GridRow[];
|
|
4
|
+
columns: GridColumn[];
|
|
5
|
+
}
|
|
6
|
+
export declare const useGrouping: ({ data, columns }: UseGroupingProps) => {
|
|
7
|
+
groupConfig: GroupConfig;
|
|
8
|
+
displayData: (GridRow & {
|
|
9
|
+
_isGroupHeader?: boolean;
|
|
10
|
+
_groupKey?: string;
|
|
11
|
+
_groupCount?: number;
|
|
12
|
+
_groupLevel?: number;
|
|
13
|
+
_groupColumnKey?: string;
|
|
14
|
+
_groupValue?: string;
|
|
15
|
+
_groupRows?: GridRow[];
|
|
16
|
+
_isGroupFooter?: boolean;
|
|
17
|
+
_groupAgg?: Record<string, any>;
|
|
18
|
+
})[];
|
|
19
|
+
handleGroupBy: (columnKey: string | null) => void;
|
|
20
|
+
addGroupKey: (columnKey: string) => void;
|
|
21
|
+
removeGroupKey: (columnKey: string) => void;
|
|
22
|
+
setGroupKeys: (columnKeys: string[]) => void;
|
|
23
|
+
toggleGroupExpansion: (groupPath: string) => void;
|
|
24
|
+
expandAllGroups: () => void;
|
|
25
|
+
collapseAllGroups: () => void;
|
|
26
|
+
isGrouped: boolean;
|
|
27
|
+
};
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { PaginationConfig, GridRow } from "../types";
|
|
2
|
+
interface UsePaginationProps {
|
|
3
|
+
data: GridRow[];
|
|
4
|
+
pagination?: {
|
|
5
|
+
enabled?: boolean;
|
|
6
|
+
mode?: "client" | "server";
|
|
7
|
+
pageSize?: number;
|
|
8
|
+
showPageSizeSelector?: boolean;
|
|
9
|
+
pageSizeOptions?: number[];
|
|
10
|
+
serverConfig?: {
|
|
11
|
+
enabled: boolean;
|
|
12
|
+
onPageChange: (page: number, pageSize: number) => Promise<void> | void;
|
|
13
|
+
onPageSizeChange?: (pageSize: number) => Promise<void> | void;
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
totalRows: number;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
export declare const usePagination: ({ data, pagination }: UsePaginationProps) => {
|
|
20
|
+
currentPage: number;
|
|
21
|
+
resetPage: () => void;
|
|
22
|
+
paginationConfig: PaginationConfig;
|
|
23
|
+
paginatedData: GridRow[];
|
|
24
|
+
isServerLoading: boolean;
|
|
25
|
+
handlePageChange: (page: number) => Promise<void>;
|
|
26
|
+
handlePageSizeChange: (newPageSize: number) => Promise<void>;
|
|
27
|
+
};
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { GridRow } from "../types";
|
|
2
|
+
interface UseSelectionProps {
|
|
3
|
+
data: GridRow[];
|
|
4
|
+
selectedRowIds?: Iterable<string | number> | null;
|
|
5
|
+
onRowSelect?: (row: GridRow) => void;
|
|
6
|
+
getRowId?: (row: GridRow) => string | number;
|
|
7
|
+
}
|
|
8
|
+
export declare const useSelection: ({ data, selectedRowIds, onRowSelect, getRowId, }: UseSelectionProps) => {
|
|
9
|
+
selectedRows: Set<string | number>;
|
|
10
|
+
handleRowSelect: (rowId: string | number, isSelected: boolean) => void;
|
|
11
|
+
handleSelectAll: (isSelected: boolean) => void;
|
|
12
|
+
};
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { UIEvent } from "react";
|
|
2
|
+
import { VirtualizedRange, GridRow } from "../types";
|
|
3
|
+
interface UseVirtualizationProps {
|
|
4
|
+
data: GridRow[];
|
|
5
|
+
virtualized?: boolean;
|
|
6
|
+
rowHeight?: number;
|
|
7
|
+
overscan?: number;
|
|
8
|
+
height: number;
|
|
9
|
+
}
|
|
10
|
+
export declare const useVirtualization: ({ data, virtualized, rowHeight, overscan, height, }: UseVirtualizationProps) => {
|
|
11
|
+
scrollRef: import("react").MutableRefObject<HTMLDivElement>;
|
|
12
|
+
virtualizedRange: VirtualizedRange;
|
|
13
|
+
visibleData: GridRow[];
|
|
14
|
+
totalHeight: number;
|
|
15
|
+
handleScroll: (e: UIEvent<HTMLDivElement>) => void;
|
|
16
|
+
};
|
|
17
|
+
export {};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { KDGrid } from "./core/DataGrid";
|
|
2
|
+
export * from "./types";
|
|
3
|
+
export { usePagination } from "./hooks/usePagination";
|
|
4
|
+
export { useVirtualization } from "./hooks/useVirtualization";
|
|
5
|
+
export { useFilteringAndSorting } from "./hooks/useFilteringAndSorting";
|
|
6
|
+
export { useSelection } from "./hooks/useSelection";
|
|
7
|
+
export { PaginationControls } from "./components/PaginationControls";
|
|
8
|
+
export { GridHeader } from "./components/GridHeader";
|
|
9
|
+
export { GridRows } from "./components/GridRows";
|
|
10
|
+
export { SearchToolbar } from "./components/SearchToolbar";
|
|
11
|
+
export { FooterAggregate } from "./components/FooterAggregate";
|