React にて canvas-datagrid を使う方法

2022/12/15に公開約900字

背景

  • Material-UI やchakra-UIにもテーブルコンポーネントがあるが、デフォルトでexcel風な見た目でセルの編集が可能かつ軽そうな canvas-datagrid を使いたくなった。
  • 公式にreactへの導入方法がほぼ説明が無かったのでまとめる。

手順

  • モジュールインストール npm install canvas-datagrid
  • 導入方法、使い方は下記のとおり
import 'canvas-datagrid';

const DataGrid = () => {
    const gridRef = useRef()
    // データ構造は下記のとおり
    const [gridData, setGridData] = useState([
        {row1: "column1", row2: "column1"}, 
        {row1: "column2"}
    ])
    
    const btnClickFunc = () => {
	// ※ ref にてテーブル内のデータにアクセス可能。書き換えも可能。
        console.log(gridRef.current.data)
        gridRef.current.data.splice(1)
        setGridData(gridRef.current.data)
    }

    // ※dataには辞書を格納したリストを string型で渡す必要がある
    return (
	<>
		<Button onClick={btnClickFunc}>データにアクセス</Button>
		<canvas-datagrid ref={gridRef} data={JSON.stringify(gridData)}></canvas-datagrid>
	</>
    )
}

export default DataGrid

参考

Discussion

ログインするとコメントできます