Zenn
🤒

【ガチ初心者】Material Tableで詳細パネルを閉じる【超ワンポイント】

2022/11/11に公開
React
TypeScript
#
materialtabel
tech

Material Tableで詳細パネルを閉じたい

今回のゴール
Material Tableの詳細パネル(Detail Panel)を他のコンポーネントから閉じれるようにしたい

実際にやってみよう💆

やり方は２種類！！！

詳細パネルを全部閉じたい...☺️

・コンポーネント自体を再描画

Table.tsx
export const Table = () => {
  return <MaterialTable  .../>
}
Table.tsx
import React from 'react';
import {Table} from './Table'

export const Main = () => {
  const [isOpen, setIsOpen] = React.useState(true)
  
  const closeTable = () => {
    // isOpenをTableの再描画を閉じたいタイミングで変更!
	...
  }
  
  return (<>{isOpen && <Table />}</>)
}

https://github.com/mbrn/material-table/issues/357

詳細パネルを個別閉じたい...☺️

・tableが持っているメソッドのonToggleDetailPanelで閉じる！

Table.tsx
(tableRef.current as any).onToggleDetailPanel(
        [(tableRef.current as  any).dataManager.sortedData.findIndex(
            (item: any) => item.id === rowData.id // rowDataのID
        )],
         (tableRef.current as  any).props.detailPanel[0].render,
         )

https://github.com/mbrn/material-table/issues/1340
https://github.com/mbrn/material-table/issues/1653

以上です！

Discussion