✨
React にて canvas-datagrid を使う方法
背景
- 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