simple-table-core 0.6.1 → 0.6.3

package/README.md

@@ -1,8 +1,23 @@
 # Simple Table
 
-Any questions, support or features requests join me on Dicord <a href="https://discord.gg/RvKHCfg3PC" target="_blank" rel="noopener noreferrer">https://discord.gg/RvKHCfg3PC</a>. I am happy to help and make this table even better!
+Any questions, support or features requests join me on Discord <a href="https://discord.gg/RvKHCfg3PC" target="_blank" rel="noopener noreferrer">https://discord.gg/RvKHCfg3PC</a>. I am happy to help and make this table even better!
 
-Simple Table is a React grid package designed to provide a flexible and easy-to-use table component for your React applications.
+Simple Table is a powerful yet lightweight React grid component that provides a flexible, customizable, and high-performance solution for displaying and manipulating tabular data in your applications.
+
+## Key Features
+
+- **Highly Customizable**: Fully customizable appearance with CSS variables and themes
+- **Cell Editing**: Built-in support for editable cells with controlled state
+- **Column Management**: Resize, reorder, pin, and hide columns with intuitive UI
+- **Pagination**: Built-in pagination with customizable controls
+- **Infinite Scroll**: Alternative to pagination for large datasets
+- **Row Grouping**: Hierarchical data presentation with expandable rows
+- **Theming**: Multiple built-in themes with ability to create custom themes
+- **Performance Optimized**: Efficiently renders thousands of rows and columns
+
+## Documentation
+
+For detailed documentation, visit: [Simple Table Documentation](https://docs.simple-table.com/)
 
 ## Website
 
@@ -18,6 +33,49 @@ Check out the live demo on CodeSandbox: <a href="https://codesandbox.io/p/sandbo
     </a>
 </div>
 
+## Installation
+
+```bash
+# npm
+npm install simple-table-react
+
+# yarn
+yarn add simple-table-react
+
+# pnpm
+pnpm add simple-table-react
+```
+
+## Quick Start
+
+```jsx
+import React, { useState } from "react";
+import SimpleTable from "simple-table-react";
+import "simple-table-react/dist/styles.css";
+
+const App = () => {
+  const [rows, setRows] = useState([
+    { rowMeta: { rowId: 0 }, rowData: { name: "John", age: 25 } },
+    { rowMeta: { rowId: 1 }, rowData: { name: "Jane", age: 30 } },
+  ]);
+
+  const headers = [
+    { accessor: "name", label: "Name", width: 200 },
+    { accessor: "age", label: "Age", width: 100 },
+  ];
+
+  const handleCellChange = ({ accessor, newValue, originalRowIndex }) => {
+    const updatedRows = [...rows];
+    updatedRows[originalRowIndex].rowData[accessor] = newValue;
+    setRows(updatedRows);
+  };
+
+  return <SimpleTable defaultHeaders={headers} rows={rows} onCellChange={handleCellChange} selectableCells />;
+};
+
+export default App;
+```
+
 ## Props
 
 The Simple Table component accepts the following props:
@@ -31,77 +89,73 @@ The Simple Table component accepts the following props:
   - **isSortable**: An optional boolean indicating if the column is sortable.
   - **type**: An optional string specifying the data type of the column. Can be "string", "number", "boolean", "date", or "enum".
   - **cellRenderer**: An optional function that takes a row object and returns a `ReactNode` for custom cell rendering.
+  - **align**: Text alignment within cells - "left", "center", or "right"
+
+- **rows**: An array of data rows to be displayed in the table. Each row object should have:
 
+  - **rowMeta**: Object containing metadata for the row
+    - **rowId**: Unique identifier for the row
+    - **isExpanded**: Optional boolean for row grouping expansion state
+    - **children**: Optional array of child rows for row grouping
+  - **rowData**: Object containing the actual data to display (keys should match header accessors)
+
+- **theme**: Theme name to apply to the table. Options include "light", "dark", "high-contrast", etc.
+- **height**: The height of the table. Can be a string (e.g., "500px", "calc(100vh - 100px)") or "auto".
+- **shouldPaginate**: A boolean to enable or disable pagination. Default is `true`.
+- **rowsPerPage**: The number of rows to display per page. Default is `10`.
 - **columnResizing**: A boolean to enable or disable column resizing. Default is `true`.
 - **draggable**: A boolean to enable or disable column dragging.
-- **editColumns**: A boolean to enable or disable column editing.
-- **height**: The height of the table.
+- **pinned**: A boolean to enable or disable column pinning.
+- **editColumns**: A boolean to enable or disable column management.
 - **hideFooter**: A boolean to hide or show the footer. Default is `false`.
-- **nextIcon**: A React element to display as the next page icon. Default is `<AngleRightIcon />`.
-- **prevIcon**: A React element to display as the previous page icon. Default is `<AngleLeftIcon />`.
-- **rows**: An array of data rows to be displayed in the table.
-- **rowsPerPage**: The number of rows to display per page. Default is `10`.
 - **selectableCells**: A boolean to enable or disable cell selection.
-- **shouldPaginate**: A boolean to enable or disable pagination. Default is `true`.
+- **selectableColumns**: A boolean to enable selection of entire columns by clicking headers.
+- **onCellChange**: A function called when a cell value changes.
+- **nextIcon**: A React element to display as the next page icon.
+- **prevIcon**: A React element to display as the previous page icon.
 - **sortDownIcon**: A React element to display as the sort down icon.
 - **sortUpIcon**: A React element to display as the sort up icon.
-- **onCellChange**: A function that is called when a cell value changes. It receives an object with the following properties:
-  - **accessor**: The accessor of the column whose cell value changed.
-  - **newValue**: The new value of the cell.
-  - **newRowIndex**: The index of the row in the current page.
-  - **originalRowIndex**: The original index of the row in the entire dataset.
-  - **row**: The entire row object.
 
 ## Customizable Styles
 
-All styles for the Simple Table are customizable and can be found in the `table.css` file. You can modify these styles to fit the design needs of your application.
+All styles for the Simple Table are customizable through CSS variables. You can override these variables in your own CSS to match your application's design system.
 
 ### CSS Variables
 
 You can override the following CSS variables to customize the appearance of the table:
 
-- `--st-border-radius`
-- `--st-border-color`
-- `--st-border-width`
-- `--st-resize-handle-color`
-- `--st-separator-border-color`
-- `--st-odd-row-background-color`
-- `--st-dragging-background-color`
-- `--st-selected-cell-background-color`
-- `--st-selected-first-cell-background-color`
-- `--st-border-top-color`
-- `--st-border-bottom-color`
-- `--st-border-left-color`
-- `--st-border-right-color`
-- `--st-border-top-white-color`
-- `--st-footer-background-color`
-
-### CSS Class Names
-
-The following CSS class names are used in the table and can be customized:
-
-- `.st-wrapper`
-- `.st-table`
-- `.st-header-cell`
-- `.st-cell`
-- `.st-header-label`
-- `.st-header-resize-handle`
-- `.st-row-separator`
-- `.st-cell-odd-row`
-- `.st-dragging`
-- `.st-cell-selected`
-- `.st-cell-selected-first`
-- `.st-selected-top-border`
-- `.st-selected-bottom-border`
-- `.st-selected-left-border`
-- `.st-selected-right-border`
-- `.st-footer`
-- `.st-next-prev-btn`
-- `.st-page-btn`
-- `.st-page-btn.active`
-- `.editable-cell-input`
-- `.st-column-editor`
-- `.st-column-editor.open`
+```css
+:root {
+  /* Base variables */
+  --st-border-radius: 4px;
+  --st-border-width: 1px;
+  --st-cell-padding: 8px;
+  --st-font-size: 0.875rem;
+  --st-font-weight-normal: 400;
+  --st-font-weight-bold: 600;
+  --st-transition-duration: 0.2s;
+  --st-transition-ease: ease-in-out;
+  --st-opacity-disabled: 0.5;
+  --st-spacing-small: 4px;
+  --st-spacing-medium: 8px;
+  --st-spacing-large: 16px;
+
+  /* Colors */
+  --st-border-color: #e0e0e0;
+  --st-text-color: #333;
+  --st-background-color: #fff;
+  --st-header-background-color: #f5f5f5;
+  --st-resize-handle-color: #ccc;
+  --st-separator-border-color: #e0e0e0;
+  --st-odd-row-background-color: #f9f9f9;
+  --st-hover-background-color: #f0f0f0;
+  --st-dragging-background-color: #eaeaea;
+  --st-selected-cell-background-color: rgba(0, 120, 215, 0.1);
+  --st-selected-first-cell-background-color: rgba(0, 120, 215, 0.2);
+  --st-footer-background-color: #f5f5f5;
+  --st-last-group-row-separator-border-color: #4b5eaa;
+}
+```
 
 ## License
 

package/dist/components/Animate.d.ts

@@ -1,9 +1,17 @@
-import { RefObject } from "react";
+import React, { RefObject } from "react";
+import HeaderObject from "../types/HeaderObject";
+export declare const TEST_KEY = "productId";
 interface AnimateProps {
     allowHorizontalAnimate?: boolean;
-    children: any;
+    children: React.ReactNode | React.ReactNode[];
+    draggedHeaderRef?: RefObject<HeaderObject | null>;
+    headersRef: RefObject<HeaderObject[]>;
+    isBody?: boolean;
     pauseAnimation?: boolean;
-    tableRef: RefObject<HTMLDivElement>;
+    rowIndex: number;
+    tableRef: RefObject<HTMLDivElement | null>;
 }
-declare const Animate: ({ allowHorizontalAnimate, children, pauseAnimation, tableRef, }: AnimateProps) => any;
-export default Animate;
+declare const AnimateWrapper: ({ allowAnimations, children, ...props }: AnimateProps & {
+    allowAnimations: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AnimateWrapper;

package/dist/components/SimpleTable/PinnedLeftColumns.d.ts

@@ -0,0 +1,2 @@
+declare const PinnedLeftColumns: () => import("react/jsx-runtime").JSX.Element;
+export default PinnedLeftColumns;

package/dist/components/SimpleTable/PinnedRightColumns.d.ts

@@ -0,0 +1,2 @@
+declare const PinnedRightColumns: () => import("react/jsx-runtime").JSX.Element;
+export default PinnedRightColumns;

package/dist/components/SimpleTable/RenderCells.d.ts

@@ -0,0 +1,16 @@
+import Row from "../../types/Row";
+import HeaderObject from "../../types/HeaderObject";
+import TableBodyProps from "../../types/TableBodyProps";
+declare const RenderCells: ({ getBorderClass, handleMouseDown, handleMouseOver, headers, hiddenColumns, isRowExpanded, isSelected, isTopLeftCell, lastGroupRow, onExpandRowClick, pinned, row, rowIndex, shouldDisplayLastColumnCell, ...props }: {
+    depth: number;
+    headers: HeaderObject[];
+    hiddenColumns: Record<string, boolean>;
+    isRowExpanded: (rowId: string | number) => boolean;
+    lastGroupRow?: boolean | undefined;
+    onExpandRowClick: (rowIndex: number) => void;
+    pinned?: "left" | "right" | undefined;
+    row: Row;
+    rowIndex: number;
+    shouldDisplayLastColumnCell: boolean;
+} & Omit<TableBodyProps, "currentRows">) => import("react/jsx-runtime").JSX.Element;
+export default RenderCells;

package/dist/components/SimpleTable/SimpleTable.d.ts

@@ -1,24 +1,28 @@
 import { ReactNode } from "react";
 import HeaderObject from "../../types/HeaderObject";
-import CellValue from "../../types/CellValue";
 import CellChangeProps from "../../types/CellChangeProps";
 import "../../styles/simple-table.css";
 import Theme from "../../types/Theme";
-interface SpreadsheetProps {
-    columnEditorPosition?: "left" | "right";
+import Row from "../../types/Row";
+declare enum ColumnEditorPosition {
+    Left = "left",
+    Right = "right"
+}
+interface SimpleTableProps {
+    allowAnimations?: boolean;
+    columnEditorPosition?: ColumnEditorPosition;
     columnEditorText?: string;
     columnResizing?: boolean;
     defaultHeaders: HeaderObject[];
     draggable?: boolean;
     editColumns?: boolean;
+    editColumnsInitOpen?: boolean;
     height?: string;
     hideFooter?: boolean;
     nextIcon?: ReactNode;
-    onCellChange?: ({ accessor, newValue, originalRowIndex, row, }: CellChangeProps) => void;
+    onCellChange?: ({ accessor, newValue, originalRowIndex, row }: CellChangeProps) => void;
     prevIcon?: ReactNode;
-    rows: {
-        [key: string]: CellValue;
-    }[];
+    rows: Row[];
     rowsPerPage?: number;
     selectableCells?: boolean;
     selectableColumns?: boolean;
@@ -27,5 +31,30 @@ interface SpreadsheetProps {
     sortUpIcon?: ReactNode;
     theme?: Theme;
 }
-declare const SimpleTable: ({ columnEditorPosition, columnEditorText, columnResizing, defaultHeaders, draggable, editColumns, height, hideFooter, nextIcon, onCellChange, prevIcon, rows, rowsPerPage, selectableCells, selectableColumns, shouldPaginate, sortDownIcon, sortUpIcon, theme, }: SpreadsheetProps) => import("react/jsx-runtime").JSX.Element;
-export default SimpleTable;
+declare const _default: import("react").MemoExoticComponent<{
+    ({ allowAnimations, columnEditorPosition, columnEditorText, columnResizing, defaultHeaders, draggable, editColumns, editColumnsInitOpen, height, hideFooter, nextIcon, onCellChange, prevIcon, rows, rowsPerPage, selectableCells, selectableColumns, shouldPaginate, sortDownIcon, sortUpIcon, theme, }: SimpleTableProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        allowAnimations: boolean;
+        columnEditorPosition: ColumnEditorPosition;
+        columnEditorText: string;
+        columnResizing: boolean;
+        defaultHeaders: never[];
+        draggable: boolean;
+        editColumns: boolean;
+        editColumnsInitOpen: boolean;
+        height: string;
+        hideFooter: boolean;
+        nextIcon: import("react/jsx-runtime").JSX.Element;
+        onCellChange: () => void;
+        prevIcon: import("react/jsx-runtime").JSX.Element;
+        rows: never[];
+        rowsPerPage: number;
+        selectableCells: boolean;
+        selectableColumns: boolean;
+        shouldPaginate: boolean;
+        sortDownIcon: import("react/jsx-runtime").JSX.Element;
+        sortUpIcon: import("react/jsx-runtime").JSX.Element;
+        theme: string;
+    };
+}>;
+export default _default;

package/dist/components/SimpleTable/TableBody.d.ts

@@ -1,25 +1,3 @@
-import { RefObject } from "react";
-import HeaderObject from "../../types/HeaderObject";
-import CellChangeProps from "../../types/CellChangeProps";
-import { MouseDownProps } from "../../hooks/useSelection";
-interface TableBodyProps {
-    currentRows: {
-        [key: string]: any;
-    }[];
-    getBorderClass: (rowIndex: number, columnIndex: number) => string;
-    handleMouseDown: (props: MouseDownProps) => void;
-    handleMouseOver: (rowIndex: number, columnIndex: number) => void;
-    headers: HeaderObject[];
-    hiddenColumns: Record<string, boolean>;
-    isSelected: (rowIndex: number, columnIndex: number) => boolean;
-    isTopLeftCell: (rowIndex: number, columnIndex: number) => boolean;
-    isWidthDragging: boolean;
-    onCellChange?: (props: CellChangeProps) => void;
-    shouldDisplayLastColumnCell: boolean;
-    shouldPaginate: boolean;
-    tableRef: RefObject<HTMLDivElement>;
-}
-declare const TableBody: ({ currentRows, getBorderClass, handleMouseDown, handleMouseOver, headers, hiddenColumns, isSelected, isTopLeftCell, isWidthDragging, onCellChange, shouldDisplayLastColumnCell, shouldPaginate, tableRef, }: TableBodyProps & {
-    shouldDisplayLastColumnCell: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+import TableBodyProps from "../../types/TableBodyProps";
+declare const TableBody: (props: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;

package/dist/components/SimpleTable/TableCell.d.ts

@@ -1,21 +1,4 @@
 /// <reference types="react" />
-import HeaderObject from "../../types/HeaderObject";
-import CellChangeProps from "../../types/CellChangeProps";
-import CellValue from "../../types/CellValue";
-interface TableCellProps {
-    borderClass: string;
-    colIndex: number;
-    content: CellValue;
-    header: HeaderObject;
-    isSelected: boolean;
-    isTopLeftCell: boolean;
-    onCellChange?: (props: CellChangeProps) => void;
-    onMouseDown: (rowIndex: number, colIndex: number) => void;
-    onMouseOver: (rowIndex: number, colIndex: number) => void;
-    row: {
-        [key: string]: CellValue;
-    };
-    rowIndex: number;
-}
-declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+import TableCellProps from "../../types/TableCellProps";
+declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLDivElement>>;
 export default TableCell;

package/dist/components/SimpleTable/TableColumnEditor/TableColumnEditor.d.ts

@@ -4,6 +4,7 @@ type TableColumnEditorProps = {
     headers: HeaderObject[];
     columnEditorText: string;
     editColumns: boolean;
+    editColumnsInitOpen: boolean;
     position: "left" | "right";
     setHiddenColumns: Dispatch<SetStateAction<{
         [key: string]: boolean;
@@ -12,5 +13,5 @@ type TableColumnEditorProps = {
         [key: string]: boolean;
     };
 };
-declare const TableColumnEditor: ({ columnEditorText, editColumns, headers, position, setHiddenColumns, hiddenColumns, }: TableColumnEditorProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TableColumnEditor: ({ columnEditorText, editColumns, editColumnsInitOpen, headers, position, setHiddenColumns, hiddenColumns, }: TableColumnEditorProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TableColumnEditor;

package/dist/components/SimpleTable/TableContent.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from "react";
+import TableBodyProps from "../../types/TableBodyProps";
+import TableHeaderProps from "../../types/TableHeaderProps";
+type OmittedTableProps = "shouldDisplayLastColumnCell" | "pinnedLeftColumns" | "pinnedRightColumns" | "mainTemplateColumns" | "pinnedLeftTemplateColumns" | "pinnedRightTemplateColumns";
+interface TableContentProps extends Omit<TableHeaderProps, OmittedTableProps>, Omit<TableBodyProps, OmittedTableProps> {
+    editColumns: boolean;
+    pinnedLeftRef: RefObject<HTMLDivElement | null>;
+    pinnedRightRef: RefObject<HTMLDivElement | null>;
+    isRowExpanded: (rowId: string | number) => boolean;
+    onExpandRowClick: (rowIndex: number) => void;
+}
+declare const TableContent: ({ allowAnimations, columnResizing, currentRows, draggable, draggedHeaderRef, editColumns, forceUpdate, getBorderClass, handleMouseDown, handleMouseOver, headersRef, hiddenColumns, hoveredHeaderRef, isRowExpanded, isSelected, isTopLeftCell, isWidthDragging, onCellChange, onExpandRowClick, onSort, onTableHeaderDragEnd, pinnedLeftRef, pinnedRightRef, selectableColumns, setIsWidthDragging, setSelectedCells, shouldPaginate, sort, sortDownIcon, sortUpIcon, tableRef, }: TableContentProps) => import("react/jsx-runtime").JSX.Element;
+export default TableContent;

package/dist/components/SimpleTable/TableHeader.d.ts

@@ -1,26 +1,3 @@
-import { Dispatch, ReactNode, RefObject, SetStateAction } from "react";
-import HeaderObject from "../../types/HeaderObject";
-import SortConfig from "../../types/SortConfig";
-import OnSortProps from "../../types/OnSortProps";
-import Row from "../../types/Row";
-interface TableHeaderProps {
-    columnResizing: boolean;
-    currentRows: Row[];
-    draggable: boolean;
-    forceUpdate: () => void;
-    headersRef: React.RefObject<HeaderObject[]>;
-    hiddenColumns: Record<string, boolean>;
-    isWidthDragging: boolean;
-    onSort: OnSortProps;
-    onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
-    selectableColumns: boolean;
-    setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
-    setSelectedCells: Dispatch<React.SetStateAction<Set<string>>>;
-    shouldDisplayLastColumnCell: boolean;
-    sort: SortConfig | null;
-    sortDownIcon?: ReactNode;
-    sortUpIcon?: ReactNode;
-    tableRef: RefObject<HTMLDivElement>;
-}
-declare const TableHeader: ({ columnResizing, currentRows, draggable, forceUpdate, headersRef, hiddenColumns, isWidthDragging, onSort, onTableHeaderDragEnd, selectableColumns, setIsWidthDragging, setSelectedCells, shouldDisplayLastColumnCell, sort, sortDownIcon, sortUpIcon, tableRef, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+import TableHeaderProps from "../../types/TableHeaderProps";
+declare const TableHeader: ({ allowAnimations, columnResizing, currentRows, draggable, draggedHeaderRef, forceUpdate, headersRef, hiddenColumns, hoveredHeaderRef, isWidthDragging, mainTemplateColumns, onSort, onTableHeaderDragEnd, pinnedLeftColumns, pinnedLeftTemplateColumns, pinnedRightColumns, pinnedRightTemplateColumns, selectableColumns, setIsWidthDragging, setSelectedCells, shouldDisplayLastColumnCell, sort, sortDownIcon, sortUpIcon, tableRef, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default TableHeader;

package/dist/components/SimpleTable/TableHeaderCell.d.ts

@@ -14,6 +14,7 @@ interface TableHeaderCellProps {
     index: number;
     onSort: OnSortProps;
     onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
+    reverse?: boolean;
     selectableColumns: boolean;
     setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
     setSelectedCells: Dispatch<React.SetStateAction<Set<string>>>;

package/dist/components/SimpleTable/TableHorizontalScrollbar.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from "react";
+import HeaderObject from "../../types/HeaderObject";
+declare const TableHorizontalScrollbar: ({ headersRef, pinnedLeftRef, pinnedRightRef, tableRef, }: {
+    headersRef: RefObject<HeaderObject[]>;
+    pinnedLeftRef: RefObject<HTMLDivElement | null>;
+    pinnedRightRef: RefObject<HTMLDivElement | null>;
+    tableRef: RefObject<HTMLDivElement | null>;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TableHorizontalScrollbar;

package/dist/components/SimpleTable/TableRow.d.ts

@@ -0,0 +1,14 @@
+import Row from "../../types/Row";
+import TableBodyProps from "../../types/TableBodyProps";
+declare const TableRow: ({ depth, getNextRowIndex, index, lastGroupRow, pinned, props, row, }: {
+    depth?: number | undefined;
+    getNextRowIndex: () => number;
+    index: number;
+    lastGroupRow?: boolean | undefined;
+    pinned?: "left" | "right" | undefined;
+    props: Omit<TableBodyProps, "currentRows"> & {
+        onExpandRowClick: (rowIndex: number) => void;
+    };
+    row: Row;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TableRow;

package/dist/components/SimpleTable/TableRowSeparator.d.ts

@@ -1,2 +1,4 @@
-declare const TableRowSeparator: () => import("react/jsx-runtime").JSX.Element;
+declare const TableRowSeparator: ({ lastGroupRow }: {
+    lastGroupRow?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TableRowSeparator;

package/dist/components/SimpleTable/TableSection.d.ts

@@ -0,0 +1,12 @@
+import Row from "../../types/Row";
+import { RefObject } from "react";
+import TableBodyProps from "../../types/TableBodyProps";
+declare const TableSection: ({ rows, templateColumns, pinned, sectionRef, isRowExpanded, onExpandRowClick, ...props }: {
+    rows: Row[];
+    templateColumns: string;
+    pinned?: "left" | "right" | undefined;
+    sectionRef?: RefObject<HTMLDivElement | null> | undefined;
+    isRowExpanded: (rowId: string | number) => boolean;
+    onExpandRowClick: (rowIndex: number) => void;
+} & Omit<TableBodyProps, "currentRows">) => import("react/jsx-runtime").JSX.Element;
+export default TableSection;

package/dist/consts/general-consts.d.ts

@@ -0,0 +1 @@
+export declare const DRAG_THROTTLE_LIMIT = 50;

package/dist/context/TableContext.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-import CellValue from "../types/CellValue";
+import Row from "../types/Row";
 declare const TableContext: import("react").Context<{
-    rows: {
-        [key: string]: CellValue;
-    }[];
-    tableRows: {
-        [key: string]: CellValue;
-    }[];
+    rows: Row[];
+    tableRows: Row[];
 }>;
 export default TableContext;

package/dist/helpers/calculateBoundingBoxes.d.ts

@@ -1,13 +1,11 @@
-import { ReactNode } from "react";
-interface BoundingBox {
-    bottom: number;
-    height: number;
-    left: number;
-    right: number;
-    top: number;
-    width: number;
-}
-declare const calculateBoundingBoxes: (children: ReactNode) => {
-    [key: string]: BoundingBox;
+import { MutableRefObject } from "react";
+import BoundingBox from "../types/BoundingBox";
+import HeaderObject from "../types/HeaderObject";
+declare const calculateBoundingBoxes: ({ currentHeaders, draggedHeaderRef, rowIndex, }: {
+    currentHeaders: HeaderObject[];
+    draggedHeaderRef?: MutableRefObject<HeaderObject | null> | undefined;
+    rowIndex: number;
+}) => {
+    [key: string]: false | BoundingBox;
 };
 export default calculateBoundingBoxes;

package/dist/hooks/useDragHandler.d.ts

@@ -0,0 +1,12 @@
+import { DragEvent } from "react";
+import HeaderObject from "../types/HeaderObject";
+import DragHandlerProps from "../types/DragHandlerProps";
+declare const useDragHandler: ({ draggedHeaderRef, headersRef, hoveredHeaderRef, onTableHeaderDragEnd, }: DragHandlerProps) => {
+    handleDragStart: (header: HeaderObject) => void;
+    handleDragOver: ({ event, hoveredHeader, }: {
+        event: DragEvent<HTMLDivElement>;
+        hoveredHeader: HeaderObject;
+    }) => void;
+    handleDragEnd: () => void;
+};
+export default useDragHandler;

package/dist/hooks/usePrevious.d.ts

@@ -1,2 +1,2 @@
-declare const usePrevious: (value: any) => undefined;
+declare const usePrevious: <T>(value: T) => T;
 export default usePrevious;

package/dist/hooks/useSortableData.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import HeaderObject from "../types/HeaderObject";
+import Row from "../types/Row";
+import SortConfig from "../types/SortConfig";
+declare const useSortableData: (tableRows: Row[], headers: HeaderObject[]) => {
+    sort: SortConfig | null;
+    setSort: import("react").Dispatch<import("react").SetStateAction<SortConfig | null>>;
+    sortedRows: Row[];
+    hiddenColumns: Record<string, boolean>;
+    setHiddenColumns: import("react").Dispatch<import("react").SetStateAction<Record<string, boolean>>>;
+};
+export default useSortableData;