table partial editable should show add and delete action if not false (#1813)

* table partial editable should show add and delete action if not false

* format

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

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

@@ -39,7 +39,7 @@ import {
 } from "../../context/taipyReducers";
 import {
     ColumnDesc,
-    getsortByIndex,
+    getSortByIndex,
     Order,
     TaipyTableProps,
     baseBoxSx,
@@ -134,9 +134,9 @@ const Row = ({
             selected={selection.indexOf(index) > -1}
             onClick={onRowClick}
         >
-            {colsOrder.map((col, cidx) => (
+            {colsOrder.map((col, cIdx) => (
                 <EditableCell
-                    key={"val" + index + "-" + cidx}
+                    key={"val" + index + "-" + cIdx}
                     className={getClassName(rows[index], columns[col].style, col)}
                     tableClassName={tableClassName}
                     colDesc={columns[col]}
@@ -147,7 +147,7 @@ const Row = ({
                     onDeletion={onDeletion}
                     onSelection={onRowSelection}
                     nanValue={columns[col].nanValue || nanValue}
-                    tableCellProps={cellProps[cidx]}
+                    tableCellProps={cellProps[cIdx]}
                     tooltip={getTooltip(rows[index], columns[col].tooltip, col)}
                     comp={compRows && compRows[index] && compRows[index][col]}
                 />
@@ -277,11 +277,12 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
         e.stopPropagation();
     }, []);
 
-    const [colsOrder, columns, styles, tooltips, handleNan, filter] = useMemo(() => {
+    const [colsOrder, columns, styles, tooltips, handleNan, filter, partialEditable] = useMemo(() => {
         let hNan = !!props.nanValue;
         if (baseColumns) {
             try {
                 let filter = false;
+                let partialEditable = editable;
                 const newCols: Record<string, ColumnDesc> = {};
                 Object.entries(baseColumns).forEach(([cId, cDesc]) => {
                     const nDesc = (newCols[cId] = { ...cDesc });
@@ -289,20 +290,22 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
                         nDesc.filter = !!props.filter;
                     }
                     filter = filter || nDesc.filter;
-                    if (typeof nDesc.notEditable != "boolean") {
+                    if (typeof nDesc.notEditable == "boolean") {
                         nDesc.notEditable = !editable;
+                    } else {
+                        partialEditable = partialEditable || !nDesc.notEditable;
                     }
                     if (nDesc.tooltip === undefined) {
                         nDesc.tooltip = props.tooltip;
                     }
                 });
                 addDeleteColumn(
-                    (active && editable && (onAdd || onDelete) ? 1 : 0) +
+                    (active && partialEditable && (onAdd || onDelete) ? 1 : 0) +
                         (active && filter ? 1 : 0) +
                         (active && downloadable ? 1 : 0),
                     newCols
                 );
-                const colsOrder = Object.keys(newCols).sort(getsortByIndex(newCols));
+                const colsOrder = Object.keys(newCols).sort(getSortByIndex(newCols));
                 const styTt = colsOrder.reduce<Record<string, Record<string, string>>>((pv, col) => {
                     if (newCols[col].style) {
                         pv.styles = pv.styles || {};
@@ -319,7 +322,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
                     styTt.styles = styTt.styles || {};
                     styTt.styles[LINE_STYLE] = props.lineStyle;
                 }
-                return [colsOrder, newCols, styTt.styles, styTt.tooltips, hNan, filter];
+                return [colsOrder, newCols, styTt.styles, styTt.tooltips, hNan, filter, partialEditable];
             } catch (e) {
                 console.info("ATable.columns: " + ((e as Error).message || e));
             }
@@ -331,6 +334,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
             {} as Record<string, string>,
             hNan,
             false,
+            false,
         ];
     }, [
         active,
@@ -545,7 +549,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
             selection: selected,
             formatConfig: formatConfig,
             onValidation: active && onEdit ? onCellValidation : undefined,
-            onDeletion: active && editable && onDelete ? onRowDeletion : undefined,
+            onDeletion: active && (editable || partialEditable) && onDelete ? onRowDeletion : undefined,
             onRowSelection: active && onAction ? onRowSelection : undefined,
             onRowClick: active && onAction ? onRowClick : undefined,
             lineStyle: props.lineStyle,
@@ -563,6 +567,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
             selected,
             formatConfig,
             editable,
+            partialEditable,
             onEdit,
             onCellValidation,
             onDelete,
@@ -594,7 +599,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
                                         >
                                             {columns[col].dfid === EDIT_COL ? (
                                                 [
-                                                    active && editable && onAdd ? (
+                                                    active && (editable || partialEditable) && onAdd ? (
                                                         <Tooltip title="Add a row" key="addARow">
                                                             <IconButton
                                                                 onClick={onAddRowClick}

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

@@ -49,7 +49,7 @@ import {
     EditableCell,
     EDIT_COL,
     getClassName,
-    getsortByIndex,
+    getSortByIndex,
     headBoxSx,
     LINE_STYLE,
     OnCellValidation,
@@ -84,7 +84,7 @@ import { getSuffixedClassNames, getUpdateVar } from "./utils";
 import { emptyArray } from "../../utils";
 
 const loadingStyle: CSSProperties = { width: "100%", height: "3em", textAlign: "right", verticalAlign: "center" };
-const skelSx = { width: "100%", height: "3em" };
+const skeletonSx = { width: "100%", height: "3em" };
 
 const rowsPerPageOptions: PageSizeOptionsType = [10, 50, 100, 500];
 
@@ -131,11 +131,12 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
     const baseColumns = useDynamicJsonProperty(props.columns, props.defaultColumns, defaultColumns);
 
-    const [colsOrder, columns, styles, tooltips, handleNan, filter] = useMemo(() => {
+    const [colsOrder, columns, styles, tooltips, handleNan, filter, partialEditable] = useMemo(() => {
         let hNan = !!props.nanValue;
         if (baseColumns) {
             try {
                 let filter = false;
+                let partialEditable = editable;
                 const newCols: Record<string, ColumnDesc> = {};
                 Object.entries(baseColumns).forEach(([cId, cDesc]) => {
                     const nDesc = (newCols[cId] = { ...cDesc });
@@ -143,7 +144,9 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                         nDesc.filter = !!props.filter;
                     }
                     filter = filter || nDesc.filter;
-                    if (typeof nDesc.notEditable != "boolean") {
+                    if (typeof nDesc.notEditable == "boolean") {
+                        partialEditable = partialEditable || !nDesc.notEditable;
+                    } else {
                         nDesc.notEditable = !editable;
                     }
                     if (nDesc.tooltip === undefined) {
@@ -151,12 +154,12 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                     }
                 });
                 addDeleteColumn(
-                    (active && editable && (onAdd || onDelete) ? 1 : 0) +
+                    (active && partialEditable && (onAdd || onDelete) ? 1 : 0) +
                         (active && filter ? 1 : 0) +
                         (active && downloadable ? 1 : 0),
                     newCols
                 );
-                const colsOrder = Object.keys(newCols).sort(getsortByIndex(newCols));
+                const colsOrder = Object.keys(newCols).sort(getSortByIndex(newCols));
                 const styTt = colsOrder.reduce<Record<string, Record<string, string>>>((pv, col) => {
                     if (newCols[col].style) {
                         pv.styles = pv.styles || {};
@@ -173,7 +176,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                     styTt.styles = styTt.styles || {};
                     styTt.styles[LINE_STYLE] = props.lineStyle;
                 }
-                return [colsOrder, newCols, styTt.styles, styTt.tooltips, hNan, filter];
+                return [colsOrder, newCols, styTt.styles, styTt.tooltips, hNan, filter, partialEditable];
             } catch (e) {
                 console.info("PaginatedTable.columns: ", (e as Error).message || e);
             }
@@ -185,6 +188,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
             {} as Record<string, string>,
             hNan,
             false,
+            false,
         ];
     }, [
         active,
@@ -482,7 +486,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                                         >
                                             {columns[col].dfid === EDIT_COL ? (
                                                 [
-                                                    active && editable && onAdd ? (
+                                                    active && (editable || partialEditable) && onAdd ? (
                                                         <Tooltip title="Add a row" key="addARow">
                                                             <IconButton
                                                                 onClick={onAddRowClick}
@@ -580,9 +584,9 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                                             data-index={index}
                                             onClick={active && onAction ? onRowClick : undefined}
                                         >
-                                            {colsOrder.map((col, cidx) => (
+                                            {colsOrder.map((col, cIdx) => (
                                                 <EditableCell
-                                                    key={"val" + index + "-" + cidx}
+                                                    key={"val" + index + "-" + cIdx}
                                                     className={getClassName(row, columns[col].style, col)}
                                                     tableClassName={className}
                                                     colDesc={columns[col]}
@@ -595,7 +599,9 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                                                             : undefined
                                                     }
                                                     onDeletion={
-                                                        active && editable && onDelete ? onRowDeletion : undefined
+                                                        active && (editable || partialEditable) && onDelete
+                                                            ? onRowDeletion
+                                                            : undefined
                                                     }
                                                     onSelection={active && onAction ? onRowSelection : undefined}
                                                     nanValue={columns[col].nanValue || props.nanValue}
@@ -609,10 +615,10 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                                 {rows.length == 0 &&
                                     loading &&
                                     Array.from(Array(30).keys(), (v, idx) => (
-                                        <TableRow hover key={"rowskel" + idx}>
-                                            {colsOrder.map((col, cidx) => (
-                                                <TableCell key={"skel" + cidx}>
-                                                    <Skeleton sx={skelSx} />
+                                        <TableRow hover key={"rowSkel" + idx}>
+                                            {colsOrder.map((col, cIdx) => (
+                                                <TableCell key={"skel" + cIdx}>
+                                                    <Skeleton sx={skeletonSx} />
                                                 </TableCell>
                                             ))}
                                         </TableRow>

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

@@ -30,7 +30,7 @@ import Tooltip from "@mui/material/Tooltip";
 import { DateField, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
 
-import { ColumnDesc, defaultDateFormat, getsortByIndex, iconInRowSx } from "./tableUtils";
+import { ColumnDesc, defaultDateFormat, getSortByIndex, iconInRowSx } from "./tableUtils";
 import { getDateTime, getTypeFromDf } from "../../utils";
 import { getSuffixedClassNames } from "./utils";
 
@@ -323,7 +323,7 @@ const TableFilter = (props: TableFilterProps) => {
         if (props.colsOrder) {
             return props.colsOrder;
         }
-        return Object.keys(columns).sort(getsortByIndex(columns));
+        return Object.keys(columns).sort(getSortByIndex(columns));
     }, [props.colsOrder, columns]);
 
     const onShowFilterClick = useCallback(() => setShowFilter((f) => !f), []);

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

@@ -28,7 +28,7 @@ import Switch from "@mui/material/Switch";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 
-import { ColumnDesc, getsortByIndex, iconInRowSx } from "./tableUtils";
+import { ColumnDesc, getSortByIndex, iconInRowSx } from "./tableUtils";
 import { getSuffixedClassNames } from "./utils";
 
 export interface SortDesc {
@@ -181,7 +181,7 @@ const TableSort = (props: TableSortProps) => {
         if (props.colsOrder) {
             return props.colsOrder;
         }
-        return Object.keys(columns).sort(getsortByIndex(columns));
+        return Object.keys(columns).sort(getSortByIndex(columns));
     }, [props.colsOrder, columns]);
 
     const onShowSortClick = useCallback(() => setShowSort((f) => !f), []);

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

@@ -197,7 +197,7 @@ interface EditableCellProps {
 
 export const defaultColumns = {} as Record<string, ColumnDesc>;
 
-export const getsortByIndex = (cols: Record<string, ColumnDesc>) => (key1: string, key2: string) =>
+export const getSortByIndex = (cols: Record<string, ColumnDesc>) => (key1: string, key2: string) =>
     cols[key1].index < cols[key2].index ? -1 : cols[key1].index > cols[key2].index ? 1 : 0;
 
 const formatValue = (val: RowValue, col: ColumnDesc, formatConf: FormatConfig, nanValue?: string): string => {