simple-table-core 0.1.1 → 0.1.3

package/README.md

@@ -1,12 +1,80 @@
-# Simple React Table Project
+# Simple Table
 
-This project is a simple React table application created for fun
+Simple Table is a React grid package designed to provide a flexible and easy-to-use table component for your React applications. Visit our website at [www.simple-table.com](http://www.simple-table.com) for more information and documentation.
 
-## Available Scripts
+![Simple Table Example](assets/table-example.png)
 
-In the project directory, you can run:
+## Props
 
-### `npm start`
+The Simple Table component accepts the following props:
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+- **defaultHeaders**: An array of `HeaderObject` defining the table headers. Each `HeaderObject` includes:
+
+  - **label**: A string representing the display name of the column header.
+  - **accessor**: A string used to access the corresponding data in each row.
+  - **width**: A number specifying the width of the column.
+  - **cellRenderer**: An optional function that takes a row object and returns a `ReactNode` for custom cell rendering.
+
+- **enableColumnResizing**: A boolean to enable or disable column resizing. Default is `true`.
+- **height**: The height of the table.
+- **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`.
+- **shouldPaginate**: A boolean to enable or disable pagination. Default is `true`.
+
+## 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.
+
+### CSS Variables
+
+You can override the following CSS variables to customize the appearance of the table:
+
+- `--st-border-radius`
+- `--st-table-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-table-wrapper`
+- `.st-table`
+- `.st-table-header-cell`
+- `.st-table-cell`
+- `.st-table-header-label`
+- `.st-table-header-resize-handle`
+- `.st-table-row-separator`
+- `.st-table-cell-odd-row`
+- `.st-dragging`
+- `.st-table-cell-selected`
+- `.st-table-cell-selected-first`
+- `.border-top-blue`
+- `.border-bottom-blue`
+- `.border-left-blue`
+- `.border-right-blue`
+- `.border-top-white`
+- `.st-footer`
+- `.st-next-prev-btn`
+- `.st-page-btn`
+- `.st-page-btn.active`
+
+For more detailed usage and examples, please refer to our [documentation](http://www.simple-table.com/docs).
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-table-core",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

package/src/App.tsx

@@ -1,18 +1,35 @@
 import SimpleTable from "./components/SimpleTable/SimpleTable";
-import { sampleData } from "./consts/SampleData";
+import { inventoryData } from "./consts/SampleData";
+import HeaderObject from "./types/HeaderObject";
 
-const HEADERS = [
-  { label: "id", accessor: "id" },
-  { label: "name", accessor: "name" },
-  { label: "age", accessor: "age" },
-  { label: "email", accessor: "email" },
-  { label: "address", accessor: "address" },
+const HEADERS: HeaderObject[] = [
+  { label: "Product ID", accessor: "id", width: 150 },
+  { label: "Product Name", accessor: "productName", width: 200 },
+  { label: "Category", accessor: "category", width: 150 },
+  { label: "Quantity", accessor: "quantity", width: 100 },
+  { label: "Price", accessor: "price", width: 100 },
+  { label: "Supplier", accessor: "supplier", width: 150 },
+  { label: "Location", accessor: "location", width: 150 },
+  { label: "Reorder Level", accessor: "reorderLevel", width: 150 },
+  { label: "SKU", accessor: "sku", width: 150 },
+  { label: "Description", accessor: "description", width: 250 },
+  { label: "Weight", accessor: "weight", width: 100 },
+  { label: "Dimensions", accessor: "dimensions", width: 150 },
+  { label: "Barcode", accessor: "barcode", width: 150 },
+  { label: "Expiration Date", accessor: "expirationDate", width: 150 },
+  { label: "Manufacturer", accessor: "manufacturer", width: 150 },
 ];
 
 const App = () => {
   return (
     <div className="app" style={{ padding: "2rem" }}>
-      <SimpleTable headers={HEADERS} rows={sampleData} />
+      <SimpleTable
+        defaultHeaders={HEADERS}
+        height="auto"
+        // height="calc(100dvh - 4rem)"
+        rows={inventoryData}
+        // shouldPaginate={false}
+      />
     </div>
   );
 };

package/src/components/Animate.tsx

@@ -3,11 +3,16 @@ import usePrevious from "../hooks/usePrevious";
 import calculateBoundingBoxes from "../helpers/calculateBoundingBoxes";
 
 interface AnimateProps {
+  allowHorizontalAnimate?: boolean;
   children: any;
-  animateRow?: boolean;
+  pause?: boolean;
 }
 
-const Animate = ({ children, animateRow }: AnimateProps) => {
+const Animate = ({
+  allowHorizontalAnimate = true,
+  children,
+  pause,
+}: AnimateProps) => {
   const [boundingBox, setBoundingBox] = useState<any>({});
   const [prevBoundingBox, setPrevBoundingBox] = useState<any>({});
   const prevChildren = usePrevious(children);
@@ -23,6 +28,7 @@ const Animate = ({ children, animateRow }: AnimateProps) => {
   }, [prevChildren]);
 
   useEffect(() => {
+    if (pause) return;
     const hasPrevBoundingBox = Object.keys(prevBoundingBox).length;
 
     if (hasPrevBoundingBox) {
@@ -30,16 +36,19 @@ const Animate = ({ children, animateRow }: AnimateProps) => {
         const domNode = child.ref.current;
         const firstBox = prevBoundingBox[child.key];
         const lastBox = boundingBox[child.key];
-        const changeInPosition = animateRow
+
+        const changeInX = firstBox.left - lastBox.left;
+        const changeInY = !allowHorizontalAnimate
           ? firstBox.top - lastBox.top
-          : firstBox.left - lastBox.left;
+          : 0;
+
+        const absoluteChangeInX = Math.abs(changeInX);
+        const absoluteChangeInY = Math.abs(changeInY);
 
-        if (changeInPosition) {
+        if (absoluteChangeInX > 10 || absoluteChangeInY > 10) {
           requestAnimationFrame(() => {
             // Before the DOM paints, invert child to old position
-            domNode.style.transform = animateRow
-              ? `translateY(${changeInPosition}px)`
-              : `translateX(${changeInPosition}px)`;
+            domNode.style.transform = `translate(${changeInX}px, ${changeInY}px)`;
             domNode.style.transition = "transform 0s";
 
             requestAnimationFrame(() => {
@@ -52,7 +61,7 @@ const Animate = ({ children, animateRow }: AnimateProps) => {
         }
       });
     }
-  }, [boundingBox, prevBoundingBox, children, animateRow]);
+  }, [boundingBox, prevBoundingBox, children, pause, allowHorizontalAnimate]);
 
   return children;
 };

package/src/components/SimpleTable/SimpleTable.tsx

@@ -1,24 +1,65 @@
-import { useState, createRef, useRef, useReducer } from "react";
+import {
+  useState,
+  useRef,
+  useEffect,
+  useReducer,
+  ReactNode,
+  useMemo,
+} from "react";
 import useSelection from "../../hooks/useSelection";
 import TableHeader from "./TableHeader";
 import { onSort } from "../../utils/sortUtils";
-import Animate from "../Animate";
-import TableRow from "./TableRow";
+import TableBody from "./TableBody";
 import HeaderObject from "../../types/HeaderObject";
+import TableFooter from "./TableFooter";
+import AngleLeftIcon from "../../icons/AngleLeftIcon";
+import AngleRightIcon from "../../icons/AngleRightIcon";
 
 interface SpreadsheetProps {
-  headers: HeaderObject[];
-  rows: { [key: string]: any }[];
+  defaultHeaders: HeaderObject[];
+  enableColumnResizing?: boolean;
+  height?: string;
+  hideFooter?: boolean;
+  nextIcon?: ReactNode;
+  prevIcon?: ReactNode;
+  rows: { [key: string]: string | number | boolean | undefined | null }[];
+  rowsPerPage?: number;
+  shouldPaginate?: boolean;
 }
 
-const SimpleTable = ({ headers, rows }: SpreadsheetProps) => {
-  const headersRef = useRef(headers);
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+const SimpleTable = ({
+  defaultHeaders,
+  enableColumnResizing = true,
+  height,
+  hideFooter = false,
+  nextIcon = <AngleRightIcon />,
+  prevIcon = <AngleLeftIcon />,
+  rows,
+  rowsPerPage = 10,
+  shouldPaginate = true,
+}: SpreadsheetProps) => {
+  const [isWidthDragging, setIsWidthDragging] = useState(false);
+  const headersRef = useRef(defaultHeaders);
   const [sortedRows, setSortedRows] = useState(rows);
   const [sortConfig, setSortConfig] = useState<{
     key: HeaderObject;
     direction: string;
   } | null>(null);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const tableRef = useRef<HTMLDivElement>(null);
+
+  const shouldDisplayLastColumnCell = useMemo(() => {
+    if (2 == 2) return false;
+    if (!tableRef.current) return false;
+    const totalColumnWidth = headersRef.current.reduce(
+      (acc, header) => acc + header.width,
+      0
+    );
+    return totalColumnWidth < tableRef.current.clientWidth;
+  }, [headersRef.current]);
 
   const {
     handleMouseDown,
@@ -27,11 +68,12 @@ const SimpleTable = ({ headers, rows }: SpreadsheetProps) => {
     isSelected,
     getBorderClass,
     isTopLeftCell,
-  } = useSelection(sortedRows, headers);
+    setSelectedCells,
+  } = useSelection(sortedRows, headersRef.current);
 
   const handleSort = (columnIndex: number) => {
     const { sortedData, newSortConfig } = onSort(
-      headers,
+      headersRef.current,
       sortedRows,
       sortConfig,
       columnIndex
@@ -39,42 +81,83 @@ const SimpleTable = ({ headers, rows }: SpreadsheetProps) => {
     setSortedRows(sortedData);
     setSortConfig(newSortConfig);
   };
-  const onDragEnd = (newHeaders: HeaderObject[]) => {
+
+  const onTableHeaderDragEnd = (newHeaders: HeaderObject[]) => {
     headersRef.current = newHeaders;
     forceUpdate();
   };
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest(".st-table-cell")) {
+        setSelectedCells([]);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [setSelectedCells]);
+
+  const currentRows = shouldPaginate
+    ? sortedRows.slice(
+        (currentPage - 1) * rowsPerPage,
+        currentPage * rowsPerPage
+      )
+    : sortedRows;
+
   return (
-    <div className="table-wrapper">
-      <table
-        className="simple-table"
+    <div
+      ref={tableRef}
+      className="st-table-wrapper"
+      style={height ? { height } : {}}
+    >
+      <div
+        className="st-table"
         onMouseUp={handleMouseUp}
         onMouseLeave={handleMouseUp}
+        style={{
+          gridTemplateColumns: `${headersRef.current
+            ?.map((header) => `${header.width}px`)
+            .join(" ")} 1fr`,
+        }}
       >
         <TableHeader
+          enableColumnResizing={enableColumnResizing}
+          forceUpdate={forceUpdate}
           headersRef={headersRef}
+          isWidthDragging={isWidthDragging}
           onSort={handleSort}
-          onDragEnd={onDragEnd}
+          onTableHeaderDragEnd={onTableHeaderDragEnd}
+          setIsWidthDragging={setIsWidthDragging}
+          shouldDisplayLastColumnCell={shouldDisplayLastColumnCell}
+        />
+        <TableBody
+          getBorderClass={getBorderClass}
+          handleMouseDown={handleMouseDown}
+          handleMouseOver={handleMouseOver}
+          headers={headersRef.current}
+          isSelected={isSelected}
+          isTopLeftCell={isTopLeftCell}
+          isWidthDragging={isWidthDragging}
+          shouldDisplayLastColumnCell={shouldDisplayLastColumnCell}
+          shouldPaginate={shouldPaginate}
+          sortedRows={currentRows}
+        />
+      </div>
+      {shouldPaginate && (
+        <TableFooter
+          currentPage={currentPage}
+          hideFooter={hideFooter}
+          onPageChange={setCurrentPage}
+          rowsPerPage={rowsPerPage}
+          totalRows={sortedRows.length}
+          nextIcon={nextIcon}
+          prevIcon={prevIcon}
         />
-        <tbody>
-          <Animate animateRow={true}>
-            {sortedRows.map((row, rowIndex) => (
-              <TableRow
-                getBorderClass={getBorderClass}
-                handleMouseDown={handleMouseDown}
-                handleMouseOver={handleMouseOver}
-                headers={headersRef.current}
-                isSelected={isSelected}
-                isTopLeftCell={isTopLeftCell}
-                key={row.id}
-                ref={createRef()}
-                row={row}
-                rowIndex={rowIndex}
-              />
-            ))}
-          </Animate>
-        </tbody>
-      </table>
+      )}
     </div>
   );
 };

package/src/components/SimpleTable/TableBody.tsx

@@ -0,0 +1,79 @@
+import { createRef, Fragment } from "react";
+import TableCell from "./TableCell";
+import Animate from "../Animate";
+import HeaderObject from "../../types/HeaderObject";
+import TableLastColumnCell from "./TableLastColumnCell";
+import TableRowSeparator from "./TableRowSeparator";
+
+interface TableBodyProps {
+  getBorderClass: (rowIndex: number, columnIndex: number) => string;
+  handleMouseDown: (rowIndex: number, columnIndex: number) => void;
+  handleMouseOver: (rowIndex: number, columnIndex: number) => void;
+  headers: HeaderObject[];
+  isSelected: (rowIndex: number, columnIndex: number) => boolean;
+  isTopLeftCell: (rowIndex: number, columnIndex: number) => boolean;
+  isWidthDragging: boolean;
+  shouldDisplayLastColumnCell: boolean;
+  shouldPaginate: boolean;
+  sortedRows: { [key: string]: any }[];
+}
+
+const TableBody = ({
+  getBorderClass,
+  handleMouseDown,
+  handleMouseOver,
+  headers,
+  isSelected,
+  isTopLeftCell,
+  isWidthDragging,
+  shouldDisplayLastColumnCell,
+  shouldPaginate,
+  sortedRows,
+}: TableBodyProps & { shouldDisplayLastColumnCell: boolean }) => {
+  return (
+    <>
+      {sortedRows.map((row, rowIndex) => {
+        return (
+          <Fragment key={row.id}>
+            <Animate
+              allowHorizontalAnimate={shouldPaginate}
+              pause={isWidthDragging}
+            >
+              {headers.map((header, columnIndex) => {
+                let content = row[header.accessor];
+
+                if (header.cellRenderer) {
+                  content = header.cellRenderer(row);
+                }
+
+                return (
+                  <TableCell
+                    borderClass={getBorderClass(rowIndex, columnIndex)}
+                    colIndex={columnIndex}
+                    content={content}
+                    isSelected={isSelected(rowIndex, columnIndex)}
+                    isTopLeftCell={isTopLeftCell(rowIndex, columnIndex)}
+                    key={header.accessor}
+                    onMouseDown={() => handleMouseDown(rowIndex, columnIndex)}
+                    onMouseOver={() => handleMouseOver(rowIndex, columnIndex)}
+                    ref={createRef()}
+                    rowIndex={rowIndex}
+                    isLastRow={rowIndex === sortedRows.length - 1}
+                  />
+                );
+              })}
+              <TableLastColumnCell
+                isLastRow={rowIndex === sortedRows.length - 1}
+                ref={createRef()}
+                visible={shouldDisplayLastColumnCell}
+              />
+            </Animate>
+            {rowIndex !== sortedRows.length - 1 && <TableRowSeparator />}
+          </Fragment>
+        );
+      })}
+    </>
+  );
+};
+
+export default TableBody;

package/src/components/SimpleTable/TableCell.tsx

@@ -9,6 +9,7 @@ interface TableCellProps {
   borderClass: string;
   onMouseDown: (rowIndex: number, colIndex: number) => void;
   onMouseOver: (rowIndex: number, colIndex: number) => void;
+  isLastRow: boolean;
 }
 
 const TableCell = forwardRef(
@@ -22,27 +23,27 @@ const TableCell = forwardRef(
       borderClass,
       onMouseDown,
       onMouseOver,
+      isLastRow,
     }: TableCellProps,
     ref: LegacyRef<HTMLTableCellElement>
   ) => {
+    const isOddRow = rowIndex % 2 === 0;
     return (
-      <td
+      <div
         onMouseDown={() => onMouseDown(rowIndex, colIndex)}
         onMouseOver={() => onMouseOver(rowIndex, colIndex)}
         ref={ref}
+        className={`st-table-cell ${
+          isSelected
+            ? isTopLeftCell
+              ? `st-table-cell-selected-first-cell ${borderClass}`
+              : `st-table-cell-selected ${borderClass}`
+            : ""
+        } ${isLastRow ? "st-table-cell-last-row" : ""}
+        ${isOddRow ? "st-table-cell-odd-row" : ""}`}
       >
-        <div
-          className={`table-cell ${
-            isSelected
-              ? isTopLeftCell
-                ? `selected-first-cell ${borderClass}`
-                : `selected ${borderClass}`
-              : ""
-          }`}
-        >
-          {content}
-        </div>
-      </td>
+        {content}
+      </div>
     );
   }
 );

package/src/components/SimpleTable/TableFooter.tsx

@@ -0,0 +1,63 @@
+import React, { ReactNode } from "react";
+import AngleLeftIcon from "../../icons/AngleLeftIcon";
+import AngleRightIcon from "../../icons/AngleRightIcon";
+
+interface TableFooterProps {
+  currentPage: number;
+  hideFooter?: boolean;
+  nextIcon?: ReactNode;
+  onPageChange: (page: number) => void;
+  prevIcon?: ReactNode;
+  rowsPerPage: number;
+  totalRows: number;
+}
+
+const TableFooter = ({
+  currentPage,
+  hideFooter,
+  nextIcon,
+  onPageChange,
+  prevIcon,
+  rowsPerPage,
+  totalRows,
+}: TableFooterProps) => {
+  const totalPages = Math.ceil(totalRows / rowsPerPage);
+
+  const handlePageChange = (page: number) => {
+    if (page >= 1 && page <= totalPages) {
+      onPageChange(page);
+    }
+  };
+
+  if (hideFooter) return null;
+
+  return (
+    <div className="st-footer">
+      <button
+        className="st-next-prev-btn"
+        onClick={() => handlePageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+      >
+        {prevIcon}
+      </button>
+      <button
+        className="st-next-prev-btn"
+        onClick={() => handlePageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+      >
+        {nextIcon}
+      </button>
+      {Array.from({ length: totalPages }, (_, index) => (
+        <button
+          key={index}
+          onClick={() => handlePageChange(index + 1)}
+          className={`st-page-btn ${currentPage === index + 1 ? "active" : ""}`}
+        >
+          {index + 1}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default TableFooter;

package/src/components/SimpleTable/TableHeader.tsx

@@ -1,37 +1,59 @@
-import { createRef, useRef } from "react";
+import { createRef, Dispatch, SetStateAction, useRef } from "react";
 import Animate from "../Animate";
 import TableHeaderCell from "./TableHeaderCell";
 import HeaderObject from "../../types/HeaderObject";
+import TableLastColumnCell from "./TableLastColumnCell";
+import TableRowSeparator from "./TableRowSeparator";
 
 interface TableHeaderProps {
+  enableColumnResizing: boolean;
+  forceUpdate: () => void;
   headersRef: React.RefObject<HeaderObject[]>;
+  isWidthDragging: boolean;
   onSort: (columnIndex: number) => void;
-  onDragEnd: (newHeaders: HeaderObject[]) => void;
+  onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
+  setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
+  shouldDisplayLastColumnCell: boolean;
 }
 
-const TableHeader = ({ headersRef, onSort, onDragEnd }: TableHeaderProps) => {
+const TableHeader = ({
+  enableColumnResizing,
+  forceUpdate,
+  headersRef,
+  isWidthDragging,
+  onSort,
+  onTableHeaderDragEnd,
+  setIsWidthDragging,
+  shouldDisplayLastColumnCell,
+}: TableHeaderProps) => {
   const draggedHeaderRef = useRef<HeaderObject | null>(null);
   const hoveredHeaderRef = useRef<HeaderObject | null>(null);
 
   return (
-    <thead className="table-header">
-      <tr>
-        <Animate>
-          {headersRef.current?.map((header, index) => (
-            <TableHeaderCell
-              draggedHeaderRef={draggedHeaderRef}
-              headersRef={headersRef}
-              hoveredHeaderRef={hoveredHeaderRef}
-              index={index}
-              key={header.accessor}
-              onDragEnd={onDragEnd}
-              onSort={onSort}
-              ref={createRef()}
-            />
-          ))}
-        </Animate>
-      </tr>
-    </thead>
+    <>
+      <Animate pause={isWidthDragging}>
+        {headersRef.current?.map((header, index) => (
+          <TableHeaderCell
+            draggedHeaderRef={draggedHeaderRef}
+            enableColumnResizing={enableColumnResizing}
+            forceUpdate={forceUpdate}
+            headersRef={headersRef}
+            hoveredHeaderRef={hoveredHeaderRef}
+            index={index}
+            key={header.accessor}
+            onSort={onSort}
+            onTableHeaderDragEnd={onTableHeaderDragEnd}
+            ref={createRef()}
+            setIsWidthDragging={setIsWidthDragging}
+          />
+        ))}
+        <TableLastColumnCell
+          ref={createRef()}
+          visible={shouldDisplayLastColumnCell}
+        />
+      </Animate>
+      <TableRowSeparator />
+    </>
   );
 };