Fluent UIのDetailsListをいじってみる(基礎編)

記事を書くきっかけ

React, TypeScriptを始めてから7カ月が経ちました。ある程度慣れてきたので何か残そうと思い、Qiitaで記事を書くことにしました。
どうせなら他の人が書いていなそうなFluent UIについて書いてみようかと思います。

DetailsList

DetailsListでできること

・アイテムの表示・選択(本記事ではここまで)
・選択したアイテムの取得
・インデックスを指定してのアイテムの選択、フォーカスのセット
・セルやヘッダーのカスタマイズ
・見た目の変更( ホバー時や選択時のセルの色等)

実際に定義してみる

detailsリストを定義するのには下記の設定が必要です。
・items : 表示するアイテム
・columns : 列の横幅やヘッダーの表示名、ヘッダークリック時の関数等を設定する
・viewport, styles(root) DetailsListの高さと幅を指定する

1.import

@fluentui/reactからDetailsListと、カラムの設定に必要なIColumnをインポートします。

import { DetailsList, IColumn} from '@fluentui/react';

2.アイテムの定義

DetailsListに渡すアイテムを定義します。
ヒト型のデータとし、インターフェース名をIPersonとします。
アイテムのnameは好きな歌手の名前がおぼろげに浮かんだのでそれを書きました。

interface IPerson
{
  key?:string;
  name?:string;
  age?:number
};

const items:IPerson[] = [
  {'key':'1', 'name':'deng', 'age':10},
  {'key':'2', 'name':'zi', 'age':20},
  {'key':'3', 'name':'qi', 'age':30}
];

3.カラムの定義

DetailsListに渡すカラムを定義します。IColumnsの配列をわたすひつようがあります。
name: カラムに表示する名前
fieldName: セルに表示する名前(上記アイテムのname, ageを指定しています)
onColumnClick: カラムクリック時の関数 イベントと選択したカラムが渡されるので便利

const columns:IColumn[] = [
  {'key':'column1', 'minWidth':80, maxWidth:120,  name:'Name', fieldName:'name', onColumnClick:(e, column)=>alert(column.name)},
  {'key':'column2', 'minWidth':80, maxWidth:120,name:'Age', fieldName:'age', onColumnClick:(e, column)=>alert(column.name)},  
]

ここのfieldnameと、インターフェースのプロパティ名(name, age等)を一致させないと表示されないので注意してください。

4.DetailsListの定義

DetailsListを定義し、これまでに定義したアイテムとカラムをセットします。
(サイズを固定するためにviewportとstylesを設定しています。)

const MyGrid = () => 
  <>
    <DetailsList viewport={{width:400, height:400}} styles={{root:{maxWidth:400, maxHeight:400}}} 
items={items} columns={columns}/>
  </>

コード全体

import { DetailsList, IColumn} from '@fluentui/react';

interface IPerson
{
  key?:string;
  name?:string;
  age?:number
}

const items:IPerson[] = [
  {'key':'1', 'name':'deng', 'age':10},
  {'key':'2', 'name':'zi', 'age':20},
  {'key':'3', 'name':'qi', 'age':30}
]

const columns:IColumn[] = [
  {'key':'column1', 'minWidth':80, maxWidth:120,  name:'Name', fieldName:'name', onColumnClick:(e, column)=>alert(column.name)},
  {'key':'column2', 'minWidth':80, maxWidth:120,name:'Age', fieldName:'age', onColumnClick:(e, column)=>alert(column.name)},  
]

const MyGrid = () => 
  <>
    <DetailsList viewport={{width:400, height:400}} styles={{root:{maxWidth:400, maxHeight:400}}} items={items} columns={columns}/>
  </>

export default MyGrid;

まとめ

簡単にDetailsListを定義できます。説明が雑ですいません。