From c4f8fed079e88886609942bb9483fde0b785fd1d Mon Sep 17 00:00:00 2001
From: Alan Barbosa <alan.barbosa97@outlook.com>
Date: Sun, 18 Feb 2024 19:18:07 -0300
Subject: [PATCH 1/2] Errors when applying DataTable

Import correction was made to InputNumber using InputNumberChangeEvent. A type was created for the InputTextArea. Unrecognized characters were removed.
---
 .../doc/datatable/samples/productsdoc.js      | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/components/doc/datatable/samples/productsdoc.js b/components/doc/datatable/samples/productsdoc.js
index 3674a240d5..3f82828984 100644
--- a/components/doc/datatable/samples/productsdoc.js
+++ b/components/doc/datatable/samples/productsdoc.js
@@ -649,7 +649,7 @@ import { Rating } from 'primereact/rating';
 import { Toolbar } from 'primereact/toolbar';
 import { InputTextarea } from 'primereact/inputtextarea';
 import { RadioButton, RadioButtonChangeEvent } from 'primereact/radiobutton';
-import { InputNumber, InputNumberChangeEvent } from 'primereact/inputnumber';
+import { InputNumber,InputNumberValueChangeEvent } from 'primereact/inputnumber';
 import { Dialog } from 'primereact/dialog';
 import { InputText } from 'primereact/inputtext';
 import { Tag } from 'primereact/tag';
@@ -816,17 +816,27 @@ export default function ProductsDemo() {
         let _product = { ...product };
 
         // @ts-ignore
-        _product[\`\${name}\`] = val;
+        _product[`${name}`] = val;
 
         setProduct(_product);
     };
 
-    const onInputNumberChange = (e: InputNumberChangeEvent, name: string) => {
-        const val = e.value || 0;
+     const onInputTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>, name: string) => {
+        const val = (e.target && e.target.value) || '';
         let _product = { ...product };
 
         // @ts-ignore
-        _product[\`\${name}\`] = val;
+        _product[`${name}`] = val;
+
+        setProduct(_product);
+    };
+
+    const onInputNumberChange = (e: InputNumberValueChangeEvent, name: string) => {
+        const val = e.value ?? 0;
+        let _product = { ...product };
+
+        // @ts-ignore
+        _product[`${name}`] = val;
 
         setProduct(_product);
     };
@@ -845,7 +855,7 @@ export default function ProductsDemo() {
     };
 
     const imageBodyTemplate = (rowData: Product) => {
-        return <img src={\`https://primefaces.org/cdn/primereact/images/product/\${rowData.image}\`} alt={rowData.image!} className="shadow-2 border-round" style={{ width: '64px' }} />;
+        return <img src={`https://primefaces.org/cdn/primereact/images/product/\${rowData.image}`} alt={rowData.image!} className="shadow-2 border-round" style={{ width: '64px' }} />;
     };
 
     const priceBodyTemplate = (rowData: Product) => {
@@ -927,7 +937,9 @@ export default function ProductsDemo() {
                         }}
                         dataKey="id"  paginator rows={10} rowsPerPageOptions={[5, 10, 25]}
                         paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" globalFilter={globalFilter} header={header}>
+                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" globalFilter={globalFilter} header={header}
+                        selectionMode="multiple"
+                >
                     <Column selectionMode="multiple" exportable={false}></Column>
                     <Column field="code" header="Code" sortable style={{ minWidth: '12rem' }}></Column>
                     <Column field="name" header="Name" sortable style={{ minWidth: '16rem' }}></Column>
@@ -941,7 +953,7 @@ export default function ProductsDemo() {
             </div>
 
             <Dialog visible={productDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Product Details" modal className="p-fluid" footer={productDialogFooter} onHide={hideDialog}>
-                {product.image && <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.image} className="product-image block m-auto pb-3" />}
+                {product.image && <img src={`https://primefaces.org/cdn/primereact/images/product/\${product.image}`} alt={product.image} className="product-image block m-auto pb-3" />}
                 <div className="field">
                     <label htmlFor="name" className="font-bold">
                         Name
@@ -953,7 +965,7 @@ export default function ProductsDemo() {
                     <label htmlFor="description" className="font-bold">
                         Description
                     </label>
-                    <InputTextarea id="description" value={product.description} onChange={(e) => onInputChange(e, 'description')} required rows={3} cols={20} />
+                    <InputTextarea id="description" value={product.description} onChange={(e:ChangeEvent<HTMLTextAreaElement>) => onInputTextAreaChange(e, 'description')} required rows={3} cols={20} />
                 </div>
 
                 <div className="field">

From 40335b47c960e49e317882979a1cb72a23291b3f Mon Sep 17 00:00:00 2001
From: Alan Barbosa <alan.barbosa97@outlook.com>
Date: Mon, 19 Feb 2024 13:34:07 +0000
Subject: [PATCH 2/2] lint correction. Remove unwanted characters

---
 components/doc/datatable/samples/productsdoc.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/doc/datatable/samples/productsdoc.js b/components/doc/datatable/samples/productsdoc.js
index 3f82828984..39b3b85565 100644
--- a/components/doc/datatable/samples/productsdoc.js
+++ b/components/doc/datatable/samples/productsdoc.js
@@ -816,7 +816,7 @@ export default function ProductsDemo() {
         let _product = { ...product };
 
         // @ts-ignore
-        _product[`${name}`] = val;
+        _product[name] = val;
 
         setProduct(_product);
     };
@@ -826,7 +826,7 @@ export default function ProductsDemo() {
         let _product = { ...product };
 
         // @ts-ignore
-        _product[`${name}`] = val;
+        _product[name] = val;
 
         setProduct(_product);
     };
@@ -836,7 +836,7 @@ export default function ProductsDemo() {
         let _product = { ...product };
 
         // @ts-ignore
-        _product[`${name}`] = val;
+        _product[name] = val;
 
         setProduct(_product);
     };
@@ -855,7 +855,7 @@ export default function ProductsDemo() {
     };
 
     const imageBodyTemplate = (rowData: Product) => {
-        return <img src={`https://primefaces.org/cdn/primereact/images/product/\${rowData.image}`} alt={rowData.image!} className="shadow-2 border-round" style={{ width: '64px' }} />;
+        return <img src={https://primefaces.org/cdn/primereact/images/product/\${rowData.image}} alt={rowData.image!} className="shadow-2 border-round" style={{ width: '64px' }} />;
     };
 
     const priceBodyTemplate = (rowData: Product) => {
@@ -953,7 +953,7 @@ export default function ProductsDemo() {
             </div>
 
             <Dialog visible={productDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Product Details" modal className="p-fluid" footer={productDialogFooter} onHide={hideDialog}>
-                {product.image && <img src={`https://primefaces.org/cdn/primereact/images/product/\${product.image}`} alt={product.image} className="product-image block m-auto pb-3" />}
+                {product.image && <img src={https://primefaces.org/cdn/primereact/images/product/\${product.image}} alt={product.image} className="product-image block m-auto pb-3" />}
                 <div className="field">
                     <label htmlFor="name" className="font-bold">
                         Name