add custom classnames

Author: mckervinc

CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+## 0.6.0
+
+_2024-06-74_
+
+### Features
+
+- **BREAKING:** `clearSizeCache` signature has changed. The second argument is now an optional object that takes a `forceUpdate` boolean and a `timeout`. Both are optional.
+- For columns, added `headerCellClassname` and `contentCellClassname`
+- when `headerHeight` is set, the header's height will actually be that height
+- _DOCS:_ removed `styled-components` and `semantic`
+
 ## 0.5.7
 
 _2024-06-14_

index.d.ts

@@ -143,6 +143,7 @@ export type ColumnProps<T> = {
    * The name of the header column, or a component to return a customized header cell.
    */
   header?: string | ((props: HeaderProps) => JSX.Element);
+  headerCellClassname?: string;
   /**
    * The width of a column in pixels. If this is set, the column will not resize.
    */
@@ -175,6 +176,7 @@ export type ColumnProps<T> = {
    * things inside of the react-fluid-table cell container.
    */
   content?: string | number | ((props: CellProps<T>) => ReactNode | JSX.Element);
+  contentCellClassname?: string | ((props: { row: T; index: number }) => string);
   /**
    * An advanced feature, this is used to render an entire cell, including the cell container.
    * The `content` prop is ignored if this property is enabled.

package.json

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

src/Header.tsx

@@ -63,7 +63,7 @@ const HeaderCell = React.memo(function <T>({ column, width, prevWidth }: HeaderC
       <div
         style={style}
         onClick={onClick}
-        className={cx("rft-header-cell", column.frozen && "frozen")}
+        className={cx("rft-header-cell", column.frozen && "frozen", column.headerCellClassname)}
       >
         {column.header ? <div className="rft-header-cell-text">{column.header}</div> : null}
         {column.key !== col ? null : (

src/Row.tsx

@@ -96,13 +96,20 @@ const TableCell = memo(function <T>({
     left: column.frozen ? prevWidth : undefined
   };
 
+  // cell classname
+  const cellClass = column.contentCellClassname
+    ? typeof column.contentCellClassname === "string"
+      ? column.contentCellClassname
+      : column.contentCellClassname({ row, index })
+    : null;
+
   // expander
   if (column.expander) {
     if (typeof column.expander === "boolean") {
       const Logo = isExpanded ? Minus : Plus;
 
       return (
-        <div className={cx("rft-cell", column.frozen && "frozen")} style={style}>
+        <div className={cx("rft-cell", column.frozen && "frozen", cellClass)} style={style}>
           <Logo className="rft-expander" onClick={e => onExpanderClick(e, !isExpanded)} />
         </div>
       );
@@ -132,7 +139,7 @@ const TableCell = memo(function <T>({
     }
 
     return (
-      <div className={cx("rft-cell", column.frozen && "frozen")} style={style}>
+      <div className={cx("rft-cell", column.frozen && "frozen", cellClass)} style={style}>
         {content}
       </div>
     );