Вставка JSON данных файла в React Bootstrap Таблица 2

Question

Я пытаюсь импортировать локальный файл JSON для отображения данных в табличной форме с помощью React Bootstrap Table Next. Я искал другие ресурсы, но не смог найти лучший способ сделать это. Могу ли я получить некоторые рекомендации по импорту моего файла для отображения на столе.

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);

Answer 1

Вот рабочий пример для вас: https://codesandbox.io/s/festive-rgb-75z4o/. Lmk, если у вас есть какие-либо сомнения.

Answer 2

В моем коде я настроил данные столбца на основе файла json, предположим, что данные. json как показано ниже

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

мы можем настроить заголовки столбцов на основе json ключи элементов, как показано ниже

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);
    });

мы можем передать columnData в таблицу Bootstrap,

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

Надеюсь, это поможет.