やりたいこと

React 版 FluentUI には DetailsList というデータテーブルのコントロールがあります。
このコントロールでは各行に選択用のチェックボックスを表示することができ、チェックボックスの表示をオンにすると便利機能としてヘッダーにも「すべて選択/解除」用のチェックボックスが表示されます。

今回は各行のチェックボックスは表示したまま、ヘッダーの「すべて選択/解除」チェックボックスのみを非表示にする必要がありました。

課題

DetailsListのヘッダー部品としてDetailsHeaderというコントロールがあり、それに対してIDetailsHeaderPropsで各種プロパティが定義されています。(ここではdetailsHeaderPropsという変数名)

IDetailsHeaderPropsの中にはcheckboxVisibilityというプロパティも存在し、これにはenumとしてalways/onHover/hiddenのいずれかが設定できるようになっています。

ここでalways(常に表示)とonHover(ホバー時に表示)を設定した場合は正常にチェックボックスの表示が機能するのですが、hidden(非表示)を設定しても非表示にはならず、onHoverと同じ挙動になってしまいます。
とりあえずissueは出したのですが、要素の非表示だけで実現できそうなのでCSSで対応してみます。

CSSでやってみる

CustomDetailsList.tsx

import { Component } from 'react';
import { DetailsList, IColumn, IDetailsListStyles, IDetailsHeaderProps, DetailsHeader } from '@fluentui/react';

const items = Array.from({ length: 10 }).map((item, index) => ({
    key: index.toString(),
    col1: `hoge${index}`,
    col2: `fuga${index}`,
}));


const columns: IColumn[] = [
    { key: 'col1', name: '列１', fieldName: 'col1', minWidth: 100 },
    { key: 'col2', name: '列２', fieldName: 'col2', minWidth: 100 },
];

const gridStyles: Partial<IDetailsListStyles> = {
    headerWrapper: {
         selectors: {
            '.ms-DetailsHeader-cellIsCheck':{
                visibility: 'hidden'
            }
    }
};

export class CustomDetailsListextends Component {
    render() {
      return (
        <DetailsList
          items={items}
          columns={columns}
          styles={gridStyles}
        />
      );
    }
  }

ポイントとしてはDetailsListのstylesプロパティに設定するgridStylesのselectorsで、DevToolsで確認した「すべて選択/解除」チェックボックスを指す.ms-DetailsHeader-cellIsCheckクラスを指定してvisibility: 'hidden'を設定しているところです。

これで各行のチェックボックスは表示したまま「すべて選択/解除」チェックボックスのみを非表示にすることができました。

【改修前】

【改修後】