diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx
index c48d855dd7..e1d2ea6842 100644
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/src/components/DataListToolbar/DataListToolbar.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import { I18n } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/macro';
import {
Button,
Checkbox,
@@ -23,6 +23,7 @@ import {
SortNumericDownIcon,
SortNumericUpIcon,
TrashAltIcon,
+ PlusIcon
} from '@patternfly/react-icons';
import {
Link
@@ -114,6 +115,22 @@ class DataListToolbar extends React.Component {
return icon;
};
+ const searchDropdownItems = columns
+ .filter(({ key }) => key !== searchKey)
+ .map(({ key, name }) => (
+
+ { name }
+
+ ));
+
+ const sortDropdownItems = columns
+ .filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
+ .map(({ key, name }) => (
+
+ { name }
+
+ ));
+
return (
{({ i18n }) => (
@@ -146,13 +163,8 @@ class DataListToolbar extends React.Component {
{ searchColumnName }
)}
- >
- {columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
-
- { name }
-
- ))}
-
+ dropdownItems={searchDropdownItems}
+ />
)}
- >
- {columns
- .filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
- .map(({ key, name }) => (
-
- { name }
-
- ))}
-
+ dropdownItems={sortDropdownItems}
+ />