import React from "react";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import BootstrapTable from "react-bootstrap-table-next";
import ToolkitProvider from "react-bootstrap-table2-toolkit";
import { Form } from "react-bootstrap";

export default function App() {
  const columns = [
    {
      dataField: "id",
      text: "Product ID",
      hidden: true
    },
    {
      dataField: "name",
      text: "Product Name",
      hidden: true
    },
    {
      dataField: "price",
      text: "Product Price",
      hidden: true
    },
    {
      dataField: "field1",
      text: "Field 1"
    },
    {
      dataField: "field2",
      text: "Field 2"
    },
    {
      dataField: "field3",
      text: "Field 3"
    },
    {
      dataField: "field4",
      text: "Field 4"
    },
    {
      dataField: "field5",
      text: "Field 5"
    },
    {
      dataField: "field6",
      text: "Field 6"
    },
    {
      dataField: "field7",
      text: "Field 7"
    },
    {
      dataField: "field8",
      text: "Field 8"
    },
    {
      dataField: "field9",
      text: "Field 9"
    },
    {
      dataField: "field10",
      text: "Field 10"
    },
    {
      dataField: "field11",
      text: "Field 11"
    },
    {
      dataField: "field12",
      text: "Field 12"
    }
  ];

  const products = [
    {
      id: 1,
      name: "Producto 1",
      price: 3.45,
      field1: 1,
      field2: 2,
      field3: 3,
      field4: 4,
      field5: 5,
      field6: 6,
      field7: 7,
      field8: 8,
      field9: 9,
      field10: 10,
      field11: 11,
      field12: 12
    },
    {
      id: 2,
      name: "Producto 2",
      price: 4.45,
      field1: 1,
      field2: 2,
      field3: 3,
      field4: 4,
      field5: 5,
      field6: 6,
      field7: 7,
      field8: 8,
      field9: 9,
      field10: 10,
      field11: 11,
      field12: 12
    },
    {
      id: 3,
      name: "Producto 3",
      price: 5.45,
      field1: 1,
      field2: 2,
      field3: 3,
      field4: 4,
      field5: 5,
      field6: 6,
      field7: 7,
      field8: 8,
      field9: 9,
      field10: 10,
      field11: 11,
      field12: 12
    }
  ];

  const CustomToggleList = ({ columns, onColumnToggle, toggles }) => (
    /*     

      {columns
        .map(column => ({
          ...column,
          toggle: toggles[column.dataField]
        }))
        .map(column => (
           onColumnToggle(column.dataField)}
          >
            {column.text}
          
        ))}
    
 */
    

      {columns
        .map(column => ({
          ...column,
          toggle: toggles[column.dataField]
        }))
        .map((column, index) => (
             onColumnToggle(column.dataField)}
              //onClick={() => onColumnToggle(column.dataField)}
            />
        ))}
    
  );

  return (
    

      
Hello CodeSandbox
      
Start editing to see some magic happen!
      
        {props => (
          

            
            

            
          
        )}
      
    
  );
}