diff --git a/components/doc/datatable/samples/productsdoc.js b/components/doc/datatable/samples/productsdoc.js
index 3674a240d5..39b3b85565 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">