diff --git a/components/doc/datatable/cellselection/multipledoc.js b/components/doc/datatable/cellselection/multipledoc.js
index f073cdeb27..408a0e6e2f 100644
--- a/components/doc/datatable/cellselection/multipledoc.js
+++ b/components/doc/datatable/cellselection/multipledoc.js
@@ -70,16 +70,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function MultipleCellsSelectionDemo() {
@@ -98,10 +98,7 @@ export default function MultipleCellsSelectionDemo() {
                 <label htmlFor="input-metakey">MetaKey</label>
             </div>
             <DataTable value={products} cellSelection selectionMode="multiple" selection={selectedCells!}
-                    onSelectionChange={(e) => {
-                        const value = e.value as DataTableCellSelection<Product[]>;
-                        setSelectedCells(value);
-                    }}
+                    onSelectionChange={(e) => setSelectedCells(e.value)}
                     metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
diff --git a/components/doc/datatable/cellselection/singledoc.js b/components/doc/datatable/cellselection/singledoc.js
index 7fb26a0b53..ac73bed13e 100644
--- a/components/doc/datatable/cellselection/singledoc.js
+++ b/components/doc/datatable/cellselection/singledoc.js
@@ -68,16 +68,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function SingleCellSelectionDemo() {
@@ -96,10 +96,7 @@ export default function SingleCellSelectionDemo() {
                 <label htmlFor="input-metakey">MetaKey</label>
             </div>
             <DataTable value={products} cellSelection selectionMode="single" selection={selectedCell!}
-                    onSelectionChange={(e) => {
-                        const value = e.value as DataTableCellSelection<Product[]>;
-                         setSelectedCell(value);
-                    }} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                    onSelectionChange={(e) =>  setSelectedCell(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
                 <Column field="category" header="Category"></Column>
diff --git a/components/doc/datatable/pt/ptdoc.js b/components/doc/datatable/pt/ptdoc.js
index c90e079df9..173412e4f0 100644
--- a/components/doc/datatable/pt/ptdoc.js
+++ b/components/doc/datatable/pt/ptdoc.js
@@ -192,7 +192,6 @@ export default function PTDemo() {
                 }}
             ></Column>
         </DataTable>
-    </div>
     );
 }
         `,
diff --git a/components/doc/datatable/rowselection/checkboxdoc.js b/components/doc/datatable/rowselection/checkboxdoc.js
index ac1b242ed5..22f392fec6 100644
--- a/components/doc/datatable/rowselection/checkboxdoc.js
+++ b/components/doc/datatable/rowselection/checkboxdoc.js
@@ -68,16 +68,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function CheckboxRowSelectionDemo() {
@@ -96,10 +96,7 @@ export default function CheckboxRowSelectionDemo() {
                 <label htmlFor="input-rowclick">Row Click</label>
             </div>
             <DataTable value={products} selectionMode={rowClick ? undefined : 'multiple'} selection={selectedProducts!}
-                        onSelectionChange={(e) => {
-                            const value = e.value as Product[];
-                            setSelectedProducts(value);
-                        }} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+                        onSelectionChange={(e) => setSelectedProducts(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
                 <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
diff --git a/components/doc/datatable/rowselection/disableddoc.js b/components/doc/datatable/rowselection/disableddoc.js
index 0db7bfc208..46c720c0e3 100644
--- a/components/doc/datatable/rowselection/disableddoc.js
+++ b/components/doc/datatable/rowselection/disableddoc.js
@@ -69,16 +69,16 @@ import { Column } from 'primereact/column';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function DisabledRowSelectionDemo() {
@@ -98,10 +98,7 @@ export default function DisabledRowSelectionDemo() {
     return (
         <div className="card">
             <DataTable value={products} selectionMode="single" selection={selectedProduct!}
-                    onSelectionChange={(e) => {
-                        const value = e.value as Product;
-                        setSelectedProduct(value);
-                    }} dataKey="id" isDataSelectable={isRowSelectable} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
+                    onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" isDataSelectable={isRowSelectable} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
                 <Column field="category" header="Category"></Column>
diff --git a/components/doc/datatable/rowselection/eventsdoc.js b/components/doc/datatable/rowselection/eventsdoc.js
index 9f22f3ff3a..0ffb299313 100644
--- a/components/doc/datatable/rowselection/eventsdoc.js
+++ b/components/doc/datatable/rowselection/eventsdoc.js
@@ -79,16 +79,16 @@ import { Toast } from 'primereact/toast';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function RowSelectEventsDemo() {
@@ -112,10 +112,7 @@ export default function RowSelectEventsDemo() {
         <div className="card">
             <Toast ref={toast} />
             <DataTable value={products} selectionMode="single" selection={selectedProduct!} 
-                        onSelectionChange={(e) => {
-                            const value = e.value as Product;
-                            setSelectedProduct(value);
-                        }}  dataKey="id" onRowSelect={onRowSelect} onRowUnselect={onRowUnselect} metaKeySelection={false} tableStyle={{ minWidth: '50rem' }}>
+                        onSelectionChange={(e) => setSelectedProduct(e.value)}  dataKey="id" onRowSelect={onRowSelect} onRowUnselect={onRowUnselect} metaKeySelection={false} tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
                 <Column field="category" header="Category"></Column>
diff --git a/components/doc/datatable/rowselection/multipledoc.js b/components/doc/datatable/rowselection/multipledoc.js
index 353cd86917..035c772d1c 100644
--- a/components/doc/datatable/rowselection/multipledoc.js
+++ b/components/doc/datatable/rowselection/multipledoc.js
@@ -68,16 +68,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function MultipleRowsSelectionDemo() {
@@ -96,11 +96,7 @@ export default function MultipleRowsSelectionDemo() {
                 <label htmlFor="input-metakey">MetaKey</label>
             </div>
             <DataTable value={products} selectionMode="multiple" selection={selectedProducts} 
-                    onSelectionChange={(e) => {
-                        if (Array.isArray(e.value)) {
-                            setSelectedProducts(e.value);
-                        }
-                    }}
+                    onSelectionChange={(e) => setSelectedProducts(e.value)}
                     dataKey="id" metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
diff --git a/components/doc/datatable/rowselection/radiobuttondoc.js b/components/doc/datatable/rowselection/radiobuttondoc.js
index f86e848245..844bddda60 100644
--- a/components/doc/datatable/rowselection/radiobuttondoc.js
+++ b/components/doc/datatable/rowselection/radiobuttondoc.js
@@ -68,16 +68,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function RadioButtonRowSelectionDemo() {
@@ -96,10 +96,7 @@ export default function RadioButtonRowSelectionDemo() {
                 <label htmlFor="input-rowclick">Row Click</label>
             </div>
             <DataTable value={products} selectionMode={rowClick ? undefined : 'radiobutton'} selection={selectedProduct!}
-                onSelectionChange={(e) => {
-                     const value = e.value as Product;
-                     setSelectedProduct(value);
-                }} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+                onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
                 <Column selectionMode="single" headerStyle={{ width: '3rem' }}></Column>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
diff --git a/components/doc/datatable/rowselection/singledoc.js b/components/doc/datatable/rowselection/singledoc.js
index ed8dd22ce9..b11176ef7b 100644
--- a/components/doc/datatable/rowselection/singledoc.js
+++ b/components/doc/datatable/rowselection/singledoc.js
@@ -67,16 +67,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function SingleRowSelectionDemo() {
@@ -95,10 +95,7 @@ export default function SingleRowSelectionDemo() {
                 <label htmlFor="input-metakey">MetaKey</label>
             </div>
             <DataTable value={products} selectionMode="single" selection={selectedProduct!} 
-                onSelectionChange={(e) => {
-                     const value = e.value as Product;
-                     setSelectedProduct(value);
-                }} dataKey="id" metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
                 <Column field="category" header="Category"></Column>
diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts
index 8a66b73782..4c7a21a9bc 100644
--- a/components/lib/datatable/datatable.d.ts
+++ b/components/lib/datatable/datatable.d.ts
@@ -291,15 +291,39 @@ interface DataTableContextMenuSelectionChangeEvent<TValue extends DataTableValue
     /**
      * Selection object.
      */
-    value: DataTableSelection<TValue>;
+    value: TValue;
 }
 
 /**
- * Custom selection change event.
+ * Custom multiple selection change event.
  * @see {@link DataTableProps.onSelectionChange}
  * @event
  */
-interface DataTableSelectionChangeEvent<TValue extends DataTableValueArray> {
+interface DataTableSelectionMultipleChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection objects.
+     */
+    value: TValue;
+    /**
+     * Type of the selection.
+     */
+    type?: 'multiple' | 'all' | 'checkbox' | 'row' | undefined;
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom single selection change event.
+ * @see {@link DataTableProps.onSelectionChange}
+ * @event
+ */
+interface DataTableSelectionSingleChangeEvent<TValue extends DataTableValueArray> {
     /**
      * Browser event.
      */
@@ -307,11 +331,35 @@ interface DataTableSelectionChangeEvent<TValue extends DataTableValueArray> {
     /**
      * Selection object.
      */
-    value: DataTableSelection<TValue>;
+    value: TValue[number];
+    /**
+     * Type of the selection.
+     */
+    type?: 'single' | 'radio' | 'row';
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom cell selection change event.
+ * @see {@link DataTableProps.onSelectionChange}
+ * @event
+ */
+interface DataTableSelectionCellChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection objects.
+     */
+    value: DataTableCellSelection<TValue>;
     /**
      * Type of the selection.
      */
-    type?: string;
+    type?: 'cell';
     /**
      * Extra options.
      */
@@ -699,8 +747,6 @@ type DataTableCellSelection<TValue extends DataTableValueArray> = {
     value: TValue[number][keyof TValue[number]];
 };
 
-type DataTableSelection<TValue extends DataTableValueArray> = DataTableRowData<TValue> | DataTableRowDataArray<TValue> | DataTableCellSelection<TValue>;
-
 export declare type DataTablePassThroughType<T> = PassThroughType<T, DataTablePassThroughMethodOptions<DataTableValueArray>>;
 
 /**
@@ -889,7 +935,7 @@ type SortOrder = 1 | 0 | -1 | null | undefined;
  * Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface DataTableProps<TValue extends DataTableValueArray> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'size' | 'onContextMenu' | 'ref' | 'value'> {
+interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'size' | 'onContextMenu' | 'ref' | 'value'> {
     /**
      * Unique identifier of the element.
      */
@@ -912,11 +958,6 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * Icon to display in the checkbox.
      */
     checkIcon?: IconType<DataTableProps<TValue>> | undefined;
-    /**
-     * Whether to cell selection is enabled or not.
-     * @defaultValue false
-     */
-    cellSelection?: boolean | undefined;
     /**
      * Style class of the component.
      */
@@ -1217,11 +1258,6 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * @defaultValue true
      */
     selectOnEdit?: boolean | undefined;
-    /**
-     * Selected row in single mode or an array of values in multiple mode.
-     * @defaultValue true
-     */
-    selection?: DataTableSelection<TValue> | undefined;
     /**
      * When a selectable row is clicked on RadioButton and Checkbox selection, it automatically decides whether to focus on elements such as checkbox or radio.
      * @defaultValue true
@@ -1231,10 +1267,6 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * A field property from the row to add Select &#123;field&#125; and Unselect &#123;field&#125; ARIA labels to checkbox/radio buttons.
      */
     selectionAriaLabel?: string | undefined;
-    /**
-     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
-     */
-    selectionMode?: 'single' | 'multiple' | 'checkbox' | 'radiobutton' | undefined;
     /**
      * When enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page.
      * @defaultValue false
@@ -1488,11 +1520,6 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * @param {DataTableSelectAllChangeEvent} event - Custom select all change event.
      */
     onSelectAllChange?(event: DataTableSelectAllChangeEvent): void;
-    /**
-     * Callback to invoke when selection changes.
-     * @param {DataTableSelectionChangeEvent<TValue>} event - Custom selection change event.
-     */
-    onSelectionChange?(event: DataTableSelectionChangeEvent<TValue>): void;
     /**
      * Callback to invoke on sort.
      * @param {DataTableStateEvent} event - Custom state event.
@@ -1558,6 +1585,71 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
     unstyled?: boolean;
 }
 
+interface DataTablePropsSingle<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+    /**
+     * Whether to cell selection is enabled or not.
+     * @defaultValue false
+     */
+    cellSelection?: false | undefined;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode?: 'single' | 'radiobutton' | undefined;
+    /**
+     * Selected row in single mode or an array of values in multiple mode.
+     */
+    selection?: TValue[number] | undefined | null;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {DataTableSelectionChangeEvent<TValue>} event - Custom selection change event.
+     */
+    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TValue>): void;
+}
+
+interface DataTablePropsMultiple<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+    /**
+     * Whether to cell selection is enabled or not.
+     * @defaultValue false
+     */
+    cellSelection?: false | undefined;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode: 'multiple' | 'checkbox' | null;
+    /**
+     * Selected row in single mode or an array of values in multiple mode.
+     */
+    selection: TValue;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {DataTableSelectionChangeEvent<TValue>} event - Custom selection change event.
+     */
+    onSelectionChange?(event: DataTableSelectionMultipleChangeEvent<TValue>): void;
+}
+
+interface DataTablePropsCell<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+    /**
+     * Whether to cell selection is enabled or not.
+     * @defaultValue false
+     */
+    cellSelection: true;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode: 'single' | 'multiple';
+    /**
+     * Selected row in single mode or an array of values in multiple mode.
+     */
+    selection: DataTableCellSelection<TValue> | null;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {DataTableSelectionChangeEvent<TValue>} event - Custom selection change event.
+     */
+    onSelectionChange?(event: DataTableSelectionCellChangeEvent<TValue>): void;
+}
+
+export type DataTableProps<TValue extends DataTableValueArray> = DataTablePropsSingle<TValue> | DataTablePropsMultiple<TValue> | DataTablePropsCell<TValue>;
+
 /**
  * **PrimeReact - DataTable<TValue**
  *