Merge pull request #94 from mckervinc/feature/refactor

Feature: Refactor

Author: mckervinc

CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG
 
+## 1.0.0
+
+_2024-12-12_
+
+### Features
+
+- **BREAKING:** Removed the following props: `borders`, `rowContainerStyle`, `rowContainerClassname`, `forceReset`, `ref`.
+- **BREAKING:** Renamed the following props: `tableStyle` -> `style`.
+- no more need for `clearSizeCache` in CellProps or SubComponentProps
+- `onExpandRow` now includes the mouse event as an optional parameter
+- all jitter should be removed
+
 ## 0.6.4
 
 _2024-12-09_

README.md

@@ -1,8 +1,6 @@
 # react-fluid-table
 
-> A React table inspired by react-window
-
-(Note: This project is under construction)
+> A React table inspired by [@tanstack/react-virtual](https://github.com/TanStack/virtual)
 
 [![NPM](https://img.shields.io/npm/v/react-fluid-table?style=flat-square)](https://www.npmjs.com/package/react-fluid-table) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com)
 

example/package.json

@@ -60,6 +60,6 @@
   },
   "volta": {
     "node": "18.18.0",
-    "yarn": "1.22.19"
+    "yarn": "1.22.22"
   }
 }

example/src/ColumnProps.tsx

@@ -124,11 +124,10 @@ const data: PropData[] = [
 
 const ColumnPropsTable = () => (
   <Table
-    borders
     data={data}
     columns={columns}
     tableHeight={400}
-    className="border border-solid border-[#ececec] [&_.rft-cell:last]:border-none [&_.rft-cell]:border-r [&_.rft-cell]:border-solid [&_.rft-cell]:border-r-[#ececec] [&_.rft-header-cell-text]:text-[#ff79c5] [&_.rft-header-cell:last]:border-none [&_.rft-header-cell]:border-r [&_.rft-header-cell]:border-solid [&_.rft-header-cell]:border-r-[#ececec] [&_.rft-header]:bg-[#282a36]"
+    className="border border-solid border-[#ececec] [&_.rft-cell:last]:border-none [&_.rft-cell]:border-r [&_.rft-cell]:border-solid [&_.rft-cell]:border-r-[#ececec] [&_.rft-header-cell-text]:text-[#ff79c5] [&_.rft-header-cell:last]:border-none [&_.rft-header-cell]:border-r [&_.rft-header-cell]:border-solid [&_.rft-header-cell]:border-r-[#ececec] [&_.rft-header]:bg-[#282a36] [&_.rft-row-container]:border-b [&_.rft-row-container]:border-b-[#ececec] last:[&_.rft-row-container]:border-b-0"
   />
 );
 

example/src/Props.tsx

@@ -152,13 +152,7 @@ const data: PropData[] = [
     )
   },
   {
-    prop: "borders",
-    type: "boolean",
-    description: "Controls whether or not there is a bottom border for each row",
-    default: "false"
-  },
-  {
-    prop: "tableStyle",
+    prop: "style",
     type: "object",
     description: "Add custom css styles to the outer table element"
   },
@@ -184,18 +178,6 @@ const data: PropData[] = [
     description:
       "Add custom css className to each row element. One can also pass in a function that takes in the row number in order to provide custom styling for particular rows."
   },
-  {
-    prop: "rowContainerStyle",
-    type: "object | (index: number) => object",
-    description:
-      "Add custom css styles to each row container element. One can also pass in a function that takes in the row number in order to provide custom styling for particular rows."
-  },
-  {
-    prop: "rowContainerClassname",
-    type: "string | (index: number) => string",
-    description:
-      "Add custom css className to each row container element. One can also pass in a function that takes in the row number in order to provide custom styling for particular rows."
-  },
   {
     prop: "subComponent",
     type: "Element",
@@ -256,8 +238,7 @@ const Example = () => <Table data={data} columns={columns} />;
 `;
 
 const cellSnippet = `
-const Contact = ({ row, index, style, clearSizeCache }) => {
-  const mounted = useRef(false);
+const Contact = ({ row, style }) => {
   const [showInfo, setShowInfo] = useState(false);
 
   const label = \`\${showInfo ? "hide" : "show"} contact info\`;
@@ -268,15 +249,6 @@ const Contact = ({ row, index, style, clearSizeCache }) => {
 
   const onChange = () => setShowInfo(!showInfo);
 
-  // after something that might cause the row height to change,
-  // you should call this function to get the new row height.
-  useLayoutEffect(() => {
-    if (mounted.current) {
-      clearSizeCache(index, true);
-    }
-    mounted.current = true;
-  }, [showInfo]);
-
   return <Accordion style={style} label={label} options={options} onChange={onChange} />;
 };
 
@@ -319,7 +291,6 @@ const Props = () => {
         </div>
       </div>
       <Table
-        borders
         data={data}
         columns={columns}
         tableHeight={500}
@@ -366,12 +337,7 @@ const Props = () => {
           className="list-item w-full table-fixed list-none border-t border-solid border-[rgba(34,36,38,.15)] py-[.21428571em] leading-[1.14285714em] first:border-t-0 first:pt-0"
         >
           <div className="font-bold text-[rgba(0,0,0,.87)]">
-            <code>CellElement</code>:{" "}
-            <code>
-              {
-                "({ row: object, index: number, style?: React.CSSProperties, clearSizeCache: (index: number, forceUpdate?: boolean = false) => void }) => React.Element"
-              }
-            </code>
+            <code>CellElement</code>: <code>{"({ row: object, index: number, style?: React.CSSProperties"}</code>
           </div>
           <div className="leading-[1.14285714em]">
             The CellElement is an element that takes in props that contains the row object itself, the index in the data

example/src/examples/02-sort.tsx

@@ -55,7 +55,6 @@ const Example = () => {
 
   return (
     <Table
-      borders
       data={data}
       columns={columns}
       itemKey={row => row.id}
@@ -85,7 +84,6 @@ const Example2 = () => {
 
   return (
     <Table
-      borders
       data={data}
       columns={columns}
       itemKey={row => row.id}

example/src/examples/03-sub.tsx

@@ -60,7 +60,6 @@ const Example = () => {
 
   return (
     <Table
-      borders
       data={data}
       columns={columns}
       tableHeight={400}
@@ -91,7 +90,6 @@ const Example3 = () => {
 
   return (
     <Table
-      borders
       data={data}
       columns={columns}
       tableHeight={400}

example/src/examples/04-custom.tsx

@@ -363,7 +363,6 @@ const columns: ColumnProps<TestData>[] = [
 
 const Example = () => (
   <Table
-    borders
     data={data}
     columns={columns}
     tableHeight={400}
@@ -375,7 +374,7 @@ const Example = () => (
 const Example4 = () => {
   useTitle("Cell Content");
   useSource(Source);
-  return <Table borders data={testData} columns={columns} tableHeight={400} rowHeight={150} />;
+  return <Table data={testData} columns={columns} tableHeight={400} rowHeight={150} />;
 };
 
 export { Example4 };

example/src/examples/05-variable.tsx

@@ -35,7 +35,6 @@ const columns: ColumnProps<TestData>[] = [
 
 const Example = () => (
   <Table
-    borders
     data={data}
     columns={columns}
     tableHeight={400}
@@ -46,7 +45,7 @@ const Example = () => (
 const Example5 = () => {
   useTitle("Variable Row Size");
   useSource(Source);
-  return <Table borders data={testData} columns={columns} tableHeight={400} />;
+  return <Table data={testData} columns={columns} tableHeight={400} />;
 };
 
 export { Example5 };

example/src/examples/06-expanded.tsx

@@ -1,11 +1,6 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger
-} from "@/components/ui/accordion";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { useSource, useTitle } from "@/hooks/useTitle";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { ColumnProps, SubComponentProps, Table } from "react-fluid-table";
 import { TestData, testData } from "../data";
 
@@ -37,55 +32,26 @@ const columns: ColumnProps<TestData>[] = [
   }
 ];
 
-const SubComponent = ({
-  row,
-  index,
-  clearSizeCache
-}: SubComponentProps<TestData>) => {
+const SubComponent = ({ row }: SubComponentProps<TestData>) => {
   // hooks
-  const prev = useRef("");
   const [value, setValue] = useState("");
 
-  // effects
-  useLayoutEffect(() => {
-    if (prev.current !== value) {
-      clearSizeCache(index, { forceUpdate: true });
-      clearSizeCache(index, { timeout: 200 });
-    }
-    prev.current = value;
-  }, [value, index, clearSizeCache]);
-
   return (
     <div className="bg-[#1b1c1d] px-3.5 py-2.5 text-white">
-      <Accordion
-        type="single"
-        collapsible
-        value={value}
-        onValueChange={setValue}
-      >
+      <Accordion type="single" collapsible value={value} onValueChange={setValue}>
         <AccordionItem value="item-1">
-          <AccordionTrigger>
-            What is the address for this user?
-          </AccordionTrigger>
-          <AccordionContent>
-            {`${row.address}, ${row.city}, ${row.state} ${row.zipCode}`}
-          </AccordionContent>
+          <AccordionTrigger>What is the address for this user?</AccordionTrigger>
+          <AccordionContent>{`${row.address}, ${row.city}, ${row.state} ${row.zipCode}`}</AccordionContent>
         </AccordionItem>
         <AccordionItem value="item-2">
-          <AccordionTrigger>
-            What are the random sentences when you select this option?
-          </AccordionTrigger>
+          <AccordionTrigger>What are the random sentences when you select this option?</AccordionTrigger>
           <AccordionContent>{row.sentence}</AccordionContent>
         </AccordionItem>
         <AccordionItem value="item-3">
-          <AccordionTrigger>
-            What famous poem was included in Breaking Bad that referenced a
-            king?
-          </AccordionTrigger>
+          <AccordionTrigger>What famous poem was included in Breaking Bad that referenced a king?</AccordionTrigger>
           <AccordionContent>
             <p>
-              The poem is called <b>Ozymandias</b> by <b>Percy Bryce Shelley</b>
-              . You can find the poem below:
+              The poem is called <b>Ozymandias</b> by <b>Percy Bryce Shelley</b>. You can find the poem below:
             </p>
             <div>I met a traveller from an antique land,</div>
             <div>Who said—“Two vast and trunkless legs of stone</div>
@@ -119,24 +85,10 @@ const columns: ColumnProps<TestData>[] = [
   { key: "email", header: "Email", width: 250 }
 ];
 
-const SubComponent = ({
-  row,
-  index,
-  clearSizeCache
-}: SubComponentProps<TestData>) => {
+const SubComponent = ({ row }: SubComponentProps<TestData>) => {
   // hooks
-  const prev = useRef("");
   const [value, setValue] = useState("");
 
-  // effects
-  useLayoutEffect(() => {
-    if (prev.current !== value) {
-      clearSizeCache(index, { forceUpdate: true });
-      clearSizeCache(index, { timeout: 200 });
-    }
-    prev.current = value;
-  }, [value, index, clearSizeCache]);
-
   return (
     <div className="bg-[#1b1c1d] px-3.5 py-2.5 text-white">
       <Accordion
@@ -192,7 +144,6 @@ const SubComponent = ({
 
 const Example = () => (
   <Table
-    borders
     data={data}
     columns={columns}
     subComponent={SubComponent}
@@ -204,15 +155,7 @@ const Example = () => (
 const Example6 = () => {
   useTitle("Expanded Row Height");
   useSource(Source);
-  return (
-    <Table
-      borders
-      data={testData}
-      columns={columns}
-      tableHeight={400}
-      subComponent={SubComponent}
-    />
-  );
+  return <Table data={testData} columns={columns} tableHeight={400} subComponent={SubComponent} />;
 };
 
 export { Example6, Source };

example/src/examples/07-controlled.tsx

@@ -88,7 +88,6 @@ const Controlled = ({ data, height, columns: variableColumns }: ControlledProps)
 
   return (
     <Table
-      borders
       data={rows}
       columns={variableColumns}
       tableHeight={height}
@@ -137,15 +136,16 @@ const Controlled = ({ data, columns: variableColumns }) => {
   }, [data]);
 
   return (
-    <StyledTable
-      borders
+    <Table
       data={rows}
       columns={variableColumns}
       tableHeight={400}
       rowHeight={35}
       onSort={onSort}
       sortColumn="firstName"
       sortDirection="ASC"
+      className="border border-solid border-[#ececec]"
+      headerClassname="bg-[#dedede]"
     />
   );
 };

example/src/examples/08-header.tsx

@@ -100,7 +100,7 @@ const Example = () => {
       sortColumn="firstName"
       sortDirection="ASC"
       rowStyle={rowStyle}
-      tableStyle={{ backgroundColor: "#33be54" }}
+      style={{ backgroundColor: "#33be54" }}
       headerStyle={{ backgroundColor: "#1e9f3f" }}
     />
   );
@@ -136,7 +136,7 @@ const Example8 = () => {
       sortColumn="firstName"
       sortDirection="ASC"
       rowStyle={rowStyle}
-      tableStyle={{ backgroundColor: "#33be54" }}
+      style={{ backgroundColor: "#33be54" }}
       headerStyle={{ backgroundColor: "#1e9f3f" }}
     />
   );

example/src/examples/09-scroll.tsx

@@ -73,7 +73,7 @@ const Example = () => {
           </Group>
         </Form>
       </Wrapper>
-      <Table borders tableHeight={400} ref={ref} data={data} columns={columns} />
+      <Table tableHeight={400} ref={ref} data={data} columns={columns} />
     </>
   );
 };
@@ -125,7 +125,7 @@ const Example9 = () => {
           </form>
         </Col>
       </Row>
-      <Table borders ref={ref} data={testData} columns={columns} tableHeight={400} />
+      <Table ref={ref} data={testData} columns={columns} tableHeight={400} />
     </>
   );
 };