add custom classes + update changelog

Author: mckervinc

CHANGELOG.md

@@ -1,5 +1,18 @@
 # CHANGELOG
 
+## 0.4.5
+
+_2023-09-27_
+
+### Features
+
+- Added the ability to provide a footer using the `footerComponent` property
+- If `footerComponent` is defined, can also provide a `stickyFooter` prop to make the footer sticky.
+- Since the last deploy, upgraded all the dependencies to fix Dependabot alerts
+- Can provide classNames to several different properties to make it more Tailwind friendly
+- The example site is powered by Vite as opposed to create-react-app
+- The example site is now in Typescript
+
 ## 0.4.2
 
 _2020-09-07_

example/src/Props.tsx

@@ -177,12 +177,23 @@ const data: PropData[] = [
     type: "object",
     description: "Add custom css styles to the table header"
   },
+  {
+    prop: "headerClassname",
+    type: "object",
+    description: "Add custom css className to the table header"
+  },
   {
     prop: "rowStyle",
     type: "object | (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",
+    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: "subComponent",
     type: "Element",

index.d.ts

@@ -79,6 +79,10 @@ export interface RowRenderProps<T> {
    * the cells for the row
    */
   children: ReactNode;
+  /**
+   * the className for the row-renderer
+   */
+  className?: string;
 }
 
 export interface SubComponentProps<T> {
@@ -216,11 +220,20 @@ export interface TableProps<T> {
    * React styles used for customizing the header.
    */
   headerStyle?: CSSProperties;
+  /**
+   * a className used to customize the header
+   */
+  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.
    */
   rowStyle?: CSSProperties | ((index: number) => CSSProperties);
+  /**
+   * 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.
+   */
+  rowClassname?: string | ((index: number) => string);
   /**
    * generates a unique identifier for the row
    * @param row the row

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fluid-table",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "A React table inspired by react-window",
   "author": "Mckervin Ceme <mckervinc@live.com>",
   "license": "MIT",

src/Footer.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from "react";
 import { TableContext } from "./TableContext";
+import { cx } from "./util";
 
 const Footer = () => {
   const { uuid, stickyFooter, footerComponent: FooterComponent } = useContext(TableContext);
@@ -12,7 +13,7 @@ const Footer = () => {
   return (
     <div
       data-footer-key={`${uuid}-footer`}
-      className={`react-fluid-table-footer ${stickyFooter ? "sticky" : ""}`.trim()}
+      className={cx(["react-fluid-table-footer", stickyFooter && "sticky"])}
     >
       <FooterComponent />
     </div>

src/Header.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef, useContext } from "react";
 import { ColumnProps, SortDirection } from "../index";
 import { TableContext } from "./TableContext";
 import { NO_NODE } from "./constants";
+import { cx } from "./util";
 
 interface HeaderCellProps<T> {
   width: number;
@@ -10,7 +11,7 @@ interface HeaderCellProps<T> {
 
 interface HeaderProps {
   children: React.ReactNode;
-  style: React.CSSProperties
+  style: React.CSSProperties;
 }
 
 function InnerHeaderCell<T>({ column, width }: HeaderCellProps<T>) {
@@ -77,7 +78,7 @@ HeaderCell.displayName = "HeaderCell";
 
 const Header = forwardRef(({ children, ...rest }: HeaderProps, ref: any) => {
   // hooks
-  const { uuid, columns, pixelWidths, headerStyle } = useContext(TableContext);
+  const { uuid, columns, pixelWidths, headerStyle, headerClassname } = useContext(TableContext);
 
   // variables
   const { scrollWidth, clientWidth } = ref.current || NO_NODE;
@@ -92,7 +93,7 @@ const Header = forwardRef(({ children, ...rest }: HeaderProps, ref: any) => {
     >
       <div className="sticky-header" data-header-key={`${uuid}-header`}>
         <div className="row-wrapper" style={{ width }}>
-          <div className="react-fluid-table-header" style={headerStyle}>
+          <div className={cx(["react-fluid-table-header", headerClassname])} style={headerStyle}>
             {columns.map((c, i) => (
               <HeaderCell key={c.key} column={c} width={pixelWidths[i]} />
             ))}

src/Row.tsx

@@ -6,6 +6,7 @@ import Minus from "./svg/minus-circle.svg";
 import Plus from "./svg/plus-circle.svg";
 import { TableContext } from "./TableContext";
 import { ListChildComponentProps } from "react-window";
+import { cx } from "./util";
 
 interface TableCellProps<T> {
   row: T;
@@ -20,6 +21,7 @@ interface TableCellProps<T> {
 interface RowContainerProps<T> {
   row: T;
   index: number;
+  className?: string;
   children: React.ReactNode;
   containerStyle: React.CSSProperties;
   onRowClick: (event: React.MouseEvent<Element, MouseEvent>, data: { index: number }) => void;
@@ -30,6 +32,7 @@ interface RowProps<T> extends Omit<ListChildComponentProps<T>, "data"> {
   row: T;
   borders: boolean;
   rowHeight: number;
+  rowClassname: string | ((index: number) => string);
   rowStyle: React.CSSProperties | ((index: number) => React.CSSProperties);
   useRowWidth: boolean;
   clearSizeCache: CacheFunction;
@@ -44,6 +47,7 @@ interface RowProps<T> extends Omit<ListChildComponentProps<T>, "data"> {
 }
 
 type CSSFunction = (index: number) => React.CSSProperties;
+type CSSClassFunction = (index: number) => string;
 
 const getRowStyle = (index: number, rowStyle?: React.CSSProperties | CSSFunction) => {
   if (!rowStyle) {
@@ -53,6 +57,14 @@ const getRowStyle = (index: number, rowStyle?: React.CSSProperties | CSSFunction
   return typeof rowStyle === "function" ? rowStyle(index) : rowStyle;
 };
 
+const getRowClassname = (index: number, rowClassname?: string | CSSClassFunction) => {
+  if (!rowClassname) {
+    return undefined;
+  }
+
+  return typeof rowClassname === "function" ? rowClassname(index) : rowClassname;
+};
+
 function InnerTableCell<T>({
   row,
   index,
@@ -116,6 +128,7 @@ function RowContainer<T>({
   row,
   index,
   children,
+  className,
   onRowClick,
   containerStyle,
   rowRenderer: RowRenderer
@@ -135,14 +148,18 @@ function RowContainer<T>({
       display: "flex"
     };
     return (
-      <RowRenderer row={row} index={index} style={style}>
+      <RowRenderer row={row} index={index} className={className} style={style}>
         {children}
       </RowRenderer>
     );
   }
 
   return (
-    <div className="row-container" style={containerStyle} onClick={onContainerClick}>
+    <div
+      className={cx(["row-container", className])}
+      style={containerStyle}
+      onClick={onContainerClick}
+    >
       {children}
     </div>
   );
@@ -156,6 +173,7 @@ function Row<T>({
   rowStyle,
   rowHeight,
   onRowClick,
+  rowClassname,
   useRowWidth,
   rowRenderer,
   clearSizeCache,
@@ -188,6 +206,7 @@ function Row<T>({
     height: containerHeight,
     ...getRowStyle(index, rowStyle)
   };
+  const containerClassname = getRowClassname(index, rowClassname);
 
   // function(s)
   const onExpanderClick = useCallback(() => {
@@ -231,6 +250,7 @@ function Row<T>({
         index={index}
         onRowClick={onRowClick}
         rowRenderer={rowRenderer}
+        className={containerClassname}
         containerStyle={containerStyle}
       >
         {columns.map((c, i) => (

src/Table.tsx

@@ -20,6 +20,7 @@ import { DEFAULT_HEADER_HEIGHT, DEFAULT_ROW_HEIGHT, NO_NODE } from "./constants"
 import {
   arraysMatch,
   calculateColumnWidths,
+  cx,
   findHeaderByUuid,
   findRowByUuidAndKey,
   guessTableHeight,
@@ -42,16 +43,7 @@ interface ListProps<T> extends Omit<TableProps<T>, "columns" | "borders"> {
  */
 const ListComponent = forwardRef(
   (
-    {
-      data,
-      width,
-      height,
-      itemKey,
-      rowHeight,
-      className,
-      headerHeight,
-      ...rest
-    }: ListProps<any>,
+    { data, width, height, itemKey, rowHeight, className, headerHeight, ...rest }: ListProps<any>,
     ref: React.ForwardedRef<TableRef>
   ) => {
     // hooks
@@ -136,7 +128,7 @@ const ListComponent = forwardRef(
 
     const shouldUseRowWidth = useCallback(() => {
       const parentElement = tableRef.current?.parentElement || NO_NODE;
-      setUseRowWidth(parentElement.scrollWidth  <= parentElement.clientWidth);
+      setUseRowWidth(parentElement.scrollWidth <= parentElement.clientWidth);
     }, [tableRef]);
 
     // effects
@@ -236,7 +228,7 @@ const ListComponent = forwardRef(
 
     return (
       <VariableSizeList
-        className={`react-fluid-table ${className || ""}`.trim()}
+        className={cx(["react-fluid-table", className])}
         ref={listRef}
         innerRef={tableRef}
         innerElementType={Header}
@@ -316,6 +308,7 @@ const Table = forwardRef(
       tableWidth,
       tableStyle,
       headerStyle,
+      headerClassname,
       footerComponent,
       borders = false,
       minColumnWidth = 80,
@@ -341,6 +334,7 @@ const Table = forwardRef(
           sortDirection,
           tableStyle,
           headerStyle,
+          headerClassname,
           stickyFooter,
           footerComponent
         }}

src/TableContext.tsx

@@ -32,6 +32,7 @@ interface TableState extends ReactContext {
   onSort?: (col: string | null, dir: SortDirection) => void;
   tableStyle?: React.CSSProperties;
   headerStyle?: React.CSSProperties;
+  headerClassname?: string;
 }
 
 const baseState: TableState = {
@@ -56,6 +57,7 @@ const fields = [
   "columns",
   "tableStyle",
   "headerStyle",
+  "headerClassname",
   "stickyFooter",
   "footerComponent"
 ];

src/util.ts

@@ -1,6 +1,18 @@
 import { ColumnProps } from "..";
 import { DEFAULT_HEADER_HEIGHT, DEFAULT_ROW_HEIGHT } from "./constants";
 
+/**
+ * combines multiple classNames conditionally
+ * @param classes list of potential className strings
+ * @returns a combined className string
+ */
+export const cx = (classes: any[]) => {
+  return classes
+    .filter(x => !!x && typeof x === "string")
+    .map((x: string) => x.trim())
+    .join(" ");
+};
+
 export const arraysMatch = <T>(arr1: T[], arr2: T[]) => {
   if (arr1.length !== arr2.length) {
     return false;