Reactのテーブルライブラリ「AG Grid」でレスポンシブにテーブルをリサイズする件

「R」で作った心理尺度ツールは公開する際のライセンスの問題が気になったので、思い切って勉強を兼ねてReactであらためて作ることにした。

テーブル作成のためどのライブラリを使うかを調査した結果「AG Grid」が今回の目的にフィットしそうなのでこれを使うことに決定。

とりあえず、ローカルからCSVを読み込んでデータをStateに保存して確認用の画面に出力する部分を作った。このとき、レスポンシブにテーブル（含むカラムの幅）をコントロールする方法を調査したのでメモしておく。

その際、以下のページを参考にした。

Can't get React Grid Ag-grid to automatically resize itself at screen width
So just like the title says I am having trouble resizing the columns on my grid to fit smaller screens. I've been trying...
stackoverflow.com

まだTypescriptの型の使い方がこなれていないのでAny指定がアレですが、とりあえず以下の感じで作成したところいい感じで動くことを確認できた。

Propsの dataOriginalに読み込んだCSVがオブジェクトのArrayで入っています。これをcontext provider でグローバルに渡しています。

QuickDataViewerのプロップスは読み込んだCSVのヘッダーがArrayで渡されてきます。

ポイントは

1
onGridColumnsChanged={() => gridColumnApi && autoSizeAll(false)}

これをいれたらいい感じでリサイズできます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { memo, useState, VFC } from "react";
 
import { Box, Heading } from "@chakra-ui/layout";
import { AgGridColumn, AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
 
import { useDataOriginal } from "../../providers/useDataOriginalProvider";
 
type Props = {
  fileHeader: Array<string>;
};
 
export const QuickDataViewer: VFC<Props> = memo((props) => {
  const { fileHeader } = props;
  const { dataOriginal } = useDataOriginal();
 
  const [gridColumnApi, setGridColumnApi] = useState<any>(null);
 
  const onGridReady = (params: any) => {
    setGridColumnApi(params.columnApi);
  };
 
  const defaultColDef = {
    // set every column width
    width: 100,
    floatingFilter: false,
    resizable: true,
    sortable: false,
    filter: false,
  };
 
  window.onresize = () => {
    autoSizeAll(false);
  };
 
  const autoSizeAll = (skipHeader: boolean) => {
    let allColumnIds: Array<string> = [];
    gridColumnApi.getAllColumns().forEach(function (column: any) {
      allColumnIds.push(column.colId);
    });
    gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);
  };
 
  return (
    <>
      <Heading as="h2" size="md" mb={4}>
        QUICK DATA VIEW
      </Heading>
      <Box className="ag-theme-alpine" style={{ height: "100%", width: "80%" }}>
        <AgGridReact
          onGridReady={onGridReady}
          rowData={dataOriginal}
          // rowHeight={30}
          defaultColDef={defaultColDef}
          onGridColumnsChanged={() => gridColumnApi && autoSizeAll(false)}
          pagination={true}
        >
          {fileHeader.map((row) => (
            <AgGridColumn key={row} headerName={row} field={row} />
          ))}
        </AgGridReact>
      </Box>
    </>
  );
});