update expanded row args

Author: mckervinc

CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## 1.2.0
+
+_2024-12-18_
+
+### Features
+
+- **BREAKING:** instead of taking just the `index`, the following functions all also take in the row as well: `expandedRows`, `rowStyle`, and `rowClassname`.
+- (docs) added `contentClassname`, `contentStyle`
+
 ## 1.1.0
 
 _2024-12-13_

example/src/ColumnProps.tsx

@@ -16,7 +16,7 @@ const columns: ColumnProps<PropData>[] = [
   {
     key: "prop",
     header: "Prop",
-    width: 140,
+    width: 200,
     content: ({ row }) => <code>{row.prop}</code>
   },
   {
@@ -48,6 +48,16 @@ const data: PropData[] = [
       </div>
     )
   },
+  {
+    prop: "headerClassname",
+    type: "string",
+    description: "An optional classname that can be applied to the header cell."
+  },
+  {
+    prop: "headerStyle",
+    type: "React.CSSProperties",
+    description: "An optional style object that can be applied to the header cell."
+  },
   {
     prop: "width",
     type: "number",
@@ -97,6 +107,16 @@ const data: PropData[] = [
       </div>
     )
   },
+  {
+    prop: "contentClassname",
+    type: "string | ((props: { row: any; index: number }) => string | undefined)",
+    description: "An optional classname that can be applied to the content cell."
+  },
+  {
+    prop: "contentStyle",
+    type: "React.CSSProperties | ((props: { row: any; index: number }) => React.CSSProperties | undefined)",
+    description: "An optional style object that can be applied to the content cell."
+  },
   {
     prop: "cell",
     type: "CellElement",

example/src/Props.tsx

@@ -168,13 +168,13 @@ const data: PropData[] = [
   },
   {
     prop: "rowStyle",
-    type: "object | (index: number) => object",
+    type: "object | (value: { row: any; index: number }) => object",
     description:
       "Add custom css styles 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: "rowClassname",
-    type: "string | (index: number) => string",
+    type: "string | (value: { row: any; index: number }) => string",
     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."
   },
@@ -185,7 +185,7 @@ const data: PropData[] = [
   },
   {
     prop: "onRowClick",
-    type: "(e: Event, { index: number }) => void",
+    type: "(value: { row: any, index: number, event?: Event }) => void",
     description: "optional click handler for the rows in the table"
   },
   {

example/src/examples/08-header.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import React, { useState } from "react";
+import { useState } from "react";
 import { ColumnProps, HeaderProps, SortDirection, Table } from "react-fluid-table";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { TestData, testData } from "../data";
@@ -86,10 +86,6 @@ const Example = () => {
     }
   };
 
-  const rowStyle = index => ({
-    backgroundColor: index % 2 === 0 ? "#33be54" : "#21ba49"
-  });
-
   return (
     <Table
       data={data}
@@ -99,7 +95,9 @@ const Example = () => {
       onSort={onSort}
       sortColumn="firstName"
       sortDirection="ASC"
-      rowStyle={rowStyle}
+      rowStyle={({ index }) => ({
+        backgroundColor: index % 2 === 0 ? "#33be54" : "#21ba49"
+      })}
       style={{ backgroundColor: "#33be54" }}
       headerStyle={{ backgroundColor: "#1e9f3f" }}
     />
@@ -122,10 +120,6 @@ const Example8 = () => {
     }
   };
 
-  const rowStyle = (index: number): React.CSSProperties => ({
-    backgroundColor: index % 2 === 0 ? "#33be54" : "#21ba49"
-  });
-
   return (
     <Table
       data={data}
@@ -135,7 +129,9 @@ const Example8 = () => {
       onSort={onSort}
       sortColumn="firstName"
       sortDirection="ASC"
-      rowStyle={rowStyle}
+      rowStyle={({ index }) => ({
+        backgroundColor: index % 2 === 0 ? "#33be54" : "#21ba49"
+      })}
       style={{ backgroundColor: "#33be54" }}
       headerStyle={{ backgroundColor: "#1e9f3f" }}
     />

index.d.ts

@@ -289,14 +289,14 @@ export type TableProps<T> = {
   headerClassname?: string;
   /**
    * React styles used for customizing each row. Could be an object or
-   * a function that takes the index of the row and returns an object.
+   * a function that takes the index or the row and returns an object.
    */
-  rowStyle?: CSSProperties | ((index: number) => CSSProperties | undefined);
+  rowStyle?: CSSProperties | ((value: { row: T; index: number }) => CSSProperties | undefined);
   /**
    * React className used for customizing each row. Could be an object or
-   * a function that takes the index of the row and returns an object.
+   * a function that takes the index or the row and returns an object.
    */
-  rowClassname?: string | ((index: number) => string);
+  rowClassname?: string | ((value: { row: T; index: number }) => string);
   /**
    * React styles used for customizing the footer.
    */
@@ -306,10 +306,12 @@ export type TableProps<T> = {
    */
   footerClassname?: string;
   /**
-   * an object that contains the expanded rows. can also be a function that takes the index and
-   * returns a boolean.
+   * an object that contains the expanded rows. can also be a function that takes the index
+   * or row and returns a boolean.
    */
-  expandedRows?: { [x: string | number]: boolean } | ((index: number) => boolean);
+  expandedRows?:
+    | { [x: string | number]: boolean }
+    | ((value: { row: T; index: number }) => boolean);
   /**
    * called when a row is expanded
    * @param value information about the row that is expanded/shrunk

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fluid-table",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A React table inspired by @tanstack/react-virtual",
   "author": "Mckervin Ceme <mckervinc@live.com>",
   "license": "MIT",

src/components/List.tsx

@@ -179,13 +179,14 @@ const List = forwardRef(function <T>(
           }}
         >
           <div className={cx(showRowWrapper && "rft-row-wrapper")}>
-            {items.map(item => {
-              const row = data[item.index];
-              const key = generateKeyFromRow(row, item.index);
-              const isExpanded = isRowExpanded?.(item.index) ?? !!expandedCache[key];
+            {items.map(({ index }) => {
+              const row = data[index];
+              const fargs = { row, index };
+              const key = generateKeyFromRow(row, index);
+              const isExpanded = isRowExpanded?.(fargs) ?? !!expandedCache[key];
               const className =
-                typeof rowClassname === "function" ? rowClassname(item.index) : rowClassname;
-              const style = typeof rowStyle === "function" ? rowStyle(item.index) : rowStyle;
+                typeof rowClassname === "function" ? rowClassname(fargs) : rowClassname;
+              const style = typeof rowStyle === "function" ? rowStyle(fargs) : rowStyle;
               return (
                 <Row
                   ref={virtualizer.measureElement}
@@ -200,7 +201,7 @@ const List = forwardRef(function <T>(
                   onRowClick={onRowClick as any}
                   rowRenderer={rowRenderer as any}
                   onExpand={onExpand as any}
-                  index={item.index}
+                  index={index}
                   columns={columns as any}
                   pixelWidths={pixelWidths}
                   subComponent={subComponent as any}