MS FluentUI DetailsList Tips

FluentUI DetailsList Tips

FluentUIのDetailsListに役立ちそうなコードを載せていきます。

1.クリックでアイテムを選択した際に、すでに選択したアイテムが解除されないようにする

Detailsリストのセルをクリックすることで選択することができるのですが、チェックボタン以外の部分をクリックしてしまうとすでに選択したアイテムが解除されてしまいます。

解決方法

selectionオブジェクトを作成し、setModal関数にtrueをセットしてDetailsListに渡すと、セルのどの部分をクリックしても選択したアイテムが解除されないようになります。

const selection = new Selection()
selection.setModal(true);

const MyGrid = () => {

    return(
        <DetailsList items={items} columns={columns} selectionMode={2} selection={selection}/>
    );
}

2.上下キーで移動した際に選択したアイテムが変更されないようにする

解決方法

ISelectionZoneProps型のオブジェクトを作成し、isSelectedOnFocusにfalseを、selectionにDetailsListに渡したものと同じselectionを渡します。
これをDetailsListのselectionZonePropsにセットします。
これで上下キーでフォーカスを移動してもアイテムの選択状況は変更されないようになります。

const selection = new Selection()
selection.setModal(true);

const MyGrid = () => {

    return(
        <DetailsList items={items} columns={columns} selectionMode={2} selection={selection} 
        selectionZoneProps={{isSelectedOnFocus:false, selection:selection}}/>
    );
}