diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index f87ea0aab9..01b75cf7a6 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -62,10 +62,14 @@ export class TableOptions extends PureComponent { get computedFieldNames() { const {dataLabels} = this.props - return dataLabels.map(label => { - const existing = this.fieldNames.find(f => f.internalName === label) - return existing || {internalName: label, displayName: '', visible: true} - }) + return dataLabels.length + ? dataLabels.map(label => { + const existing = this.fieldNames.find(f => f.internalName === label) + return ( + existing || {internalName: label, displayName: '', visible: true} + ) + }) + : [this.timeColumn] } public handleChooseSortBy = (option: Option) => { @@ -96,9 +100,13 @@ export class TableOptions extends PureComponent { } public handleFieldUpdate = field => { - const {handleUpdateTableOptions, tableOptions} = this.props - const {fieldNames, sortBy} = tableOptions - const updatedFields = fieldNames.map( + const {handleUpdateTableOptions, tableOptions, dataLabels} = this.props + const {sortBy, fieldNames} = tableOptions + const fields = + fieldNames.length >= dataLabels.length + ? fieldNames + : this.computedFieldNames + const updatedFields = fields.map( f => (f.internalName === field.internalName ? field : f) ) const updatedSortBy = @@ -146,6 +154,8 @@ export class TableOptions extends PureComponent { text: field.displayName || field.internalName, })) + const fields = fieldNames.length > 1 ? fieldNames : this.computedFieldNames + return ( { />