diff --git a/frontend/src/Editor/Components/Table/Radio.jsx b/frontend/src/Editor/Components/Table/Radio.jsx
new file mode 100644
index 0000000000..b6b704d83b
--- /dev/null
+++ b/frontend/src/Editor/Components/Table/Radio.jsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+
+export const Radio = ({ options, value, onChange, readOnly }) => {
+
+ value = value || [];
+
+ return (
+
+
+ {options.map((option) =>
+
+ )}
+
+
+ );
+};
\ No newline at end of file
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index d2c376aee5..3510a2eae2 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -17,6 +17,7 @@ import Papa from 'papaparse';
import { Pagination } from './Pagination';
import { CustomSelect } from './CustomSelect';
import { Tags } from './Tags';
+import { Radio } from './Radio';
var _ = require('lodash');
@@ -226,7 +227,7 @@ export function Table({
const columnType = column.columnType;
const columnOptions = {};
- if (columnType === 'dropdown' || columnType === 'multiselect' || columnType === 'badge' || columnType === 'badges') {
+ if (columnType === 'dropdown' || columnType === 'multiselect' || columnType === 'badge' || columnType === 'badges' || columnType === 'radio') {
const values = resolveReferences(column.values, currentState) || [];
const labels = resolveReferences(column.labels, currentState, []) || [];
@@ -349,6 +350,19 @@ export function Table({
/>
);
+ } if (columnType === 'radio') {
+ return (
+
+ {
+ handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
+ }}
+ />
+
+ );
}
return cellValue || '';
}
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index ab05e17643..b5efc8c747 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -101,6 +101,7 @@ class Table extends React.Component {
{ name: 'Multiple badges', value: 'badges' },
{ name: 'Tags', value: 'tags' },
{ name: 'Dropdown', value: 'dropdown' },
+ { name: 'Radio', value: 'radio' },
{ name: 'Multiselect', value: 'multiselect' }
]}
value={column.columnType}
@@ -138,7 +139,7 @@ class Table extends React.Component {
/>
- {(column.columnType === 'dropdown' || column.columnType === 'multiselect' || column.columnType === 'badge' || column.columnType === 'badges') && (
+ {(column.columnType === 'dropdown' || column.columnType === 'multiselect' || column.columnType === 'badge' || column.columnType === 'badges' || column.columnType === 'radio') && (