simple-table-core 1.2.1 → 1.2.3

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.
Files changed (41) hide show
  1. package/dist/components/animate/Animate.d.ts +13 -0
  2. package/dist/components/animate/animation-utils.d.ts +70 -0
  3. package/dist/components/animate/types.d.ts +26 -0
  4. package/dist/components/filters/shared/FilterInput.d.ts +1 -0
  5. package/dist/components/simple-table/RenderCells.d.ts +2 -2
  6. package/dist/components/simple-table/SimpleTable.d.ts +2 -2
  7. package/dist/components/simple-table/TableBody.d.ts +1 -1
  8. package/dist/components/simple-table/TableCell.d.ts +1 -12
  9. package/dist/components/simple-table/TableContent.d.ts +4 -4
  10. package/dist/components/simple-table/TableHeader.d.ts +1 -1
  11. package/dist/components/simple-table/TableHeaderCell.d.ts +3 -4
  12. package/dist/components/simple-table/TableRow.d.ts +2 -2
  13. package/dist/components/simple-table/TableSection.d.ts +2 -2
  14. package/dist/context/TableContext.d.ts +8 -2
  15. package/dist/hooks/useExternalFilters.d.ts +6 -0
  16. package/dist/hooks/useExternalSort.d.ts +6 -0
  17. package/dist/hooks/useFilterableData.d.ts +17 -0
  18. package/dist/hooks/useOnGridReady.d.ts +4 -0
  19. package/dist/hooks/useScrollbarWidth.d.ts +9 -0
  20. package/dist/hooks/useSortableData.d.ts +5 -6
  21. package/dist/hooks/useTableAPI.d.ts +10 -0
  22. package/dist/hooks/useTableRowProcessing.d.ts +27 -0
  23. package/dist/index.es.js +1 -1
  24. package/dist/index.js +1 -1
  25. package/dist/styles.css +1 -1
  26. package/dist/types/CellValue.d.ts +1 -1
  27. package/dist/types/HandleResizeStartProps.d.ts +1 -0
  28. package/dist/types/OnSortProps.d.ts +1 -1
  29. package/dist/types/SortConfig.d.ts +3 -2
  30. package/dist/types/TableBodyProps.d.ts +2 -4
  31. package/dist/types/TableCellProps.d.ts +5 -14
  32. package/dist/types/TableHeaderProps.d.ts +2 -3
  33. package/dist/types/TableHeaderSectionProps.d.ts +2 -2
  34. package/dist/types/TableRow.d.ts +2 -2
  35. package/dist/utils/cellUtils.d.ts +2 -2
  36. package/dist/utils/infiniteScrollUtils.d.ts +2 -2
  37. package/dist/utils/resizeUtils.d.ts +1 -1
  38. package/dist/utils/rowUtils.d.ts +9 -2
  39. package/dist/utils/sortUtils.d.ts +6 -5
  40. package/package.json +1 -1
  41. package/dist/hooks/useTableFilters.d.ts +0 -15
@@ -0,0 +1,13 @@
1
+ import React, { ReactNode, RefObject } from "react";
2
+ import TableRow from "../../types/TableRow";
3
+ interface AnimateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
4
+ children: ReactNode;
5
+ id: string;
6
+ parentRef?: RefObject<HTMLDivElement | null>;
7
+ tableRow?: TableRow;
8
+ }
9
+ export declare const Animate: {
10
+ ({ children, id, parentRef, tableRow, ...props }: AnimateProps): import("react/jsx-runtime").JSX.Element;
11
+ displayName: string;
12
+ };
13
+ export default Animate;
@@ -0,0 +1,70 @@
1
+ import { AnimationConfig, FlipAnimationOptions, CustomAnimationOptions } from "./types";
2
+ /**
3
+ * Check if user prefers reduced motion
4
+ */
5
+ export declare const prefersReducedMotion: () => boolean;
6
+ /**
7
+ * Animation configs for different types of movements
8
+ */
9
+ export declare const ANIMATION_CONFIGS: {
10
+ readonly COLUMN_REORDER: {
11
+ readonly duration: 180;
12
+ readonly easing: "cubic-bezier(0.2, 0.0, 0.2, 1)";
13
+ readonly delay: 0;
14
+ };
15
+ readonly ROW_REORDER: {
16
+ readonly duration: 10000;
17
+ readonly easing: "cubic-bezier(0.2, 0.0, 0.2, 1)";
18
+ readonly delay: 0;
19
+ };
20
+ readonly REDUCED_MOTION: {
21
+ readonly duration: 150;
22
+ readonly easing: "ease-out";
23
+ readonly delay: 0;
24
+ };
25
+ };
26
+ /**
27
+ * Create a custom animation config with smart defaults
28
+ */
29
+ export declare const createAnimationConfig: (overrides?: Partial<AnimationConfig>) => AnimationConfig;
30
+ /**
31
+ * Calculates the invert values for FLIP animation
32
+ */
33
+ export declare const calculateInvert: (fromBounds: DOMRect | {
34
+ x: number;
35
+ y: number;
36
+ }, toBounds: DOMRect) => {
37
+ x: number;
38
+ y: number;
39
+ };
40
+ /**
41
+ * Applies initial transform to element for FLIP animation
42
+ */
43
+ export declare const applyInitialTransform: (element: HTMLElement, invert: {
44
+ x: number;
45
+ y: number;
46
+ }) => void;
47
+ /**
48
+ * Get appropriate animation config based on movement type and user preferences
49
+ */
50
+ export declare const getAnimationConfig: (options?: FlipAnimationOptions, movementType?: "column" | "row") => AnimationConfig;
51
+ /**
52
+ * Performs FLIP animation on a single element
53
+ * This function can be called multiple times on the same element - it will automatically
54
+ * interrupt any ongoing animation and start a new one.
55
+ */
56
+ export declare const flipElement: ({ element, finalConfig, fromBounds, toBounds, }: {
57
+ element: HTMLElement;
58
+ finalConfig: FlipAnimationOptions;
59
+ fromBounds: DOMRect;
60
+ toBounds: DOMRect;
61
+ }) => Promise<void>;
62
+ /**
63
+ * Performs custom coordinate animation with absolute position control
64
+ * This allows you to animate an element from one Y coordinate to another,
65
+ * completely independent of the element's actual DOM position.
66
+ */
67
+ export declare const animateWithCustomCoordinates: ({ element, options, }: {
68
+ element: HTMLElement;
69
+ options: CustomAnimationOptions;
70
+ }) => Promise<void>;
@@ -0,0 +1,26 @@
1
+ export interface AnimationConfig {
2
+ duration: number;
3
+ easing: string;
4
+ delay?: number;
5
+ }
6
+ export interface FlipAnimationOptions {
7
+ duration?: number;
8
+ easing?: string;
9
+ delay?: number;
10
+ maxX?: number;
11
+ maxY?: number;
12
+ maxYLeavingRatio?: number;
13
+ maxYEnteringRatio?: number;
14
+ onComplete?: () => void;
15
+ respectReducedMotion?: boolean;
16
+ }
17
+ export interface CustomAnimationOptions {
18
+ startY: number;
19
+ endY: number;
20
+ finalY?: number;
21
+ duration?: number;
22
+ easing?: string;
23
+ delay?: number;
24
+ onComplete?: () => void;
25
+ respectReducedMotion?: boolean;
26
+ }
@@ -6,6 +6,7 @@ interface FilterInputProps {
6
6
  placeholder?: string;
7
7
  autoFocus?: boolean;
8
8
  className?: string;
9
+ onEnterPress?: () => void;
9
10
  }
10
11
  declare const FilterInput: React.FC<FilterInputProps>;
11
12
  export default FilterInput;
@@ -10,7 +10,7 @@ interface RenderCellsProps {
10
10
  pinned?: Pinned;
11
11
  rowIndex: number;
12
12
  rowIndices: RowIndices;
13
- visibleRow: TableRowType;
13
+ tableRow: TableRowType;
14
14
  }
15
- declare const RenderCells: ({ columnIndexStart, columnIndices, headers, pinned, rowIndex, rowIndices, visibleRow, }: RenderCellsProps) => import("react/jsx-runtime").JSX.Element;
15
+ declare const RenderCells: ({ columnIndexStart, columnIndices, headers, pinned, rowIndex, rowIndices, tableRow, }: RenderCellsProps) => import("react/jsx-runtime").JSX.Element;
16
16
  export default RenderCells;
@@ -8,7 +8,7 @@ import TableRefType from "../../types/TableRefType";
8
8
  import OnNextPage from "../../types/OnNextPage";
9
9
  import "../../styles/simple-table.css";
10
10
  import { TableFilterState } from "../../types/FilterTypes";
11
- import SortConfig from "../../types/SortConfig";
11
+ import { SortColumn } from "../../types/SortConfig";
12
12
  interface SimpleTableProps {
13
13
  allowAnimations?: boolean;
14
14
  cellUpdateFlash?: boolean;
@@ -32,7 +32,7 @@ interface SimpleTableProps {
32
32
  onGridReady?: () => void;
33
33
  onLoadMore?: () => void;
34
34
  onNextPage?: OnNextPage;
35
- onSortChange?: (sort: SortConfig | null) => void;
35
+ onSortChange?: (sort: SortColumn | null) => void;
36
36
  prevIcon?: ReactNode;
37
37
  rowGrouping?: string[];
38
38
  rowHeight?: number;
@@ -1,3 +1,3 @@
1
1
  import TableBodyProps from "../../types/TableBodyProps";
2
- declare const TableBody: ({ headerContainerRef, mainTemplateColumns, pinnedLeftColumns, pinnedLeftTemplateColumns, pinnedLeftWidth, pinnedRightColumns, pinnedRightTemplateColumns, pinnedRightWidth, setScrollTop, tableRows, visibleRows, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
2
+ declare const TableBody: ({ mainTemplateColumns, pinnedLeftColumns, pinnedLeftTemplateColumns, pinnedLeftWidth, pinnedRightColumns, pinnedRightTemplateColumns, pinnedRightWidth, rowsToRender, setScrollTop, tableRows, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default TableBody;
@@ -1,14 +1,3 @@
1
- /// <reference types="react" />
2
1
  import TableCellProps from "../../types/TableCellProps";
3
- interface CellProps {
4
- borderClass: string;
5
- colIndex: number;
6
- header: TableCellProps["header"];
7
- isHighlighted: boolean;
8
- isInitialFocused: boolean;
9
- nestedIndex: number;
10
- rowIndex: number;
11
- visibleRow: TableCellProps["visibleRow"];
12
- }
13
- declare const TableCell: import("react").ForwardRefExoticComponent<CellProps & import("react").RefAttributes<HTMLDivElement>>;
2
+ declare const TableCell: ({ borderClass, colIndex, header, isHighlighted, isInitialFocused, nestedIndex, rowIndex, tableRow, }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
14
3
  export default TableCell;
@@ -1,13 +1,13 @@
1
1
  import { Dispatch, SetStateAction } from "react";
2
- import SortConfig from "../../types/SortConfig";
2
+ import { SortColumn } from "../../types/SortConfig";
3
3
  import TableRow from "../../types/TableRow";
4
4
  interface TableContentLocalProps {
5
5
  pinnedLeftWidth: number;
6
6
  pinnedRightWidth: number;
7
7
  setScrollTop: Dispatch<SetStateAction<number>>;
8
- sort: SortConfig | null;
8
+ sort: SortColumn | null;
9
9
  tableRows: TableRow[];
10
- visibleRows: TableRow[];
10
+ rowsToRender: TableRow[];
11
11
  }
12
- declare const TableContent: ({ pinnedLeftWidth, pinnedRightWidth, setScrollTop, sort, tableRows, visibleRows, }: TableContentLocalProps) => import("react/jsx-runtime").JSX.Element;
12
+ declare const TableContent: ({ pinnedLeftWidth, pinnedRightWidth, setScrollTop, sort, tableRows, rowsToRender, }: TableContentLocalProps) => import("react/jsx-runtime").JSX.Element;
13
13
  export default TableContent;
@@ -1,3 +1,3 @@
1
1
  import TableHeaderProps from "../../types/TableHeaderProps";
2
- declare const TableHeader: ({ centerHeaderRef, headerContainerRef, headers, mainTemplateColumns, pinnedLeftColumns, pinnedLeftTemplateColumns, pinnedRightColumns, pinnedRightTemplateColumns, sort, pinnedLeftWidth, pinnedRightWidth, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
2
+ declare const TableHeader: ({ centerHeaderRef, headers, mainTemplateColumns, pinnedLeftColumns, pinnedLeftTemplateColumns, pinnedRightColumns, pinnedRightTemplateColumns, sort, pinnedLeftWidth, pinnedRightWidth, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default TableHeader;
@@ -1,6 +1,5 @@
1
- /// <reference types="react" />
2
1
  import HeaderObject from "../../types/HeaderObject";
3
- import SortConfig from "../../types/SortConfig";
2
+ import { SortColumn } from "../../types/SortConfig";
4
3
  interface HeaderCellProps {
5
4
  colIndex: number;
6
5
  gridColumnEnd: number;
@@ -9,7 +8,7 @@ interface HeaderCellProps {
9
8
  gridRowStart: number;
10
9
  header: HeaderObject;
11
10
  reverse?: boolean;
12
- sort: SortConfig | null;
11
+ sort: SortColumn | null;
13
12
  }
14
- declare const TableHeaderCell: import("react").ForwardRefExoticComponent<HeaderCellProps & import("react").RefAttributes<HTMLDivElement>>;
13
+ declare const TableHeaderCell: ({ colIndex, gridColumnEnd, gridColumnStart, gridRowEnd, gridRowStart, header, reverse, sort, }: HeaderCellProps) => import("react/jsx-runtime").JSX.Element | null;
15
14
  export default TableHeaderCell;
@@ -14,7 +14,7 @@ interface TableRowProps {
14
14
  rowHeight: number;
15
15
  rowIndices: RowIndices;
16
16
  setHoveredIndex: (index: number | null) => void;
17
- visibleRow: TableRowType;
17
+ tableRow: TableRowType;
18
18
  }
19
- declare const TableRow: ({ columnIndices, columnIndexStart, gridTemplateColumns, headers, hoveredIndex, index, pinned, rowHeight, rowIndices, setHoveredIndex, visibleRow, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
19
+ declare const TableRow: ({ columnIndices, columnIndexStart, gridTemplateColumns, headers, hoveredIndex, index, pinned, rowHeight, rowIndices, setHoveredIndex, tableRow, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
20
20
  export default TableRow;
@@ -13,11 +13,11 @@ interface TableSectionProps {
13
13
  ref?: RefObject<HTMLDivElement | null>;
14
14
  rowHeight: number;
15
15
  rowIndices: RowIndices;
16
+ rowsToRender: TableRowType[];
16
17
  setHoveredIndex: (index: number | null) => void;
17
18
  templateColumns: string;
18
19
  totalHeight: number;
19
- visibleRows: TableRowType[];
20
20
  width?: number;
21
21
  }
22
- declare const TableSection: ({ columnIndexStart, columnIndices, headers, hoveredIndex, pinned, ref, rowHeight, rowIndices, setHoveredIndex, templateColumns, totalHeight, visibleRows, width, }: TableSectionProps) => import("react/jsx-runtime").JSX.Element | null;
22
+ declare const TableSection: ({ columnIndexStart, columnIndices, headers, hoveredIndex, pinned, ref, rowHeight, rowIndices, setHoveredIndex, templateColumns, totalHeight, rowsToRender, width, }: TableSectionProps) => import("react/jsx-runtime").JSX.Element | null;
23
23
  export default TableSection;
@@ -18,7 +18,6 @@ interface TableContextType {
18
18
  draggedHeaderRef: RefObject<HeaderObject | null>;
19
19
  editColumns?: boolean;
20
20
  expandIcon?: ReactNode;
21
- unexpandedRows: Set<string>;
22
21
  filters: TableFilterState;
23
22
  forceUpdate: () => void;
24
23
  getBorderClass: (cell: Cell) => string;
@@ -27,10 +26,14 @@ interface TableContextType {
27
26
  handleClearFilter: (accessor: string) => void;
28
27
  handleMouseDown: (cell: Cell) => void;
29
28
  handleMouseOver: (cell: Cell) => void;
29
+ headerContainerRef: RefObject<HTMLDivElement | null>;
30
30
  headers: HeaderObject[];
31
31
  hoveredHeaderRef: RefObject<HeaderObject | null>;
32
+ isAnimating: boolean;
32
33
  isCopyFlashing: (cell: Cell) => boolean;
33
34
  isInitialFocusedCell: (cell: Cell) => boolean;
35
+ isResizing: boolean;
36
+ isScrolling: boolean;
34
37
  isSelected: (cell: Cell) => boolean;
35
38
  isWarningFlashing: (cell: Cell) => boolean;
36
39
  mainBodyRef: RefObject<HTMLDivElement | null>;
@@ -49,17 +52,20 @@ interface TableContextType {
49
52
  scrollbarWidth: number;
50
53
  selectColumns?: (columnIndices: number[], isShiftKey?: boolean) => void;
51
54
  selectableColumns: boolean;
52
- setUnexpandedRows: Dispatch<SetStateAction<Set<string>>>;
53
55
  setHeaders: Dispatch<SetStateAction<HeaderObject[]>>;
54
56
  setInitialFocusedCell: Dispatch<SetStateAction<Cell | null>>;
57
+ setIsResizing: Dispatch<SetStateAction<boolean>>;
58
+ setIsScrolling: Dispatch<SetStateAction<boolean>>;
55
59
  setSelectedCells: Dispatch<SetStateAction<Set<string>>>;
56
60
  setSelectedColumns: Dispatch<SetStateAction<Set<number>>>;
61
+ setUnexpandedRows: Dispatch<SetStateAction<Set<string>>>;
57
62
  shouldPaginate: boolean;
58
63
  sortDownIcon: ReactNode;
59
64
  sortUpIcon: ReactNode;
60
65
  tableBodyContainerRef: RefObject<HTMLDivElement | null>;
61
66
  tableRows: TableRow[];
62
67
  theme: Theme;
68
+ unexpandedRows: Set<string>;
63
69
  useHoverRowBackground: boolean;
64
70
  useOddColumnBackground: boolean;
65
71
  useOddEvenRowBackground: boolean;
@@ -0,0 +1,6 @@
1
+ import { TableFilterState } from "../types/FilterTypes";
2
+ declare const useExternalFilters: ({ filters, onFilterChange, }: {
3
+ filters: TableFilterState;
4
+ onFilterChange?: ((filters: TableFilterState) => void) | undefined;
5
+ }) => void;
6
+ export default useExternalFilters;
@@ -0,0 +1,6 @@
1
+ import { SortColumn } from "../types/SortConfig";
2
+ declare const useExternalSort: ({ sort, onSortChange, }: {
3
+ sort: SortColumn | null;
4
+ onSortChange?: ((sort: SortColumn | null) => void) | undefined;
5
+ }) => void;
6
+ export default useExternalSort;
@@ -0,0 +1,17 @@
1
+ import { TableFilterState, FilterCondition } from "../types/FilterTypes";
2
+ import Row from "../types/Row";
3
+ interface UseFilterableDataProps {
4
+ rows: Row[];
5
+ externalFilterHandling: boolean;
6
+ onFilterChange?: (filters: TableFilterState) => void;
7
+ }
8
+ interface UseFilterableDataReturn {
9
+ filteredRows: Row[];
10
+ updateFilter: (filter: FilterCondition) => void;
11
+ clearFilter: (accessor: string) => void;
12
+ clearAllFilters: () => void;
13
+ filters: TableFilterState;
14
+ computeFilteredRowsPreview: (filter: FilterCondition) => Row[];
15
+ }
16
+ declare const useFilterableData: ({ rows, externalFilterHandling, onFilterChange, }: UseFilterableDataProps) => UseFilterableDataReturn;
17
+ export default useFilterableData;
@@ -0,0 +1,4 @@
1
+ declare const useOnGridReady: ({ onGridReady }: {
2
+ onGridReady?: (() => void) | undefined;
3
+ }) => void;
4
+ export default useOnGridReady;
@@ -0,0 +1,9 @@
1
+ import { RefObject } from "react";
2
+ declare const useScrollbarWidth: ({ tableBodyContainerRef, }: {
3
+ tableBodyContainerRef: RefObject<HTMLDivElement | null>;
4
+ }) => {
5
+ setScrollbarWidth: import("react").Dispatch<import("react").SetStateAction<number>>;
6
+ scrollbarWidth: number;
7
+ tableBodyContainerRef: RefObject<HTMLDivElement | null>;
8
+ };
9
+ export default useScrollbarWidth;
@@ -1,17 +1,16 @@
1
- /// <reference types="react" />
2
1
  import HeaderObject from "../types/HeaderObject";
3
2
  import Row from "../types/Row";
4
- import SortConfig from "../types/SortConfig";
3
+ import { SortColumn } from "../types/SortConfig";
5
4
  declare const useSortableData: ({ headers, tableRows, externalSortHandling, onSortChange, rowGrouping, }: {
6
5
  headers: HeaderObject[];
7
6
  tableRows: Row[];
8
7
  externalSortHandling: boolean;
9
- onSortChange?: ((sort: SortConfig | null) => void) | undefined;
8
+ onSortChange?: ((sort: SortColumn | null) => void) | undefined;
10
9
  rowGrouping?: string[] | undefined;
11
10
  }) => {
12
- setSort: import("react").Dispatch<import("react").SetStateAction<SortConfig | null>>;
13
- sort: SortConfig | null;
11
+ sort: SortColumn | null;
14
12
  sortedRows: Row[];
15
- updateSort: (columnIndex: number, accessor: string) => void;
13
+ updateSort: (accessor: string) => void;
14
+ computeSortedRowsPreview: (accessor: string) => Row[];
16
15
  };
17
16
  export default useSortableData;
@@ -0,0 +1,10 @@
1
+ import { RefObject } from "react";
2
+ import { Row, TableRefType } from "..";
3
+ import { CellRegistryEntry } from "../context/TableContext";
4
+ declare const useTableAPI: ({ tableRef, rows, rowIdAccessor, cellRegistryRef, }: {
5
+ tableRef?: RefObject<TableRefType | null> | undefined;
6
+ rows: Row[];
7
+ rowIdAccessor: string;
8
+ cellRegistryRef: RefObject<Map<string, CellRegistryEntry>>;
9
+ }) => void;
10
+ export default useTableAPI;
@@ -0,0 +1,27 @@
1
+ import Row from "../types/Row";
2
+ interface UseTableRowProcessingProps {
3
+ allowAnimations: boolean;
4
+ sortedRows: Row[];
5
+ originalRows: Row[];
6
+ currentPage: number;
7
+ rowsPerPage: number;
8
+ shouldPaginate: boolean;
9
+ rowGrouping?: string[];
10
+ rowIdAccessor: string;
11
+ unexpandedRows: Set<string>;
12
+ expandAll: boolean;
13
+ contentHeight: number;
14
+ rowHeight: number;
15
+ scrollTop: number;
16
+ computeFilteredRowsPreview: (filter: any) => Row[];
17
+ computeSortedRowsPreview: (accessor: string) => Row[];
18
+ }
19
+ declare const useTableRowProcessing: ({ allowAnimations, sortedRows, originalRows, currentPage, rowsPerPage, shouldPaginate, rowGrouping, rowIdAccessor, unexpandedRows, expandAll, contentHeight, rowHeight, scrollTop, computeFilteredRowsPreview, computeSortedRowsPreview, }: UseTableRowProcessingProps) => {
20
+ currentTableRows: import("../types/TableRow").default[];
21
+ currentVisibleRows: import("../types/TableRow").default[];
22
+ isAnimating: boolean;
23
+ prepareForFilterChange: (filter: any) => void;
24
+ prepareForSortChange: (accessor: string) => void;
25
+ rowsToRender: any[];
26
+ };
27
+ export default useTableRowProcessing;