simple-table-core 0.1.6 → 0.1.9
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/Animate.d.ts +7 -7
- package/dist/components/SimpleTable/SimpleTable.d.ts +18 -18
- package/dist/components/SimpleTable/TableBody.d.ts +19 -19
- package/dist/components/SimpleTable/TableCell.d.ts +14 -14
- package/dist/components/SimpleTable/TableFooter.d.ts +12 -12
- package/dist/components/SimpleTable/TableHeader.d.ts +14 -14
- package/dist/components/SimpleTable/TableHeaderCell.d.ts +15 -15
- package/dist/components/SimpleTable/TableLastColumnCell.d.ts +6 -6
- package/dist/components/SimpleTable/TableRowSeparator.d.ts +2 -2
- package/dist/consts/SampleData.d.ts +19 -19
- package/dist/helpers/calculateBoundingBoxes.d.ts +13 -13
- package/dist/helpers/shuffleArray.d.ts +1 -1
- package/dist/hooks/usePrevious.d.ts +2 -2
- package/dist/hooks/useSelection.d.ts +19 -19
- package/dist/hooks/useTableHeaderCell.d.ts +14 -14
- package/dist/icons/AngleLeftIcon.d.ts +3 -3
- package/dist/icons/AngleRightIcon.d.ts +3 -3
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/simple-table.css +1 -0
- package/dist/types/HeaderObject.d.ts +10 -10
- package/dist/utils/performanceUtils.d.ts +1 -1
- package/dist/utils/sortUtils.d.ts +15 -15
- package/package.json +3 -2
- package/dist/stories/SimpleTable.stories.d.ts +0 -11
- package/dist/stories/SimpleTableExample.d.ts +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
interface AnimateProps {
|
|
2
|
-
allowHorizontalAnimate?: boolean;
|
|
3
|
-
children: any;
|
|
4
|
-
pause?: boolean;
|
|
5
|
-
}
|
|
6
|
-
declare const Animate: ({ allowHorizontalAnimate, children, pause, }: AnimateProps) => any;
|
|
7
|
-
export default Animate;
|
|
1
|
+
interface AnimateProps {
|
|
2
|
+
allowHorizontalAnimate?: boolean;
|
|
3
|
+
children: any;
|
|
4
|
+
pause?: boolean;
|
|
5
|
+
}
|
|
6
|
+
declare const Animate: ({ allowHorizontalAnimate, children, pause, }: AnimateProps) => any;
|
|
7
|
+
export default Animate;
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
import HeaderObject from "../../types/HeaderObject";
|
|
3
|
-
import "../../styles/simple-table.css";
|
|
4
|
-
interface SpreadsheetProps {
|
|
5
|
-
defaultHeaders: HeaderObject[];
|
|
6
|
-
enableColumnResizing?: boolean;
|
|
7
|
-
height?: string;
|
|
8
|
-
hideFooter?: boolean;
|
|
9
|
-
nextIcon?: ReactNode;
|
|
10
|
-
prevIcon?: ReactNode;
|
|
11
|
-
rows: {
|
|
12
|
-
[key: string]: string | number | boolean | undefined | null;
|
|
13
|
-
}[];
|
|
14
|
-
rowsPerPage?: number;
|
|
15
|
-
shouldPaginate?: boolean;
|
|
16
|
-
}
|
|
17
|
-
declare const SimpleTable: ({ defaultHeaders, enableColumnResizing, height, hideFooter, nextIcon, prevIcon, rows, rowsPerPage, shouldPaginate, }: SpreadsheetProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
-
export default SimpleTable;
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import HeaderObject from "../../types/HeaderObject";
|
|
3
|
+
import "../../styles/simple-table.css";
|
|
4
|
+
export interface SpreadsheetProps {
|
|
5
|
+
defaultHeaders: HeaderObject[];
|
|
6
|
+
enableColumnResizing?: boolean;
|
|
7
|
+
height?: string;
|
|
8
|
+
hideFooter?: boolean;
|
|
9
|
+
nextIcon?: ReactNode;
|
|
10
|
+
prevIcon?: ReactNode;
|
|
11
|
+
rows: {
|
|
12
|
+
[key: string]: string | number | boolean | undefined | null;
|
|
13
|
+
}[];
|
|
14
|
+
rowsPerPage?: number;
|
|
15
|
+
shouldPaginate?: boolean;
|
|
16
|
+
}
|
|
17
|
+
declare const SimpleTable: ({ defaultHeaders, enableColumnResizing, height, hideFooter, nextIcon, prevIcon, rows, rowsPerPage, shouldPaginate, }: SpreadsheetProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export default SimpleTable;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import HeaderObject from "../../types/HeaderObject";
|
|
2
|
-
interface TableBodyProps {
|
|
3
|
-
getBorderClass: (rowIndex: number, columnIndex: number) => string;
|
|
4
|
-
handleMouseDown: (rowIndex: number, columnIndex: number) => void;
|
|
5
|
-
handleMouseOver: (rowIndex: number, columnIndex: number) => void;
|
|
6
|
-
headers: HeaderObject[];
|
|
7
|
-
isSelected: (rowIndex: number, columnIndex: number) => boolean;
|
|
8
|
-
isTopLeftCell: (rowIndex: number, columnIndex: number) => boolean;
|
|
9
|
-
isWidthDragging: boolean;
|
|
10
|
-
shouldDisplayLastColumnCell: boolean;
|
|
11
|
-
shouldPaginate: boolean;
|
|
12
|
-
sortedRows: {
|
|
13
|
-
[key: string]: any;
|
|
14
|
-
}[];
|
|
15
|
-
}
|
|
16
|
-
declare const TableBody: ({ getBorderClass, handleMouseDown, handleMouseOver, headers, isSelected, isTopLeftCell, isWidthDragging, shouldDisplayLastColumnCell, shouldPaginate, sortedRows, }: TableBodyProps & {
|
|
17
|
-
shouldDisplayLastColumnCell: boolean;
|
|
18
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
-
export default TableBody;
|
|
1
|
+
import HeaderObject from "../../types/HeaderObject";
|
|
2
|
+
interface TableBodyProps {
|
|
3
|
+
getBorderClass: (rowIndex: number, columnIndex: number) => string;
|
|
4
|
+
handleMouseDown: (rowIndex: number, columnIndex: number) => void;
|
|
5
|
+
handleMouseOver: (rowIndex: number, columnIndex: number) => void;
|
|
6
|
+
headers: HeaderObject[];
|
|
7
|
+
isSelected: (rowIndex: number, columnIndex: number) => boolean;
|
|
8
|
+
isTopLeftCell: (rowIndex: number, columnIndex: number) => boolean;
|
|
9
|
+
isWidthDragging: boolean;
|
|
10
|
+
shouldDisplayLastColumnCell: boolean;
|
|
11
|
+
shouldPaginate: boolean;
|
|
12
|
+
sortedRows: {
|
|
13
|
+
[key: string]: any;
|
|
14
|
+
}[];
|
|
15
|
+
}
|
|
16
|
+
declare const TableBody: ({ getBorderClass, handleMouseDown, handleMouseOver, headers, isSelected, isTopLeftCell, isWidthDragging, shouldDisplayLastColumnCell, shouldPaginate, sortedRows, }: TableBodyProps & {
|
|
17
|
+
shouldDisplayLastColumnCell: boolean;
|
|
18
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export default TableBody;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
interface TableCellProps {
|
|
3
|
-
rowIndex: number;
|
|
4
|
-
colIndex: number;
|
|
5
|
-
content: any;
|
|
6
|
-
isSelected: boolean;
|
|
7
|
-
isTopLeftCell: boolean;
|
|
8
|
-
borderClass: string;
|
|
9
|
-
onMouseDown: (rowIndex: number, colIndex: number) => void;
|
|
10
|
-
onMouseOver: (rowIndex: number, colIndex: number) => void;
|
|
11
|
-
isLastRow: boolean;
|
|
12
|
-
}
|
|
13
|
-
declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
|
|
14
|
-
export default TableCell;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface TableCellProps {
|
|
3
|
+
rowIndex: number;
|
|
4
|
+
colIndex: number;
|
|
5
|
+
content: any;
|
|
6
|
+
isSelected: boolean;
|
|
7
|
+
isTopLeftCell: boolean;
|
|
8
|
+
borderClass: string;
|
|
9
|
+
onMouseDown: (rowIndex: number, colIndex: number) => void;
|
|
10
|
+
onMouseOver: (rowIndex: number, colIndex: number) => void;
|
|
11
|
+
isLastRow: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
|
|
14
|
+
export default TableCell;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
interface TableFooterProps {
|
|
3
|
-
currentPage: number;
|
|
4
|
-
hideFooter?: boolean;
|
|
5
|
-
nextIcon?: ReactNode;
|
|
6
|
-
onPageChange: (page: number) => void;
|
|
7
|
-
prevIcon?: ReactNode;
|
|
8
|
-
rowsPerPage: number;
|
|
9
|
-
totalRows: number;
|
|
10
|
-
}
|
|
11
|
-
declare const TableFooter: ({ currentPage, hideFooter, nextIcon, onPageChange, prevIcon, rowsPerPage, totalRows, }: TableFooterProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
12
|
-
export default TableFooter;
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
interface TableFooterProps {
|
|
3
|
+
currentPage: number;
|
|
4
|
+
hideFooter?: boolean;
|
|
5
|
+
nextIcon?: ReactNode;
|
|
6
|
+
onPageChange: (page: number) => void;
|
|
7
|
+
prevIcon?: ReactNode;
|
|
8
|
+
rowsPerPage: number;
|
|
9
|
+
totalRows: number;
|
|
10
|
+
}
|
|
11
|
+
declare const TableFooter: ({ currentPage, hideFooter, nextIcon, onPageChange, prevIcon, rowsPerPage, totalRows, }: TableFooterProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
12
|
+
export default TableFooter;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { Dispatch, SetStateAction } from "react";
|
|
2
|
-
import HeaderObject from "../../types/HeaderObject";
|
|
3
|
-
interface TableHeaderProps {
|
|
4
|
-
enableColumnResizing: boolean;
|
|
5
|
-
forceUpdate: () => void;
|
|
6
|
-
headersRef: React.RefObject<HeaderObject[]>;
|
|
7
|
-
isWidthDragging: boolean;
|
|
8
|
-
onSort: (columnIndex: number) => void;
|
|
9
|
-
onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
|
|
10
|
-
setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
|
|
11
|
-
shouldDisplayLastColumnCell: boolean;
|
|
12
|
-
}
|
|
13
|
-
declare const TableHeader: ({ enableColumnResizing, forceUpdate, headersRef, isWidthDragging, onSort, onTableHeaderDragEnd, setIsWidthDragging, shouldDisplayLastColumnCell, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
export default TableHeader;
|
|
1
|
+
import { Dispatch, SetStateAction } from "react";
|
|
2
|
+
import HeaderObject from "../../types/HeaderObject";
|
|
3
|
+
interface TableHeaderProps {
|
|
4
|
+
enableColumnResizing: boolean;
|
|
5
|
+
forceUpdate: () => void;
|
|
6
|
+
headersRef: React.RefObject<HeaderObject[]>;
|
|
7
|
+
isWidthDragging: boolean;
|
|
8
|
+
onSort: (columnIndex: number) => void;
|
|
9
|
+
onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
|
|
10
|
+
setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
|
|
11
|
+
shouldDisplayLastColumnCell: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const TableHeader: ({ enableColumnResizing, forceUpdate, headersRef, isWidthDragging, onSort, onTableHeaderDragEnd, setIsWidthDragging, shouldDisplayLastColumnCell, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export default TableHeader;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { SetStateAction, Dispatch } from "react";
|
|
2
|
-
import HeaderObject from "../../types/HeaderObject";
|
|
3
|
-
interface TableHeaderCellProps {
|
|
4
|
-
draggedHeaderRef: React.MutableRefObject<HeaderObject | null>;
|
|
5
|
-
enableColumnResizing: boolean;
|
|
6
|
-
forceUpdate: () => void;
|
|
7
|
-
headersRef: React.RefObject<HeaderObject[]>;
|
|
8
|
-
hoveredHeaderRef: React.MutableRefObject<HeaderObject | null>;
|
|
9
|
-
index: number;
|
|
10
|
-
onSort: (columnIndex: number) => void;
|
|
11
|
-
onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
|
|
12
|
-
setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
|
|
13
|
-
}
|
|
14
|
-
declare const TableHeaderCell: import("react").ForwardRefExoticComponent<TableHeaderCellProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
-
export default TableHeaderCell;
|
|
1
|
+
import { SetStateAction, Dispatch } from "react";
|
|
2
|
+
import HeaderObject from "../../types/HeaderObject";
|
|
3
|
+
interface TableHeaderCellProps {
|
|
4
|
+
draggedHeaderRef: React.MutableRefObject<HeaderObject | null>;
|
|
5
|
+
enableColumnResizing: boolean;
|
|
6
|
+
forceUpdate: () => void;
|
|
7
|
+
headersRef: React.RefObject<HeaderObject[]>;
|
|
8
|
+
hoveredHeaderRef: React.MutableRefObject<HeaderObject | null>;
|
|
9
|
+
index: number;
|
|
10
|
+
onSort: (columnIndex: number) => void;
|
|
11
|
+
onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
|
|
12
|
+
setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
|
|
13
|
+
}
|
|
14
|
+
declare const TableHeaderCell: import("react").ForwardRefExoticComponent<TableHeaderCellProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export default TableHeaderCell;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
declare const TableLastColumnCell: import("react").ForwardRefExoticComponent<{
|
|
3
|
-
isLastRow?: boolean | undefined;
|
|
4
|
-
visible: boolean;
|
|
5
|
-
} & import("react").RefAttributes<unknown>>;
|
|
6
|
-
export default TableLastColumnCell;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const TableLastColumnCell: import("react").ForwardRefExoticComponent<{
|
|
3
|
+
isLastRow?: boolean | undefined;
|
|
4
|
+
visible: boolean;
|
|
5
|
+
} & import("react").RefAttributes<unknown>>;
|
|
6
|
+
export default TableLastColumnCell;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const TableRowSeparator: () => import("react/jsx-runtime").JSX.Element;
|
|
2
|
-
export default TableRowSeparator;
|
|
1
|
+
declare const TableRowSeparator: () => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export default TableRowSeparator;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import HeaderObject from "../types/HeaderObject";
|
|
2
|
-
export declare const SAMPLE_HEADERS: HeaderObject[];
|
|
3
|
-
export declare const inventoryData: {
|
|
4
|
-
id: string;
|
|
5
|
-
productName: string;
|
|
6
|
-
category: string;
|
|
7
|
-
quantity: number;
|
|
8
|
-
price: string;
|
|
9
|
-
supplier: string;
|
|
10
|
-
location: string;
|
|
11
|
-
reorderLevel: number;
|
|
12
|
-
sku: string;
|
|
13
|
-
description: string;
|
|
14
|
-
weight: string;
|
|
15
|
-
dimensions: string;
|
|
16
|
-
barcode: string;
|
|
17
|
-
expirationDate: string;
|
|
18
|
-
manufacturer: string;
|
|
19
|
-
}[];
|
|
1
|
+
import HeaderObject from "../types/HeaderObject";
|
|
2
|
+
export declare const SAMPLE_HEADERS: HeaderObject[];
|
|
3
|
+
export declare const inventoryData: {
|
|
4
|
+
id: string;
|
|
5
|
+
productName: string;
|
|
6
|
+
category: string;
|
|
7
|
+
quantity: number;
|
|
8
|
+
price: string;
|
|
9
|
+
supplier: string;
|
|
10
|
+
location: string;
|
|
11
|
+
reorderLevel: number;
|
|
12
|
+
sku: string;
|
|
13
|
+
description: string;
|
|
14
|
+
weight: string;
|
|
15
|
+
dimensions: string;
|
|
16
|
+
barcode: string;
|
|
17
|
+
expirationDate: string;
|
|
18
|
+
manufacturer: string;
|
|
19
|
+
}[];
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
interface BoundingBox {
|
|
3
|
-
bottom: number;
|
|
4
|
-
height: number;
|
|
5
|
-
left: number;
|
|
6
|
-
right: number;
|
|
7
|
-
top: number;
|
|
8
|
-
width: number;
|
|
9
|
-
}
|
|
10
|
-
declare const calculateBoundingBoxes: (children: ReactNode) => {
|
|
11
|
-
[key: string]: BoundingBox;
|
|
12
|
-
};
|
|
13
|
-
export default calculateBoundingBoxes;
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
interface BoundingBox {
|
|
3
|
+
bottom: number;
|
|
4
|
+
height: number;
|
|
5
|
+
left: number;
|
|
6
|
+
right: number;
|
|
7
|
+
top: number;
|
|
8
|
+
width: number;
|
|
9
|
+
}
|
|
10
|
+
declare const calculateBoundingBoxes: (children: ReactNode) => {
|
|
11
|
+
[key: string]: BoundingBox;
|
|
12
|
+
};
|
|
13
|
+
export default calculateBoundingBoxes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function shuffleArray(array: any[]): any[];
|
|
1
|
+
export default function shuffleArray(array: any[]): any[];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const usePrevious: (value: any) => undefined;
|
|
2
|
-
export default usePrevious;
|
|
1
|
+
declare const usePrevious: (value: any) => undefined;
|
|
2
|
+
export default usePrevious;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import HeaderObject from "../types/HeaderObject";
|
|
3
|
-
interface Cell {
|
|
4
|
-
row: number;
|
|
5
|
-
col: number;
|
|
6
|
-
}
|
|
7
|
-
declare const useSelection: (rows: {
|
|
8
|
-
[key: string]: any;
|
|
9
|
-
}[], headers: HeaderObject[]) => {
|
|
10
|
-
selectedCells: Cell[];
|
|
11
|
-
handleMouseDown: (rowIndex: number, colIndex: number) => void;
|
|
12
|
-
handleMouseOver: (rowIndex: number, colIndex: number) => void;
|
|
13
|
-
handleMouseUp: () => void;
|
|
14
|
-
isSelected: (rowIndex: number, colIndex: number) => boolean;
|
|
15
|
-
getBorderClass: (rowIndex: number, colIndex: number) => string;
|
|
16
|
-
isTopLeftCell: (rowIndex: number, colIndex: number) => boolean;
|
|
17
|
-
setSelectedCells: import("react").Dispatch<import("react").SetStateAction<Cell[]>>;
|
|
18
|
-
};
|
|
19
|
-
export default useSelection;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import HeaderObject from "../types/HeaderObject";
|
|
3
|
+
interface Cell {
|
|
4
|
+
row: number;
|
|
5
|
+
col: number;
|
|
6
|
+
}
|
|
7
|
+
declare const useSelection: (rows: {
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}[], headers: HeaderObject[]) => {
|
|
10
|
+
selectedCells: Cell[];
|
|
11
|
+
handleMouseDown: (rowIndex: number, colIndex: number) => void;
|
|
12
|
+
handleMouseOver: (rowIndex: number, colIndex: number) => void;
|
|
13
|
+
handleMouseUp: () => void;
|
|
14
|
+
isSelected: (rowIndex: number, colIndex: number) => boolean;
|
|
15
|
+
getBorderClass: (rowIndex: number, colIndex: number) => string;
|
|
16
|
+
isTopLeftCell: (rowIndex: number, colIndex: number) => boolean;
|
|
17
|
+
setSelectedCells: import("react").Dispatch<import("react").SetStateAction<Cell[]>>;
|
|
18
|
+
};
|
|
19
|
+
export default useSelection;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import HeaderObject from "../types/HeaderObject";
|
|
3
|
-
interface UseTableHeaderCellProps {
|
|
4
|
-
draggedHeaderRef: React.MutableRefObject<HeaderObject | null>;
|
|
5
|
-
headersRef: React.RefObject<HeaderObject[]>;
|
|
6
|
-
hoveredHeaderRef: React.MutableRefObject<HeaderObject | null>;
|
|
7
|
-
onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
|
|
8
|
-
}
|
|
9
|
-
declare const useTableHeaderCell: ({ draggedHeaderRef, headersRef, hoveredHeaderRef, onTableHeaderDragEnd, }: UseTableHeaderCellProps) => {
|
|
10
|
-
handleDragStart: (header: HeaderObject) => void;
|
|
11
|
-
handleDragOver: (hoveredHeader: HeaderObject) => void;
|
|
12
|
-
handleDragEnd: () => void;
|
|
13
|
-
};
|
|
14
|
-
export default useTableHeaderCell;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import HeaderObject from "../types/HeaderObject";
|
|
3
|
+
interface UseTableHeaderCellProps {
|
|
4
|
+
draggedHeaderRef: React.MutableRefObject<HeaderObject | null>;
|
|
5
|
+
headersRef: React.RefObject<HeaderObject[]>;
|
|
6
|
+
hoveredHeaderRef: React.MutableRefObject<HeaderObject | null>;
|
|
7
|
+
onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
|
|
8
|
+
}
|
|
9
|
+
declare const useTableHeaderCell: ({ draggedHeaderRef, headersRef, hoveredHeaderRef, onTableHeaderDragEnd, }: UseTableHeaderCellProps) => {
|
|
10
|
+
handleDragStart: (header: HeaderObject) => void;
|
|
11
|
+
handleDragOver: (hoveredHeader: HeaderObject) => void;
|
|
12
|
+
handleDragEnd: () => void;
|
|
13
|
+
};
|
|
14
|
+
export default useTableHeaderCell;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
declare const AngleLeftIcon: React.FC;
|
|
3
|
-
export default AngleLeftIcon;
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const AngleLeftIcon: React.FC;
|
|
3
|
+
export default AngleLeftIcon;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
declare const AngleRightIcon: React.FC;
|
|
3
|
-
export default AngleRightIcon;
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const AngleRightIcon: React.FC;
|
|
3
|
+
export default AngleRightIcon;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import SimpleTable from "./components/SimpleTable/SimpleTable";
|
|
2
|
-
export { SimpleTable };
|
|
1
|
+
import SimpleTable from "./components/SimpleTable/SimpleTable";
|
|
2
|
+
export { SimpleTable };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import o,{useState as n,useRef as a,useCallback as l,useEffect as s,Children as c,useLayoutEffect as i,forwardRef as d,createRef as u,Fragment as f,useReducer as b,useMemo as g}from"react";var v=function(){return v=Object.assign||function(e){for(var r,t=1,o=arguments.length;t<o;t++)for(var n in r=arguments[t])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e},v.apply(this,arguments)};function h(e,r,t){if(t||2===arguments.length)for(var o,n=0,a=r.length;n<a;n++)!o&&n in r||(o||(o=Array.prototype.slice.call(r,0,n)),o[n]=r[n]);return e.concat(o||Array.prototype.slice.call(r))}"function"==typeof SuppressedError&&SuppressedError;var p=function(e){var r={};return c.forEach(e,(function(e){if(e.ref&&e.ref.current){var t=e.ref.current.getBoundingClientRect();r[e.key]=t}})),r},m=function(e){var r,t,l=e.allowHorizontalAnimate,c=void 0===l||l,d=e.children,u=e.pause,f=n({}),b=f[0],g=f[1],v=n({}),h=v[0],m=v[1],w=(r=d,t=a(),s((function(){t.current=r}),[r]),t.current);return i((function(){var e=p(d);g(e)}),[d]),i((function(){var e=p(w);m(e)}),[w]),s((function(){u||Object.keys(h).length&&o.Children.forEach(d,(function(e){var r=e.ref.current,t=h[e.key],o=b[e.key],n=t.left-o.left,a=c?0:t.top-o.top,l=Math.abs(n),s=Math.abs(a);(l>10||s>10)&&requestAnimationFrame((function(){r.style.transform="translate(".concat(n,"px, ").concat(a,"px)"),r.style.transition="transform 0s",requestAnimationFrame((function(){r.style.transform="",r.style.transition="transform 500ms"}))}))}))}),[b,h,d,u,c]),d},w=!1,y=function(e){var r=e.draggedHeaderRef,t=e.headersRef,o=e.hoveredHeaderRef,n=e.onTableHeaderDragEnd;return{handleDragStart:function(e){r.current=e},handleDragOver:function(e){!function(e){var a;if(!w&&(o.current=e,e.accessor!==(null===(a=r.current)||void 0===a?void 0:a.accessor)&&null!==r.current&&!w)){if(w=!0,!t.current)return;var l=h([],t.current,!0),s=l.findIndex((function(e){var t;return e.accessor===(null===(t=r.current)||void 0===t?void 0:t.accessor)})),c=l.findIndex((function(r){return r.accessor===e.accessor}));if(void 0===s||void 0===c)return;var i=l.splice(s,1)[0];l.splice(c,0,i),JSON.stringify(l)!==JSON.stringify(t.current)&&setTimeout((function(){n(l),setTimeout((function(){w=!1}),500)}),50)}}(e)},handleDragEnd:function(){r.current=null,o.current=null}}},x=function(e,r){var t=!0,o=!0;return function(){for(var n=[],a=0;a<arguments.length;a++)n[a]=arguments[a];if(t)return t=!1,void setTimeout((function(){return o=!1}),r);o||(e.apply(this,n),o=!0,setTimeout((function(){return o=!1}),r))}},C=d((function(t,o){var l,s=t.draggedHeaderRef,c=t.enableColumnResizing,i=t.forceUpdate,d=t.headersRef,u=t.hoveredHeaderRef,f=t.index,b=t.onSort,g=t.onTableHeaderDragEnd,h=t.setIsWidthDragging,p=a({pageX:0,pageY:0}),m=n(!1),w=m[0],C=m[1],k=null===(l=d.current)||void 0===l?void 0:l[f],D=y({draggedHeaderRef:s,headersRef:d,hoveredHeaderRef:u,onTableHeaderDragEnd:g}),M=D.handleDragStart,R=D.handleDragOver,L=D.handleDragEnd,E=a(x((function(e){R(e)}),100)).current;return k?e("div",v({className:"st-table-header-cell ".concat(k===u.current?"st-hovered":""," ").concat(w?"st-dragging":""),ref:o,style:{width:k.width}},{children:[r("div",v({className:"st-table-header-label",draggable:!0,onClick:function(){return b(f)},onDragStart:function(){return function(e){C(!0),M(e)}(k)},onDragOver:function(e){var r=e.pageX,t=e.pageY;r===p.current.pageX&&t===p.current.pageY||(p.current={pageX:r,pageY:t},e.preventDefault(),E(k,e))},onDragEnd:function(){C(!1),L()}},{children:null==k?void 0:k.label})),c&&r("div",{className:"st-table-header-resize-handle",onMouseDown:function(e){h(!0),e.preventDefault();var r=e.clientX;if(k){var t=k.width,o=x((function(e){var o=Math.max(t+(e.clientX-r),10);k&&(d.current[f].width=o,i())}),10),n=function(){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",n),h(!1)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",n)}}})]})):null})),k=d((function(e,t){return e.visible?r("div",{className:"st-table-cell ".concat(e.isLastRow?"st-table-cell-last-row":""),ref:t}):r("div",{ref:t})})),D=function(){return r("div",{className:"st-table-row-separator"})},M=function(o){var n,l=o.enableColumnResizing,s=o.forceUpdate,c=o.headersRef,i=o.isWidthDragging,d=o.onSort,f=o.onTableHeaderDragEnd,b=o.setIsWidthDragging,g=o.shouldDisplayLastColumnCell,h=a(null),p=a(null);return e(t,{children:[e(m,v({pause:i},{children:[null===(n=c.current)||void 0===n?void 0:n.map((function(e,t){return r(C,{draggedHeaderRef:h,enableColumnResizing:l,forceUpdate:s,headersRef:c,hoveredHeaderRef:p,index:t,onSort:d,onTableHeaderDragEnd:f,ref:u(),setIsWidthDragging:b},e.accessor)})),r(k,{ref:u(),visible:g})]})),r(D,{})]})},R=d((function(e,t){var o=e.rowIndex,n=e.colIndex,a=e.content,l=e.isSelected,s=e.isTopLeftCell,c=e.borderClass,i=e.onMouseDown,d=e.onMouseOver,u=e.isLastRow,f=o%2==0;return r("div",v({onMouseDown:function(){return i(o,n)},onMouseOver:function(){return d(o,n)},ref:t,className:"st-table-cell ".concat(l?s?"st-table-cell-selected-first-cell ".concat(c):"st-table-cell-selected ".concat(c):""," ").concat(u?"st-table-cell-last-row":"","\n ").concat(f?"st-table-cell-odd-row":"")},{children:a}))})),L=function(o){var n=o.getBorderClass,a=o.handleMouseDown,l=o.handleMouseOver,s=o.headers,c=o.isSelected,i=o.isTopLeftCell,d=o.isWidthDragging,b=o.shouldDisplayLastColumnCell,g=o.shouldPaginate,h=o.sortedRows;return r(t,{children:h.map((function(t,o){return e(f,{children:[e(m,v({allowHorizontalAnimate:g,pause:d},{children:[s.map((function(e,s){var d=t[e.accessor];return e.cellRenderer&&(d=e.cellRenderer(t)),r(R,{borderClass:n(o,s),colIndex:s,content:d,isSelected:c(o,s),isTopLeftCell:i(o,s),onMouseDown:function(){return a(o,s)},onMouseOver:function(){return l(o,s)},ref:u(),rowIndex:o,isLastRow:o===h.length-1},e.accessor)})),r(k,{isLastRow:o===h.length-1,ref:u(),visible:b})]})),o!==h.length-1&&r(D,{})]},t.id)}))})},E=function(t){var o=t.currentPage,n=t.hideFooter,a=t.nextIcon,l=t.onPageChange,s=t.prevIcon,c=t.rowsPerPage,i=t.totalRows,d=Math.ceil(i/c),u=function(e){e>=1&&e<=d&&l(e)};return n?null:e("div",v({className:"st-footer"},{children:[r("button",v({className:"st-next-prev-btn",onClick:function(){return u(o-1)},disabled:1===o},{children:s})),r("button",v({className:"st-next-prev-btn",onClick:function(){return u(o+1)},disabled:o===d},{children:a})),Array.from({length:d},(function(e,t){return r("button",v({onClick:function(){return u(t+1)},className:"st-page-btn ".concat(o===t+1?"active":"")},{children:t+1}),t)}))]}))},S=function(){return r("svg",v({className:"angle-icon",viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:r("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"})}))},T=function(){return r("svg",v({className:"angle-icon",viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:r("path",{d:"M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"})}))};!function(e,r){void 0===r&&(r={});var t=r.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}('@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");:root{--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--orange-50:#fff7ed;--orange-100:#ffedd5;--orange-200:#fed7aa;--orange-300:#fdba74;--orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;--orange-800:#9a3412;--orange-900:#7c2d12;--amber-50:#fffbeb;--amber-100:#fef3c7;--amber-200:#fde68a;--amber-300:#fcd34d;--amber-400:#fbbf24;--amber-500:#f59e0b;--amber-600:#d97706;--amber-700:#b45309;--amber-800:#92400e;--amber-900:#78350f;--st-border-radius:4px;--st-table-border-color:var(--slate-300);--st-border-width:1px;--st-resize-handle-color:var(--slate-300);--st-separator-border-color:var(--slate-300);--st-odd-row-background-color:var(--slate-100);--st-dragging-background-color:var(--blue-100);--st-selected-cell-background-color:var(--blue-200);--st-selected-first-cell-background-color:var(--amber-100);--st-border-top-color:var(--blue-500);--st-border-bottom-color:var(--blue-500);--st-border-left-color:var(--blue-500);--st-border-right-color:var(--blue-500);--st-border-top-white-color:#fff;--st-footer-background-color:#fff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito}.st-table-wrapper{border:var(--st-border-width) solid var(--st-table-border-color);border-radius:var(--st-border-radius);height:auto;max-height:100dvh;overflow:auto}.st-table{border-collapse:collapse;display:grid;table-layout:auto;white-space:nowrap;width:100%}.st-table-header-cell{background-color:#fff;position:sticky;top:0}.st-table-cell,.st-table-header-cell{border:var(--st-border-width) solid #0000;color:var(--slate-800);cursor:pointer;overflow:hidden}.st-table-cell,.st-table-header-label{overflow:hidden;padding:8px;text-align:left;text-overflow:ellipsis;user-select:none;white-space:nowrap}.st-table-header-resize-handle{background-color:var(--st-resize-handle-color);border-radius:.25rem;bottom:0;cursor:col-resize;margin-bottom:.25rem;margin-top:.25rem;position:absolute;right:0;top:0;width:5px}.st-table-row-separator{background-color:var(--st-separator-border-color);grid-column:1/-1;height:1px}.st-table-cell-odd-row{background-color:var(--st-odd-row-background-color)}.st-dragging{background-color:var(--st-dragging-background-color)}.st-table-cell-selected{background-color:var(--st-selected-cell-background-color)}.st-table-cell-selected-first{background-color:var(--st-selected-first-cell-background-color)}.border-top-blue{border-top:var(--st-border-width) solid var(--st-border-top-color)}.border-bottom-blue{border-bottom:var(--st-border-width) solid var(--st-border-bottom-color)}.border-left-blue{border-left:var(--st-border-width) solid var(--st-border-left-color)}.border-right-blue{border-right:var(--st-border-width) solid var(--st-border-right-color)}.border-top-white{border-top:var(--st-border-width) solid var(--st-border-top-white-color)}.st-footer{background-color:var(--st-footer-background-color);border-top:var(--st-border-width) solid var(--st-table-border-color);bottom:0;left:0;padding:8px;position:sticky}.st-footer,.st-next-prev-btn{align-items:center;display:flex}.st-next-prev-btn{background-color:initial;border:none;border-radius:4px;color:var(--slate-600);cursor:pointer;justify-content:center;padding:4px;transition:background-color .3s ease}.st-next-prev-btn:hover{background-color:var(--slate-100)}.st-page-btn{background-color:initial;border:none;border-radius:var(--st-border-radius);color:var(--slate-600);cursor:pointer;margin-left:4px;padding:4px;transition:background-color .3s ease}.st-page-btn:hover{background-color:var(--slate-100)}.st-page-btn.active{background-color:var(--blue-500);color:#fff}');var N=function(t){var o,c=t.defaultHeaders,i=t.enableColumnResizing,d=void 0===i||i,u=t.height,f=t.hideFooter,p=void 0!==f&&f,m=t.nextIcon,w=void 0===m?r(T,{}):m,y=t.prevIcon,x=void 0===y?r(S,{}):y,C=t.rows,k=t.rowsPerPage,D=void 0===k?10:k,R=t.shouldPaginate,N=void 0===R||R,O=n(!1),H=O[0],I=O[1],z=a(c),P=n(C),j=P[0],B=P[1],W=n(null),A=W[0],U=W[1],F=b((function(e){return e+1}),0)[1],X=n(1),Y=X[0],q=X[1],J=a(null),K=g((function(){return!!J.current&&z.current.reduce((function(e,r){return e+r.width}),0)<J.current.clientWidth}),[]),G=function(e,r){var t=n([]),o=t[0],c=t[1],i=a(!1),d=a(null),u=l((function(){var t=o.reduce((function(t,o){var n=o.row,a=o.col;return t[n]||(t[n]=[]),t[n][a]=e[n][r[a].accessor],t}),{}),n=Object.values(t).map((function(e){return Object.values(e).join("\t")})).join("\n");navigator.clipboard.writeText(n)}),[o,e,r]);s((function(){var e=function(e){(e.ctrlKey||e.metaKey)&&"c"===e.key&&u()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[u,o]);var f=function(e,r){return o.some((function(t){return t.row===e&&t.col===r}))};return{selectedCells:o,handleMouseDown:function(e,r){i.current=!0,d.current={row:e,col:r},c([{row:e,col:r}])},handleMouseOver:function(e,r){if(i.current&&d.current){for(var t=[],o=Math.min(d.current.row,e),n=Math.max(d.current.row,e),a=Math.min(d.current.col,r),l=Math.max(d.current.col,r),s=o;s<=n;s++)for(var u=a;u<=l;u++)t.push({row:s,col:u});c(t)}},handleMouseUp:function(){i.current=!1,d.current=null},isSelected:f,getBorderClass:function(e,r){var t=[];return f(e-1,r)||t.push("border-top-blue"),f(e+1,r)||t.push("border-bottom-blue"),f(e,r-1)||t.push("border-left-blue"),f(e,r+1)||t.push("border-right-blue"),t.join(" ")},isTopLeftCell:function(e,r){return e===Math.min.apply(Math,o.map((function(e){return e.row})))&&r===Math.min.apply(Math,o.map((function(e){return e.col})))},setSelectedCells:c}}(j,z.current),Q=G.handleMouseDown,V=G.handleMouseOver,Z=G.handleMouseUp,$=G.isSelected,_=G.getBorderClass,ee=G.isTopLeftCell,re=G.setSelectedCells;s((function(){var e=function(e){e.target.closest(".st-table-cell")||re([])};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[re]);var te=N?j.slice((Y-1)*D,Y*D):j;return e("div",v({ref:J,className:"st-table-wrapper",style:u?{height:u}:{}},{children:[e("div",v({className:"st-table",onMouseUp:Z,onMouseLeave:Z,style:{gridTemplateColumns:"".concat(null===(o=z.current)||void 0===o?void 0:o.map((function(e){return"".concat(e.width,"px")})).join(" ")," 1fr")}},{children:[r(M,{enableColumnResizing:d,forceUpdate:F,headersRef:z,isWidthDragging:H,onSort:function(e){var r=function(e,r,t,o){var n=e[o],a="ascending";return t&&t.key.accessor===n.accessor&&"ascending"===t.direction&&(a="descending"),{sortedData:h([],r,!0).sort((function(e,r){return e[n.accessor]<r[n.accessor]?"ascending"===a?-1:1:e[n.accessor]>r[n.accessor]?"ascending"===a?1:-1:0})),newSortConfig:{key:n,direction:a}}}(z.current,j,A,e),t=r.sortedData,o=r.newSortConfig;B(t),U(o)},onTableHeaderDragEnd:function(e){z.current=e,F()},setIsWidthDragging:I,shouldDisplayLastColumnCell:K}),r(L,{getBorderClass:_,handleMouseDown:Q,handleMouseOver:V,headers:z.current,isSelected:$,isTopLeftCell:ee,isWidthDragging:H,shouldDisplayLastColumnCell:K,shouldPaginate:N,sortedRows:te})]})),N&&r(E,{currentPage:Y,hideFooter:p,onPageChange:q,rowsPerPage:D,totalRows:j.length,nextIcon:w,prevIcon:x})]}))};export{N as SimpleTable};
|
|
1
|
+
import{jsxs as e,jsx as n,Fragment as r}from"react/jsx-runtime";import t,{useState as o,useRef as a,useCallback as c,useEffect as i,Children as l,useLayoutEffect as s,forwardRef as u,createRef as d,Fragment as f,useReducer as h,useMemo as v}from"react";var g=function(){return g=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},g.apply(this,arguments)};function p(e,n,r){if(r||2===arguments.length)for(var t,o=0,a=n.length;o<a;o++)!t&&o in n||(t||(t=Array.prototype.slice.call(n,0,o)),t[o]=n[o]);return e.concat(t||Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;var m=function(e){var n={};return l.forEach(e,(function(e){if(e.ref&&e.ref.current){var r=e.ref.current.getBoundingClientRect();n[e.key]=r}})),n},w=function(e){var n,r,c=e.allowHorizontalAnimate,l=void 0===c||c,u=e.children,d=e.pause,f=o({}),h=f[0],v=f[1],g=o({}),p=g[0],w=g[1],b=(n=u,r=a(),i((function(){r.current=n}),[n]),r.current);return s((function(){var e=m(u);v(e)}),[u]),s((function(){var e=m(b);w(e)}),[b]),i((function(){d||Object.keys(p).length&&t.Children.forEach(u,(function(e){var n=e.ref.current,r=p[e.key],t=h[e.key],o=r.left-t.left,a=l?0:r.top-t.top,c=Math.abs(o),i=Math.abs(a);(c>10||i>10)&&requestAnimationFrame((function(){n.style.transform="translate(".concat(o,"px, ").concat(a,"px)"),n.style.transition="transform 0s",requestAnimationFrame((function(){n.style.transform="",n.style.transition="transform 500ms"}))}))}))}),[h,p,u,d,l]),u},b=!1,C=function(e){var n=e.draggedHeaderRef,r=e.headersRef,t=e.hoveredHeaderRef,o=e.onTableHeaderDragEnd;return{handleDragStart:function(e){n.current=e},handleDragOver:function(e){!function(e){var a;if(!b&&(t.current=e,e.accessor!==(null===(a=n.current)||void 0===a?void 0:a.accessor)&&null!==n.current&&!b)){if(b=!0,!r.current)return;var c=p([],r.current,!0),i=c.findIndex((function(e){var r;return e.accessor===(null===(r=n.current)||void 0===r?void 0:r.accessor)})),l=c.findIndex((function(n){return n.accessor===e.accessor}));if(void 0===i||void 0===l)return;var s=c.splice(i,1)[0];c.splice(l,0,s),JSON.stringify(c)!==JSON.stringify(r.current)&&setTimeout((function(){o(c),setTimeout((function(){b=!1}),500)}),50)}}(e)},handleDragEnd:function(){n.current=null,t.current=null}}},D=function(e,n){var r=!0,t=!0;return function(){for(var o=[],a=0;a<arguments.length;a++)o[a]=arguments[a];if(r)return r=!1,void setTimeout((function(){return t=!1}),n);t||(e.apply(this,o),t=!0,setTimeout((function(){return t=!1}),n))}},y=u((function(r,t){var c,i=r.draggedHeaderRef,l=r.enableColumnResizing,s=r.forceUpdate,u=r.headersRef,d=r.hoveredHeaderRef,f=r.index,h=r.onSort,v=r.onTableHeaderDragEnd,p=r.setIsWidthDragging,m=a({pageX:0,pageY:0}),w=o(!1),b=w[0],y=w[1],M=null===(c=u.current)||void 0===c?void 0:c[f],R=C({draggedHeaderRef:i,headersRef:u,hoveredHeaderRef:d,onTableHeaderDragEnd:v}),L=R.handleDragStart,x=R.handleDragOver,E=R.handleDragEnd,S=a(D((function(e){x(e)}),100)).current;return M?e("div",g({className:"st-table-header-cell ".concat(M===d.current?"st-hovered":""," ").concat(b?"st-dragging":""),ref:t,style:{width:M.width}},{children:[n("div",g({className:"st-table-header-label",draggable:!0,onClick:function(){return h(f)},onDragStart:function(){return function(e){y(!0),L(e)}(M)},onDragOver:function(e){var n=e.pageX,r=e.pageY;n===m.current.pageX&&r===m.current.pageY||(m.current={pageX:n,pageY:r},e.preventDefault(),S(M,e))},onDragEnd:function(){y(!1),E()}},{children:null==M?void 0:M.label})),l&&n("div",{className:"st-table-header-resize-handle",onMouseDown:function(e){p(!0),e.preventDefault();var n=e.clientX;if(M){var r=M.width,t=D((function(e){var t=Math.max(r+(e.clientX-n),10);M&&(u.current[f].width=t,s())}),10),o=function(){document.removeEventListener("mousemove",t),document.removeEventListener("mouseup",o),p(!1)};document.addEventListener("mousemove",t),document.addEventListener("mouseup",o)}}})]})):null})),M=u((function(e,r){return e.visible?n("div",{className:"st-table-cell ".concat(e.isLastRow?"st-table-cell-last-row":""),ref:r}):n("div",{ref:r})})),R=function(){return n("div",{className:"st-table-row-separator"})},L=function(t){var o,c=t.enableColumnResizing,i=t.forceUpdate,l=t.headersRef,s=t.isWidthDragging,u=t.onSort,f=t.onTableHeaderDragEnd,h=t.setIsWidthDragging,v=t.shouldDisplayLastColumnCell,p=a(null),m=a(null);return e(r,{children:[e(w,g({pause:s},{children:[null===(o=l.current)||void 0===o?void 0:o.map((function(e,r){return n(y,{draggedHeaderRef:p,enableColumnResizing:c,forceUpdate:i,headersRef:l,hoveredHeaderRef:m,index:r,onSort:u,onTableHeaderDragEnd:f,ref:d(),setIsWidthDragging:h},e.accessor)})),n(M,{ref:d(),visible:v})]})),n(R,{})]})},x=u((function(e,r){var t=e.rowIndex,o=e.colIndex,a=e.content,c=e.isSelected,i=e.isTopLeftCell,l=e.borderClass,s=e.onMouseDown,u=e.onMouseOver,d=e.isLastRow,f=t%2==0;return n("div",g({onMouseDown:function(){return s(t,o)},onMouseOver:function(){return u(t,o)},ref:r,className:"st-table-cell ".concat(c?i?"st-table-cell-selected-first-cell ".concat(l):"st-table-cell-selected ".concat(l):""," ").concat(d?"st-table-cell-last-row":"","\n ").concat(f?"st-table-cell-odd-row":"")},{children:a}))})),E=function(t){var o=t.getBorderClass,a=t.handleMouseDown,c=t.handleMouseOver,i=t.headers,l=t.isSelected,s=t.isTopLeftCell,u=t.isWidthDragging,h=t.shouldDisplayLastColumnCell,v=t.shouldPaginate,p=t.sortedRows;return n(r,{children:p.map((function(r,t){return e(f,{children:[e(w,g({allowHorizontalAnimate:v,pause:u},{children:[i.map((function(e,i){var u=r[e.accessor];return e.cellRenderer&&(u=e.cellRenderer(r)),n(x,{borderClass:o(t,i),colIndex:i,content:u,isSelected:l(t,i),isTopLeftCell:s(t,i),onMouseDown:function(){return a(t,i)},onMouseOver:function(){return c(t,i)},ref:d(),rowIndex:t,isLastRow:t===p.length-1},e.accessor)})),n(M,{isLastRow:t===p.length-1,ref:d(),visible:h})]})),t!==p.length-1&&n(R,{})]},r.id)}))})},S=function(r){var t=r.currentPage,o=r.hideFooter,a=r.nextIcon,c=r.onPageChange,i=r.prevIcon,l=r.rowsPerPage,s=r.totalRows,u=Math.ceil(s/l),d=function(e){e>=1&&e<=u&&c(e)};return o?null:e("div",g({className:"st-footer"},{children:[n("button",g({className:"st-next-prev-btn",onClick:function(){return d(t-1)},disabled:1===t},{children:i})),n("button",g({className:"st-next-prev-btn",onClick:function(){return d(t+1)},disabled:t===u},{children:a})),Array.from({length:u},(function(e,r){return n("button",g({onClick:function(){return d(r+1)},className:"st-page-btn ".concat(t===r+1?"active":"")},{children:r+1}),r)}))]}))},O=function(){return n("svg",g({className:"angle-icon",viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"})}))},T=function(){return n("svg",g({className:"angle-icon",viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"})}))},H=function(r){var t,l=r.defaultHeaders,s=r.enableColumnResizing,u=void 0===s||s,d=r.height,f=r.hideFooter,m=void 0!==f&&f,w=r.nextIcon,b=void 0===w?n(T,{}):w,C=r.prevIcon,D=void 0===C?n(O,{}):C,y=r.rows,M=r.rowsPerPage,R=void 0===M?10:M,x=r.shouldPaginate,H=void 0===x||x,I=o(!1),N=I[0],P=I[1],k=a(l),j=o(y),z=j[0],W=j[1],A=o(null),B=A[0],U=A[1],F=h((function(e){return e+1}),0)[1],X=o(1),Y=X[0],q=X[1],J=a(null),K=v((function(){return!!J.current&&k.current.reduce((function(e,n){return e+n.width}),0)<J.current.clientWidth}),[]),G=function(e,n){var r=o([]),t=r[0],l=r[1],s=a(!1),u=a(null),d=c((function(){var r=t.reduce((function(r,t){var o=t.row,a=t.col;return r[o]||(r[o]=[]),r[o][a]=e[o][n[a].accessor],r}),{}),o=Object.values(r).map((function(e){return Object.values(e).join("\t")})).join("\n");navigator.clipboard.writeText(o)}),[t,e,n]);i((function(){var e=function(e){(e.ctrlKey||e.metaKey)&&"c"===e.key&&d()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[d,t]);var f=function(e,n){return t.some((function(r){return r.row===e&&r.col===n}))};return{selectedCells:t,handleMouseDown:function(e,n){s.current=!0,u.current={row:e,col:n},l([{row:e,col:n}])},handleMouseOver:function(e,n){if(s.current&&u.current){for(var r=[],t=Math.min(u.current.row,e),o=Math.max(u.current.row,e),a=Math.min(u.current.col,n),c=Math.max(u.current.col,n),i=t;i<=o;i++)for(var d=a;d<=c;d++)r.push({row:i,col:d});l(r)}},handleMouseUp:function(){s.current=!1,u.current=null},isSelected:f,getBorderClass:function(e,n){var r=[];return f(e-1,n)||r.push("border-top-blue"),f(e+1,n)||r.push("border-bottom-blue"),f(e,n-1)||r.push("border-left-blue"),f(e,n+1)||r.push("border-right-blue"),r.join(" ")},isTopLeftCell:function(e,n){return e===Math.min.apply(Math,t.map((function(e){return e.row})))&&n===Math.min.apply(Math,t.map((function(e){return e.col})))},setSelectedCells:l}}(z,k.current),Q=G.handleMouseDown,V=G.handleMouseOver,Z=G.handleMouseUp,$=G.isSelected,_=G.getBorderClass,ee=G.isTopLeftCell,ne=G.setSelectedCells;i((function(){var e=function(e){e.target.closest(".st-table-cell")||ne([])};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[ne]);var re=H?z.slice((Y-1)*R,Y*R):z;return e("div",g({ref:J,className:"st-table-wrapper",style:d?{height:d}:{}},{children:[e("div",g({className:"st-table",onMouseUp:Z,onMouseLeave:Z,style:{gridTemplateColumns:"".concat(null===(t=k.current)||void 0===t?void 0:t.map((function(e){return"".concat(e.width,"px")})).join(" ")," 1fr")}},{children:[n(L,{enableColumnResizing:u,forceUpdate:F,headersRef:k,isWidthDragging:N,onSort:function(e){var n=function(e,n,r,t){var o=e[t],a="ascending";return r&&r.key.accessor===o.accessor&&"ascending"===r.direction&&(a="descending"),{sortedData:p([],n,!0).sort((function(e,n){return e[o.accessor]<n[o.accessor]?"ascending"===a?-1:1:e[o.accessor]>n[o.accessor]?"ascending"===a?1:-1:0})),newSortConfig:{key:o,direction:a}}}(k.current,z,B,e),r=n.sortedData,t=n.newSortConfig;W(r),U(t)},onTableHeaderDragEnd:function(e){k.current=e,F()},setIsWidthDragging:P,shouldDisplayLastColumnCell:K}),n(E,{getBorderClass:_,handleMouseDown:Q,handleMouseOver:V,headers:k.current,isSelected:$,isTopLeftCell:ee,isWidthDragging:N,shouldDisplayLastColumnCell:K,shouldPaginate:H,sortedRows:re})]})),H&&n(S,{currentPage:Y,hideFooter:m,onPageChange:q,rowsPerPage:R,totalRows:z.length,nextIcon:b,prevIcon:D})]}))};export{H as SimpleTable};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");:root{--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--orange-50:#fff7ed;--orange-100:#ffedd5;--orange-200:#fed7aa;--orange-300:#fdba74;--orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;--orange-800:#9a3412;--orange-900:#7c2d12;--amber-50:#fffbeb;--amber-100:#fef3c7;--amber-200:#fde68a;--amber-300:#fcd34d;--amber-400:#fbbf24;--amber-500:#f59e0b;--amber-600:#d97706;--amber-700:#b45309;--amber-800:#92400e;--amber-900:#78350f;--st-border-radius:4px;--st-table-border-color:var(--slate-300);--st-border-width:1px;--st-resize-handle-color:var(--slate-300);--st-separator-border-color:var(--slate-300);--st-odd-row-background-color:var(--slate-100);--st-dragging-background-color:var(--blue-100);--st-selected-cell-background-color:var(--blue-200);--st-selected-first-cell-background-color:var(--amber-100);--st-border-top-color:var(--blue-500);--st-border-bottom-color:var(--blue-500);--st-border-left-color:var(--blue-500);--st-border-right-color:var(--blue-500);--st-border-top-white-color:#fff;--st-footer-background-color:#fff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito}.st-table-wrapper{border:var(--st-border-width) solid var(--st-table-border-color);border-radius:var(--st-border-radius);height:auto;max-height:100dvh;overflow:auto}.st-table{border-collapse:collapse;display:grid;table-layout:auto;white-space:nowrap;width:100%}.st-table-header-cell{background-color:#fff;position:sticky;top:0}.st-table-cell,.st-table-header-cell{border:var(--st-border-width) solid #0000;color:var(--slate-800);cursor:pointer;overflow:hidden}.st-table-cell,.st-table-header-label{overflow:hidden;padding:8px;text-align:left;text-overflow:ellipsis;user-select:none;white-space:nowrap}.st-table-header-resize-handle{background-color:var(--st-resize-handle-color);border-radius:.25rem;bottom:0;cursor:col-resize;margin-bottom:.25rem;margin-top:.25rem;position:absolute;right:0;top:0;width:5px}.st-table-row-separator{background-color:var(--st-separator-border-color);grid-column:1/-1;height:1px}.st-table-cell-odd-row{background-color:var(--st-odd-row-background-color)}.st-dragging{background-color:var(--st-dragging-background-color)}.st-table-cell-selected{background-color:var(--st-selected-cell-background-color)}.st-table-cell-selected-first{background-color:var(--st-selected-first-cell-background-color)}.border-top-blue{border-top:var(--st-border-width) solid var(--st-border-top-color)}.border-bottom-blue{border-bottom:var(--st-border-width) solid var(--st-border-bottom-color)}.border-left-blue{border-left:var(--st-border-width) solid var(--st-border-left-color)}.border-right-blue{border-right:var(--st-border-width) solid var(--st-border-right-color)}.border-top-white{border-top:var(--st-border-width) solid var(--st-border-top-white-color)}.st-footer{background-color:var(--st-footer-background-color);border-top:var(--st-border-width) solid var(--st-table-border-color);bottom:0;left:0;padding:8px;position:sticky}.st-footer,.st-next-prev-btn{align-items:center;display:flex}.st-next-prev-btn{background-color:initial;border:none;border-radius:4px;color:var(--slate-600);cursor:pointer;justify-content:center;padding:4px;transition:background-color .3s ease}.st-next-prev-btn:hover{background-color:var(--slate-100)}.st-page-btn{background-color:initial;border:none;border-radius:var(--st-border-radius);color:var(--slate-600);cursor:pointer;margin-left:4px;padding:4px;transition:background-color .3s ease}.st-page-btn:hover{background-color:var(--slate-100)}.st-page-btn.active{background-color:var(--blue-500);color:#fff}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
type HeaderObject = {
|
|
3
|
-
label: string;
|
|
4
|
-
accessor: string;
|
|
5
|
-
width: number;
|
|
6
|
-
cellRenderer?: (row: {
|
|
7
|
-
[key: string]: any;
|
|
8
|
-
}) => ReactNode;
|
|
9
|
-
};
|
|
10
|
-
export default HeaderObject;
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
type HeaderObject = {
|
|
3
|
+
label: string;
|
|
4
|
+
accessor: string;
|
|
5
|
+
width: number;
|
|
6
|
+
cellRenderer?: (row: {
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}) => ReactNode;
|
|
9
|
+
};
|
|
10
|
+
export default HeaderObject;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const throttle: (func: (...args: any[]) => void, limit: number) => (this: any, ...args: any[]) => void;
|
|
1
|
+
export declare const throttle: (func: (...args: any[]) => void, limit: number) => (this: any, ...args: any[]) => void;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import HeaderObject from "../types/HeaderObject";
|
|
2
|
-
export declare const onSort: (headers: HeaderObject[], rows: {
|
|
3
|
-
[key: string]: any;
|
|
4
|
-
}[], sortConfig: {
|
|
5
|
-
key: HeaderObject;
|
|
6
|
-
direction: string;
|
|
7
|
-
} | null, columnIndex: number) => {
|
|
8
|
-
sortedData: {
|
|
9
|
-
[key: string]: any;
|
|
10
|
-
}[];
|
|
11
|
-
newSortConfig: {
|
|
12
|
-
key: HeaderObject;
|
|
13
|
-
direction: string;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
1
|
+
import HeaderObject from "../types/HeaderObject";
|
|
2
|
+
export declare const onSort: (headers: HeaderObject[], rows: {
|
|
3
|
+
[key: string]: any;
|
|
4
|
+
}[], sortConfig: {
|
|
5
|
+
key: HeaderObject;
|
|
6
|
+
direction: string;
|
|
7
|
+
} | null, columnIndex: number) => {
|
|
8
|
+
sortedData: {
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
}[];
|
|
11
|
+
newSortConfig: {
|
|
12
|
+
key: HeaderObject;
|
|
13
|
+
direction: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "simple-table-core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
|
+
"module": "dist/index.es.js",
|
|
5
6
|
"types": "dist/index.d.ts",
|
|
6
7
|
"files": [
|
|
7
8
|
"dist"
|
|
@@ -13,7 +14,6 @@
|
|
|
13
14
|
"@babel/preset-react": "^7.25.7",
|
|
14
15
|
"@chromatic-com/storybook": "^1.9.0",
|
|
15
16
|
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
16
|
-
"@rollup/plugin-typescript": "^12.1.0",
|
|
17
17
|
"@storybook/addon-essentials": "^8.3.5",
|
|
18
18
|
"@storybook/addon-interactions": "^8.3.5",
|
|
19
19
|
"@storybook/addon-links": "^8.3.5",
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
33
33
|
"rollup-plugin-postcss": "^4.0.2",
|
|
34
34
|
"rollup-plugin-terser": "^7.0.2",
|
|
35
|
+
"rollup-plugin-typescript2": "^0.36.0",
|
|
35
36
|
"storybook": "^8.3.5",
|
|
36
37
|
"typescript": "^4.9.5",
|
|
37
38
|
"webpack": "^5.95.0"
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { StoryObj } from "@storybook/react";
|
|
2
|
-
declare const meta: {
|
|
3
|
-
title: string;
|
|
4
|
-
component: () => import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
parameters: {
|
|
6
|
-
layout: string;
|
|
7
|
-
};
|
|
8
|
-
};
|
|
9
|
-
export default meta;
|
|
10
|
-
type Story = StoryObj<typeof meta>;
|
|
11
|
-
export declare const SimpleTable: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const SampleTable: () => import("react/jsx-runtime").JSX.Element;
|