1import React from "react";
2import "./styles.css";
3import "bootstrap/dist/css/bootstrap.css";
4import BootstrapTable from "react-bootstrap-table-next";
5import ToolkitProvider from "react-bootstrap-table2-toolkit";
6import { Form } from "react-bootstrap";
7
8export default function App() {
9  const columns = [
10    {
11      dataField: "id",
12      text: "Product ID",
13      hidden: true
14    },
15    {
16      dataField: "name",
17      text: "Product Name",
18      hidden: true
19    },
20    {
21      dataField: "price",
22      text: "Product Price",
23      hidden: true
24    },
25    {
26      dataField: "field1",
27      text: "Field 1"
28    },
29    {
30      dataField: "field2",
31      text: "Field 2"
32    },
33    {
34      dataField: "field3",
35      text: "Field 3"
36    },
37    {
38      dataField: "field4",
39      text: "Field 4"
40    },
41    {
42      dataField: "field5",
43      text: "Field 5"
44    },
45    {
46      dataField: "field6",
47      text: "Field 6"
48    },
49    {
50      dataField: "field7",
51      text: "Field 7"
52    },
53    {
54      dataField: "field8",
55      text: "Field 8"
56    },
57    {
58      dataField: "field9",
59      text: "Field 9"
60    },
61    {
62      dataField: "field10",
63      text: "Field 10"
64    },
65    {
66      dataField: "field11",
67      text: "Field 11"
68    },
69    {
70      dataField: "field12",
71      text: "Field 12"
72    }
73  ];
74
75  const products = [
76    {
77      id: 1,
78      name: "Producto 1",
79      price: 3.45,
80      field1: 1,
81      field2: 2,
82      field3: 3,
83      field4: 4,
84      field5: 5,
85      field6: 6,
86      field7: 7,
87      field8: 8,
88      field9: 9,
89      field10: 10,
90      field11: 11,
91      field12: 12
92    },
93    {
94      id: 2,
95      name: "Producto 2",
96      price: 4.45,
97      field1: 1,
98      field2: 2,
99      field3: 3,
100      field4: 4,
101      field5: 5,
102      field6: 6,
103      field7: 7,
104      field8: 8,
105      field9: 9,
106      field10: 10,
107      field11: 11,
108      field12: 12
109    },
110    {
111      id: 3,
112      name: "Producto 3",
113      price: 5.45,
114      field1: 1,
115      field2: 2,
116      field3: 3,
117      field4: 4,
118      field5: 5,
119      field6: 6,
120      field7: 7,
121      field8: 8,
122      field9: 9,
123      field10: 10,
124      field11: 11,
125      field12: 12
126    }
127  ];
128
129  const CustomToggleList = ({ columns, onColumnToggle, toggles }) => (
130    /*     <div
131      className="btn-group btn-group-toggle btn-group-vertical"
132      data-toggle="buttons"
133    >
134      {columns
135        .map(column => ({
136          ...column,
137          toggle: toggles[column.dataField]
138        }))
139        .map(column => (
140          <button
141            type="button"
142            key={column.dataField}
143            className={`btn btn-warning ${column.toggle ? "active" : ""}`}
144            data-toggle="button"
145            aria-pressed={column.toggle ? "true" : "false"}
146            onClick={() => onColumnToggle(column.dataField)}
147          >
148            {column.text}
149          </button>
150        ))}
151    </div> */
152    <div className = "text-center">
153      {columns
154        .map(column => ({
155          ...column,
156          toggle: toggles[column.dataField]
157        }))
158        .map((column, index) => (
159            <Form.Check
160              type="checkbox"
161              key = {column.dataField}
162              inline
163              label={column.text}
164              id={column.dataField}
165              //aria-pressed={(column.toggle) ? "true" : "false"}
166              checked={column.toggle}
167              aria-checked={ column.toggle ? "true" : "false"}
168              onChange = {() => onColumnToggle(column.dataField)}
169              //onClick={() => onColumnToggle(column.dataField)}
170            />
171        ))}
172    </div>
173  );
174
175  return (
176    <div className="App">
177      <h1>Hello CodeSandbox</h1>
178      <h2>Start editing to see some magic happen!</h2>
179      <ToolkitProvider
180        keyField="id"
181        data={products}
182        columns={columns}
183        columnToggle
184      >
185        {props => (
186          <div>
187            <CustomToggleList {...props.columnToggleProps} />
188            <hr />
189            <BootstrapTable {...props.baseProps} />
190          </div>
191        )}
192      </ToolkitProvider>
193    </div>
194  );
195}
196