マテリアルUIとマテリアルテーブルを作成する

このポストでは、シンプルなテーブルを作成します.サンプルデータはfackerによって生成される.js

Marak / faker.js
何が本当にアーロンSwartzで起こった?
何が本当にアーロンSwartzで起こった?
View on GitHub

NPMパッケージ

＠材料表/コア

@材料UI/コア

@材料UI/アイコン

フィーカー

この場合、Codesandboxを使用しました.IO ReactJS TypeScriptテンプレートを使用してほぼ同じようにアプリケーションを作成します.
CodesandBoxとCreateアプリの間の違いはアプリです.TSX

STEP 1パッケージのインストール

$ yarn add @material-table/core @material-ui/core @material-ui/icons faker

# if you want to use npm

$ npm install "@material-table/core": "4.3.6",
    "@material-ui/core": "4.12.3",
    "@material-ui/icons": "4.11.2",
    "faker": "5.5.3",

STEP 2サンプルデータの生成
utilsを作成します.しかし、次のコードをApp.tsxに移動し、Tableコンポーネントにプロップとして渡すか、Tableコンポーネントに移動できます.
以下の3種類のデータ、UUID、最初の名前、および最後の名前を生成します.
詳細は確認できます↓.
https://marak.github.io/faker.js/

import faker from "faker";

// generate data
faker.seed(0);
export const data = [...new Array(100)].map(() => ({
  id: faker.datatype.uuid(),
  firstName: faker.name.firstName(),
  lastName: faker.name.lastName()
}));

ステップ3.コンポーネントの作成
アイコンの面では、公式インストールページに従うことができます.
https://material-table.com/#/docs/install
このポストでは、4つの小道具を渡します.

のコラム

のデータ

アイコン

オプション

あなたはAll Props pageの詳細を確認することができます
https://material-table.com/#/docs/all-props

import React, { forwardRef } from "react";
import MaterialTable, { Column, Icons } from "@material-table/core";
import {
  AddBox,
  ArrowDownward,
  Check,
  ChevronLeft,
  ChevronRight,
  Clear,
  DeleteOutline,
  Edit,
  FilterList,
  FirstPage,
  LastPage,
  Remove,
  SaveAlt,
  Search,
  ViewColumn
} from "@material-ui/icons";
import { Container } from "@material-ui/core";
import { Person } from "../type";

const tableIcons: Icons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => (
    <ChevronRight {...props} ref={ref} />
  )),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => (
    <ChevronLeft {...props} ref={ref} />
  )),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};

type Props = {
  data: Person[];
};

const columns: Array<Column<Person>> = [
  { title: "Id", field: "id" },
  { title: "First Name", field: "firstName" },
  { title: "Last Name", field: "lastName" }
];

const options = {
  paging: true,
  pageSize: 10,
  emptyRowsWhenPaging: false,
  pageSizeOptions: [10, 20, 50]
};

export const Table = ({ data }: Props) => {
  return (
    <Container>
      <MaterialTable
        columns={columns}
        data={data}
        icons={tableIcons}
        options={options}
      />
    </Container>
  );
};

ステップ4.アプリケーションの実行
エラーがない場合は、このように表示されます.
まず、10行を示す.


コデンドボックス
https://codesandbox.io/s/frosty-bash-icd6t?file=/src/App.tsx