● React のグリッド、データテーブル

● jbetancur / react-data-table-component

デモ : https://codesandbox.io/s/fz295
ドキュメント : https://react-data-table-component.netlify.app/?path=/story/getting-started-intro--page

インストール

yarn add react-data-table-component

使い方

import DataTable from 'react-data-table-component';

const columns = [
    {
        name: 'Title',
        selector: row => row.title,
    },
    {
        name: 'Year',
        selector: row => row.year,
    },
];

const data = [
    {
        id: 1,
        title: 'Beetlejuice',
        year: '1988',
    },
    {
        id: 2,
        title: 'Ghostbusters',
        year: '1984',
    },
]

function MyComponent() {
    return (
        <DataTable
            columns={columns}
            data={data}
        />
    );
};

画像を表示させる

const columns = [
    {
        name: 'Avator',
        selector: (row: any) => <img src={row.avartar} width="36" alt="avator" /> ,
    },
];

● mbrn / material-table

デモ : https://material-table.com/#/

インストール

yarn add material-table @material-ui/core

使い方

import MaterialTable from "material-table";

  return (
    <Layout>

      <main>
        <MaterialTable
          columns={[
            { title: "名前", field: "name" },
            { title: "かな", field: "surname" },
            { title: "birthYear", field: "birthYear", type: "numeric" },
            {
              title: "birthCity",
              field: "birthCity",
              lookup: { 34: "Tokyo", 63: "Osaka" },
            },
          ]}

          options={{
            search: true
          }}

          data={[
            {
              name: "山田",
              surname: "やまだ",
              birthYear: 1987,
              birthCity: 63,
            },
            {
              name: "大橋",
              surname: "おおはし",
              birthYear: 1990,
              birthCity: 34,
            },
            {
              name: "中村",
              surname: "なかむら",
              birthYear: 1990,
              birthCity: 34,
            },
          ]}
          title="Demo Title"
        />
      </main>

    </Layout>
  );