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

Feature: Dropdown column type for tables

Browse source
This commit is contained in:
navaneeth 2021-04-24 22:02:14 +05:30
parent c10f452f84
commit e185434014
2 changed files with 45 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,6 +11,7 @@ import {
} from "react-table";
import { resolve, resolve_references } from '@/_helpers/utils';
import Skeleton from 'react-loading-skeleton';
import SelectSearch, { fuzzySearch } from 'react-select-search';
export function Table({ id, width, height, component, onComponentClick, currentState = { components: { } }, onEvent, paramUpdated, changeCanDrag, onComponentOptionChanged }) {
@ -97,6 +98,15 @@ export function Table({ id, width, height, component, onComponentClick, currentS
const columnData = component.definition.properties.columns.value.map((column) => {
const columnSize = columnSizes[column.key] || columnSizes[column.name];
const columnType = column.columnType;
const columnOptions = {};
if(columnType === 'dropdown') {
const values = resolve_references(column.values, currentState, []);
const labels = resolve_references(column.labels, currentState, []);
columnOptions['selectOptions'] = labels.map((label, index) => {
return { name: label, value: values[index]};
});
}
return { Header:
column.name,
@ -121,6 +131,15 @@ export function Table({ id, width, height, component, onComponentClick, currentS
} else {
return cellValue;
}
} else if(columnType === 'dropdown') {
return <SelectSearch
options={columnOptions['selectOptions']}
value={cellValue}
search={true}
onChange={(value) => { handleCellValueChange(cell.row.index, column.name, value, cell.row.original) }}
filterOptions={fuzzySearch}
placeholder="Select.."
/>
} else {
return cellValue;
}

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

@ -77,6 +77,7 @@ class Table extends React.Component {
options={[
{ name: 'Default', value: 'default' },
{ name: 'String', value: 'string' },
{ name: 'Dropdown', value: 'dropdown' },
]}
value={column.columnType}
search={true}
@ -105,6 +106,31 @@ class Table extends React.Component {
/>
</div>
{column.columnType === "dropdown" &&
<div>
<div className="field mb-2">
<label class="form-label">Values</label>
<input
type="text"
class="form-control text-field"
onChange={(e) => { e.stopPropagation(); this.onColumnItemChange(index, 'values', e.target.value) }}
value={column.values}
placeholder={`{{[1, 2, 3]}}`}
/>
</div>
<div className="field mb-2">
<label class="form-label">Labels</label>
<input
type="text"
class="form-control text-field"
onChange={(e) => { e.stopPropagation(); this.onColumnItemChange(index, 'labels', e.target.value) }}
value={column.labels}
placeholder={`{{["one", "two", "three"]}}`}
/>
</div>
</div>
}
{column.columnType === "string" &&
<label className="form-check form-switch my-2">
<input