diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js
index 4cdedfd566..9219af0862 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js
@@ -1,3 +1,5 @@
+// TODO delete this file
+
import React, { memo, useCallback, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { ButtonDropdown } from 'reactstrap';
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/InputCheckbox/index.js b/packages/strapi-plugin-content-manager/admin/src/components/InputCheckbox/index.js
index 9d2277bf67..6bdc33fe38 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/InputCheckbox/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/InputCheckbox/index.js
@@ -3,6 +3,7 @@
* InputCheckbox
*/
+// TODO delete this file
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { Div, Label } from './components';
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/StyledLink.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/StyledLink.js
new file mode 100644
index 0000000000..c75e39d3a9
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/StyledLink.js
@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const StyledLink = styled(Link)`
+ display: block;
+ width: 100%;
+
+ text-decoration: none;
+ color: #333740;
+ font-size: 13px;
+ svg {
+ margin-right: 10px;
+ vertical-align: middle;
+ }
+ &:hover {
+ text-decoration: none;
+ span {
+ color: #007eff;
+ }
+ svg {
+ g {
+ fill: #007eff;
+ }
+ }
+ }
+`;
+
+export default StyledLink;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/Wrapper.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/Wrapper.js
new file mode 100644
index 0000000000..89179f870a
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/Wrapper.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ padding: 10px 15px;
+ border-bottom: 1px solid rgb(247, 248, 248);
+`;
+
+export default Wrapper;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/index.js
new file mode 100644
index 0000000000..d08cb88946
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/index.js
@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { LayoutIcon, useGlobalContext } from 'strapi-helper-plugin';
+import { FormattedMessage } from 'react-intl';
+import Link from './StyledLink';
+import Wrapper from './Wrapper';
+
+const ConfigureLink = ({ slug }) => {
+ const { emitEvent } = useGlobalContext();
+
+ const handleClick = () => {
+ emitEvent('willEditListLayout');
+ };
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+ConfigureLink.propTypes = {
+ slug: PropTypes.string.isRequired,
+};
+
+export default memo(ConfigureLink);
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Field/Wrapper.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Field/Wrapper.js
new file mode 100644
index 0000000000..1cecc7b018
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Field/Wrapper.js
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.li`
+ padding: 0 14px;
+ height: 36px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ &:hover {
+ cursor: pointer;
+ background-color: ${({ theme }) => theme.main.colors.mediumGrey};
+ }
+`;
+
+export default Wrapper;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Field/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Field/index.js
new file mode 100644
index 0000000000..e4c19a85bc
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Field/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox } from '@buffetjs/core';
+import Wrapper from './Wrapper';
+
+const Field = ({ name, onChange, value }) => {
+ const handleChange = ({ target: { name, value } }) => {
+ onChange({ name, value: !value });
+ };
+
+ return (
+
+
+
+ );
+};
+
+Field.propTypes = {
+ name: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ value: PropTypes.bool.isRequired,
+};
+
+export default Field;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Fields/Wrapper.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Fields/Wrapper.js
new file mode 100644
index 0000000000..22f7d5c05e
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Fields/Wrapper.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';
+import { Text } from '@buffetjs/core';
+
+const Wrapper = styled(props => )`
+ margin-bottom: 0;
+ padding: 9px 0 0 0;
+ min-width: 228px;
+ list-style-type: none;
+ background-color: ${({ theme }) => theme.main.colors.white};
+`;
+
+Wrapper.propTypes = {
+ ...themePropTypes,
+};
+
+export default Wrapper;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Fields/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Fields/index.js
new file mode 100644
index 0000000000..f6d5fe3fb2
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Fields/index.js
@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Field from '../Field';
+import Wrapper from './Wrapper';
+
+const Fields = ({ displayedHeaders, items, onChange }) => {
+ console.log({ displayedHeaders, items });
+
+ const getInputValue = useCallback(
+ headerName => displayedHeaders.findIndex(({ name }) => name === headerName) !== -1,
+ [displayedHeaders]
+ );
+
+ return (
+
+ {items.map(header => (
+
+ ))}
+
+ );
+};
+
+Fields.propTypes = {
+ displayedHeaders: PropTypes.array.isRequired,
+ items: PropTypes.array.isRequired,
+ onChange: PropTypes.func.isRequired,
+};
+
+export default Fields;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Header/Reset.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Header/Reset.js
new file mode 100644
index 0000000000..83ce24ab68
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Header/Reset.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const Reset = styled(Text)`
+ cursor: pointer;
+`;
+
+export default Reset;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Header/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Header/index.js
new file mode 100644
index 0000000000..6fe70caa59
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Header/index.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Flex, Padded, Text } from '@buffetjs/core';
+import { BaselineAlignement, useGlobalContext } from 'strapi-helper-plugin';
+import { getTrad } from '../../../../utils';
+import Reset from './Reset';
+
+const Header = ({ onClick, onToggle }) => {
+ const { emitEvent } = useGlobalContext();
+
+ const handleClick = () => {
+ onClick();
+ onToggle();
+
+ emitEvent('willChangeListFieldsSettings');
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+Header.propTypes = {
+ onClick: PropTypes.func.isRequired,
+ onToggle: PropTypes.func.isRequired,
+};
+
+export default Header;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Wrapper.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Wrapper.js
new file mode 100644
index 0000000000..4eb4682c75
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Wrapper.js
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ display: flex;
+ margin-bottom: 6px;
+ justify-content: flex-end;
+ /* TODO: temporary until update in buffet.js */
+ > div {
+ > div {
+ left: auto;
+ right: 0 !important;
+ }
+ }
+`;
+
+export default Wrapper;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/index.js
new file mode 100644
index 0000000000..e2c6a5c790
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/index.js
@@ -0,0 +1,45 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Flex, Padded, Picker } from '@buffetjs/core';
+import { Carret } from '@buffetjs/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Fields from './Fields';
+import Header from './Header';
+import Wrapper from './Wrapper';
+import ConfigureLink from './ConfigureLink';
+
+const FieldPicker = ({ displayedHeaders, items, onChange, onClickReset, slug }) => {
+ return (
+
+ (
+
+
+
+
+
+
+
+
+ )}
+ renderSectionContent={onToggle => (
+ <>
+
+
+
+ >
+ )}
+ />
+
+ );
+};
+
+FieldPicker.propTypes = {
+ displayedHeaders: PropTypes.array.isRequired,
+ items: PropTypes.array.isRequired,
+ onChange: PropTypes.func.isRequired,
+ onClickReset: PropTypes.func.isRequired,
+ slug: PropTypes.string.isRequired,
+};
+
+export default memo(FieldPicker);
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js
index 90d4618da1..ff7d8c4468 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js
@@ -24,13 +24,14 @@ import {
getRequestUrl,
getTrad,
} from '../../utils';
-import DisplayedFieldsDropdown from '../../components/DisplayedFieldsDropdown';
+// import DisplayedFieldsDropdown from '../../components/DisplayedFieldsDropdown';
import Container from '../../components/Container';
import CustomTable from '../../components/CustomTable';
import FilterPicker from '../../components/FilterPicker';
import Search from '../../components/Search';
import ListViewProvider from '../ListViewProvider';
import { AddFilterCta, FilterIcon, Wrapper } from './components';
+import FieldPicker from './FieldPicker';
import Filter from './Filter';
import Footer from './Footer';
import {
@@ -421,13 +422,20 @@ function ListView({
-
+ {/* */}