React.js ライブラリ「react-flexy-table」を使ってtableを作成する

create-react-app react-app

## 作成したプロジェクトに移動
cd react-app
 
## インストール
npm install react-flexy-table

import React from 'react'
import ReactFlexyTable from "react-flexy-table"
import "react-flexy-table/dist/index.css"

const Sample = () => {
  const data = [
    { label: "Grapes 🍇", value: "grapes" },
    { label: "Mango 🥭", value: "mango" },
    { label: "Strawberry 🍓", value: "strawberry" },
  ];
  return (    
    <div>
      <ReactFlexyTable data={data} />   
    </div>
  );
}

export default Sample;

import React from 'react';
import Sample from './sample';
import './App.css';

function App() {
  const style = {
    width: "50%",
    margin: "0 auto",
    marginTop: 150,
  };
  return (
    <div className="App">
      <div style={style}>
        <Sample />
      </div>
    </div>
  );
}

export default App;

npm start