IT/react

[리액트] gridjs-react 버튼 추가 h() 함수

generator 2024. 12. 23. 14:31

gridjs-react 를 사용하면서 버튼을 추가하려고 했는데 한참을 실패했다.

h()함수를 사용해서 돔을 생성해주고서야 정상적으로 버튼을 생성 할 수 있었다.

import { Grid } from 'gridjs-react';
import "gridjs/dist/theme/mermaid.css";
import { h } from 'gridjs';

<Grid
        data={data} 
        columns={[
          { id: "dt", name: "Date" },
          { id: "amt", name: "Amount" },
          { id: "cnt", name: "Count" },
          {
            name: "Actions",
            formatter: (_, row) => h(
              "button",
              {
                className: "btn",
                onClick: () => alert(`Clicked on row with Date: ${row.cells[0].data}`),
              },
              "Click Me"
            )
          },
        ]}
        search={true}
        pagination={{
          limit: 100,
        }}
      />