Repository: Avaiga/taipy
File: frontend/taipy-gui/src/components/Taipy/tableUtils.tsx (TypeScript)

Code before:
import ClearIcon from "@mui/icons-material/Clear";
import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from "@mui/icons-material/Delete";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
import { BaseDateTimePickerSlotProps } from "@mui/x-date-pickers/DateTimePicker/shared";
import { isValid } from "date-fns";

import { FormatConfig } from "../../context/taipyReducers";
import { dateToString, getDateTime, getDateTimeString, getNumberString, getTimeZonedDate } from "../../utils/index";
import { TaipyActiveProps, TaipyMultiSelectProps, getSuffixedClassNames } from "./utils";

/**
 * A column description as received by the backend.
 */

/**
 * Generates a unique CSS class name for a table header.
 * @param columnName - The name of the column.
 * @param index - The index of the column to ensure uniqueness.
 * @returns A sanitized and unique CSS class name.
 */

export const generateHeaderClassName = (columnName: string, index: number): string => {
    // Replace any character that's not A-Z, a-z, 0-9, hyphen, or underscore with a hyphen
    const sanitizedColumnName = columnName.replace(/[^A-Za-z0-9-_]/g, '-');
    return `taipy-table-header-${sanitizedColumnName}-${index}`;
};

export interface ColumnDesc {
    /** The unique column identifier. */
    dfid: string;
    /** The column type. */
    type: string;
    /** The value format. */
    format?: string;
    /** The column title. */
    title?: string;
    /** The order of the column. */
    index: number;
    /** The column width. */
    width?: number | string;
    /** If true, the column cannot be edited. */
    notEditable?: boolean;
    /** The name of the column that holds the CSS className to
     *  apply to the cells. */
    className?: string;
    /** The name of the column that holds the tooltip to
     *  show on the cells. */
    tooltip?: string;
    /** The name of the column that holds the formatted value to

Review comment (suggestion):
- `\W` would work also and is easier to read 
- would be nice to replace multiple `-` by 1 `-`
- make it lower case please

Code after:
import ClearIcon from "@mui/icons-material/Clear";
import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from "@mui/icons-material/Delete";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
import { BaseDateTimePickerSlotProps } from "@mui/x-date-pickers/DateTimePicker/shared";
import { isValid } from "date-fns";

import { FormatConfig } from "../../context/taipyReducers";
import { dateToString, getDateTime, getDateTimeString, getNumberString, getTimeZonedDate } from "../../utils/index";
import { TaipyActiveProps, TaipyMultiSelectProps, getSuffixedClassNames } from "./utils";

/**
 * 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;
    /** The column type. */
    type: string;
    /** The value format. */
    format?: string;
    /** The column title. */
    title?: string;
    /** The order of the column. */
    index: number;
    /** The column width. */
    width?: number | string;
    /** If true, the column cannot be edited. */
    notEditable?: boolean;
    /** The name of the column that holds the CSS className to
     *  apply to the cells. */
    className?: string;
    /** The name of the column that holds the tooltip to
     *  show on the cells. */