Add css class to columns header (#2018)

* Add css class to columns header

* Fixed the requested Changes

* Fixed the required changes

* Remove unecessary spaces

* Remove unecessary spaces again

* Test For tableUtils

* empty and undefined strings resolves to empty

* Adding example

* fixed columa_name_styling script

* changed column name to be consistent with the sytle

* Added spaces in example

* Add job for example

* Fixed example file and restored the deleted files

* commit to remove the non edited files

* Update aws_s3.py

* Update aws_s3.py

* Update config.pyi

* Update config.pyi

* Update aws_s3.py

* Update data_node_config.py

* Update data_node_config.py

* Update _adapters.py

* Update _adapters.py

* Update README.md

* Update README.md

* fixing linter and spell error

* Update column_name_styling.py

* Update column_name_styling.py

* Update PaginatedTable.tsx

* Update AutoLoadingTable.tsx

* Update AutoLoadingTable.tsx

---------

Co-authored-by: Fred Lefévère-Laoide <90181748+FredLL-Avaiga@users.noreply.github.com>
Co-authored-by: Jean-Robin <jeanrobin.medori@avaiga.com>

doc/gui/examples/controls/column_name_styling.py

@@ -0,0 +1,21 @@
+# Example for column name styling for header
+
+import pandas as pd
+
+from taipy.gui import Gui, Markdown
+
+# Sample data in DataFrame format
+df = pd.DataFrame({
+    "Name": ["Alice", "Bob", "Charlie"],
+    "Age": [25, 30, 35],
+    "Job or Occupation": ["Engineer", "Doctor", "Artist"]
+})
+
+
+# Page content with table and header styling
+page = Markdown("""
+<|table|data={df}|columns={columns}|>
+""", style={".taipy-table-name": {"color": "blue"}, ".taipy-table-job-or-occupation": {"color": "green"}})
+
+if __name__ == "__main__":
+    Gui(page).run(title="Column Name Styling Example")

frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.tsx

@@ -31,6 +31,7 @@ import AddIcon from "@mui/icons-material/Add";
 import DataSaverOn from "@mui/icons-material/DataSaverOn";
 import DataSaverOff from "@mui/icons-material/DataSaverOff";
 import Download from "@mui/icons-material/Download";
+import { generateHeaderClassName } from "./tableUtils";
 
 import {
     createRequestInfiniteTableUpdateAction,
@@ -604,7 +605,11 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
                                         <TableCell
                                             key={`head${columns[col].dfid}`}
                                             sortDirection={orderBy === columns[col].dfid && order}
-                                            sx={columns[col].width ? { width: columns[col].width } : undefined}
+                                            sx={columns[col].width ? { width: columns[col].width } : {}}
+                                            className={col === "EDIT_COL"
+                                                ? getSuffixedClassNames(className, "-action")
+                                                : getSuffixedClassNames(className, generateHeaderClassName(columns[col].dfid))
+                                            }
                                         >
                                             {columns[col].dfid === EDIT_COL ? (
                                                 [

frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx

@@ -41,6 +41,7 @@ import TableSortLabel from "@mui/material/TableSortLabel";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { visuallyHidden } from "@mui/utils";
+import { generateHeaderClassName } from "./tableUtils";
 
 import { createRequestTableUpdateAction, createSendActionNameAction } from "../../context/taipyReducers";
 import { emptyArray } from "../../utils";
@@ -528,6 +529,10 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                                                     ? { minWidth: `${100 / nbWidth}%` }
                                                     : undefined
                                             }
+                                            className={col === "EDIT_COL"
+                                                ? getSuffixedClassNames(className, "-action")
+                                                : getSuffixedClassNames(className, generateHeaderClassName(columns[col].dfid))
+                                            }
                                         >
                                             {columns[col].dfid === EDIT_COL ? (
                                                 [

frontend/taipy-gui/src/components/Taipy/tableUtils.spec.ts

@@ -0,0 +1,28 @@
+import { generateHeaderClassName } from "./tableUtils";
+
+describe("generateHeaderClassName", () => {
+    it("should generate a CSS class name with a hyphen prefix and convert to lowercase", () => {
+        const result = generateHeaderClassName("ColumnName");
+        expect(result).toBe("-columnname");
+    });
+
+    it("should replace spaces and special characters with hyphens", () => {
+        const result = generateHeaderClassName("Column Name@123!");
+        expect(result).toBe("-column-name-123-");
+    });
+
+    it("should remove multiple hyphens in a row", () => {
+        const result = generateHeaderClassName("Column--Name");
+        expect(result).toBe("-column-name");
+    });
+
+    it("should handle empty strings and return an empty string", () => {
+        const result = generateHeaderClassName("");
+        expect(result).toBe("");
+    });
+
+    it("should return empty string for the undefined", () => {
+        const result = generateHeaderClassName(undefined);
+        expect(result).toBe("");
+    });
+});

frontend/taipy-gui/src/components/Taipy/tableUtils.tsx

@@ -47,6 +47,22 @@ import { TaipyActiveProps, TaipyMultiSelectProps, getSuffixedClassNames } from "
 /**
  * A column description as received by the backend.
  */
+
+/**
+ * Generates a  CSS class name for a table header.
+ * @param columnName - The name of the column.
+ * @returns for CSS class name.
+ */
+
+export const generateHeaderClassName = (columnName: string | undefined): string => {
+    // logic for the css header classname
+    if (!columnName){
+        // return an empty string if columname is undefined or empty
+        return "";
+    }
+    return '-' + columnName.replace(/\W+/g, '-').replace(/-+/g, '-').toLowerCase();
+};
+
 export interface ColumnDesc {
     /** The unique column identifier. */
     dfid: string;