Feature :: Table - option to hide columns (#4284)

* feat :: functionality to hide/show columns

* dropdown hide columns

* theme dropdown

* added toggle all option

* fix :: icon import from lib

* revamp :: changing from internal state to bootstrap poopover

* updated with react popover

* Change text from "Toggle All" to "Select All" in table column selector

Co-authored-by: Sherfin Shamsudeen <sherfin94@gmail.com>

frontend/src/Editor/Components/Table/Table.jsx

@@ -28,6 +28,8 @@ import generateActionsData from './columns/actions';
 import autogenerateColumns from './columns/autogenerateColumns';
 import IndeterminateCheckbox from './IndeterminateCheckbox';
 import { useTranslation } from 'react-i18next';
+// eslint-disable-next-line import/no-unresolved
+import { IconEyeOff } from '@tabler/icons';
 import * as XLSX from 'xlsx/xlsx.mjs';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
@@ -326,6 +328,8 @@ export function Table({
     exportData,
     selectedFlatRows,
     globalFilteredRows,
+    getToggleHideAllColumnsProps,
+    allColumns,
   } = useTable(
     {
       autoResetPage: false,
@@ -534,6 +538,39 @@ export function Table({
                   </span>
                 </OverlayTrigger>
               )}
+              <OverlayTrigger
+                trigger="click"
+                rootClose={true}
+                overlay={
+                  <Popover>
+                    <div
+                      className={`dropdown-table-column-hide-common ${
+                        darkMode ? 'dropdown-table-column-hide-dark-themed' : 'dropdown-table-column-hide'
+                      } `}
+                    >
+                      <div className="dropdown-item">
+                        <IndeterminateCheckbox {...getToggleHideAllColumnsProps()} />
+                        <span className="hide-column-name"> Select All</span>
+                      </div>
+                      {allColumns.map((column) => (
+                        <div key={column.id}>
+                          <div>
+                            <label className="dropdown-item">
+                              <input type="checkbox" {...column.getToggleHiddenProps()} />
+                              <span className="hide-column-name"> {` ${column.Header}`}</span>
+                            </label>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </Popover>
+                }
+                placement={'bottom-end'}
+              >
+                <span className={`btn btn-light btn-sm p-1 mb-0 mx-1 `}>
+                  <IconEyeOff style={{ width: '15', height: '15', margin: '0px' }} />
+                </span>
+              </OverlayTrigger>
             </div>
           </div>
         </div>

frontend/src/_styles/theme.scss

@@ -6483,6 +6483,33 @@ input.hide-input-arrows{
     background: transparent;
   }
 }
+.dropdown-table-column-hide-common{
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  border-radius: 3px;
+  height: auto;
+  overflow-y: scroll;
+  padding: 8px 16px;
+  width: 20rem;top: 20px;
+  max-height: 200px;
+}
+
+.dropdown-table-column-hide{
+  background-color: #fff;
+  box-shadow: 0 0 0 2px #0000001a;
+}
+.dropdown-table-column-hide-dark-themed {
+  color: #fff !important;
+  background-color: #1f2936 !important;
+  box-shadow: 0 0 0 2px #9292921a;
+}
+.hide-column-table-text{
+    margin: 0 !important;
+}
+.hide-column-name{
+  padding-left: 10px !important;
+}
 
 .rest-methods-url{
   .cm-s-default {