Feature Request primefaces#1303 , datatable added selection disabled …

…prop.
huseyinbuyukdere · Sep 26, 2021 · a0f6a1c · a0f6a1c
1 parent c32d9d8
commit a0f6a1c
Show file tree

Hide file tree

Showing 7 changed files with 243 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}