/Javascript/React/Check uncek react-bootstrap-table reactjs

Check uncek react-bootstrap-table reactjs

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 }) => (
    /*     <div
      className="btn-group btn-group-toggle btn-group-vertical"
      data-toggle="buttons"
    >
      {columns
        .map(column => ({
          ...column,
          toggle: toggles[column.dataField]
        }))
        .map(column => (
          <button
            type="button"
            key={column.dataField}
            className={`btn btn-warning ${column.toggle ? "active" : ""}`}
            data-toggle="button"
            aria-pressed={column.toggle ? "true" : "false"}
            onClick={() => onColumnToggle(column.dataField)}
          >
            {column.text}
          </button>
        ))}
    </div> */
    <div className = "text-center">
      {columns
        .map(column => ({
          ...column,
          toggle: toggles[column.dataField]
        }))
        .map((column, index) => (
            <Form.Check
              type="checkbox"
              key = {column.dataField}
              inline
              label={column.text}
              id={column.dataField}
              //aria-pressed={(column.toggle) ? "true" : "false"}
              checked={column.toggle}
              aria-checked={ column.toggle ? "true" : "false"}
              onChange = {() => onColumnToggle(column.dataField)}
              //onClick={() => onColumnToggle(column.dataField)}
            />
        ))}
    </div>
  );

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ToolkitProvider
        keyField="id"
        data={products}
        columns={columns}
        columnToggle
      >
        {props => (
          <div>
            <CustomToggleList {...props.columnToggleProps} />
            <hr />
            <BootstrapTable {...props.baseProps} />
          </div>
        )}
      </ToolkitProvider>
    </div>
  );
}

Source: stackoverflow.com

Similar codes

1 vote183 views1 answer
Parent to child react state
Javascript React
0 vote263 views1 answer
Input type disappear side scroll react
Javascript React
0 vote221 views1 answer
Radio button default checked react
Javascript React
18 votes206 views3 answers
Add object to array react hook
Javascript React
158 votes810 views6 answers
React create app
Javascript React
69 votes238 views6 answers
React icon
Javascript React
0 vote268 views2 answers
Airbnb react native eslint
Javascript React
0 vote203 views1 answer
Inline style to change background color react
Javascript React
-2 votes216 views1 answer
React native generate signed apk getting older version
Javascript React
0 vote259 views1 answer
React component in for loop
Javascript React