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:
parent
3d5c00c613
commit
3a65ff4150
3 changed files with 17 additions and 5 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue