deploy 1.1.0

CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## 1.1.0
+
+_2024-12-13_
+
+### Features
+
+- **BREAKING:** `headerCellClassname` and `contentCellClassname` are renamed to `headerClassname` and `contentClassname`.
+- For columns, added `headerStyle` and `contentStyle`
+- (chore)Fix index.d.ts typos
+
 ## 1.0.3
 
 _2024-12-12_

index.d.ts

@@ -136,9 +136,13 @@ export type ColumnProps<T> = {
    */
   header?: string | ((props: HeaderProps) => JSX.Element);
   /**
-   * specify a custom classNsme for the header. If `header` is NOT a strins, this is ignored.
+   * specify a custom className for the header. If `header` is NOT a string, this is ignored.
    */
-  headerCellClassname?: string;
+  headerClassname?: string;
+  /**
+   * specify a custom style for the header. If `header` is NOT a string, this is ignored.
+   */
+  headerStyle?: CSSProperties;
   /**
    * The width of a column in pixels. If this is set, the column will not resize.
    */
@@ -172,9 +176,13 @@ export type ColumnProps<T> = {
    */
   content?: string | number | ((props: CellProps<T>) => ReactNode | JSX.Element);
   /**
-   * specify a custom classNsme for the content. If `cell` is specified, this is ignored.
+   * specify a custom className for the content. If `cell` is specified, this is ignored.
+   */
+  contentClassname?: string | ((props: { row: T; index: number }) => string | undefined);
+  /**
+   * specify a custom style for the content. If `cell` is specified, this is ignored.
    */
-  contentCellClassname?: string | ((props: { row: T; index: number }) => string);
+  contentStyle?: CSSProperties | ((props: { row: T; index: number }) => CSSProperties | undefined);
   /**
    * 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": "1.0.3",
+  "version": "1.1.0",
   "description": "A React table inspired by @tanstack/react-virtual",
   "author": "Mckervin Ceme <mckervinc@live.com>",
   "license": "MIT",

src/components/Header.tsx

@@ -19,30 +19,33 @@ const HeaderCell = memo(function <T>({
   sortedDir,
   onHeaderClick
 }: HeaderCellProps<T>) {
+  // instance
+  const { key, sortable, frozen } = column;
   const style: React.CSSProperties = {
-    cursor: column.sortable ? "pointer" : undefined,
+    cursor: sortable ? "pointer" : undefined,
     width: width || undefined,
     minWidth: width || undefined,
-    left: column.frozen ? prevWidth : undefined
+    left: frozen ? prevWidth : undefined
   };
 
   if (!column.header || typeof column.header === "string") {
+    const { headerStyle = {}, headerClassname } = column;
     return (
       <div
-        style={style}
+        style={{ ...headerStyle, ...style }}
         onClick={() => onHeaderClick(column)}
-        className={cx("rft-header-cell", column.frozen && "frozen", column.headerCellClassname)}
+        className={cx("rft-header-cell", frozen && "frozen", headerClassname)}
       >
         {column.header ? <div className="rft-header-cell-text">{column.header}</div> : null}
-        {column.key !== sortedCol ? null : (
+        {key !== sortedCol ? null : (
           <div className={cx("rft-header-cell-arrow", sortedDir?.toLowerCase())}></div>
         )}
       </div>
     );
   }
 
-  const headerDir = column.key === sortedCol ? sortedDir || null : null;
-  const frozenStyle: React.CSSProperties = column.frozen ? { position: "sticky", zIndex: 1 } : {};
+  const headerDir = key === sortedCol ? sortedDir || null : null;
+  const frozenStyle: React.CSSProperties = frozen ? { position: "sticky", zIndex: 1 } : {};
   return (
     <column.header
       onClick={() => onHeaderClick(column)}

src/components/Row.tsx

@@ -23,33 +23,36 @@ const TableCell = memo(function <T>({
   prevWidth,
   onExpanderClick
 }: TableCellProps<T>) {
-  // cell style
+  // instance
+  const { frozen, contentClassname, contentStyle } = column;
   const style: React.CSSProperties = {
     width: width || undefined,
     minWidth: width || undefined,
-    left: column.frozen ? prevWidth : undefined
+    left: frozen ? prevWidth : undefined
   };
 
-  // cell classname
-  const cellClass = column.contentCellClassname
-    ? typeof column.contentCellClassname === "string"
-      ? column.contentCellClassname
-      : column.contentCellClassname({ row, index })
-    : null;
-
   // expander
   if (column.expander) {
+    // cell classname
+    const cellClass =
+      typeof contentClassname === "function" ? contentClassname({ row, index }) : contentClassname;
+
     if (typeof column.expander === "boolean") {
       const Logo = isExpanded ? Minus : Plus;
+      const cellStyle =
+        (typeof contentStyle === "function" ? contentStyle({ row, index }) : contentStyle) || {};
 
       return (
-        <div className={cx("rft-cell", column.frozen && "frozen", cellClass)} style={style}>
+        <div
+          className={cx("rft-cell", frozen && "frozen", cellClass)}
+          style={{ ...cellStyle, ...style }}
+        >
           <Logo className="rft-expander" onClick={onExpanderClick} />
         </div>
       );
     }
 
-    const frozenStyle: React.CSSProperties = column.frozen ? { position: "sticky", zIndex: 2 } : {};
+    const frozenStyle: React.CSSProperties = frozen ? { position: "sticky", zIndex: 2 } : {};
     return (
       <column.expander
         row={row}
@@ -63,6 +66,11 @@ const TableCell = memo(function <T>({
 
   // basic styling
   if (!column.cell) {
+    // cell classname/style
+    const cellClass =
+      typeof contentClassname === "function" ? contentClassname({ row, index }) : contentClassname;
+    const cellStyle =
+      (typeof contentStyle === "function" ? contentStyle({ row, index }) : contentStyle) || {};
     let content = (row[column.key as keyof T] || null) as React.ReactNode;
     if (column.content) {
       if (typeof column.content === "string" || typeof column.content === "number") {
@@ -73,7 +81,10 @@ const TableCell = memo(function <T>({
     }
 
     return (
-      <div className={cx("rft-cell", column.frozen && "frozen", cellClass)} style={style}>
+      <div
+        className={cx("rft-cell", frozen && "frozen", cellClass)}
+        style={{ ...cellStyle, ...style }}
+      >
         {content}
       </div>
     );