ehscan-react-table 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 beeplaced
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# ehscan-react-table
+
+- ...
+
+# Usage
+
+### Implementation
+
+```jsx
+
+```
+
+### Styling
+
+----
+# Changelog
+
+All notable changes to this project will be documented in this file.
+---

package/dist/Components.d.ts

@@ -0,0 +1 @@
+export { Table } from './elements/Table';

package/dist/Components.js

@@ -0,0 +1,2 @@
+// ehscan-react-table entry
+export { Table } from './elements/Table';

package/dist/elements/Debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): T;

package/dist/elements/Debounce.js

@@ -0,0 +1,8 @@
+// utils/debounce.ts (optional to keep code organized)
+export function debounce(func, delay) {
+    let timeoutId;
+    return function (...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func.apply(this, args), delay);
+    };
+}

package/dist/elements/Pagination.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    totalItems: number;
+    currentEntries: number;
+    limit: number;
+    skip: number;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+}
+declare const Pagination: React.FC<Props>;
+export default Pagination;

package/dist/elements/Pagination.js

@@ -0,0 +1,51 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import PaginationButton from "./PaginationButton";
+import styles from '../style/table.module.css';
+const Pagination = ({ totalItems, currentEntries, limit, skip, currentPage, onPageChange }) => {
+    const [totalPages, setTotalPages] = useState(0);
+    const handlePrevious = () => {
+        if (currentPage > 1)
+            onPageChange(currentPage - 1);
+    };
+    const handleNext = () => {
+        if (currentPage < totalPages)
+            onPageChange(currentPage + 1);
+    };
+    const handlePageClick = (page) => {
+        console.log(page);
+        onPageChange(page);
+    };
+    useEffect(() => {
+        setTotalPages(Math.ceil(totalItems / limit));
+    }, [totalItems]);
+    const getVisiblePages = (currentPage, totalPages, maxVisible = 10) => {
+        const pages = [];
+        if (totalPages <= maxVisible) {
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+        if (currentPage <= 5) {
+            pages.push(1, 2, 3, 4, 5, "...", totalPages - 2, totalPages - 1, totalPages);
+            return pages;
+        }
+        if (currentPage >= totalPages - 4) {
+            pages.push(1, 2, 3, "...", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
+            return pages;
+        }
+        pages.push(1, "...", currentPage - 1, currentPage, currentPage + 1, "...", totalPages);
+        return pages;
+    };
+    const visiblePages = getVisiblePages(currentPage, totalPages);
+    const PaginationOutput = () => {
+        const from = skip + 1;
+        const to = currentEntries > totalItems ? totalItems : currentEntries;
+        if (skip === undefined || currentEntries === undefined || totalItems === undefined)
+            return null;
+        return _jsxs("div", { className: styles.paginationend, children: [from, " - ", to, " / ", totalItems] });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.paginationwrapper, children: totalPages > 1 && (_jsxs(_Fragment, { children: [_jsx(PaginationButton, { index: 'prev', action: handlePrevious, display: totalPages > 2 && currentPage > 1 }), visiblePages.map((p, i) => {
+                            const isEllipsis = p === "...";
+                            return (_jsx(PaginationButton, { txt: p, isActive: p === currentPage, disabled: isEllipsis, action: isEllipsis ? undefined : () => handlePageClick(p) }, i));
+                        }), _jsx(PaginationButton, { index: 'next', action: handleNext, display: totalPages > 2 && currentPage !== totalPages })] })) }), _jsx(PaginationOutput, {})] }));
+};
+export default Pagination;

package/dist/elements/PaginationButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface PaginationButtonProps {
+    index?: string | number;
+    txt?: string | number;
+    isActive?: boolean;
+    disabled?: boolean;
+    action?: () => void;
+    display?: boolean;
+}
+declare const PaginationButton: React.FC<PaginationButtonProps>;
+export default PaginationButton;

package/dist/elements/PaginationButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import PaginationRipple from './PaginationRipple';
+import styles from '../table.module.css';
+const PaginationButton = ({ index, txt, disabled, isActive, action, display }) => {
+    const buttonRef = useRef(null);
+    const handleRipple = PaginationRipple();
+    const handleButtonClick = (event) => {
+        if (display === false)
+            return;
+        handleRipple(event, buttonRef);
+        if (!disabled && action)
+            action();
+    };
+    const PrevBtn = () => {
+        return (_jsx(_Fragment, { children: _jsx("svg", { className: styles.pagbtnsvg, width: "24px", height: "24px", fill: "white", version: "1.1", viewBox: "0 -960 960 960", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m632-80-400-400 400-400 71 71-329 329 329 329z" }) }) }));
+    };
+    const NextBtn = () => {
+        return (_jsx(_Fragment, { children: _jsx("svg", { className: styles.pagbtnsvg, xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "white", children: _jsx("path", { d: "m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z" }) }) }));
+    };
+    return (_jsxs("div", { ref: buttonRef, className: `${styles.paginationbutton} ${isActive ? styles.paginationbuttonactive : ""} ${display === false ? styles.paginationbuttonhide : ""}`, onClick: (e) => handleButtonClick(e), children: [index === 'prev' && _jsx(PrevBtn, {}), index === 'next' && _jsx(NextBtn, {}), txt && _jsx("div", { className: "_txt", children: txt })] }, index));
+};
+export default PaginationButton;

package/dist/elements/PaginationRipple.d.ts

@@ -0,0 +1,3 @@
+import { MouseEvent } from 'react';
+declare const PaginationRipple: () => (event: MouseEvent<HTMLDivElement>, buttonRef: React.RefObject<HTMLDivElement | null>) => void;
+export default PaginationRipple;

package/dist/elements/PaginationRipple.js

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import styles from '../table.module.css';
+const PaginationRipple = () => {
+    const handleRipple = useCallback((event, buttonRef) => {
+        const button = buttonRef.current;
+        if (!button)
+            return;
+        const rect = button.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = event.clientX - rect.left - size / 2;
+        const y = event.clientY - rect.top - size / 2;
+        const ripple = document.createElement('span');
+        ripple.style.width = ripple.style.height = `${size}px`;
+        ripple.style.left = `${x}px`;
+        ripple.style.top = `${y}px`;
+        ripple.className = styles.pagripple;
+        button.appendChild(ripple);
+        //setTimeout(() => ripple.remove(), 600);
+    }, []);
+    return handleRipple;
+};
+export default PaginationRipple;

package/dist/elements/Table.d.ts

@@ -0,0 +1,32 @@
+type TableColumn = {
+    tag: string;
+    title?: string;
+    type?: string;
+    search?: boolean;
+};
+type SortOrder = {
+    tag: string;
+    dir: "asc" | "desc";
+};
+type Props = {
+    columns: TableColumn[];
+    rows: any[];
+    sortOrder: SortOrder;
+    setSortOrder: (order: SortOrder) => void;
+    cellComponents: Record<string, React.ComponentType<{
+        row: any;
+        col: string;
+    }>>;
+    setSelectedIds: React.Dispatch<React.SetStateAction<string[]>>;
+    searchTermArraySetter?: (arr: {
+        tag: string;
+        term: string;
+    }[]) => void;
+    setSearchTermArraySetter?: (arr: {
+        tag: string;
+        term: string;
+    }[]) => void;
+    fallback: () => React.ReactNode;
+};
+export declare const Table: React.FC<Props>;
+export {};

package/dist/elements/Table.js

@@ -0,0 +1,130 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from "react";
+import TableCellSelectHeadCol from "./TableCellSelectHeadCol";
+import { debounce } from "./Debounce";
+import styles from '../style/table.module.css';
+export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents, setSelectedIds, searchTermArraySetter, setSearchTermArraySetter, fallback }) => {
+    const [wrapperBottom, setWrapperBottom] = useState(undefined);
+    const headerRef = useRef(null);
+    const tableSearchTerms = useRef({});
+    const [openCol, setOpenCol] = useState(undefined);
+    const [checkAll, setCheckAll] = useState(false);
+    useEffect(() => {
+        if (searchTermArraySetter !== undefined)
+            return;
+        try { //Reset SearchTerm
+            tableSearchTerms.current = {};
+        }
+        catch (error) {
+            console.log(error);
+        }
+    }, [searchTermArraySetter]);
+    useEffect(() => {
+        const calculateHeight = () => {
+            if (headerRef.current) {
+                const { bottom } = headerRef.current.getBoundingClientRect();
+                setWrapperBottom(bottom);
+            }
+        };
+        calculateHeight();
+        window.addEventListener("resize", calculateHeight);
+        return () => window.removeEventListener("resize", calculateHeight);
+    }, []);
+    const checkHead = (entry) => {
+        if (entry === undefined)
+            return;
+        setCheckAll(!entry);
+        setSelectedIds(prev => {
+            let next = prev;
+            if (!entry)
+                next = [...prev, ...rows.map(r => r.id)];
+            if (entry)
+                next = prev.filter(id => !rows.some(r => r.id === id));
+            return [...new Set(next)];
+        });
+    };
+    const debouncedSave = useRef(debounce((entry) => {
+        const doSave = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                yield filterRows(entry);
+            }
+            catch (err) {
+                console.error('Autosave failed:', err);
+            }
+        });
+        doSave();
+    }, 800));
+    const filterRows = (entry) => __awaiter(void 0, void 0, void 0, function* () {
+        const { tag, term } = entry;
+        tableSearchTerms.current[tag] = term;
+        const searchTermsArray = Object.entries(tableSearchTerms.current).map(([tag, term]) => ({
+            tag,
+            term: term
+        }));
+        if (setSearchTermArraySetter)
+            setSearchTermArraySetter(searchTermsArray);
+    });
+    const RemoveSearchEntry = () => _jsx("svg", { className: styles.removesearchsvg, xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#48752C", children: _jsx("path", { d: "m336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z" }) });
+    const HeadSearchBar = ({ content, tag }) => {
+        var _a;
+        const inputRef = useRef(null);
+        const [value, setValue] = useState((_a = tableSearchTerms.current[tag]) !== null && _a !== void 0 ? _a : "");
+        const hasLabel = value.length > 0;
+        const inputTag = `search_${tag.toLowerCase()}`;
+        useEffect(() => {
+            if (inputRef.current && openCol === tag) {
+                inputRef.current.focus();
+            }
+        }, [value]);
+        const changeHeadSearch = (newValue) => {
+            setValue(newValue);
+            setOpenCol(tag);
+            debouncedSave.current({ tag, term: newValue });
+        };
+        return (_jsxs("div", { className: styles.headsearchwrapper, children: [_jsx("div", { className: `${styles.headsearchlable}${hasLabel ? ` ${styles.show}` : ""}`, children: _jsx("label", { htmlFor: inputTag, children: content }) }), _jsxs("div", { className: `${styles.searchwrapper}${hasLabel || openCol === tag ? ` ${styles.focused}` : ""}`, children: [_jsx("input", { id: inputTag, ref: inputRef, className: styles.headsearch, type: "text", value: value, onFocus: () => setOpenCol(tag), onChange: (e) => changeHeadSearch(e.target.value), placeholder: content, maxLength: 150, spellCheck: false }), value !== "" && _jsx("div", { onClick: () => changeHeadSearch(""), children: _jsx(RemoveSearchEntry, {}) })] })] }));
+    };
+    const HeadColSort = ({ tag }) => {
+        return (_jsx(_Fragment, { children: _jsxs("div", { className: "sort-col", onClick: () => setSortOrder({ tag, dir: sortOrder.dir === 'desc' ? 'asc' : 'desc' }), children: [sortOrder.tag === tag && _jsx(SortButton, {}), openCol === tag && sortOrder.tag !== tag && _jsx(EmptySort, {})] }) }));
+    };
+    const HeadColMain = ({ col }) => {
+        const { tag, search, title } = col;
+        const colTitle = title || tag;
+        return (_jsx("th", { children: _jsxs("div", { className: styles.headcolcell, children: [_jsx(HeadColSort, { tag: tag }), _jsx("div", { className: styles.headcolcellmain, children: search ? _jsx(HeadSearchBar, { content: colTitle, tag: tag }) : _jsx("div", { children: colTitle }) })] }) }));
+    };
+    const HeadCols = () => {
+        return (_jsxs(_Fragment, { children: [columns.map((col, i) => {
+                    const { tag, type } = col;
+                    if (type === "checkbox") {
+                        return (_jsx("th", { className: styles.thcheckhead, style: { "--custom-width": `32px` }, children: _jsx(TableCellSelectHeadCol, { checkHead: checkHead, checkAll: checkAll }) }, `checkbox-${tag !== null && tag !== void 0 ? tag : i}`));
+                    }
+                    return _jsx(HeadColMain, { col: col }, tag !== null && tag !== void 0 ? tag : i);
+                }), _jsx(EndHeadCol, {})] }));
+    };
+    const SortButton = () => {
+        switch (sortOrder.dir) {
+            case 'desc': return _jsx("svg", { className: styles.sortsvg, xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "white", children: _jsx("path", { d: "M480-240 240-480l56-56 144 144v-368h80v368l144-144 56 56-240 240Z" }) });
+            default: return _jsx("svg", { className: styles.sortsvg, xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "white", children: _jsx("path", { d: "M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z" }) });
+        }
+    };
+    const EmptySort = () => _jsx("svg", { className: styles.sortsvg, xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "white", children: _jsx("path", { d: "M480-120 300-300l58-58 122 122 122-122 58 58-180 180ZM358-598l-58-58 180-180 180 180-58 58-122-122-122 122Z" }) });
+    const EndHeadCol = () => _jsx("th", { style: { "--custom-width": `10px` } }, 'endHeadCol');
+    const EndCol = () => _jsx("td", {}, 'endCol');
+    const TableBody = () => {
+        return (_jsx("tbody", { className: `${styles.tablebody} ${styles._tbl}`, children: rows && rows.map((row, rowIndex) => (_jsxs("tr", { className: styles.deftabletr, children: [columns.map((col, ci) => {
+                        var _a;
+                        const type = (_a = col.type) !== null && _a !== void 0 ? _a : "def";
+                        const CellComponent = cellComponents[type];
+                        return (_jsx("td", { children: _jsx(CellComponent, { row: row, col: col.tag }) }, ci));
+                    }), _jsx(EndCol, {})] }, `row-${rowIndex}`))) }, 'ext-tbody'));
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `${styles.tablewrapper} ${styles['_tbl']}`, style: { height: `calc(100vh - ${wrapperBottom}px)` }, children: [_jsxs("table", { className: styles.exttable, children: [_jsx("thead", { children: _jsx("tr", { className: styles.trstickyhead, children: _jsx(HeadCols, {}) }) }), rows && rows.length > 0 && _jsx(TableBody, {})] }), rows && rows.length === 0 && fallback()] }) }));
+};

package/dist/elements/TableCellSelect.d.ts

@@ -0,0 +1,11 @@
+type SelectProps = {
+    rowIndex: number;
+    checked?: boolean;
+};
+type Props = {
+    rowIndex: number;
+    checked?: boolean;
+    selectRow: (args: SelectProps, shift: boolean) => void;
+};
+declare const TableCellSelect: React.FC<Props>;
+export default TableCellSelect;

package/dist/elements/TableCellSelect.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import TableChecklistItem from "./TableChecklistItem";
+const TableCellSelect = ({ rowIndex, checked, selectRow }) => {
+    const checkClick = (event) => {
+        const shift = event.shiftKey;
+        selectRow({ rowIndex, checked: !checked }, shift);
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { onClick: (e) => { e.stopPropagation(); checkClick(e); }, children: _jsx(TableChecklistItem, { checked: checked !== null && checked !== void 0 ? checked : false }) }) }));
+};
+export default TableCellSelect;

package/dist/elements/TableCellSelectHeadCol.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    checkAll: boolean;
+    checkHead: (args: boolean) => void;
+};
+declare const TableCellSelectHeadCol: React.FC<Props>;
+export default TableCellSelectHeadCol;

package/dist/elements/TableCellSelectHeadCol.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ChecklistItemSquare from "./TableChecklistItem";
+const TableCellSelectHeadCol = ({ checkHead, checkAll }) => {
+    return (_jsx("div", { onClick: (event) => {
+            event.stopPropagation();
+            if (checkAll !== undefined)
+                checkHead(checkAll);
+        }, children: _jsx(ChecklistItemSquare, { checked: checkAll }) }));
+};
+export default TableCellSelectHeadCol;

package/dist/elements/TableChecklistItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    checked: boolean;
+};
+declare const TableChecklistItem: React.FC<Props>;
+export default TableChecklistItem;

package/dist/elements/TableChecklistItem.js

@@ -0,0 +1,25 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
+import PaginationRipple from './PaginationRipple';
+import styles from '../style/table.module.css';
+const TableChecklistItem = ({ checked }) => {
+    const buttonRef = useRef(null);
+    const handleRipple = PaginationRipple();
+    const toggleCheck = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        handleRipple(event, buttonRef);
+    });
+    const CheckBoxItemSquare = ({ selected }) => {
+        return (_jsx(_Fragment, { children: _jsxs("svg", { width: "60", height: "60", version: "1.1", viewBox: "0 -960 2400 2400", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { className: styles.cbcircle, d: "m1200-692.58c-767.96 0-932.58 164.63-932.58 932.58 0 767.98 164.63 932.58 932.58 932.58 767.98 0 932.58-164.63 932.58-932.58 0-767.96-164.63-932.58-932.58-932.58z", fill: "white" }), selected && _jsx("path", { className: styles.cbpath, d: "m1566.4-147.66c-33.43-0.026-66.888 12.734-92.524 38.331l-421.88 421.25-125.8-126.04c-51.193-51.272-133.7-51.348-184.97-0.1555-51.272 51.193-51.348 133.7-0.15551 184.97l218.09 218.48c38.437 38.497 94.554 48.106 141.82 28.846 15.829-6.3918 30.738-15.985 43.618-28.846l514.09-513.39c51.272-51.193 51.348-133.7 0.1554-184.97-25.596-25.636-59.014-38.46-92.446-38.486z", fill: "#666" })] }) }));
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { ref: buttonRef, className: styles.checkboxtable, onClick: (e) => toggleCheck(e), children: _jsx(CheckBoxItemSquare, { selected: checked }) }) }));
+};
+export default TableChecklistItem;

package/dist/style/table.module.css

@@ -0,0 +1,494 @@
+/* --------------------------
+General Settings
+-------------------------- */
+html,
+body,
+input,
+textarea {
+    height: 100%;
+    font-family: Arial, sans-serif;
+    font-family: Inter, sans-serif;
+    font-style: 400;
+    font-optical-sizing: auto;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizelegibility;
+    letter-spacing: 0.072px;
+    overflow: hidden;
+    color: #222;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+html,
+body {
+    touch-action: none;
+    overscroll-behavior: none;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    user-select: none;
+}
+
+/* --------------------------
+TableView
+-------------------------- */
+.tableouterwrapper {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    --svg-w-h: 30px;
+}
+
+.tablefooter {
+    display: flex;
+    width: 100%;
+    background-color: var(--ext-table-footer-bck-clr, darkgoldenrod);
+    height: var(--ext-table-footer-height, 40px);
+    position: absolute;
+    bottom: 0;
+    width: -webkit-fill-available;
+    display: grid;
+    align-items: center;
+    padding: 0 10px;
+    grid-template-columns: 1fr auto;
+}
+
+/* --------------------------
+Table
+-------------------------- */
+.tablebody{
+    background-color: var(--ext-table-body-bck-clr, ghostwhite);
+}
+
+.tablebody tr {
+    width: 100%;
+    transition: background-color 0.2s;
+    cursor: pointer;
+}
+
+.tablebody tr:nth-child(even) {
+    background-color: var(--ext-table-body-bck-clr-even, white);
+}
+
+.tablebody tr:hover {
+    background-color: #e0e7ff;
+}
+
+.tablewrapper {
+    font-family: sans-serif;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--ext-new-table-wrapper-bck-clr, transparent);
+    -webkit-user-select: none;
+    user-select: none;
+    height: calc(100% - var(--ext-table-footer-height, 40px) - var(--ext-table-actionbar-height, 50px));
+    overflow-y: auto;
+}
+
+table.exttable th,
+table.exttable td {
+    text-align: left;
+}
+
+table.exttable td {
+    padding: var(--ext-table-td-padding, 5px);
+    border: var(--ext-table-cell-border, 1px dashed lightgrey);
+    border-top: none;
+}
+
+table.exttable thead {
+    background-color: var(--ext-table-body-bck-clr, white);
+    font-weight: bold;
+    height: var(--ext-table-header-height, 40px);
+}
+
+table.exttable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+.trstickyhead {
+    position: sticky;
+    top: 0;
+    z-index: 1001;
+    box-shadow: 0 0 30px #523f690d;
+    background-color: var(--ext-table-header-bkc-clr, darkgoldenrod);
+}
+
+.thcheckhead {
+    width: var(--custom-width) !important;
+    padding: var(--table-th-padding, 5px);
+}
+
+/* --------------------------
+   Table scrollbar
+--------------------------- */
+._tbl {
+    scrollbar-width: thin;
+    scrollbar-color: var(--ext-table-body-scrollbar-clr, lightslategray) var(--ext-table-body-bck-clr, white);
+}
+
+._tbl::-webkit-scrollbar {
+    width: 6px;
+    background-color: var(--ext-table-body-bck-clr);
+    transition: width 0.2s ease;
+}
+
+._tbl::-webkit-scrollbar-thumb {
+    background-color: white;
+    border-radius: 12px;
+    transition: background-color 0.2s ease;
+}
+
+._tbl:hover::-webkit-scrollbar-thumb {
+    background-color: #555;
+}
+
+._tbl:hover::-webkit-scrollbar {
+    width: 6px;
+}
+
+/* --------------------------
+Searchbar & Input
+-------------------------- */
+input.headsearch:focus {
+  outline: none;
+  box-shadow: none;
+  border-color: inherit;
+}
+
+input.headsearch {
+  color: var(--ext-tab-input-clr, white);
+}
+
+input.headsearch::placeholder {
+  color: var(--ext-tab-input-clr, white);
+  opacity: 1;
+}
+
+input.headsearch {
+  color: var(--ext-tab-input-clr, white);
+  opacity: 1;
+}
+
+svg.removesearchsvg{
+  fill: var(--ext-tab-input-clr, white);
+  cursor: pointer;
+  --svg-w-h: 20px;
+}
+
+.sortsvg{
+    fill: var(--ext-tab-sort-svg-clr, white);
+    --svg-w-h: 20px
+}
+
+.searchwrapper{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    border: 1px solid transparent;
+    padding-right: 5px;
+    background: transparent;
+    border-radius: var(--ext-search-wrapper-padding, 4px);
+    height: var(--ext-search-wrapper-height, 25px);
+}
+
+.searchwrapper:hover{
+    background: rgba(0,0,0,0.2);
+}
+
+.focused {
+    border: var(--ext-search-wrapper-focused-border, 1px dashed white);
+    color: white;
+}
+
+svg {
+    width: var(--svg-w-h);
+    height: var(--svg-w-h);
+    display: flex;
+}
+
+.actionbar{
+    background-color: #9ca3af;
+    height: var(--ext-table-actionbar-height, 50px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.exttablediv {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    color: var(--ext-table-cell-clr, lightslategrey);
+}
+
+input.headsearch {
+    border: none;
+    border-radius: 4px;
+    width: 98%;
+    padding: 1px 6px 3px 6px;
+    box-sizing: border-box;
+    background-color: transparent;
+}
+
+input.headsearch:hover {
+    border: none;
+    cursor: pointer;
+}
+
+input.headsearch:focus {
+    border: none;
+}
+
+.headcolcell{
+    display: flex;
+    gap: var(--ext-table-head-col-cell-gap, 3px);
+    align-items: center;
+    justify-content: center;
+}
+
+.headcolcellmain{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.deftabletr > td, .trstickyhead > th {
+    padding: 0;
+    text-align: left;
+    color: #374151;
+    box-sizing: border-box;
+    font-size: 80%;
+    padding: 5px;
+    width: var(--custom-width) !important;
+    min-width: 30px;
+}
+
+.deftabletr > td:first-child{
+    border-left: none
+}
+
+.deftabletr > td.end, .deftabletr > th.end {
+    width: 10px;
+    max-width: 15px;
+    border-right: none;
+}
+
+.ext-new-table-header th {
+    padding: 0 5px 0 0;
+    position: relative;
+}
+
+.ext-new-table-header th.th-check-head {
+    padding: 0 0 0 5px;
+}
+
+.ext-new-resize-header-main {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #111827;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+}
+
+.headsearchwrapper {
+    position: relative;
+}
+
+.sort-col {
+    display: flex;
+}
+
+.headsearchlable {
+    position: fixed;
+    margin-left: 6px;
+    margin-top: 0;
+    font-size: var(--ext-table-header-font-size, 50%);
+    background-color: var(--ext-table-header-bkc-clr, darkgoldenrod);
+    color: var(--ext-table-header-clr, darkslategrey);
+    border-radius: 4px;
+    padding: 2px 5px;
+    opacity: 0;
+    transition: opacity 0.3s ease, margin-top 0.3s ease;
+}
+
+.show {
+    opacity: 1;
+    margin-top: -5px;
+    z-index: 999;
+}
+
+/* --------------------------
+Resizable column wrapper 
+-------------------------- */
+
+.thheaddef {
+    position: relative;
+    padding: 0;
+}
+
+.ext-new-resize-header {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0;
+}
+
+.ext-new-resize-handle {
+    width: 5px;
+    cursor: col-resize;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 5;
+}
+
+/* --------------------------
+   Resize handle hover effect
+--------------------------- */
+
+.ext-new-resize-handle {
+    transition: background-color 0.2s ease;
+}
+
+.ext-new-resize-handle:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.fallbackwrapper {
+    height: calc(100% - var(--ext-table-footer-height, 40px));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--fallback-wrapper-bck-clr, wheat);
+}
+
+.checkboxtable {
+    --btn-bck-clr: transparent;
+    display: flex;
+    justify-content: center;
+    width: fit-content;
+    --btn-padding: 2px;
+    background-color: var(--btn-bck-clr);
+    --btn-border-radius: 50px;
+    --ripple-box-shadow: none;
+    user-select: none;
+    --ripple-effect-bck: rgb(0 0 0 / 15%);
+    --svg-w-h: 20px;
+}
+
+.cbcircle {
+    fill: var(--ext-table-cb-corpus-fill, red)
+}
+
+.cbpath {
+    fill: var(--ext-table-cb-path-fill, white)
+}
+
+/* --------------------------
+PAGINATION 
+-------------------------- */
+.paginationwrapper {
+    display: flex;
+    gap: 5px;
+    width: 100%;
+    color: gray;
+    font-size: 85%;
+}
+
+.paginationend {
+    color: var(--ext-table-pag-clr, lightslategrey);
+    font-size: 80%;
+    font-weight: var(--ext-table-pag-font-weight, 400);
+    white-space: nowrap;
+}
+
+/* --------------------------
+RIPPLE 
+-------------------------- */
+.paginationbutton {
+    font-size: 90%;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    height: var(--ext-table-pag-h, 30px);
+    min-width: var(--ext-table-pag-w, 30px);
+    color: var(--ext-table-pag-btn-clr, darkblue);
+	line-height: var(--ext-table-btn-line-height, 1.5);
+	font-weight: var(--ext-table-btn-font-weight, 500);
+	background-color: var(--ext-table-pag-btn-bck-clr, white);
+	border-radius: var(--ext-table-pag-btn-border-radius, 12px);
+	box-shadow: var(--ext-table-pag-ripple-box-shadow, rgb(100 100 111 / 20%) 0px 7px 29px 0px);
+	position: relative;
+	overflow: hidden;
+	user-select: none;
+	width: fit-content;
+}
+
+.pagbtnsvg{
+    width: var(--pag-btn-svg-w, 15px);
+    height: var(--pag-btn-svg-h, 15px);
+    fill: var(--ext-table-pag-btn-clr)
+}
+
+.pagnumber {
+    width: var(--ext-table-pag-w);
+}
+
+.paginationbuttonhide{
+    opacity: .3;
+}
+
+.paginationbuttonactive {
+    background-color: var(--ext-table-pag-btn-bck-clr-active, darkblue);
+    color: var(--ext-table-pag-btn-clr-active, yellow);
+    font-weight: 500;
+}
+
+.pagripple {
+	background: var(--ripple-effect-bck, rgb(0 0 0 / 15%));
+	position: absolute;
+	border-radius: var(--ext-table-pag-btn-border-radius, 12px);
+	transform: scale(0);
+	animation: ripple-animation 0.6s linear;
+	pointer-events: none;
+	transform-origin: center center;
+	will-change: transform, opacity;
+}
+
+/* Only devices that can hover (desktop/laptop) */
+@media (hover: hover) and (pointer: fine) {
+	._ripple {
+		cursor: pointer;
+	}
+}
+
+@keyframes ripple-animation {
+	to {
+		transform: scale(4);
+		opacity: 0;
+	}
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "ehscan-react-table",
+  "version": "0.0.1",
+  "description": "components",
+  "main": "dist/Components.js",
+  "types": "dist/Components.d.ts",
+  "scripts": {
+    "build": "tsc && npm run copy-css",
+    "copy-css": "rsync -a src/style/ dist/style/",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "state",
+    "global-state",
+    "store",
+    "minimal"
+  ],
+  "author": "beeplaced",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/glob": "8",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "glob": "8",
+    "minimatch": "5",
+    "typescript": "^5.6.3"
+  }
+}