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

added feature to change the column name dynamically in the Table component (#5795)

Browse source 
* added feature to change the column name dynamically

* code refactored

* made the chnages to avoid app crashing if column key is defined

* bug fixed: column.accessor is not a function error

* bug fixed

* bug fixed if column name is empty then provide empty string
This commit is contained in:
Manish Kushare 2023-03-27 14:21:08 +05:30 committed by GitHub
parent a7f7492d81
commit b56d6b0e0e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/Editor/Components/Table/columns/index.jsx
View file

@ -55,10 +55,9 @@ export default function generateColumnsData({
}
const width = columnSize || defaultColumn.width;
return {
id: column.id,
Header: column.name,
Header: resolveReferences(column.name, currentState) ?? '',
accessor: column.key || column.name,
filter: customFilter,
width: width,

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

@ -210,15 +210,18 @@ class TableComponent extends React.Component {
<label data-cy={`label-column-name`} className="form-label">
{this.props.t('widget.Table.columnName', 'Column name')}
</label>
<input
data-cy={`input-column-name`}
type="text"
className="form-control text-field"
onBlur={(e) => {
e.stopPropagation();
this.onColumnItemChange(index, 'name', e.target.value);
<CodeHinter
currentState={this.props.currentState}
initialValue={column.name}
theme={this.props.darkMode ? 'monokai' : 'default'}
mode="javascript"
lineNumbers={false}
placeholder={column.name}
onChange={(value) => this.onColumnItemChange(index, 'name', value)}
componentName={this.getPopoverFieldSource(column.columnType, 'name')}
popOverCallback={(showing) => {
this.setColumnPopoverRootCloseBlocker('name', showing);
}}
defaultValue={column.name}
/>
</div>
{(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && (
@ -961,6 +964,7 @@ class TableComponent extends React.Component {
{({ innerRef, droppableProps, placeholder }) => (
<div className="w-100" {...droppableProps} ref={innerRef}>
{columns.value.map((item, index) => {
const resolvedItemName = resolveReferences(item.name, this.state.currentState);
return (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
@ -978,22 +982,22 @@ class TableComponent extends React.Component {
rootClose={this.state.popOverRootCloseBlockers.length === 0}
overlay={this.columnPopover(item, index)}
>
<div key={item.name}>
<div key={resolvedItemName}>
<div className={`row ${this.props.darkMode ? '' : 'bg-light'}`} role="button">
<div className="col-auto">
<img
data-cy={`draggable-handle-column-${item.name}`}
data-cy={`draggable-handle-column-${resolvedItemName}`}
src="../../assets/images/icons/dragicon.svg"
/>
</div>
<div className="col">
<div className="text" data-cy={`column-${item.name}`}>
{item.name}
<div className="text" data-cy={`column-${resolvedItemName}`}>
{resolvedItemName}
</div>
</div>
<div className="col-auto">
<svg
data-cy={`button-delete-${item.name}`}
data-cy={`button-delete-${resolvedItemName}`}
onClick={() => this.removeColumn(index)}
width="10"
height="16"