@sio-group/ui-datatable 0.1.9 → 0.1.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sio-group/ui-datatable
 
+## 0.1.11
+
+### Patch Changes
+
+- Fix: add column type to inline editable fields
+
+## 0.1.10
+
+### Patch Changes
+
+- Fix
+
 ## 0.1.9
 
 ### Patch Changes

package/dist/index.cjs

@@ -340,6 +340,7 @@ var InlineInputCell = ({
   formField,
   item,
   value,
+  column,
   updateData
 }) => {
   const [showEdit, setShowEdit] = (0, import_react3.useState)(false);
@@ -420,7 +421,7 @@ var InlineInputCell = ({
       )
     ] })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    value,
+    renderValue({ value, column, item, formFields: [], updateData }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_ui_core3.Button,
       {
@@ -461,6 +462,7 @@ var renderValue = ({ value, column, item, formFields, updateData }) => {
       {
         value,
         item,
+        column,
         formField,
         updateData
       }

package/dist/index.js

@@ -314,6 +314,7 @@ var InlineInputCell = ({
   formField,
   item,
   value,
+  column,
   updateData
 }) => {
   const [showEdit, setShowEdit] = useState3(false);
@@ -394,7 +395,7 @@ var InlineInputCell = ({
       )
     ] })
   ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
-    value,
+    renderValue({ value, column, item, formFields: [], updateData }),
     /* @__PURE__ */ jsx7(
       Button3,
       {
@@ -435,6 +436,7 @@ var renderValue = ({ value, column, item, formFields, updateData }) => {
       {
         value,
         item,
+        column,
         formField,
         updateData
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sio-group/ui-datatable",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/cell-types/InlineInputCell.tsx

@@ -1,11 +1,13 @@
 import {useEffect, useState} from "react";
 import {Button} from "@sio-group/ui-core";
 import {InlineInputCellProps} from "../../types/data-table-props";
+import {renderValue} from "../../utils/render-value";
 
 export const InlineInputCell = <T extends { id: string | number }>({
     formField,
     item,
     value,
+    column,
     updateData,
 }: InlineInputCellProps<T>) => {
     const [showEdit, setShowEdit] = useState(false);
@@ -65,7 +67,7 @@ export const InlineInputCell = <T extends { id: string | number }>({
                             type="text"
                             id={formField.name}
                             name={formField.name}
-                            value={(fieldValue as string) ?? ''}
+                            value={(fieldValue ?? '') as string}
                             onChange={(e) => setFieldValue(e.target.value)}
                             autoFocus={true}
                         />
@@ -92,7 +94,7 @@ export const InlineInputCell = <T extends { id: string | number }>({
                 </form>
             ) : (
                 <>
-                    {value}
+                    {renderValue({value, column, item, formFields: [], updateData})}
                     <Button
                         variant="link"
                         onClick={() => setShowEdit(true)}

package/src/types/data-table-props.d.ts

@@ -48,5 +48,6 @@ export interface InlineInputCellProps<T extends { id: string | number }> {
     formField: FormField;
     item: T;
     value: T[keyof T];
+    column: Column<T>;
     updateData?: (id: string | number, values: Partial<T>) => void;
 }

package/src/utils/render-value.tsx

@@ -17,6 +17,7 @@ export const renderValue = <T extends { id: string | number }> ({value, column,
             <InlineInputCell
                 value={value}
                 item={item}
+                column={column}
                 formField={formField}
                 updateData={updateData}
             />