From a0f6a1cbbba155ea8d10642d30381adcf0321ef5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=BCseyin=20B=C3=BCy=C3=BCkdere?=
 <hbuyukderece@gmail.com>
Date: Sun, 26 Sep 2021 18:19:36 +0300
Subject: [PATCH] Feature Request #1303 , datatable added selection disabled
 prop.

---
 src/components/datatable/BodyCell.js          |   5 +-
 src/components/datatable/BodyRow.js           |   2 +-
 src/components/datatable/DataTable.d.ts       |   1 +
 src/components/datatable/DataTable.js         |  12 +-
 src/components/datatable/RowRadioButton.js    |   2 +-
 src/components/datatable/TableBody.js         |  15 +-
 .../datatable/DataTableSelectionDemo.js       | 214 ++++++++++++++++++
 7 files changed, 243 insertions(+), 8 deletions(-)

diff --git a/src/components/datatable/BodyCell.js b/src/components/datatable/BodyCell.js
index 3f5f37c132..5a851b0f91 100644
--- a/src/components/datatable/BodyCell.js
+++ b/src/components/datatable/BodyCell.js
@@ -432,10 +432,11 @@ export class BodyCell extends Component {
             }
 
             if (showSelection) {
+                let isDisabled = this.props.isDataSelectable && !this.props.isDataSelectable();
                 if (this.props.selectionMode === 'single')
-                    content = <RowRadioButton onClick={this.props.onRadioClick} rowData={this.props.rowData} selected={this.props.selected} tableId={this.props.tableId} />;
+                    content = <RowRadioButton onClick={this.props.onRadioClick} disabled={isDisabled} rowData={this.props.rowData} selected={this.props.selected} tableId={this.props.tableId} />;
                 else
-                    content = <RowCheckbox onClick={this.props.onCheckboxClick} rowData={this.props.rowData} selected={this.props.selected} />;
+                    content = <RowCheckbox onClick={this.props.onCheckboxClick} disabled={isDisabled} rowData={this.props.rowData} selected={this.props.selected} />;
             }
         }
         else if (this.props.rowReorder) {
diff --git a/src/components/datatable/BodyRow.js b/src/components/datatable/BodyRow.js
index 7db21ad90b..46d3f78bd5 100644
--- a/src/components/datatable/BodyRow.js
+++ b/src/components/datatable/BodyRow.js
@@ -321,7 +321,7 @@ export class BodyRow extends Component {
 
             let editing = this.getEditing();
             let cell = <BodyCell tableId={this.props.tableId} key={i} {...column.props} value={this.props.value} rowSpan={rowSpan} rowData={this.props.rowData} index={i} rowIndex={this.props.rowIndex} onRowToggle={this.props.onRowToggle} expanded={this.props.expanded}
-                onRadioClick={this.props.onRadioClick} onCheckboxClick={this.props.onCheckboxClick} selected={this.props.selected} selection={this.props.selection} selectOnEdit={this.props.selectOnEdit}
+                onRadioClick={this.props.onRadioClick} onCheckboxClick={this.props.onCheckboxClick} selected={this.props.selected} selection={this.props.selection} isDataSelectable={this.props.isDataSelectable} selectOnEdit={this.props.selectOnEdit}
                 editMode={this.props.editMode} editing={editing} onRowEditInit={this.onRowEditInit} onRowEditSave={this.onRowEditSave} onRowEditCancel={this.onRowEditCancel} onMouseDown={this.props.onCellMouseDown} onMouseUp={this.props.onCellMouseUp}
                 showRowReorderElement={this.props.showRowReorderElement} showSelectionElement={this.props.showSelectionElement} allowCellSelection={this.props.allowCellSelection} onClick={this.props.onCellClick} onEditingCellChange={this.props.onEditingCellChange}
                 cellClassName={this.props.cellClassName} />;
diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
index 54c7ac6633..d43101af13 100644
--- a/src/components/datatable/DataTable.d.ts
+++ b/src/components/datatable/DataTable.d.ts
@@ -266,6 +266,7 @@ export interface DataTableProps {
     customRestoreState?(): object;
     onStateSave?(state: object): void;
     onStateRestore?(state: object): void;
+    isDataSelectable?(data: any | DataTableCellClickEventParams) : boolean;
 }
 
 export declare class DataTable extends React.Component<DataTableProps, any> {
diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
index ec85f5b590..00a728b063 100644
--- a/src/components/datatable/DataTable.js
+++ b/src/components/datatable/DataTable.js
@@ -1240,6 +1240,9 @@ export class DataTable extends Component {
 
         if (!event.checked) {
             let visibleData = this.hasFilter() ? this.processData() : this.props.value;
+            if(this.props.isDataSelectable){
+                visibleData = visibleData?.filter((k) => this.props.isDataSelectable(k))
+            }
             selection = [...visibleData];
 
             this.props.onAllRowsSelect && this.props.onAllRowsSelect({ originalEvent, data: selection, type: 'all' });
@@ -1353,7 +1356,12 @@ export class DataTable extends Component {
             return this.props.selection && this.props.totalRecords && this.props.selection.length === this.props.totalRecords;
         }
 
-        return this.props.selection && visibleData && visibleData.length && this.props.selection.length === visibleData.length;
+        let unselectableDataCount = 0;
+        if(this.props.isDataSelectable){
+            unselectableDataCount = visibleData?.filter((k) => !this.props.isDataSelectable(k)).length;
+        }
+
+        return this.props.selection && visibleData && visibleData.length && (this.props.selection.length + unselectableDataCount) === visibleData.length;
     }
 
     getFrozenColumns(columns) {
@@ -1406,7 +1414,7 @@ export class DataTable extends Component {
 
     createTableBody(value, columns, frozen, selectionModeInColumn) {
         return <TableBody tableId={this.props.id} value={value} first={this.getFirst()} rows={this.getRows()} lazy={this.props.lazy} paginator={this.props.paginator} dataKey={this.props.dataKey} compareSelectionBy={this.props.compareSelectionBy}
-                        selectionMode={this.props.selectionMode} selection={this.props.selection} metaKeySelection={this.props.metaKeySelection} frozen={frozen} selectionModeInColumn={selectionModeInColumn}
+                        selectionMode={this.props.selectionMode} selection={this.props.selection} isDataSelectable={this?.props.isDataSelectable} metaKeySelection={this.props.metaKeySelection} frozen={frozen} selectionModeInColumn={selectionModeInColumn}
                         onSelectionChange={this.props.onSelectionChange} onRowClick={this.props.onRowClick} onRowDoubleClick={this.props.onRowDoubleClick} onRowSelect={this.props.onRowSelect} onRowUnselect={this.props.onRowUnselect}
                         contextMenuSelection={this.props.contextMenuSelection} onContextMenuSelectionChange={this.props.onContextMenuSelectionChange} onContextMenu={this.props.onContextMenu}
                         expandedRows={this.props.expandedRows} onRowToggle={this.props.onRowToggle} rowExpansionTemplate={this.props.rowExpansionTemplate} selectOnEdit={this.props.selectOnEdit}
diff --git a/src/components/datatable/RowRadioButton.js b/src/components/datatable/RowRadioButton.js
index 66444a4507..5682a5b8db 100644
--- a/src/components/datatable/RowRadioButton.js
+++ b/src/components/datatable/RowRadioButton.js
@@ -61,7 +61,7 @@ export class RowRadioButton extends Component {
     }
 
     render() {
-        const className = classNames('p-radiobutton-box p-component p-clickable', { 'p-highlight': this.props.selected, 'p-focus': this.state.focused });
+        const className = classNames('p-radiobutton-box p-component p-clickable', { 'p-highlight': this.props.selected, 'p-focus': this.state.focused , 'p-disabled': this.props.disabled });
         const name = `${this.props.tableId ? this.props.tableId + '_' : ''}dt_radio`;
 
         return (
diff --git a/src/components/datatable/TableBody.js b/src/components/datatable/TableBody.js
index 261d85f6bd..648198686d 100644
--- a/src/components/datatable/TableBody.js
+++ b/src/components/datatable/TableBody.js
@@ -93,6 +93,10 @@ export class TableBody extends Component {
         let selected = this.isSelected(data);
         let selection = this.props.selection;
 
+        if(this.props.isDataSelectable && !this.props.isDataSelectable(data)){
+            return;
+        }
+
         if (selected) {
             if (toggleable) {
                 selection = null;
@@ -118,6 +122,10 @@ export class TableBody extends Component {
         let selected = this.isSelected(data);
         let selection = this.props.selection || [];
 
+        if(this.props.isDataSelectable && !this.props.isDataSelectable(data)){
+            return;
+        }
+
         if (selected) {
             if (toggleable) {
                 let selectionIndex = this.findIndexInSelection(data);
@@ -150,7 +158,9 @@ export class TableBody extends Component {
         this.rangeRowIndex = this.allowCellSelection() ? event.rowIndex : event.index;
         let selectionInRange = this.selectRange(event);
         let selection = this.isMultipleSelection() ? [...new Set([...(this.props.selection || []), ...selectionInRange])] : selectionInRange;
-
+        if(this.props.isDataSelectable){
+            selection = selection.filter(data => this.props.isDataSelectable(data) === true);
+        }
         if (this.props.onSelectionChange && selection !== this.props.selection) {
             this.props.onSelectionChange({
                 originalEvent: event.originalEvent,
@@ -793,9 +803,10 @@ export class TableBody extends Component {
                     let isRowGroupExpanded = this.props.expandableRowGroups && hasSubheaderGrouping && rowGroupHeaderExpanded;
                     if (!this.props.expandableRowGroups || isRowGroupExpanded) {
                         //row content
+
                         let bodyRow = <BodyRow tableId={this.props.tableId} key={i} value={this.props.value} rowData={rowData} rowIndex={i} onClick={this.onRowClick} onDoubleClick={this.props.onRowDoubleClick}
                             onRightClick={this.onRowRightClick} onTouchEnd={this.onRowTouchEnd} onMouseDown={this.onRowMouseDown} onMouseUp={this.onRowMouseUp} onCellMouseDown={this.onCellMouseDown} onCellMouseUp={this.onCellMouseUp}
-                            onRowToggle={this.onRowToggle} expanded={expanded} selectionMode={this.props.selectionMode} selectOnEdit={this.props.selectOnEdit}
+                            onRowToggle={this.onRowToggle} expanded={expanded} selectionMode={this.props.selectionMode} isDataSelectable={this.props.isDataSelectable && (() => this.props.isDataSelectable(rowData))} selectOnEdit={this.props.selectOnEdit}
                             onRadioClick={this.onRadioClick} onCheckboxClick={this.onCheckboxClick} selected={selected} contextMenuSelected={contextMenuSelected} rowClassName={this.props.rowClassName} cellClassName={this.props.cellClassName}
                             sortField={this.props.sortField} rowGroupMode={this.props.rowGroupMode} groupRowSpan={groupRowSpan}
                             onDragStart={(e) => this.onRowDragStart(e, i)} onDragEnd={this.onRowDragEnd} onDragOver={(e) => this.onRowDragOver(e, i)} onDragLeave={this.onRowDragLeave}
diff --git a/src/showcase/datatable/DataTableSelectionDemo.js b/src/showcase/datatable/DataTableSelectionDemo.js
index 5eb9df91b4..f931813574 100644
--- a/src/showcase/datatable/DataTableSelectionDemo.js
+++ b/src/showcase/datatable/DataTableSelectionDemo.js
@@ -63,6 +63,14 @@ export class DataTableSelectionDemo extends Component {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
 
+    isDataCellSelectable(data){
+        return !(data.field === "category" && data.value === "Accessories");
+    }
+
+    isDataRowSelectable(rowData){
+        return rowData.category !== 'Accessories';
+    }
+
     render() {
         return (
             <div>
@@ -176,6 +184,7 @@ export class DataTableSelectionDemo extends Component {
                             <Column field="category" header="Category"></Column>
                             <Column field="quantity" header="Quantity"></Column>
                         </DataTable>
+
                     </div>
 
                     <div className="card">
@@ -222,8 +231,41 @@ export class DataTableSelectionDemo extends Component {
                             <Column field="quantity" header="Quantity"></Column>
                         </DataTable>
                     </div>
+                    <div className="card">
+                        <h5>Disabled Selection</h5>
+                        <p>Whether data can be selected or not can be handled by "isDataSelectable" prop.</p>
+
+                        <h6>Row Selection Disabled</h6>
+                        <p> Rows which category is "Accessories" can not be selected.</p>
+                        <DataTable value={this.state.products} isDataSelectable={this.isDataRowSelectable} selectionMode="checkbox" selection={this.state.selectedProducts8} onSelectionChange={e => this.setState({selectedProducts8 : e.value })} dataKey="id">
+                            <Column selectionMode="single" headerStyle={{width: '3em'}}></Column>
+                            <Column field="code" header="Code"></Column>
+                            <Column field="name" header="Name"></Column>
+                            <Column field="category" header="Category"></Column>
+                            <Column field="quantity" header="Quantity"></Column>
+                        </DataTable>
+
+                        <h6>Cell Selection Disabled</h6>
+                        <p> Cell which is in category column and has "Accessories" value can not be selected.</p>
+                        <DataTable value={this.state.products} isDataSelectable={this.isDataCellSelectable} selectionMode="single" cellSelection selection={this.state.selectedProduct2} onSelectionChange={e => this.setState({ selectedProduct2: e.value })} dataKey="id">
+                            <Column field="code" header="Code"></Column>
+                            <Column field="name" header="Name"></Column>
+                            <Column field="category" header="Category"></Column>
+                            <Column field="quantity" header="Quantity"></Column>
+                        </DataTable>
+
+                        <h6>Cell Selection Disabled With Drag Selection</h6>
+                        <DataTable value={this.state.products} selectionMode="multiple" isDataSelectable={this.isDataCellSelectable}  cellSelection dragSelection selection={this.state.selectedProducts6} onSelectionChange={e => this.setState({selectedProducts6 : e.value })} dataKey="id">
+                            <Column field="code" header="Code"></Column>
+                            <Column field="name" header="Name"></Column>
+                            <Column field="category" header="Category"></Column>
+                            <Column field="quantity" header="Quantity"></Column>
+                        </DataTable>
+                    </div>
                 </div>
 
+
+
                 <DataTableSelectionDemoDoc></DataTableSelectionDemoDoc>
             </div>
         );
@@ -300,6 +342,15 @@ export class DataTableSelectionDemo extends Component {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
 
+    isDataCellSelectable(data){
+        return !(data.field === "category" && data.value === "Accessories");
+    }
+
+    isDataRowSelectable(rowData){
+        return rowData.category !== 'Accessories';
+    }
+
+
     render() {
         return (
             <div className="datatable-selection-demo">
@@ -449,6 +500,40 @@ export class DataTableSelectionDemo extends Component {
                         <Column field="quantity" header="Quantity"></Column>
                     </DataTable>
                 </div>
+
+                <div className="card">
+                    <h5>Disabled Selection</h5>
+                    <p>Whether data can be selected or not can be handled by "isDataSelectable" prop.</p>
+
+                    <h6>Row Selection Disabled</h6>
+                    <p> Rows which category is "Accessories" can not be selected.</p>
+                    <DataTable value={this.state.products} isDataSelectable={this.isDataRowSelectable} selectionMode="checkbox" selection={this.state.selectedProducts8} onSelectionChange={e => this.setState({selectedProducts8 : e.value })} dataKey="id">
+                            <Column selectionMode="multiple" headerStyle={{width: '3em'}}></Column>
+                            <Column field="code" header="Code"></Column>
+                            <Column field="name" header="Name"></Column>
+                            <Column field="category" header="Category"></Column>
+                            <Column field="quantity" header="Quantity"></Column>
+                      </DataTable>
+
+
+                    <h6>Cell Selection Disabled</h6>
+                    <p> Cell which is in category column and has "Accessories" value can not be selected.</p>
+                    <DataTable value={this.state.products} isDataSelectable={this.isDataCellSelectable} selectionMode="single" cellSelection selection={this.state.selectedProduct2} onSelectionChange={e => this.setState({ selectedProduct2: e.value })} dataKey="id">
+                        <Column field="code" header="Code"></Column>
+                        <Column field="name" header="Name"></Column>
+                        <Column field="category" header="Category"></Column>
+                        <Column field="quantity" header="Quantity"></Column>
+                    </DataTable>
+
+                    <h6>Cell Selection Disabled With Drag Selection</h6>
+                    <DataTable value={this.state.products} selectionMode="multiple" isDataSelectable={this.isDataCellSelectable}  cellSelection dragSelection selection={this.state.selectedProducts6} onSelectionChange={e => this.setState({selectedProducts6 : e.value })} dataKey="id">
+                        <Column field="code" header="Code"></Column>
+                        <Column field="name" header="Name"></Column>
+                        <Column field="category" header="Category"></Column>
+                        <Column field="quantity" header="Quantity"></Column>
+                    </DataTable>
+                </div>
+
             </div>
         );
     }
@@ -510,6 +595,14 @@ const DataTableSelectionDemo = () => {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
 
+    const isDataCellSelectable = (data) => {
+        return !(data.field === "category" && data.value === "Accessories");
+    }
+
+    const isDataRowSelectable =(rowData) => {
+        return rowData.category !== 'Accessories';
+    }
+
     return (
         <div className="datatable-selection-demo">
             <Toast ref={toast} />
@@ -658,6 +751,48 @@ const DataTableSelectionDemo = () => {
                     <Column field="quantity" header="Quantity"></Column>
                 </DataTable>
             </div>
+
+            <div className="card">
+                    <h5>Disabled Selection</h5>
+                    <p>Whether data can be selected or not can be handled by "isDataSelectable" prop.</p>
+
+                    <h6>Row Selection Disabled</h6>
+                    <p> Rows which category is "Accessories" can not be selected.</p>
+                    <DataTable value={products} isDataSelectable={isDataRowSelectable} selectionMode="checkbox" selection={selectedProducts8}
+                                   onSelectionChange={e => setSelectedProducts8(e.value)} dataKey="id">
+                            <Column selectionMode="multiple" headerStyle={{width: '3em'}}></Column>
+                            <Column field="code" header="Code"></Column>
+                            <Column field="name" header="Name"></Column>
+                            <Column field="category" header="Category"></Column>
+                            <Column field="quantity" header="Quantity"></Column>
+                      </DataTable>
+
+                    <h6>Cell Selection Disabled</h6>
+                    <p> Cell which is in category column and has "Accessories" value can not be selected.</p>
+                    <DataTable value={products} isDataSelectable={isDataCellSelectable} selectionMode="single" cellSelection selection={selectedProduct2} onSelectionChange={e => setSelectedProduct2(e.value)} dataKey="id">
+                        <Column field="code" header="Code"></Column>
+                        <Column field="name" header="Name"></Column>
+                        <Column field="category" header="Category"></Column>
+                        <Column field="quantity" header="Quantity"></Column>
+                    </DataTable>
+
+                    <h6>Cell Selection Disabled</h6>
+                    <p> Cell which is in category column and has "Accessories" value can not be selected.</p>
+                    <DataTable value={products} isDataSelectable={isDataCellSelectable} selectionMode="single" cellSelection selection={selectedProduct2} onSelectionChange={e => setselectedProduct2(e.value)} dataKey="id">
+                        <Column field="code" header="Code"></Column>
+                        <Column field="name" header="Name"></Column>
+                        <Column field="category" header="Category"></Column>
+                        <Column field="quantity" header="Quantity"></Column>
+                    </DataTable>
+
+                    <h6>Cell Selection Disabled With Drag Selection</h6>
+                    <DataTable value={products} selectionMode="multiple" isDataSelectable={isDataCellSelectable}  cellSelection dragSelection selection={selectedProducts6} onSelectionChange={e => setselectedProducts6(e.value)} dataKey="id">
+                        <Column field="code" header="Code"></Column>
+                        <Column field="name" header="Name"></Column>
+                        <Column field="category" header="Category"></Column>
+                        <Column field="quantity" header="Quantity"></Column>
+                    </DataTable>
+            </div>
         </div>
     );
 }
@@ -718,6 +853,14 @@ const DataTableSelectionDemo = () => {
         toast.current.show({ severity: 'warn', summary: \`Item Unselected In Product\`, detail: \`\${toCapitalize(event.field)}: \${event.value}\`, life: 3000 });
     }
 
+    const isDataCellSelectable = (data) => {
+        return !(data.field === "category" && data.value === "Accessories");
+    }
+
+    const isDataRowSelectable =(rowData) => {
+        return rowData.category !== 'Accessories';
+    }
+
     return (
         <div className="datatable-selection-demo">
             <Toast ref={toast} />
@@ -866,6 +1009,38 @@ const DataTableSelectionDemo = () => {
                     <Column field="quantity" header="Quantity"></Column>
                 </DataTable>
             </div>
+
+            <div className="card">
+                <h5>Disabled Selection</h5>
+                <p>Whether data can be selected or not can be handled by "isDataSelectable" prop.</p>
+
+                <h6>Row Selection Disabled</h6>
+                <p> Rows which category is "Accessories" can not be selected.</p>
+                <DataTable value={products} isDataSelectable={isDataRowSelectable} selectionMode="checkbox" selection={selectedProducts8} onSelectionChange={e => setSelectedProducts8(e.value)} dataKey="id">
+                    <Column selectionMode="multiple" headerStyle={{width: '3em'}}></Column>
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+
+                <h6>Cell Selection Disabled</h6>
+                <p> Cell which is in category column and has "Accessories" value can not be selected.</p>
+                <DataTable value={products} isDataSelectable={isDataCellSelectable} selectionMode="single" cellSelection selection={selectedProduct2} onSelectionChange={e => setselectedProduct2(e.value)} dataKey="id">
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+
+                <h6>Cell Selection Disabled With Drag Selection</h6>
+                <DataTable value={products} selectionMode="multiple" isDataSelectable={isDataCellSelectable}  cellSelection dragSelection selection={selectedProducts6} onSelectionChange={e => setselectedProducts6(e.value)} dataKey="id">
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+            </div>
         </div>
     );
 }
@@ -933,6 +1108,14 @@ const DataTableSelectionDemo = () => {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
 
+    const isDataCellSelectable = (data) => {
+        return !(data.field === "category" && data.value === "Accessories");
+    }
+
+    const isDataRowSelectable =(rowData) => {
+        return rowData.category !== 'Accessories';
+    }
+
     return (
         <div className="datatable-selection-demo">
             <Toast ref={toast} />
@@ -1081,6 +1264,37 @@ const DataTableSelectionDemo = () => {
                     <Column field="quantity" header="Quantity"></Column>
                 </DataTable>
             </div>
+
+            <div className="card">
+                <h5>Disabled Selection</h5>
+                <p>Whether data can be selected or not can be handled by "isDataSelectable" prop.</p>
+                <h6>Row Selection Disabled</h6>
+                <p> Rows which category is "Accessories" can not be selected.</p>
+                <DataTable value={products} isDataSelectable={isDataRowSelectable} selectionMode="checkbox" selection={selectedProducts8} onSelectionChange={e => setSelectedProducts8(e.value)} dataKey="id">
+                        <Column selectionMode="multiple" headerStyle={{width: '3em'}}></Column>
+                        <Column field="code" header="Code"></Column>
+                        <Column field="name" header="Name"></Column>
+                        <Column field="category" header="Category"></Column>
+                        <Column field="quantity" header="Quantity"></Column>
+                 </DataTable>
+
+                <h6>Cell Selection Disabled</h6>
+                <p> Cell which is in category column and has "Accessories" value can not be selected.</p>
+                <DataTable value={products} isDataSelectable={isDataCellSelectable} selectionMode="single" cellSelection selection={selectedProduct2} onSelectionChange={e => setselectedProduct2(e.value)} dataKey="id">
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+
+                <h6>Cell Selection Disabled With Drag Selection</h6>
+                <DataTable value={products} selectionMode="multiple" isDataSelectable={isDataCellSelectable}  cellSelection dragSelection selection={selectedProducts6} onSelectionChange={e => setselectedProducts6(e.value)} dataKey="id">
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+            </div>
         </div>
     );
 }