From 86597e5fe08bb1e59e6277ddab6eaa041848a68b Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Fri, 3 Jan 2025 14:00:38 +0100 Subject: [PATCH 1/4] - saving progress; --- src/assets/scss/components/formBuilder.scss | 64 ++++++++- .../components/ElementSetting/index.js | 2 +- .../ElementSettingTableColumns/index.js | 126 +++++++++++++----- 3 files changed, 153 insertions(+), 39 deletions(-) diff --git a/src/assets/scss/components/formBuilder.scss b/src/assets/scss/components/formBuilder.scss index 0eac29a..40ba8ca 100644 --- a/src/assets/scss/components/formBuilder.scss +++ b/src/assets/scss/components/formBuilder.scss @@ -191,16 +191,70 @@ } .formElementSettings__repeater { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: 1fr; gap: 0.5rem; } .formElementSettings__repeaterItem { + display: grid; + grid-template-columns: 4.5fr 2.4fr 1fr 1.4fr 0.7fr; + gap: 12px; + > div { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + + input, select, .p-dropdown { + width: 100%; + box-sizing: border-box; + } + } } -.formElementSettings__subRepeater { - padding: 10px 20px; - background-color: #f9f9f9; +.formElementSettings__subRepeaterWrapper { + display: grid; + grid-template-columns: 1fr; + gap: 7px; +} + +.formElementSettings__subRepeaterItem { + display: grid; + grid-template-columns: 9.3fr 0.7fr; + gap: 12px; + + > div { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + + input, select, .p-dropdown { + width: 100%; + box-sizing: border-box; + } + } +} + +.formElementSettings__repeaterItemIconBtn { + border: none; + background: transparent; + padding: 0; + font-size: 2rem; + color: var(--table-border-color); + + i { + font-size: 2rem; + } + + &:hover { + cursor: pointer; + color: var(--menuitem-active-background); + } + + &:not([data-active="false"]) { + color: var(--menuitem-active-background); + } } \ No newline at end of file diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js index 1da64fa..a226f8c 100644 --- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js +++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js @@ -22,7 +22,7 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => { options: __('Opzioni', 'gepafin'), mime: __('Tipo di file', 'gepafin'), text: __('Testo formattato', 'gepafin'), - table_columns: __('Colonne', 'gepafin'), + table_columns: '', } const renderHeader = () => { diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js index ee5d9aa..fa3320d 100644 --- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js +++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { wrap } from 'object-path-immutable'; import { pathOr } from 'ramda'; @@ -10,6 +10,7 @@ import { InputSwitch } from 'primereact/inputswitch'; // tools import uniqid from '../../../../../../helpers/uniqid'; +import { Dropdown } from 'primereact/dropdown'; const ElementSettingTableColumns = ({ value, @@ -55,6 +56,16 @@ const ElementSettingTableColumns = ({ setStateFieldData(newData); } + const onTypeChange = (value, index) => { + const newData = stateFieldData.map((o, i) => { + if (i === index) { + o.fieldtype = value; + } + return o; + }) + setStateFieldData(newData); + } + const onSubInputChange = (e, name, index) => { const { value } = e.target; const newRowsData = wrap(rowsData).set([index, name], value).value(); @@ -83,21 +94,69 @@ const ElementSettingTableColumns = ({ setStateFieldData(newData); } - const properField = (item, i) => { + const setColFormulaChecked = (index) => { + const newData = stateFieldData.map((o, i) => { + if (i === index) { + o.enableFormula = o.enableFormula !== true; + } + return o; + }); + setStateFieldData(newData); + } + + const properFields = (item, i) => { return <> - onInputChange(e, i)}/> -
- {__('Predefinito?', 'gepafin')} +
+ onInputChange(e, i)}/> +
+
+ onTypeChange(e.value, i)} + options={[ + { value: 'text', label: __('Testo', 'gepafin') }, + { value: 'number', label: __('Numerico', 'gepafin') } + ]}/> +
+
+ +
+
setChecked(e.value, i)}/>
+
+
} const properSubField = (item, i, name) => { - return onSubInputChange(e, name, i)}/> + return <> +
+ onSubInputChange(e, name, i)}/> +
+
+
+ } useEffect(() => { @@ -119,39 +178,40 @@ const ElementSettingTableColumns = ({ return ( <>
+ {stateFieldData.length > 0 + ?
+
{__('Colonne', 'gepafin')}
+
{__('Tipo', 'gepafin')}
+
{__('Calcola', 'gepafin')}
+
{__('Predefinito?', 'gepafin')}
+
+
: null} {stateFieldData.map((o, i) =>
-
- {properField(o, i)} -
+ {properFields(o, i)}
)} -
{stateFieldData - .filter(o => o.predefined) - .map((o, i) =>
-
- -
- {rowsData.map((c, k) => { - return
-
+ .filter(o => o.predefined).length > 0 + ?
+ {stateFieldData + .filter(o => o.predefined) + .map((o, i) => +
+ {rowsData.map((c, k) => { + return
{properSubField(c, k, o.name)} -
-
- })} -
-
-
)} + })} +
)} +
+ : null} ) } From f052be6ce891d2c6941e471f7831167298426fad Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Tue, 7 Jan 2025 11:33:18 +0100 Subject: [PATCH 2/4] - added accordions for table rows; --- src/pages/BandoForms/index.js | 32 +++++++------- .../ElementSettingTableColumns/index.js | 44 +++++++++++-------- 2 files changed, 43 insertions(+), 33 deletions(-) diff --git a/src/pages/BandoForms/index.js b/src/pages/BandoForms/index.js index db0fdff..1f57fa4 100644 --- a/src/pages/BandoForms/index.js +++ b/src/pages/BandoForms/index.js @@ -290,21 +290,23 @@ const BandoForms = () => {

{__('Modifica form esistente', 'gepafin')}

{__('Continua a lavorare su un form precedentemente salvato', 'gepafin')}

- setSelectedForm(e.value)} - options={forms} - optionLabel="label" - placeholder={__('Seleziona form', 'gepafin')}/> -
diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js index fa3320d..fd6212a 100644 --- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js +++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { __, sprintf } from '@wordpress/i18n'; import { wrap } from 'object-path-immutable'; -import { pathOr } from 'ramda'; +import { isEmpty, pathOr } from 'ramda'; // components import { InputText } from 'primereact/inputtext'; @@ -11,6 +11,7 @@ import { InputSwitch } from 'primereact/inputswitch'; // tools import uniqid from '../../../../../../helpers/uniqid'; import { Dropdown } from 'primereact/dropdown'; +import { Accordion, AccordionTab } from 'primereact/accordion'; const ElementSettingTableColumns = ({ value, @@ -109,7 +110,7 @@ const ElementSettingTableColumns = ({
onInputChange(e, i)}/>
@@ -173,7 +174,7 @@ const ElementSettingTableColumns = ({ }); }, [stateFieldData, rowsData]); - stateFieldData.filter(o => o.predefined) + //stateFieldData.filter(o => o.predefined) return ( <> @@ -195,21 +196,28 @@ const ElementSettingTableColumns = ({ {stateFieldData .filter(o => o.predefined).length > 0 ?
- {stateFieldData - .filter(o => o.predefined) - .map((o, i) => -
- {rowsData.map((c, k) => { - return
- {properSubField(c, k, o.name)} -
- })} -
)} + + {stateFieldData + //.filter(o => o.predefined) + .map((o, i) => + o.predefined + ? +
+ {rowsData.map((c, k) => { + return
+ {properSubField(c, k, o.name)} +
+ })} +
+ : null)} +
: null} From 68f6152e6fd6857608f84931ede3cf0a5d8edf4e Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Wed, 8 Jan 2025 11:20:27 +0100 Subject: [PATCH 3/4] - added render for last row with autosum; --- src/assets/scss/components/formBuilder.scss | 39 +++++++++ .../components/DefaultCell/index.js | 20 +++++ .../components/LastRowCell/index.js | 21 +++++ .../components/NumericFormulaCell/index.js | 29 +++++++ .../components/Table/RenderTable/index.js | 40 +++++---- .../FormField/components/Table/index.js | 50 ++++++++--- .../ElementSettingTableColumns/index.js | 83 +++++++++++++++++-- src/pages/BandoFormsPreview/index.js | 4 +- 8 files changed, 252 insertions(+), 34 deletions(-) create mode 100644 src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js create mode 100644 src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js create mode 100644 src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js diff --git a/src/assets/scss/components/formBuilder.scss b/src/assets/scss/components/formBuilder.scss index 40ba8ca..9f70641 100644 --- a/src/assets/scss/components/formBuilder.scss +++ b/src/assets/scss/components/formBuilder.scss @@ -257,4 +257,43 @@ &:not([data-active="false"]) { color: var(--menuitem-active-background); } +} + +.formElementSettings__lastRowHeader { + display: grid; + grid-template-columns: 8.3fr 1.7fr; + gap: 7px; +} + +.formElementSettings__lastRowHeaderTitle { + display: flex; + height: 40px; + padding: 10.5px 17.5px; + justify-content: center; + align-items: center; + border-radius: 4px; + background: #f8f9fa; + border: 1px solid #dee2e6; + font-size: 14px; + font-style: normal; + font-weight: 700; + color: white; +} + +.formElementSettings__lastRowItem { + display: grid; + grid-template-columns: 1.7fr 8.3fr; + gap: 7px; + + > div { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + + input, select, .p-dropdown { + width: 100%; + box-sizing: border-box; + } + } } \ No newline at end of file diff --git a/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js b/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js new file mode 100644 index 0000000..4a3086e --- /dev/null +++ b/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js @@ -0,0 +1,20 @@ +const DefaultCell = ({ getValue, row: { index }, column: { id }, table }) => { + const initialValue = getValue(); + const disabled = table.options.meta?.disabled; + + const onBlur = (e) => { + table.options.meta?.updateData(index, id, e.target.value); + }; + + return ( + table.options.meta?.updateData(index, id, e.target.value)} + onBlur={onBlur} + className="w-full px-2 py-1 border rounded" + /> + ); +}; + +export default DefaultCell; \ No newline at end of file diff --git a/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js b/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js new file mode 100644 index 0000000..cb56a61 --- /dev/null +++ b/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js @@ -0,0 +1,21 @@ +import { head, isEmpty, isNil, sum } from 'ramda'; + +const LastRowCell = ({columnId, lastRows, columnMeta = {}, getColumnDataFn}) => { + const cellData = head(lastRows.filter(o => !isNil(o[columnId]))); + let cellValue = cellData[columnId]; + + if (columnMeta.enableFormula) { + const getAllRowsValues = getColumnDataFn(columnId) + .map(v => isEmpty(v) ? 0 : v); + + if (cellValue === 'sum') { + cellValue = sum(getAllRowsValues); + } else { + cellValue = 0; + } + } + + return {cellValue}; +}; + +export default LastRowCell; \ No newline at end of file diff --git a/src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js b/src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js new file mode 100644 index 0000000..089bc82 --- /dev/null +++ b/src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js @@ -0,0 +1,29 @@ +const NumericFormulaCell = ({ getValue, row: { index }, column: { id }, table }) => { + const initialValue = getValue(); + const disabled = table.options.meta?.disabled; + + const onBlur = (e) => { + const numValue = e.target.value === 0 ? null : Number(e.target.value); + table.options.meta?.updateData(index, id, numValue); + }; + + const onChange = (e) => { + if (e.target.value === 0 || !isNaN(e.target.value)) { + table.options.meta?.updateData(index, id, e.target.value); + } + }; + + return ( + + ); +}; + +export default NumericFormulaCell; \ No newline at end of file diff --git a/src/components/FormField/components/Table/RenderTable/index.js b/src/components/FormField/components/Table/RenderTable/index.js index e30ac5e..604a453 100644 --- a/src/components/FormField/components/Table/RenderTable/index.js +++ b/src/components/FormField/components/Table/RenderTable/index.js @@ -1,31 +1,22 @@ import React from 'react'; import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'; import { wrap } from 'object-path-immutable'; +import { isEmpty } from 'ramda'; -const RenderTable = ({ data, columns, setRowsFn, disabled }) => { +// components +import DefaultCell from './components/DefaultCell'; +import LastRowCell from './components/LastRowCell'; + +const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => { const table = useReactTable({ data, columns, defaultColumn: { - cell: ({ getValue, row: { index }, column: { id }, table }) => { - const initialValue = getValue(); - - const onBlur = (e) => { - table.options.meta?.updateData(index, id, e.target.value); - }; - - return ( - table.options.meta?.updateData(index, id, e.target.value)} - onBlur={onBlur} - /> - ); - }, + cell: DefaultCell }, getCoreRowModel: getCoreRowModel(), meta: { + disabled, updateData: (rowIndex, columnId, value) => { const newRowsData = wrap(data).set([rowIndex, columnId], value).value(); setRowsFn(newRowsData); @@ -33,6 +24,11 @@ const RenderTable = ({ data, columns, setRowsFn, disabled }) => { } }); + const getColumnData = (columnId) => { + const rows = table.getRowModel().rows; + return rows.map(row => row.getValue(columnId)); + }; + return ( @@ -72,6 +68,16 @@ const RenderTable = ({ data, columns, setRowsFn, disabled }) => { ); })} + {!isEmpty(lastRow) + ? + {columns.map((o) => )} + + : null}
) diff --git a/src/components/FormField/components/Table/index.js b/src/components/FormField/components/Table/index.js index d08e21e..8ebd19b 100644 --- a/src/components/FormField/components/Table/index.js +++ b/src/components/FormField/components/Table/index.js @@ -10,6 +10,7 @@ import { Button } from 'primereact/button'; import RenderTable from './RenderTable'; import { klona } from 'klona'; import { nonEmptyTables } from '../../../../helpers/validators'; +import NumericFormulaCell from './RenderTable/components/NumericFormulaCell'; const Table = ({ fieldName, @@ -25,6 +26,7 @@ const Table = ({ const [columnsCfg, setColumnsCfg] = useState([]); const [rowsCfg, setRowsCfg] = useState([]); const [columns, setColumns] = useState([]); + const [lastRow, setLastRow] = useState([]); const [rows, setRows] = useState(null); const [shouldDisableNewRows, setShouldDisableNewRows] = useState(false); const [rowIndexToDelete, rowRowIndexToDelete] = useState(null); @@ -72,19 +74,23 @@ const Table = ({ useEffect(() => { let shouldDisableNewRows = false; - let newColumns = columnsCfg.map((o) => { const item = { accessorKey: o.name, header: () => o.label, - footer: (props) => props.column.id + footer: (props) => props.column.id, + meta: { + predefined: o.predefined, + enableFormula: o.enableFormula, + fieldtype: o.fieldtype + } } if (o.predefined) { shouldDisableNewRows = true; - item.cell = (info) => { - return info.getValue(); - } + item.cell = (info) => info.getValue(); + } else if (o.enableFormula || o.fieldtype === 'numeric') { + item.cell = NumericFormulaCell; } return item; @@ -97,7 +103,7 @@ const Table = ({ accessorKey: 'actions', header: () => '', footer: (props) => props.column.id, - cell: ({row: { index }}) =>
: null} ) } diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js index fd6212a..49af3a1 100644 --- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js +++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { __, sprintf } from '@wordpress/i18n'; import { wrap } from 'object-path-immutable'; import { isEmpty, pathOr } from 'ramda'; @@ -57,6 +57,17 @@ const ElementSettingTableColumns = ({ setStateFieldData(newData); } + const onLastRowInputChange = (e, index) => { + const { value } = e.target; + const newData = stateFieldData.map((o, i) => { + if (i === index) { + o.lastRowText = value; + } + return o; + }) + setStateFieldData(newData); + } + const onTypeChange = (value, index) => { const newData = stateFieldData.map((o, i) => { if (i === index) { @@ -67,6 +78,16 @@ const ElementSettingTableColumns = ({ setStateFieldData(newData); } + const onLastRowFormulaChange = (value, index) => { + const newData = stateFieldData.map((o, i) => { + if (i === index) { + o.lastRowFormula = value; + } + return o; + }) + setStateFieldData(newData); + } + const onSubInputChange = (e, name, index) => { const { value } = e.target; const newRowsData = wrap(rowsData).set([index, name], value).value(); @@ -98,7 +119,17 @@ const ElementSettingTableColumns = ({ const setColFormulaChecked = (index) => { const newData = stateFieldData.map((o, i) => { if (i === index) { - o.enableFormula = o.enableFormula !== true; + const newVal = o.enableFormula !== true; + o.enableFormula = newVal; + if (newVal) { + o.lastRowFormula = 'sum'; + o.fieldtype = 'numeric'; + delete o.lastRowText; + } else { + delete o.lastRowFormula; + delete o.fieldtype; + o.lastRowText = ''; + } } return o; }); @@ -115,11 +146,12 @@ const ElementSettingTableColumns = ({
onTypeChange(e.value, i)} options={[ { value: 'text', label: __('Testo', 'gepafin') }, - { value: 'number', label: __('Numerico', 'gepafin') } + { value: 'numeric', label: __('Numerico', 'gepafin') } ]}/>
@@ -160,6 +192,48 @@ const ElementSettingTableColumns = ({ } + const properFieldsLastRow = (item, i) => { + return <> +
+ {sprintf(__('Colonna %d'), i + 1)} +
+ {item.enableFormula + ?
+ onLastRowFormulaChange(e.value, i)} + options={[ + { value: 'sum', label: __('Somma automatica', 'gepafin') } + ]}/> +
+ :
+ onLastRowInputChange(e, i)}/> +
} + + } + + const lastRow = useCallback(() => { + return
+
+
+ {__('Definisci ultima righa', 'gepafin')} +
+
+ {stateFieldData.map((o, i) =>
+ {properFieldsLastRow(o, i)} +
)} +
+ }, [stateFieldData]); + useEffect(() => { const stateFieldData = pathOr([], ['stateFieldData'], value); setStateFieldData(stateFieldData); @@ -174,8 +248,6 @@ const ElementSettingTableColumns = ({ }); }, [stateFieldData, rowsData]); - //stateFieldData.filter(o => o.predefined) - return ( <>
@@ -220,6 +292,7 @@ const ElementSettingTableColumns = ({
: null} + {lastRow()} ) } diff --git a/src/pages/BandoFormsPreview/index.js b/src/pages/BandoFormsPreview/index.js index 8d34160..d9e3d30 100644 --- a/src/pages/BandoFormsPreview/index.js +++ b/src/pages/BandoFormsPreview/index.js @@ -155,8 +155,8 @@ const BandoFormsPreview = () => { }, {}); return ['paragraph'].includes(o.name) && text - ?
-
+ ?
+
{renderHtmlContent(text.value)}
From dc9f4d566d1773456ebb8984dd3539432496d971 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Wed, 8 Jan 2025 15:56:18 +0100 Subject: [PATCH 4/4] - fixed NaN value is given fo rundefined input values; --- .../Table/RenderTable/components/DefaultCell/index.js | 5 +++++ .../Table/RenderTable/components/LastRowCell/index.js | 2 +- .../Table/RenderTable/components/NumericFormulaCell/index.js | 5 +++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js b/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js index 4a3086e..6351f92 100644 --- a/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js +++ b/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js @@ -6,12 +6,17 @@ const DefaultCell = ({ getValue, row: { index }, column: { id }, table }) => { table.options.meta?.updateData(index, id, e.target.value); }; + const onFocus = (e) => { + e.target.select(); + } + return ( table.options.meta?.updateData(index, id, e.target.value)} onBlur={onBlur} + onFocus={onFocus} className="w-full px-2 py-1 border rounded" /> ); diff --git a/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js b/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js index cb56a61..3a35e77 100644 --- a/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js +++ b/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js @@ -6,7 +6,7 @@ const LastRowCell = ({columnId, lastRows, columnMeta = {}, getColumnDataFn}) => if (columnMeta.enableFormula) { const getAllRowsValues = getColumnDataFn(columnId) - .map(v => isEmpty(v) ? 0 : v); + .map(v => isEmpty(v) || isNil(v) ? 0 : v); if (cellValue === 'sum') { cellValue = sum(getAllRowsValues); diff --git a/src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js b/src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js index 089bc82..58a6f25 100644 --- a/src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js +++ b/src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js @@ -7,6 +7,10 @@ const NumericFormulaCell = ({ getValue, row: { index }, column: { id }, table }) table.options.meta?.updateData(index, id, numValue); }; + const onFocus = (e) => { + e.target.select(); + } + const onChange = (e) => { if (e.target.value === 0 || !isNaN(e.target.value)) { table.options.meta?.updateData(index, id, e.target.value); @@ -19,6 +23,7 @@ const NumericFormulaCell = ({ getValue, row: { index }, column: { id }, table }) disabled={disabled} value={initialValue ?? 0} onChange={onChange} + onFocus={onFocus} onBlur={onBlur} step="any" className="w-full px-2 py-1 border rounded"