A visible column doesn't hide when toggling its 'hidden' property to 'true'

[pacproduct]

Describe the bug When switching from one set of columns with all visible columns to another set where one of them is flagged as hidden, the hidden column still shows up.

To Reproduce Steps to reproduce the behavior:

1. Prepare 2 sets of columns, the second one having a hidden column. For instance:

   const dynamicColumnsSet1 = [
     {
       dataField: "key",
       text: "Key"
     },
     {
       dataField: "description",
       text: "Description"
     },
     {
       dataField: "date",
       text: "Date"
     }
   ];
   const dynamicColumnsSet2 = [
     {
       dataField: "key",
       text: "Key"
     },
     {
       dataField: "description",
       text: "Description (should be hidden)",
       hidden: true
     },
     {
       dataField: "type",
       text: "Type"
     }
   ];

2. Create a simple react component with a button for switching from one columns set to the other one, and displaying a bootstrap table with the currently active columns set. For instance:

   export default function App() {
     const [alternativeColumnsSet, setAlternativeColumnsSet] = useState(false);
   
     const columnsSet = alternativeColumnsSet
       ? dynamicColumnsSet2
       : dynamicColumnsSet1;
   
     return (
       <div className="App">
         <button
           className="btn btn-primary"
           onClick={() => setAlternativeColumnsSet(!alternativeColumnsSet)}
         >
           {alternativeColumnsSet ? "Alternative" : "Initial"} columns set - Switch
           to the other one
         </button>
         <hr />
         <BootstrapTable
           bootstrap4
           keyField={"key"}
           data={testData}
           columns={columnsSet}
         />
       </div>
     );
   }

3. Run the example (see codesandbox below): You should see the 3 columns from the first set of columns.

4. Click on the button for switching to the second columns set: Expected behavior: The table updates with the second set of columns which displays only 2 columns "Key" and "Type" as column "Description" has its property hidden set to true. Actual behavior: The table does update, but the column "Description" which has property hidden: true is still displayed.

Codesandbox Here is an example demonstrating the issue: https://codesandbox.io/s/react-boostrap-table-next-issue-when-hiding-a-column-hp6h7

---

Am I doing something wrong?

[ccemeraldeyes]

This is still a bug more than a year later with no comments.

[SergioCym]

This is still a bug more than a year later with no comments.

[HarlesPilter]

There is a workaround. Add one "fixed hidden" column to the first column object. If one of the columns is always hidden and rendered, then the toggle works.

[Astha-Anand]

Is this issue resolved? We are still facing the same issue One of the columns property is hidden: true but column is still displayed on render. Please help!

[Xu-Justin]

Workaround: You need at least one hidden column initially. I guess it's a bug 😭