added more style options to the column meta (#61)

Author: neotob

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- option `cellClassName` added to the column meta to add class names to every cell of a column
+- option `headerClassName` added to the column meta to add class names to every header of a column
+- option `footerStyle` added to the column meta to add styles to every footer of a column
+- option `footerClassName` added to the column meta to add class names to every footer of a column
+
 ## [4.1.0] - 2024-03-13
 
 ### Added

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -70,6 +70,7 @@ const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
                       key={header.id}
                       onClick={header.column.getToggleSortingHandler()}
                       style={{ ...header.column.columnDef.meta?.headerStyle, ...(header.column.getCanSort() ? { cursor: "pointer" } : {}) }}
+                      className={header.column.columnDef.meta?.headerClassName}
                     >
                       {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 
@@ -182,7 +183,7 @@ const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
           {table.getRowModel().rows.map((row) => (
             <tr key={row.id} style={rowStyle && rowStyle(row.original)}>
               {row.getVisibleCells().map((cell) => (
-                <td key={cell.id} style={cell.column.columnDef.meta?.cellStyle}>
+                <td key={cell.id} style={cell.column.columnDef.meta?.cellStyle} className={cell.column.columnDef.meta?.cellClassName}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
               ))}
@@ -195,7 +196,13 @@ const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
               {table.getFooterGroups().map((footerGroup) => (
                 <tr key={footerGroup.id}>
                   {footerGroup.headers.map((header) => (
-                    <th key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())}</th>
+                    <th
+                      key={header.id}
+                      style={header.column.columnDef.meta?.footerStyle}
+                      className={header.column.columnDef.meta?.footerClassName}
+                    >
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())}
+                    </th>
                   ))}
                 </tr>
               ))}

src/react-table.d.ts

@@ -25,11 +25,31 @@ declare module "@tanstack/table-core" {
      */
     cellStyle?: CSSProperties;
 
+    /**
+     * Add class name to the every cell in this column
+     */
+    cellClassName?: string;
+
     /**
      * Add a style to the header cell of this column
      */
     headerStyle?: CSSProperties;
 
+    /**
+     * Add class name to the every header in this column
+     */
+    headerClassName?: string;
+
+    /**
+     * Add a style to the footer cell of this column
+     */
+    footerStyle?: CSSProperties;
+
+    /**
+     * Add class name to the every footer in this column
+     */
+    footerClassName?: string;
+
     /**
      * Define a custom filter
      * @param filterValue The current value of the filter

test/DataTable/DataTable.test.tsx

@@ -47,6 +47,7 @@ describe("DataTable", () => {
     columnHelper.accessor("count", { header: "COUNT", enableSorting: true, enableColumnFilter: true }),
     columnHelper.accessor("status", {
       header: "STATUS",
+      footer: "STATUS-FOOTER",
       enableSorting: true,
       enableColumnFilter: true,
       meta: {
@@ -57,6 +58,12 @@ describe("DataTable", () => {
             { value: Status.Deleted, label: "Deleted" },
           ],
         },
+        headerStyle: { backgroundColor: "blue" },
+        headerClassName: "header-class",
+        cellStyle: { backgroundColor: "yellow" },
+        cellClassName: "cell-class",
+        footerStyle: { backgroundColor: "red" },
+        footerClassName: "footer-class",
       },
     }),
     columnHelper.accessor("dateCreated", {