worldshine-redesign/client/src/shared/components/ManageTable.js

import React, { useState } from "react";
import { Dropdown } from "react-bootstrap";
import { Columns } from "react-bootstrap-icons";

const ManageTable = ({ columns, onColumnsChange, show, onToggle }) => {
  const [internalShow, setInternalShow] = useState(false);
  const [tempColumns, setTempColumns] = useState(columns);
  
  // Use external control if provided, otherwise use internal state
  const showManageTableDropdown = show !== undefined ? show : internalShow;
  const handleToggle = onToggle || (() => setInternalShow(!internalShow));

  React.useEffect(() => {
    setTempColumns(columns);
  }, [columns]);

  const handleColumnToggle = (columnKey) => {
    const updatedColumns = tempColumns.map(col => 
      col.key === columnKey ? { ...col, show: !col.show } : col
    );
    setTempColumns(updatedColumns);
  };

  const handleDone = () => {
    onColumnsChange(tempColumns);
    if (onToggle) {
      onToggle(false);
    } else {
      setInternalShow(false);
    }
  };

  const handleCancel = () => {
    setTempColumns(columns);
    if (onToggle) {
      onToggle(false);
    } else {
      setInternalShow(false);
    }
  };

  const customManageTableMenu = React.forwardRef(
    ({ children, style, className, 'aria-labelledby': labeledBy }, ref) => {
      return (
        <div
          ref={ref}
          style={style}
          className={className}
          aria-labelledby={labeledBy}
        >
          <h6>Manage Table Columns</h6>
          <div className="app-main-content-fields-section margin-sm dropdown-container">
            <div className="manage-table-columns-wrapper">
              <div className="manage-table-columns-scroll">
                {tempColumns.map((column) => (
                  <div key={column.key} style={{ marginBottom: '8px' }}>
                    <input
                      type="checkbox"
                      id={`column-${column.key}`}
                      checked={column.show}
                      onChange={() => handleColumnToggle(column.key)}
                    />
                    <label htmlFor={`column-${column.key}`} style={{ marginLeft: '8px' }}>
                      {column.label}
                    </label>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="list row">
            <div className="col-md-12">
              <button className="btn btn-default btn-sm float-right" onClick={handleCancel}> Cancel </button>
              <button className="btn btn-primary btn-sm float-right" onClick={handleDone}> Done </button>
            </div>
          </div>
        </div>
      );
    },
  );

  return (
    <Dropdown
      key={'manage-table'}
      id="manage-table"
      className="me-2"
      show={showManageTableDropdown}
      onToggle={handleToggle}
      autoClose={false}
    > 
      <Dropdown.Toggle variant="primary">
        <Columns size={16} className="me-2"></Columns>Manage Table
      </Dropdown.Toggle>
      <Dropdown.Menu as={customManageTableMenu}/> 
    </Dropdown>
  );
};

export default ManageTable;