📊

Mantine datatableを軽く使ってみた。

2022/09/24に公開

React

mantine

tech

概要

Table Componentsライブラリのmantine-datatableが最近リリースされたぽいので触ってみました。

公式DOC

GitHub Repo

感想

軽く触った感じの感想としては
同じくTable ComponentsライブラリのReact-Tableがありますが
圧倒的にmantine-datatableが使いやすい印象を受けました。

ただ、もちろん機能面でReact-Tableを選択する必要が出てくる可能性はまだあると思いますが、
基本的にはdatatableで事足りそうな気がしました。

使い方

install

yarn add @mantine/core @mantine/hooks @emotion/react mantine-datatable

ライブラリの使い方としては、基本的なインターフェースはReact-Tableとほとんど変わらないです。

records
columns
をセットするだけで最低限のテーブルは完成します。

具体的な使い方は以下

公式

index.ts

import { DataTable } from 'mantine-datatable';
import companies from '~/data/companies.json';

export default function BasicUsageExample() {
  return (
    <DataTable
      columns={[
        { accessor: 'name' },
	{ accessor: 'streetAddress' },
	{ accessor: 'city' },
	{ accessor: 'state' }
	]}
      records={companies}
    />
  );
}

companies.json

[
  {
    "id": "ab1e3aa6-3116-4e0d-a33d-9262aac86747",
    "name": "Pfeffer and Sons",
    "streetAddress": "91877 Greenholt Cove",
    "city": "Tyler",
    "state": "MA",
    "missionStatement": "strategize intuitive infrastructures"
  },
  {
    "id": "6c2c52f1-e197-4892-ae8e-5b5e42c226cb",
    "name": "Hettinger, Willms and Connelly",
    "streetAddress": "353 Cremin Via",
    "city": "Deltona",
    "state": "NJ",
    "missionStatement": "mesh sexy synergies"
  },
  {
    "id": "9a2e51e0-5bbe-49af-a748-546509792e28",
    "name": "Champlin - Spencer",
    "streetAddress": "5587 Jerde Hollow",
    "city": "Deerfield Beach",
    "state": "IN",
    "missionStatement": "incentivize end-to-end e-markets"
  },
  {
    "id": "41e6105b-1115-4414-aaa6-ace1944ab3f2",
    "name": "Zulauf, McLaughlin and Jaskolski",
    "streetAddress": "673 Malinda Villages",
    "city": "Georgetown",
    "state": "SD",
    "missionStatement": "revolutionize holistic action-items"
  },
  {
    "id": "dcc6476c-2b6c-4acd-955f-32a0337b5832",
    "name": "Shanahan - Turcotte",
    "streetAddress": "29879 Braun Harbors",
    "city": "McLean",
    "state": "MT",
    "missionStatement": "reinvent visionary markets"
  },
  {
    "id": "ccdbb85d-2175-4865-a69c-a76557216364",
    "name": "Gutkowski Inc",
    "streetAddress": "964 Immanuel Views",
    "city": "Flagstaff",
    "state": "AL",
    "missionStatement": "mesh e-business schemas"
  },
  {
    "id": "19df3e35-1577-48a7-9e2f-f79c4f6c36ef",
    "name": "Stark Inc",
    "streetAddress": "42353 Kovacek Terrace",
    "city": "Jupiter",
    "state": "MI",
    "missionStatement": "facilitate enterprise infomediaries"
  },
  {
    "id": "5e50f063-6620-491c-904c-fe8e40488802",
    "name": "Schmidt and Sons",
    "streetAddress": "8478 Kulas Park",
    "city": "Peoria",
    "state": "MO",
    "missionStatement": "revolutionize e-business platforms"
  },
  {
    "id": "a46de859-251b-42f6-a6c4-1642beba6b56",
    "name": "Mohr - Raynor",
    "streetAddress": "19858 Arianna Views",
    "city": "Battle Creek",
    "state": "VT",
    "missionStatement": "synergize global blockchains"
  },
  {
    "id": "06f55c10-2481-4b5d-9a70-d8845f5e1381",
    "name": "Tromp, Runolfsson and Bahringer",
    "streetAddress": "83031 Kling Drive",
    "city": "Frisco",
    "state": "OK",
    "missionStatement": "incubate bricks-and-clicks communities"
  }
]

実際には、companies.jsonの中身はAPIなどを叩いた結果を整形した形などになると思います。

Properties

Columnには、複数のPropertiesを持つことができます。

width

number | string
カラムの幅の指定

ellipsis

boolean
カラムの幅を超えるコンテンツの場合、超えている部分を省略にする。

textAlignment

left | center | right
テキストの位置
デフォルトはleft

hidden

boolean
trueだとカラムを見えなくできる。

visibleMediaQuery

string | function
MantineThemeに設定しているMediaQueryによって、可視不可視にできることができる。
functionも渡すことができ、themeが引数に渡ってくる。

render

指定されているカラムのレコードを返すMethodを指定。
引数には、レコード情報が入ってくる。
上記、companiesを参考にすると以下のような情報が入ってくる。

city:"Deerfield Beach"
id: "9a2e51e0-5bbe-49af-a748-546509792e28"
missionStatement: "incentivize end-to-end e-markets"
name: "Champlin - Spencer"
state: "IN"
streetAddress: "5587 Jerde Hollow"

これらのプロパティについては、絶賛成長中なので細かくインターフェースが変わる可能性があるので要注意です。