Merge pull request #99 from mckervinc/feature/css-grid

Feature: Simplify Horizontal Scroll Behavior

Author: mckervinc

CHANGELOG.md

@@ -1,5 +1,19 @@
 # CHANGELOG
 
+## 1.4.0
+
+_2025-04-18_
+
+### Breaking
+
+- removed `rowRenderer` functionality.
+- removed `.rft-row-container`, `.rft-outer-container`, and `.rft-inner-container`. as css class names.
+
+### Bugfix
+
+- on certain devices, the background color of the row did not fill the table. This should be resolved.
+- no need for `isHorizontalScroll` hack
+
 ## 1.3.0
 
 _2025-04-01_

example/package.json

@@ -19,52 +19,52 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@ngneat/falso": "^7.3.0",
-    "@radix-ui/react-accordion": "^1.2.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-accordion": "^1.2.7",
+    "@radix-ui/react-checkbox": "^1.2.2",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-popover": "^1.1.10",
+    "@radix-ui/react-radio-group": "^1.3.2",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.18",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.486.0",
+    "lucide-react": "^0.501.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-fluid-table": "link:..",
-    "react-router-dom": "^7.4.1",
+    "react-router-dom": "^7.5.1",
     "react-syntax-highlighter": "^15.6.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.7",
+    "@eslint/compat": "^1.2.8",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.23.0",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "^20.14.2",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
+    "@eslint/js": "^9.25.0",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@typescript-eslint/eslint-plugin": "^8.29.0",
-    "@typescript-eslint/parser": "^8.29.0",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@typescript-eslint/eslint-plugin": "^8.30.1",
+    "@typescript-eslint/parser": "^8.30.1",
+    "@vitejs/plugin-react": "^4.4.0",
     "autoprefixer": "^10.4.21",
-    "eslint": "9.23.0",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-prettier": "^5.2.5",
+    "eslint": "9.24.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.29.0",
-    "vite": "^6.2.4"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.2"
   },
   "volta": {
     "node": "20.12.1",

example/src/ColumnProps.tsx

@@ -2,15 +2,15 @@ import React from "react";
 import { ColumnProps, Table } from "react-fluid-table";
 import { InlineCode } from "./components/library/InlineCode";
 
-interface PropData {
+type PropData = {
   prop: string;
   type: string;
   description: React.ReactNode;
   required?: boolean;
   content?: () => React.ReactNode;
   expandedType?: () => React.ReactNode;
   default?: string | number;
-}
+};
 
 const columns: ColumnProps<PropData>[] = [
   {
@@ -147,7 +147,7 @@ const ColumnPropsTable = () => (
     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] [&_.rft-row-container]:border-b [&_.rft-row-container]:border-b-[#ececec] last:[&_.rft-row-container]:border-b-0"
+    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]:border-b [&_.rft-row]:border-b-[#ececec] last:[&_.rft-row]:border-b-0"
   />
 );
 

example/src/Props.tsx

@@ -189,12 +189,6 @@ const data: PropData[] = [
     type: "(value: { row: any, index: number, event?: Event }) => void",
     description: "optional click handler for the rows in the table"
   },
-  {
-    prop: "rowRenderer",
-    type: "(props: CellElement) => Element",
-    description:
-      "A custom element used to wrap an entire row. This provides another way of customizing each row of the table"
-  },
   {
     prop: "footerComponent",
     type: "(props: FooterProps) => Element",
@@ -295,7 +289,7 @@ const Props = () => {
         data={data}
         columns={columns}
         tableHeight={500}
-        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"
+        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]:border-b [&_.rft-row]:border-b-[#ececec] last:[&_.rft-row]:border-b-0"
       />
       <div className="my-8 border-b border-t border-solid border-b-[rgba(255,255,255,.1)] border-t-[rgba(34,36,38,.15)]" />
       <div className="mb-3.5 mt-6 border-b-2 border-solid border-[#db2828] pb-1 text-lg font-bold leading-[1.28571429em] text-[#db2828]">

example/src/examples/07-controlled.tsx

@@ -101,17 +101,17 @@ const Controlled = ({ data, height, columns: variableColumns }: ControlledProps)
   );
 };
 
-interface ToggleType {
+type ToggleType = {
   data: boolean;
   height: boolean;
   columns: boolean;
-}
+};
 
-interface DataType {
+type DataType = {
   data: TestData[];
   height: number;
   columns: ColumnProps<TestData>[];
-}
+};
 
 type keyM = keyof ToggleType;
 type keyD = keyof DataType;

example/src/examples/08-header.tsx

@@ -7,9 +7,9 @@ import { faChevronUp, faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { cn } from "@/lib/utils";
 import { useSource, useTitle } from "@/hooks/useTitle";
 
-interface HeaderCellProps extends HeaderProps {
+type HeaderCellProps = HeaderProps & {
   name?: string;
-}
+};
 
 const HeaderCell = ({ name, sortDirection, style, onClick }: HeaderCellProps) => {
   const icon = !sortDirection ? null : (