diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 9f4956237b..31dd81a646 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -791,7 +791,11 @@ export function Table({
{...cellProps}
style={{ ...cellProps.style, backgroundColor: cellBackgroundColor ?? 'inherit' }}
>
-
{cell.render('Cell')}
+
+ {cell.render('Cell')}
+
);
})}
diff --git a/frontend/src/Editor/Components/Table/columns/index.jsx b/frontend/src/Editor/Components/Table/columns/index.jsx
index 135398ad91..fbfe60b013 100644
--- a/frontend/src/Editor/Components/Table/columns/index.jsx
+++ b/frontend/src/Editor/Components/Table/columns/index.jsx
@@ -35,7 +35,8 @@ export default function generateColumnsData({
columnType === 'multiselect' ||
columnType === 'badge' ||
columnType === 'badges' ||
- columnType === 'radio'
+ columnType === 'radio' ||
+ columnType === 'image'
) {
columnOptions.selectOptions = [];
const values = resolveReferences(column.values, currentState, []);
@@ -328,6 +329,25 @@ export default function generateColumnsData({
);
}
+ case 'image': {
+ return (
+
+ {cellValue && (
+

+ )}
+
+ );
+ }
case 'radio': {
return (
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index aa54dffbf4..04757e755d 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -180,6 +180,7 @@ class TableComponent extends React.Component {
{ name: 'Multiselect', value: 'multiselect' },
{ name: 'Toggle switch', value: 'toggle' },
{ name: 'Date Picker', value: 'datepicker' },
+ { name: 'Image', value: 'image' },
]}
value={column.columnType}
search={true}
@@ -526,16 +527,80 @@ class TableComponent extends React.Component {
)}
+ {column.columnType === 'image' && (
+ <>
+
+
+ this.onColumnItemChange(index, 'borderRadius', value)}
+ componentName={this.getPopoverFieldSource(column.columnType, 'borderRadius')}
+ />
+
+
+
+ this.onColumnItemChange(index, 'width', value)}
+ componentName={this.getPopoverFieldSource(column.columnType, 'width')}
+ />
+
+
+
+ this.onColumnItemChange(index, 'height', value)}
+ componentName={this.getPopoverFieldSource(column.columnType, 'height')}
+ />
+
+
+
+ {
+ this.onColumnItemChange(index, 'objectFit', value);
+ }}
+ filterOptions={fuzzySearch}
+ placeholder={this.props.t('Select') + '...'}
+ />
+
+ >
+ )}
-
- this.onColumnItemChange(index, 'isEditable', !column.isEditable)}
- checked={column.isEditable}
- />
- {this.props.t('widget.Table.makeEditable', 'make editable')}
-
+ {column.columnType !== 'image' && (
+
+ this.onColumnItemChange(index, 'isEditable', !column.isEditable)}
+ checked={column.isEditable}
+ />
+ {this.props.t('widget.Table.makeEditable', 'make editable')}
+
+ )}
);
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index fcc4b47bcd..74da0e4184 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -3436,6 +3436,9 @@ input:focus-visible {
background: transparent;
}
}
+.jet-table-image-column{
+ margin: 0 auto;
+}
.modal-backdrop.show {
opacity: 0.74;