Skip to content

Commit a0fd241

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #653 from raheeliftikhar5/table-column-data-mapping
Table column data mapping
2 parents 026da8f + 5b589c0 commit a0fd241

File tree

8 files changed

+55
-8
lines changed

8 files changed

+55
-8
lines changed

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ const Wrapper = styled.div`
1919
padding: 0 8px;
2020
`;
2121

22-
const IconWrapper = styled.div<{ $style: CheckboxStyleType; ifChecked: boolean }>`
22+
const IconWrapper = styled.div<{ $style: CheckboxStyleType; $ifChecked: boolean }>`
2323
height: 22px;
2424
svg {
2525
width: 14px;
2626
height: 22px;
2727
g {
28-
stroke: ${(props) => props.ifChecked && props.$style.checkedBackground} !important;
28+
stroke: ${(props) => props.$ifChecked && props.$style.checkedBackground} !important;
2929
}
3030
}
3131
`;
@@ -87,7 +87,7 @@ export const BooleanComp = (function () {
8787
const CheckBoxComp = () => {
8888
const style = useStyle(CheckboxStyle);
8989
return (
90-
<IconWrapper $style={style} ifChecked={value}>
90+
<IconWrapper $style={style} $ifChecked={value}>
9191
{value ? (
9292
<TableCheckedIcon />
9393
) : props.falseValues === "x" ? (

‎client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
withFunction,
2222
wrapChildAction,
2323
} from "lowcoder-core";
24-
import { AlignClose, AlignLeft, AlignRight, IconRadius, BorderWidthIcon, TextSizeIcon, FontFamilyIcon, TextWeigthIcon, ImageCompIcon, controlItem } from "lowcoder-design";
24+
import { AlignClose, AlignLeft, AlignRight, IconRadius, BorderWidthIcon, TextSizeIcon, FontFamilyIcon, TextWeigthIcon, ImageCompIcon, controlItem, Dropdown, OptionType } from "lowcoder-design";
2525
import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
2626
import { ColorControl } from "comps/controls/colorControl";
2727
import { JSONValue } from "util/jsonTypes";
@@ -90,6 +90,7 @@ export const columnChildrenMap = {
9090
isCustom: valueComp<boolean>(false),
9191
// If it is a data column, it must be the name of the column and cannot be duplicated as a react key
9292
dataIndex: valueComp<string>(""),
93+
columnsList: valueComp<Array<JSONValue>>([]),
9394
hide: BoolControl,
9495
sortable: BoolControl,
9596
width: NumberControl,
@@ -189,12 +190,39 @@ export class ColumnComp extends ColumnInitComp {
189190

190191
propertyView(key: string) {
191192
const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
193+
const initialColumns = this.children.render.getSelectedComp().getParams()?.initialColumns as OptionType[] || [];
194+
const column = this.children.render.getSelectedComp().getComp().toJsonValue();
195+
let columnValue = '{{currentCell}}';
196+
if (column.comp?.hasOwnProperty('src')) {
197+
columnValue = (column.comp as any).src;
198+
} else if (column.comp?.hasOwnProperty('text')) {
199+
columnValue = (column.comp as any).text;
200+
}
201+
192202
return (
193203
<>
194204
{this.children.title.propertyView({
195205
label: trans("table.columnTitle"),
196206
placeholder: this.children.dataIndex.getView(),
197207
})}
208+
<Dropdown
209+
showSearch={true}
210+
value={columnValue}
211+
options={initialColumns}
212+
label={trans("table.dataMapping")}
213+
onChange={(value) => {
214+
// Keep the previous text value, some components do not have text, the default value is currentCell
215+
const compType = columnType;
216+
let comp: Record<string, string> = { text: value};
217+
if(columnType === 'image') {
218+
comp = { src: value };
219+
}
220+
this.children.render.dispatchChangeValueAction({
221+
compType,
222+
comp,
223+
} as any);
224+
}}
225+
/>
198226
{/* FIXME: cast type currently, return type of withContext should be corrected later */}
199227
{this.children.render.getPropertyView()}
200228
{this.children.showTitle.propertyView({

‎client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,18 @@ function renderTitle(props: { title: string; editable: boolean }) {
250250
);
251251
}
252252

253+
function getInitialColumns(columnsAggrData: ColumnsAggrData) {
254+
const initialColumns = Object.keys(columnsAggrData).map(column => ({
255+
label: <span style={{textTransform: 'capitalize'}}>{column}</span>,
256+
value: `{{currentRow.${column}}}`
257+
}))
258+
initialColumns.push({
259+
label: <span>Select with handlebars</span>,
260+
value: '{{currentCell}}',
261+
})
262+
return initialColumns;
263+
}
264+
253265
export type CustomColumnType<RecordType> = ColumnType<RecordType> & {
254266
onWidthResize?: (width: number) => void;
255267
titleText: string;
@@ -271,6 +283,7 @@ export function columnsToAntdFormat(
271283
columnsAggrData: ColumnsAggrData,
272284
onTableEvent: (eventName: any) => void,
273285
): Array<CustomColumnType<RecordType>> {
286+
const initialColumns = getInitialColumns(columnsAggrData);
274287
const sortMap: Map<string | undefined, SortOrder> = new Map(
275288
sort.map((s) => [s.column, s.desc ? "descend" : "ascend"])
276289
);
@@ -344,6 +357,7 @@ export function columnsToAntdFormat(
344357
currentRow: _.omit(record, OB_ROW_ORI_INDEX),
345358
currentIndex: index,
346359
currentOriginalIndex: tryToNumber(record[OB_ROW_ORI_INDEX]),
360+
initialColumns,
347361
},
348362
String(record[OB_ROW_ORI_INDEX])
349363
)

‎client/packages/lowcoder/src/comps/controls/dropdownControl.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,15 +92,16 @@ export function dropdownAbstractControl<T extends OptionsType>(
9292
return controlItem(
9393
{ filterText: params.label },
9494
<DropdownPropertyView<T>
95+
{...params}
9596
value={this.value}
9697
options={finalOptions}
9798
onChange={(value) => {
99+
console.log(value);
98100
if (!params.disableDispatchValueChange) {
99101
this.dispatchChangeValueAction(value);
100102
}
101103
params.onChange?.(value);
102104
}}
103-
{...params}
104105
/>
105106
);
106107
}

‎client/packages/lowcoder/src/i18n/locales/de.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1135,6 +1135,7 @@ export const de = {
11351135
"auto": "Auto",
11361136
"fixed": "Festgelegt",
11371137
"columnType": "Säule Typ",
1138+
"dataMapping": "Datenzuordnung",
11381139
"numberStep": "Schritt",
11391140
"numberStepTooltip": "Die Zahl, auf die der aktuelle Wert erhöht oder verringert wird. Es kann eine ganze Zahl oder eine Dezimalzahl sein",
11401141
"precision": "Präzision",
@@ -2375,7 +2376,7 @@ export const de = {
23752376
"selectBackground": "Ausgewählter Hintergrund"
23762377
},
23772378
"componentDocExtra": {
2378-
"table": "Zusätzliche Dokumentation für die Tabellenkomponente"
2379+
"table": table,
23792380
},
23802381
"idSource": {
23812382
"title": "OAuth-Anbieter",

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1258,6 +1258,7 @@ export const en = {
12581258
"auto": "Auto",
12591259
"fixed": "Fixed",
12601260
"columnType": "Column Type",
1261+
"dataMapping": "Data Mapping",
12611262
"numberStep": "Step",
12621263
"numberStepTooltip": "The number to which the current value is increased or decreased. It can be an integer or decimal",
12631264
"precision": "Precision",
@@ -2573,7 +2574,7 @@ export const en = {
25732574
"selectBackground": "Selected Background"
25742575
},
25752576
"componentDocExtra": {
2576-
table,
2577+
"table": table,
25772578
},
25782579
"idSource": {
25792580
"title": "OAuth Providers",

‎client/packages/lowcoder/src/i18n/locales/translation_files/en.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
{
23
"productName": "Lowcoder",
34
"productDesc": "Create software applications for your company and customers with minimal coding experience. Lowcoder is an excellent alternative to Retool, Appsmith, and Tooljet.",

‎client/packages/lowcoder/src/i18n/locales/zh.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1221,6 +1221,7 @@ table: {
12211221
imageSrc: "图片链接",
12221222
imageSize: "图片尺寸",
12231223
columnTitle: "标题",
1224+
dataMapping: "数据映射",
12241225
showTitle: "显示标题",
12251226
showTitleTooltip: "显示/隐藏表标题中的列标题",
12261227
sortable: "可排序",
@@ -2521,7 +2522,7 @@ calendar: {
25212522
selectBackground: "选中背景",
25222523
},
25232524
componentDocExtra: {
2524-
table,
2525+
table: table,
25252526
},
25262527
idSource: {
25272528
title: "OAuth 提供商",

0 commit comments

Comments
 (0)