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

Code before:
            onRowDeletion,
            onAction,
            onRowSelection,
            onRowClick,
            props.rowClassName,
            props.nanValue,
            size,
        ]
    );

    const boxSx = useMemo(() => ({ ...baseBoxSx, width: width }), [width]);

    return (
        <Box id={id} sx={boxSx} className={`${className} ${getSuffixedClassNames(className, "-autoloading")} ${getComponentClassName(props.children)}`}>
            <Paper sx={paperSx}>
                <Tooltip title={hover || ""}>
                    <TableContainer>
                        <MuiTable sx={tableSx} aria-labelledby="tableTitle" size={size} stickyHeader={true}>
                            <TableHead>
                                <TableRow ref={headerRow}>
                                    {colsOrder.map((col, index) => (
                                        <TableCell
                                            key={`head${columns[col].dfid}`}
                                            sortDirection={orderBy === columns[col].dfid && order}
                                            sx={columns[col].width ? { width: columns[col].width } : {}}
                                            className={generateHeaderClassName(columns[col].title || columns[col].dfid, index)}
                                        >
                                            {columns[col].dfid === EDIT_COL ? (
                                                [
                                                    active && (editable || partialEditable) && onAdd ? (
                                                        <Tooltip title="Add a row" key="addARow">
                                                            <IconButton
                                                                onClick={onAddRowClick}
                                                                size="small"
                                                                sx={iconInRowSx}
                                                            >
                                                                <AddIcon fontSize="inherit" />
                                                            </IconButton>
                                                        </Tooltip>
                                                    ) : null,
                                                    active && filter ? (
                                                        <TableFilter
                                                            key="filter"
                                                            columns={columns}
                                                            colsOrder={colsOrder}
                                                            onValidate={setAppliedFilters}
                                                            appliedFilters={appliedFilters}
                                                            className={className}
                                                            filteredCount={filteredCount}
                                                        />
                                                    ) : null,

Review comment (suggestion):
- `columns[col].dfid` is enough
- No index please (it would be the responsability of the developper to handle identical class names
- use `getSuffixedClassNames(className, generateHeaderClassName(columns[col].dfid)` to get the current prefix

Code after:
            onRowDeletion,
            onAction,
            onRowSelection,
            onRowClick,
            props.rowClassName,
            props.nanValue,
            size,
        ]
    );

    const boxSx = useMemo(() => ({ ...baseBoxSx, width: width }), [width]);

    return (
        <Box id={id} sx={boxSx} className={`${className} ${getSuffixedClassNames(className, "-autoloading")} ${getComponentClassName(props.children)}`}>
            <Paper sx={paperSx}>
                <Tooltip title={hover || ""}>
                    <TableContainer>
                        <MuiTable sx={tableSx} aria-labelledby="tableTitle" size={size} stickyHeader={true}>
                            <TableHead>
                                <TableRow ref={headerRow}>
                                    {colsOrder.map((col) => (
                                        <TableCell
                                            key={`head${columns[col].dfid}`}
                                            sortDirection={orderBy === columns[col].dfid && order}
                                            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 ? (
                                                [
                                                    active && (editable || partialEditable) && onAdd ? (
                                                        <Tooltip title="Add a row" key="addARow">
                                                            <IconButton
                                                                onClick={onAddRowClick}
                                                                size="small"
                                                                sx={iconInRowSx}
                                                            >
                                                                <AddIcon fontSize="inherit" />
                                                            </IconButton>
                                                        </Tooltip>
                                                    ) : null,
                                                    active && filter ? (
                                                        <TableFilter
                                                            key="filter"
                                                            columns={columns}
                                                            colsOrder={colsOrder}
                                                            onValidate={setAppliedFilters}
                                                            appliedFilters={appliedFilters}
                                                            className={className}