Inserting JSON File Data into React Bootstrap Table 2

Question

I'm trying to import a local JSON file to display data in a tabular way with React Bootstrap Table Next. I have looked for other resources but could not find the best way to do this. Could I get some guidance in importing my file to display on the table.

import React from "react";
import ReactDOM from "react-dom";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import BootstrapTable from "react-bootstrap-table-next";

var data = require('./data.json');

const items = [
  data
];

const Columnlist = props => {
  const columns = [
    {
      dataField: "MEMNAME",
      text: 'Dataset Name'
    },
    {
      dataField: "NAME",
      text: 'Variable Name'
    },
    {
      dataField: "LABEL",
      text: 'Variable Label'
    }
  ];
  return(
    <div style = {{padding: '20px'}}>
      <h1 className='h2'>Variables</h1>
      <BootstrapTable keyField='id' data = {items} columns = {columns} />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<Columnlist />, rootElement);

Anuj Shah · Accepted Answer · 2020-02-05 17:17:41Z

1

Here's a working example for you: https://codesandbox.io/s/festive-rgb-75z4o/. Lmk if you have any doubts.

answered Feb 5, 2020 at 17:17

Anuj Shah

5714 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Dyas Yaskur · Accepted Answer · 2020-03-10 07:01:15Z

In my code, I customized the column data based on json file, assume the data.json as below

[
    { "id": "1", "name": "Product A", "price": 10 },
    { "id": "2", "name": "Product B", "price": 20 },
    { "id": "3", "name": "Product C", "price": 30 }
]

we can customize, the column titles based on the json element keys, like below

const columnsData = [];

Object.entries(data[0]).map(([key], index) => {

    let header = {};
        header = {
            "dataField": key,
            "text": key.toUpperCase(),
            "sort": true,
            "onSort": (field, order) => {
                console.log(`${field} : ${order}`);
            },
            "style": (cell, row, rowIndex, colIndex) => {
                if (rowIndex % 2 === 0) {
                    return {
                        backgroundColor: '#F0F0F0',
                        fontSize: '11px'
                    };
                }
                return {
                    backgroundColor: 'white',
                    fontSize: '11px'
                };
            },
            "headerStyle": (colum, colIndex) => {
                return {
                    fontSize: '11px',
                    fontWeight: 'bold',
                    width: '30%',
                    whiteSpace: 'nowrap'
                };
            },
            "bodyStyle": {
                overflow: 'overlay'
            }
        }
        columnData.push(header);
    });

we can pass columnData to Bootstrap table,

<BootstrapTable 
    keyField='id' 
    data = {items} 
    columns = {columnData} 
/>

Hope this helps.

Collectives™ on Stack Overflow

Inserting JSON File Data into React Bootstrap Table 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related