/Javascript/Bootstrap/React bootstrap table

React bootstrap table

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

6 votes229 views4 answers
Bootstrap not working in angular
Javascript Bootstrap
24 votes234 views5 answers
Open bootstrap modal with javascript
Javascript Bootstrap
13 votes278 views4 answers
How to print background bootstrap
CSS Bootstrap
2 votes227 views1 answer
Can't import react bootstrap
Javascript Bootstrap
34 votes223 views6 answers
Rounded bootstrap
Javascript Bootstrap
0 vote340 views1 answer
Bootstrap datepicker js cdn
Javascript Bootstrap
22 votes424 views2 answers
React bootstrap carousal not working
CSS Bootstrap
0 vote147 views1 answer
Import button react-bootstrap
Javascript Bootstrap
0 vote275 views2 answers
./node_modules/bootstrap/dist/js/bootstrap.bundle.js
Javascript Bootstrap
1 vote301 views1 answer
Bootstrap 4 material icon vertical align
CSS Bootstrap