diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx
index fa9b21b60701d..f6104cadeb5e2 100644
--- a/src/plugins/discover/public/application/components/table/table.tsx
+++ b/src/plugins/discover/public/application/components/table/table.tsx
@@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
import { i18n } from '@kbn/i18n';
import { DocViewTableRow } from './table_row';
import { trimAngularSpan } from './table_helper';
@@ -54,6 +54,19 @@ export function DocViewTable({
setFieldsWithParents(arr);
}, [indexPattern, hit]);
+ const toggleColumn = useCallback(
+ (field: string) => {
+ if (onRemoveColumn && onAddColumn && Array.isArray(columns)) {
+ if (columns.includes(field)) {
+ onRemoveColumn(field);
+ } else {
+ onAddColumn(field);
+ }
+ }
+ },
+ [onRemoveColumn, onAddColumn, columns]
+ );
+
if (!indexPattern) {
return null;
}
@@ -65,6 +78,7 @@ export function DocViewTable({
fieldRowOpen[field] = !fieldRowOpen[field];
setFieldRowOpen({ ...fieldRowOpen });
}
+
return (
@@ -85,16 +99,6 @@ export function DocViewTable({
const isCollapsible = value.length > COLLAPSE_LINE_LENGTH;
const isCollapsed = isCollapsible && !fieldRowOpen[field];
- const toggleColumn =
- onRemoveColumn && onAddColumn && Array.isArray(columns)
- ? () => {
- if (columns.includes(field)) {
- onRemoveColumn(field);
- } else {
- onAddColumn(field);
- }
- }
- : undefined;
const displayUnderscoreWarning = !mapping(field) && field.indexOf('_') === 0;
const fieldType = isNestedFieldParent(field, indexPattern)
@@ -112,7 +116,7 @@ export function DocViewTable({
isColumnActive={Array.isArray(columns) && columns.includes(field)}
onFilter={filter}
onToggleCollapse={() => toggleValueCollapse(field)}
- onToggleColumn={toggleColumn}
+ onToggleColumn={() => toggleColumn(field)}
value={value}
valueRaw={valueRaw}
/>
@@ -134,17 +138,6 @@ export function DocViewTable({
) : null}
{multiFields[field]
? multiFields[field].map((multiField) => {
- const toggleColumnMulti =
- onRemoveColumn && onAddColumn && Array.isArray(columns)
- ? () => {
- if (columns.includes(multiField)) {
- onRemoveColumn(multiField);
- } else {
- onAddColumn(multiField);
- }
- }
- : undefined;
-
return (
{
toggleValueCollapse(multiField);
}}
- onToggleColumn={toggleColumnMulti}
+ onToggleColumn={() => toggleColumn(multiField)}
value={value}
valueRaw={valueRaw}
/>