fix: changed badge to toggle on editable boolean fields on table component (#6956)

* Make column of type boolean use editor from TableAutoCellRender

* Adds editor to boolean cell

* Add boolean to isCustomEdit

---------

Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
This commit is contained in:
Lucas Oliveira 2025-03-07 16:12:07 -03:00 committed by GitHub
commit 3a65ff4150
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 17 additions and 5 deletions

View file

@ -141,7 +141,8 @@ export default function TableNodeComponent({
const isCustomEdit =
column.formatter &&
((column.formatter === "text" && column.edit_mode === "modal") ||
column.formatter === "json");
column.formatter === "json" ||
column.formatter === "boolean");
return {
field: column.name,
onUpdate: updateComponent,

View file

@ -5,6 +5,8 @@ import DateReader from "@/components/core/dateReaderComponent";
import { Badge } from "@/components/ui/badge";
import { cn, isTimeStampString } from "@/utils/utils";
import { CustomCellRendererProps } from "ag-grid-react";
import { uniqueId } from "lodash";
import ToggleShadComponent from "../../../toggleShadComponent";
interface CustomCellRender extends CustomCellRendererProps {
formatter?: "json" | "text" | "boolean" | "number" | "undefined" | "null";
@ -81,7 +83,18 @@ export default function TableAutoCellRender({
value === true
? true
: false;
return (
return !!colDef?.onCellValueChanged ||
!!api.getGridOption("onCellValueChanged") ? (
<ToggleShadComponent
value={value}
handleOnNewValue={(data) => {
setValue?.(data.value);
}}
editNode={true}
id={"toggle" + colDef?.colId + uniqueId()}
disabled={false}
/>
) : (
<Badge
variant={value ? "successStatic" : "errorStatic"}
size="sq"

View file

@ -1,6 +1,5 @@
import TableAutoCellRender from "@/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender";
import TableDropdownCellEditor from "@/components/core/parameterRenderComponent/components/tableComponent/components/tableDropdownCellEditor";
import TableToggleCellEditor from "@/components/core/parameterRenderComponent/components/tableComponent/components/tableToggleCellEditor";
import useAlertStore from "@/stores/alertStore";
import { ColumnField, FormatterType } from "@/types/utils/functions";
import { ColDef, ColGroupDef, ValueParserParams } from "ag-grid-community";
@ -594,8 +593,7 @@ export function FormatColumns(columns: ColumnField[]): ColDef<any>[] {
};
} else if (col.formatter === FormatterType.boolean) {
newCol.cellRenderer = TableAutoCellRender;
newCol.cellEditorPopup = false;
newCol.cellEditor = TableToggleCellEditor;
newCol.editable = false;
newCol.autoHeight = false;
newCol.cellClass = "no-border !py-2";
newCol.type = "boolean";