simple-table-core 0.1.1 → 0.1.2

package/notes.txt

@@ -0,0 +1,3 @@
+- make cta buttons in header and footer and hero
+- make typeform shorter, only collect email, request access
+- Request access goes to email buttons

package/package.json

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

package/src/App.tsx

@@ -1,18 +1,19 @@
 import SimpleTable from "./components/SimpleTable/SimpleTable";
 import { sampleData } 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: "id", accessor: "id", width: 100 },
+  { label: "name", accessor: "name", width: 100 },
+  { label: "age", accessor: "age", width: 100 },
+  { label: "email", accessor: "email", width: 100 },
+  { label: "address", accessor: "address", width: 100 },
 ];
 
 const App = () => {
   return (
     <div className="app" style={{ padding: "2rem" }}>
-      <SimpleTable headers={HEADERS} rows={sampleData} />
+      <SimpleTable defaultHeaders={HEADERS} rows={sampleData} />
     </div>
   );
 };

package/src/components/Animate.tsx

@@ -4,10 +4,10 @@ import calculateBoundingBoxes from "../helpers/calculateBoundingBoxes";
 
 interface AnimateProps {
   children: any;
-  animateRow?: boolean;
+  pause?: boolean;
 }
 
-const Animate = ({ children, animateRow }: AnimateProps) => {
+const Animate = ({ children, pause }: AnimateProps) => {
   const [boundingBox, setBoundingBox] = useState<any>({});
   const [prevBoundingBox, setPrevBoundingBox] = useState<any>({});
   const prevChildren = usePrevious(children);
@@ -23,6 +23,7 @@ const Animate = ({ children, animateRow }: AnimateProps) => {
   }, [prevChildren]);
 
   useEffect(() => {
+    if (pause) return;
     const hasPrevBoundingBox = Object.keys(prevBoundingBox).length;
 
     if (hasPrevBoundingBox) {
@@ -30,16 +31,14 @@ const Animate = ({ children, animateRow }: AnimateProps) => {
         const domNode = child.ref.current;
         const firstBox = prevBoundingBox[child.key];
         const lastBox = boundingBox[child.key];
-        const changeInPosition = animateRow
-          ? firstBox.top - lastBox.top
-          : firstBox.left - lastBox.left;
 
-        if (changeInPosition) {
+        const changeInX = firstBox.left - lastBox.left;
+        const changeInY = firstBox.top - lastBox.top;
+
+        if (changeInX || changeInY) {
           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 +51,7 @@ const Animate = ({ children, animateRow }: AnimateProps) => {
         }
       });
     }
-  }, [boundingBox, prevBoundingBox, children, animateRow]);
+  }, [boundingBox, prevBoundingBox, children, pause]);
 
   return children;
 };

package/src/components/SimpleTable/SimpleTable.tsx

@@ -3,17 +3,18 @@ import useSelection from "../../hooks/useSelection";
 import TableHeader from "./TableHeader";
 import { onSort } from "../../utils/sortUtils";
 import Animate from "../Animate";
-import TableRow from "./TableRow";
+import TableRow from "./TableBody";
 import HeaderObject from "../../types/HeaderObject";
+import TableBody from "./TableBody";
 
 interface SpreadsheetProps {
-  headers: HeaderObject[];
+  defaultHeaders: HeaderObject[];
   rows: { [key: string]: any }[];
 }
 
-const SimpleTable = ({ headers, rows }: SpreadsheetProps) => {
-  const headersRef = useRef(headers);
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+const SimpleTable = ({ defaultHeaders, rows }: SpreadsheetProps) => {
+  const [isWidthDragging, setIsWidthDragging] = useState(false);
+  const [headers, setHeaders] = useState(defaultHeaders);
   const [sortedRows, setSortedRows] = useState(rows);
   const [sortConfig, setSortConfig] = useState<{
     key: HeaderObject;
@@ -39,42 +40,41 @@ const SimpleTable = ({ headers, rows }: SpreadsheetProps) => {
     setSortedRows(sortedData);
     setSortConfig(newSortConfig);
   };
-  const onDragEnd = (newHeaders: HeaderObject[]) => {
-    headersRef.current = newHeaders;
-    forceUpdate();
+  const onTableHeaderDragEnd = (newHeaders: HeaderObject[]) => {
+    setHeaders(newHeaders);
   };
 
   return (
-    <div className="table-wrapper">
-      <table
-        className="simple-table"
+    <div className="st-table-wrapper">
+      <div
+        className="st-table"
         onMouseUp={handleMouseUp}
         onMouseLeave={handleMouseUp}
+        style={{
+          gridTemplateColumns: headers
+            ?.map((header) => `${header.width}px`)
+            .join(" "),
+        }}
       >
         <TableHeader
-          headersRef={headersRef}
+          headers={headers}
           onSort={handleSort}
-          onDragEnd={onDragEnd}
+          onTableHeaderDragEnd={onTableHeaderDragEnd}
+          setHeaders={setHeaders}
+          setIsWidthDragging={setIsWidthDragging}
+          isWidthDragging={isWidthDragging}
         />
-        <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>
+        <TableBody
+          getBorderClass={getBorderClass}
+          handleMouseDown={handleMouseDown}
+          handleMouseOver={handleMouseOver}
+          headers={headers}
+          isSelected={isSelected}
+          isTopLeftCell={isTopLeftCell}
+          sortedRows={sortedRows}
+          isWidthDragging={isWidthDragging}
+        />
+      </div>
     </div>
   );
 };

package/src/components/SimpleTable/{TableRow.tsx → TableBody.tsx}

@@ -4,51 +4,48 @@ import Animate from "../Animate";
 import HeaderObject from "../../types/HeaderObject";
 
 interface TableRowProps {
-  rowIndex: number;
-  row: { [key: string]: any };
   headers: HeaderObject[];
   isSelected: (rowIndex: number, columnIndex: number) => boolean;
   isTopLeftCell: (rowIndex: number, columnIndex: number) => boolean;
   getBorderClass: (rowIndex: number, columnIndex: number) => string;
   handleMouseDown: (rowIndex: number, columnIndex: number) => void;
   handleMouseOver: (rowIndex: number, columnIndex: number) => void;
+  sortedRows: { [key: string]: any }[];
+  isWidthDragging: boolean;
 }
 
-const TableRow = forwardRef(
-  (
-    {
-      rowIndex,
-      row,
-      headers,
-      isSelected,
-      isTopLeftCell,
-      getBorderClass,
-      handleMouseDown,
-      handleMouseOver,
-    }: TableRowProps,
-    ref: LegacyRef<HTMLTableRowElement>
-  ) => {
-    return (
-      <tr key={row.id} ref={ref}>
-        <Animate>
+const TableRow = ({
+  headers,
+  isSelected,
+  isTopLeftCell,
+  getBorderClass,
+  handleMouseDown,
+  handleMouseOver,
+  sortedRows,
+  isWidthDragging,
+}: TableRowProps) => {
+  return (
+    <>
+      {sortedRows.map((row, rowIndex) => (
+        <Animate key={row.id} pause={isWidthDragging}>
           {headers.map((header, columnIndex) => (
             <TableCell
-              key={header.accessor}
-              rowIndex={rowIndex}
+              borderClass={getBorderClass(rowIndex, columnIndex)}
               colIndex={columnIndex}
               content={row[header.accessor]}
               isSelected={isSelected(rowIndex, columnIndex)}
               isTopLeftCell={isTopLeftCell(rowIndex, columnIndex)}
-              borderClass={getBorderClass(rowIndex, columnIndex)}
+              key={header.accessor}
               onMouseDown={() => handleMouseDown(rowIndex, columnIndex)}
               onMouseOver={() => handleMouseOver(rowIndex, columnIndex)}
               ref={createRef()}
+              rowIndex={rowIndex}
             />
           ))}
         </Animate>
-      </tr>
-    );
-  }
-);
+      ))}
+    </>
+  );
+};
 
 export default TableRow;

package/src/components/SimpleTable/TableCell.tsx

@@ -26,23 +26,23 @@ const TableCell = forwardRef(
     ref: LegacyRef<HTMLTableCellElement>
   ) => {
     return (
-      <td
+      <div
         onMouseDown={() => onMouseDown(rowIndex, colIndex)}
         onMouseOver={() => onMouseOver(rowIndex, colIndex)}
         ref={ref}
       >
         <div
-          className={`table-cell ${
+          className={`st-table-cell ${
             isSelected
               ? isTopLeftCell
-                ? `selected-first-cell ${borderClass}`
-                : `selected ${borderClass}`
+                ? `st-table-cell-selected-first-cell ${borderClass}`
+                : `st-table-cell-selected ${borderClass}`
               : ""
           }`}
         >
           {content}
         </div>
-      </td>
+      </div>
     );
   }
 );

package/src/components/SimpleTable/TableHeader.tsx

@@ -1,37 +1,45 @@
-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";
 
 interface TableHeaderProps {
-  headersRef: React.RefObject<HeaderObject[]>;
+  headers: HeaderObject[];
+  isWidthDragging: boolean;
   onSort: (columnIndex: number) => void;
-  onDragEnd: (newHeaders: HeaderObject[]) => void;
+  onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
+  setHeaders: Dispatch<SetStateAction<HeaderObject[]>>;
+  setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
 }
 
-const TableHeader = ({ headersRef, onSort, onDragEnd }: TableHeaderProps) => {
+const TableHeader: React.FC<TableHeaderProps> = ({
+  headers,
+  isWidthDragging,
+  onSort,
+  onTableHeaderDragEnd,
+  setHeaders,
+  setIsWidthDragging,
+}) => {
   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}>
+      {headers?.map((header, index) => (
+        <TableHeaderCell
+          draggedHeaderRef={draggedHeaderRef}
+          headers={headers}
+          hoveredHeaderRef={hoveredHeaderRef}
+          index={index}
+          key={header.accessor}
+          onSort={onSort}
+          onTableHeaderDragEnd={onTableHeaderDragEnd}
+          ref={createRef()}
+          setHeaders={setHeaders}
+          setIsWidthDragging={setIsWidthDragging}
+        />
+      ))}
+    </Animate>
   );
 };
 

package/src/components/SimpleTable/TableHeaderCell.tsx

@@ -1,46 +1,56 @@
-import { forwardRef, LegacyRef, useState, useRef } from "react";
+import {
+  forwardRef,
+  LegacyRef,
+  useState,
+  useRef,
+  useEffect,
+  SetStateAction,
+  Dispatch,
+} from "react";
 import useTableHeaderCell from "../../hooks/useTableHeaderCell";
 import { throttle } from "../../utils/performanceUtils";
 import HeaderObject from "../../types/HeaderObject";
 
 interface TableHeaderCellProps {
   draggedHeaderRef: React.MutableRefObject<HeaderObject | null>;
-  headersRef: React.RefObject<HeaderObject[]>;
+  headers: HeaderObject[];
   hoveredHeaderRef: React.MutableRefObject<HeaderObject | null>;
   index: number;
-  onDragEnd: (newHeaders: HeaderObject[]) => void;
   onSort: (columnIndex: number) => void;
+  onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
+  setHeaders: Dispatch<SetStateAction<HeaderObject[]>>;
+  setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
 }
 
-const TableHeaderCell = forwardRef(
+const TableHeaderCell = forwardRef<HTMLDivElement, TableHeaderCellProps>(
   (
     {
       draggedHeaderRef,
-      headersRef,
+      headers,
       hoveredHeaderRef,
       index,
-      onDragEnd,
       onSort,
-    }: TableHeaderCellProps,
-    ref: LegacyRef<HTMLTableCellElement>
+      onTableHeaderDragEnd,
+      setHeaders,
+      setIsWidthDragging,
+    },
+    ref
   ) => {
-    const [isDragging, setIsDragging] = useState(false);
-    const header = headersRef.current?.[index];
+    const header = headers[index];
+
     const { handleDragStart, handleDragOver, handleDragEnd } =
       useTableHeaderCell({
         draggedHeaderRef,
-        headersRef,
+        headers,
         hoveredHeaderRef,
-        onDragEnd,
+        onTableHeaderDragEnd,
       });
 
     const handleDragStartWrapper = (header: HeaderObject) => {
-      setIsDragging(true);
       handleDragStart(header);
     };
 
     const handleDragEndWrapper = () => {
-      setIsDragging(false);
       handleDragEnd();
     };
 
@@ -50,26 +60,60 @@ const TableHeaderCell = forwardRef(
         handleDragOver(header);
       }, 50) // Adjust the delay as needed
     ).current;
+
+    const handleResizeStart = (e: React.MouseEvent) => {
+      setIsWidthDragging(true);
+      e.preventDefault();
+      const startX = e.clientX;
+      const startWidth = header.width;
+
+      const throttledMouseMove = throttle((e: MouseEvent) => {
+        const newWidth = Math.max(startWidth + (e.clientX - startX), 10); // Ensure a minimum width
+        setHeaders((prevHeaders) => {
+          const updatedHeaders = [...prevHeaders];
+          updatedHeaders[index] = { ...updatedHeaders[index], width: newWidth };
+          return updatedHeaders;
+        });
+      }, 10); // Adjust the throttle delay as needed
+
+      const handleMouseUp = () => {
+        document.removeEventListener("mousemove", throttledMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        setIsWidthDragging(false);
+      };
+
+      document.addEventListener("mousemove", throttledMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    };
+
     if (!header) return null;
 
     return (
-      <th
-        className={`table-header-cell ${
-          header === hoveredHeaderRef.current ? "hovered" : ""
-        } ${isDragging ? "dragging" : ""}`}
-        key={header?.accessor}
-        draggable
-        onDragStart={() => handleDragStartWrapper(header)}
-        onDragOver={(event) => {
-          event.preventDefault();
-          throttledHandleDragOver(header, event);
-        }}
-        onDragEnd={handleDragEndWrapper}
-        onClick={() => onSort(index)}
+      <div
+        className={`st-th ${
+          header === hoveredHeaderRef.current ? "st-hovered" : ""
+        }`}
         ref={ref}
+        style={{ width: header.width }}
       >
-        {header?.label}
-      </th>
+        <div
+          className="st-table-header-label"
+          draggable
+          onClick={() => onSort(index)}
+          onDragStart={() => handleDragStartWrapper(header)}
+          onDragOver={(event) => {
+            event.preventDefault();
+            throttledHandleDragOver(header, event);
+          }}
+          onDragEnd={handleDragEndWrapper}
+        >
+          {header?.label}
+        </div>
+        <div
+          className="st-table-header-resize-handle"
+          onMouseDown={handleResizeStart}
+        />
+      </div>
     );
   }
 );

package/src/hooks/useTableHeaderCell.ts

@@ -2,17 +2,17 @@ import HeaderObject from "../types/HeaderObject";
 
 interface UseTableHeaderCellProps {
   draggedHeaderRef: React.MutableRefObject<HeaderObject | null>;
-  headersRef: React.RefObject<HeaderObject[]>;
+  headers: HeaderObject[];
   hoveredHeaderRef: React.MutableRefObject<HeaderObject | null>;
-  onDragEnd: (newHeaders: HeaderObject[]) => void;
+  onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
 }
 var isUpdating = false;
 
 const useTableHeaderCell = ({
   draggedHeaderRef,
-  headersRef,
+  headers,
   hoveredHeaderRef,
-  onDragEnd,
+  onTableHeaderDragEnd,
 }: UseTableHeaderCellProps) => {
   const handleDragStart = (header: HeaderObject) => {
     draggedHeaderRef.current = header;
@@ -28,11 +28,11 @@ const useTableHeaderCell = ({
       !isUpdating
     ) {
       isUpdating = true;
-      const newHeaders = [...(headersRef.current || [])];
-      const draggedHeaderIndex = headersRef.current?.findIndex(
+      const newHeaders = [...headers];
+      const draggedHeaderIndex = headers.findIndex(
         (header) => header.accessor === draggedHeaderRef.current?.accessor
       );
-      const hoveredHeaderIndex = headersRef.current?.findIndex(
+      const hoveredHeaderIndex = headers.findIndex(
         (header) => header.accessor === hoveredHeader.accessor
       );
       if (draggedHeaderIndex === undefined || hoveredHeaderIndex === undefined)
@@ -42,9 +42,9 @@ const useTableHeaderCell = ({
       newHeaders.splice(hoveredHeaderIndex, 0, draggedHeader);
 
       // Check if the newHeaders array is different from the original headers array
-      if (JSON.stringify(newHeaders) !== JSON.stringify(headersRef.current))
+      if (JSON.stringify(newHeaders) !== JSON.stringify(headers))
         setTimeout(() => {
-          onDragEnd(newHeaders);
+          onTableHeaderDragEnd(newHeaders);
 
           setTimeout(() => {
             isUpdating = false;

package/src/styles/index.css

@@ -1,7 +1,14 @@
 /* Import Nunito font from Google Fonts */
 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");
 
+/* Global styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 /* Apply Nunito as the default font */
 body {
-  font-family: "Nunito", sans-serif;
+  font-family: "Nunito";
 }

package/src/styles/table.css

@@ -9,85 +9,126 @@
   --blue-700: #2c5282;
   --blue-800: #2a4365;
   --blue-900: #1a365d;
+
   --selected-first-cell: white;
-  --light-grey: #d3d3d3;
   --border-radius: 4px;
   --border-width: 1px;
-}
 
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-/* Add a new class for the table wrapper */
-.table-wrapper {
-  border: 1px solid var(--light-grey);
+  /* Gray colors */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+
+  /* Slate colors */
+  --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;
+}
+
+/* Wrapper for the table */
+.st-table-wrapper {
+  border: 1px solid var(--slate-300);
   border-radius: var(--border-radius);
-  overflow: hidden; /* Ensures the table stays within the rounded corners */
+  overflow: auto;
 }
 
-table {
+/* Main table styling */
+.st-table {
+  display: grid;
   border-collapse: collapse;
-  width: 100%;
-  table-layout: fixed; /* Ensures even width for all th elements */
-}
-
-thead tr,
-tr:not(:last-child) {
-  border-bottom: 1px solid var(--light-grey);
-}
-
-tr {
-  transition: transform 0.4s, top 0.4s, opacity 0.2s;
-  transform: translateY(0);
-}
+  table-layout: auto;
+  white-space: nowrap;
 
-.dragging {
-  background-color: var(--blue-100);
+  width: 100%;
 }
 
-th {
-  width: 100px; /* Set a specific width for all th elements */
+/* Styles for table header cells */
+.st-th {
+  width: 100px;
+  position: relative;
 }
 
-th,
-.table-cell {
+/* Common styles for table header and cells */
+.st-th,
+.st-table-cell {
   user-select: none;
   cursor: pointer;
   padding: 8px;
   text-align: left;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.table-cell {
+/* Style for a cell when it is being dragged */
+.st-dragging {
+  background-color: var(--blue-100);
+}
+
+/* Basic styling for table cells */
+.st-table-cell {
   border: var(--border-width) solid transparent;
 }
 
-.selected {
+/* Style for selected table cells */
+.st-table-cell-selected {
   background-color: var(--blue-200);
 }
 
-.selected-first-cell {
+/* Style for the first selected table cell */
+.st-table-cell-selected-first {
   background-color: var(--selected-first-cell);
 }
 
+/* Blue top border for cells */
 .border-top-blue {
   border-top: var(--border-width) solid var(--blue-500);
 }
 
+/* Blue bottom border for cells */
 .border-bottom-blue {
   border-bottom: var(--border-width) solid var(--blue-500);
 }
 
+/* Blue left border for cells */
 .border-left-blue {
   border-left: var(--border-width) solid var(--blue-500);
 }
 
+/* Blue right border for cells */
 .border-right-blue {
   border-right: var(--border-width) solid var(--blue-500);
 }
 
+/* White top border for cells */
 .border-top-white {
   border-top: var(--border-width) solid white;
 }
+
+/* Resize handle for table headers */
+.st-table-header-resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize;
+  background-color: var(--slate-300);
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  border-radius: 0.25rem;
+}

package/src/types/HeaderObject.ts

@@ -1,6 +1,7 @@
 type HeaderObject = {
   label: string;
   accessor: string;
+  width: number;
 };
 
 export default HeaderObject;