Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Feature: Multi-badges as column type for tables

Browse source
This commit is contained in:
navaneeth 2021-05-09 13:36:08 +05:30
parent bcb31d0306
commit b2033dafc7
3 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/Editor/Components/Table/CustomSelect.jsx
View file

@ -4,17 +4,21 @@ import SelectSearch from 'react-select-search';
export const CustomSelect = ({ options, value, multiple, disabled, onChange }) => {
function renderValue(valueProps) {
return <span {...valueProps} class="badge bg-blue-lt p-2">{valueProps.value}</span>
if(valueProps) {
return valueProps.value.split(', ').map((value) => <span {...valueProps} class="badge bg-blue-lt p-2 mx-1">{value}</span>);
}
}
return (
<div class="custom-select">
<SelectSearch
options={options}
printOptions="on-focus"
value={value}
renderValue={renderValue}
search={true}
search={false}
onChange={onChange}
multiple={multiple}
placeholder="Select.."
/>
</div>

15
frontend/src/Editor/Components/Table/Table.jsx
View file

@ -217,7 +217,7 @@ export function Table({
const columnType = column.columnType;
const columnOptions = {};
if (columnType === 'dropdown' || columnType === 'multiselect' || columnType === 'badge') {
if (columnType === 'dropdown' || columnType === 'multiselect' || columnType === 'badge' || columnType === 'badges') {
const values = resolveReferences(column.values, currentState) || [];
const labels = resolveReferences(column.labels, currentState, []) || [];
@ -302,6 +302,19 @@ export function Table({
/>
</div>
);
} if (columnType === 'badges') {
return (
<div>
<CustomSelect
options={columnOptions.selectOptions}
value={cellValue}
multiple={true}
onChange={(value) => {
handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
}}
/>
</div>
);
}
return cellValue || '';
}

3
frontend/src/Editor/Inspector/Components/Table.jsx
View file

@ -97,6 +97,7 @@ class Table extends React.Component {
{ name: 'Default', value: 'default' },
{ name: 'String', value: 'string' },
{ name: 'Badge', value: 'badge' },
{ name: 'Multiple badges', value: 'badges' },
{ name: 'Dropdown', value: 'dropdown' },
{ name: 'Multiselect', value: 'multiselect' }
]}
@ -135,7 +136,7 @@ class Table extends React.Component {
/>
</div>
{(column.columnType === 'dropdown' || column.columnType === 'multiselect' || column.columnType === 'badge') && (
{(column.columnType === 'dropdown' || column.columnType === 'multiselect' || column.columnType === 'badge' || column.columnType === 'badges') && (
<div>
<div className="field mb-2">
<label className="form-label">Values</label>