IgrGrid – グリッドの列を動的に表示・非表示したい

IgrGrid を使用して、ボタン操作などからグリッドの列を動的に表示・非表示する方法について解説します。

IgrGrid の設定

まず、IgrGrid を使用してデータを表示する準備をします。React.useRef を使って IgrGrid を参照できるように設定します。

export const App = () => {
  const gridRef = React.useRef<IgrGrid>(null);

  return (
     <IgrButton onClick={hideName}>Hide Name</IgrButton>
     <IgrGrid ref={gridRef} data={data} autoGenerate={false} height="400px" width="100%" primaryKey="id">
       <IgrColumn field="name" header="Name" />
       <IgrColumn field="age" header="Age" />
       <IgrColumn field="hireDate" header="Hire Date" dataType="date" />
     </IgrGrid>
  );
};

getColumnByName メソッドと hidden プロパティの使用

次に、ボタン操作から特定の列の表示・非表示を切り替えるためのメソッドを実装します。

gridRef.current?.getColumnByName(列名)で対象の IgrColumn を取得し、そのhiddenプロパティを反転させることで、列の表示状態を動的に切り替えることができます。

const hideName = () => {
  const nameColumn = gridRef.current?.getColumnByName("name");
  if (nameColumn) nameColumn.hidden = !nameColumn.hidden;
};

上記の hideName メソッドを IgrButton の onClick に割り当てることで、ボタンをクリックするたびに Name 列の表示・非表示が切り替わります。

<IgrButton onClick={hideName}>Hide Name</IgrButton>

実行結果

この実装により、「Hide Name」ボタンをクリックするたびに、IgrGrid 上の Name 列の表示・非表示が切り替わります。

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev