React.js ライブラリ「@saltyaom/react-table」を使って軽量なtableを作成する

yarn global add create-react-app
npx create-react-app react-app

## 作成したプロジェクトに移動
cd react-app
 
## インストール
yarn add @saltyaom/react-table

import React from 'react'
import Table from '@saltyaom/react-table'

const Sample = () => {

    const header = ['name', 'description', 'value']
    const data = [
        ['Okayu', 'cat', 10],
        ['Korone', 'dog', -1]
    ]

    return (
        <div>
            <Table
                dataKey="name"
                header={header}
                data={data}

                theadClassName="head"
                tbodyClassName="body"

                // Apply 'title' to all <th> element
                allThClassName="title"
                // Apply 'bold' to index 0 <th>
                thClassName={['bold']}

                tdClassName={[
                    '',
                    '',
                    // On index 2, apply custom condition
                    (value: number) => value >= 0 ? 'green' : 'red'
                ]}
            />
        </div>
    );
};

export default Sample;

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

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

export default App;

yarn start