RadioButton based selection for DataTable

src/components/column/Column.vue

@@ -57,6 +57,10 @@ export default {
         excludeGlobalFilter: {
             type: Boolean,
             default: false
+        },
+        selectionMode: {
+            type: String,
+            default: null
         }
     },
     render() {

src/components/datatable/DataTable.vue

@@ -45,6 +45,9 @@
                             @click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null">
                             <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.bodyStyle" :class="col.bodyClass">
                                 <ColumnSlot :data="rowData" :column="col" type="body" v-if="col.$scopedSlots.body" />
+                                <template v-else-if="col.selectionMode">
+                                    <DTRadioButton :value="rowData" :checked="isSelected(rowData)" @change="toggleRowWithRadio" />
+                                </template>
                                 <template v-else>{{resolveFieldData(rowData, col.field)}}</template>
                             </td>
                         </tr>
@@ -77,6 +80,7 @@ import ObjectUtils from '../utils/ObjectUtils';
 import FilterUtils from '../utils/FilterUtils';
 import DomHandler from '../utils/DomHandler';
 import Paginator from '../paginator/Paginator';
+import RowRadioButton from './RowRadioButton';
 
 const ColumnSlot = {
     functional: true,
@@ -600,6 +604,18 @@ export default {
                 return null;
             }
         },
+        toggleRowWithRadio(event) {
+            const rowData = event.data;
+
+            if (this.isSelected(rowData)) {
+                this.$emit('update:selection', null);
+                this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'radiobutton'});
+            }
+            else {
+                this.$emit('update:selection', rowData);
+                this.$emit('row-select', {originalEvent: event, data: rowData, type: 'radiobutton'});
+            }
+        },
         isSingleSelectionMode() {
             return this.selectionMode === 'single';
         },
@@ -784,7 +800,8 @@ export default {
     },
     components: {
         'ColumnSlot': ColumnSlot,
-        'DTPaginator': Paginator
+        'DTPaginator': Paginator,
+        'DTRadioButton': RowRadioButton
     }
 }
 </script>

src/components/datatable/RowRadioButton.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="p-radiobutton p-component" @click="onClick">
+        <div class="p-hidden-accessible">
+           <input ref="input" type="radio" :checked="checked" @focus="onFocus($event)" @blur="onBlur($event)" :disabled="disabled">
+        </div>
+        <div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
+            <span :class="['p-radiobutton-icon p-c', {'pi pi-circle-on': checked}]"></span>
+        </div>
+    </div>
+</template>
+
+<script>
+import ObjectUtils from '../utils/ObjectUtils';
+
+export default {
+    inheritAttrs: false,
+    props: {
+		value: null,
+        disabled: null,
+        checked: null
+    },
+    data() {
+        return {
+            focused: false
+        };
+    },
+    methods: {
+        onClick(event) {
+            if (!this.disabled) {
+                if (!this.checked) {
+                    this.$emit('change', {
+                        originalEvent: event,
+                        data: this.value
+                    });
+                }
+
+                this.$refs.input.focus();
+            }
+        },
+        onFocus(event) {
+            this.focused = true;
+        },
+        onBlur(event) {
+            this.focused = false;
+        }
+    }
+}
+</script>

src/views/datatable/DataTableSelectionDemo.vue

@@ -51,6 +51,17 @@
                 <Column field="brand" header="Brand"></Column>
                 <Column field="color" header="Color"></Column>
             </DataTable>
+
+            <h3>RadioButton</h3>
+            <p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p>
+			<DataTable :value="cars" :selection.sync="selectedCar3" dataKey="vin">
+                <Column selectionMode="single" headerStyle="width: 3em"></Column>
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year"></Column>
+                <Column field="brand" header="Brand"></Column>
+                <Column field="color" header="Color"></Column>
+            </DataTable>
+            {{selectedCar3 ? selectedCar3.vin : 'none'}}
 		</div>
 
         <DataTableDoc />
@@ -68,8 +79,10 @@ export default {
             cars: null,
             selectedCar1: null,
             selectedCar2: null,
+            selectedCar3: null,
             selectedCars1: null,
-            selectedCars2: null
+            selectedCars2: null,
+            selectedCars3: null
         }
     },
     carService: null,