Ant Designのテーブルで条件が満たされた場合に展開された行を非表示にする方法

Ant Designのテーブルで展開された行を制御するには、以下の手順に従います。

テーブルのデータソースを準備します。データソースは、テーブルに表示されるレコードの配列です。

const dataSource = [
  { key: '1', name: 'John Doe', age: 25, expanded: false },
  { key: '2', name: 'Jane Smith', age: 30, expanded: true },
  // 他のレコード
];

テーブルのカラムを定義します。カラムオブジェクトには、タイトル、データフィールド、レンダリングロジックなどが含まれます。

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  // 他のカラム
];

テーブルコンポーネントを作成し、expandedRowRenderプロパティを使用して展開された行のレンダリングをカスタマイズします。

<Table
  dataSource={dataSource}
  columns={columns}
  expandedRowRender={(record) => {
    if (record.expanded) {
      return (
        <div>
          {/* 展開された行のコンテンツ */}
        </div>
      );
    }
    return null; // 条件が満たされない場合は空の要素を返す
  }}
/>

条件を適切に設定します。例えば、特定の列の値に基づいて展開された行を非表示にする場合は、条件を適用するレコードのexpandedプロパティをfalseに設定します。

const dataSource = [
  { key: '1', name: 'John Doe', age: 25, expanded: false },
  { key: '2', name: 'Jane Smith', age: 30, expanded: true },
  // 他のレコード
];

上記の例では、keyが2のレコードの展開された行は表示されますが、keyが1のレコードの展開された行は非表示になります。

これで、Ant Designのテーブルで条件が満たされた場合に展開された行を非表示にすることができます。必要に応じて、さまざまな条件やレンダリングロジックを適用することができます。