import {
  ColumnApi,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IDatasource,
  IGetRowsParams,
  ModuleRegistry,
} from '@ag-grid-community/core'
import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model'
import { AgGridColumn, AgGridReact } from '@ag-grid-community/react'
import React, { useCallback, useMemo, useState, useEffect } from 'react'
import {TerminalRowData, getTerminal} from "../../api/terminal/getTerminal";

ModuleRegistry.registerModules([InfiniteRowModelModule])


interface TerminalTableProps {
    rowData?: TerminalRowData[]
}

function TerminalTable(props: TerminalTableProps) {
  const [gridApi, setGridApi] = useState<GridApi>()
  const [gridColumnApi, setGridColumnApi] = useState<ColumnApi>()
  let test = JSON.stringify(props.rowData)  // props test

  function onGridReady(event: GridReadyEvent){
    setGridApi(event.api)
    setGridColumnApi(event.columnApi)

    const updateData = (data:any) => {
      const dataSource: IDatasource = {
        getRows: (params: IGetRowsParams) => {
          setTimeout(function () {
              if(data){
                const rowsThisPage = data?.slice(params.startRow, params.endRow)
                let lastRow = -1
                if (data?.length <= params.endRow) {
                  lastRow = data.length
                }
                params.successCallback(rowsThisPage, lastRow)
              }
          }, 500)
        },
      }
      event.api.setDatasource(dataSource)
    }
    ////////////////////////////////////////////////////////////////////////////////////

    const data = [{"time":"2142","age":"353","num":"731"},
                  {"time":"3535","age":"312","num":"245"},
                  {"time":"3443","age":"773","num":"935"}]

    updateData(data)                //  table표현, data표현 잘 됨
    //updateData(props.rowData)     //  table만 표현되고(column name까지) data값이 안 들어감

    ////////////////////////////////////////////////////////////////////////////////////

  }

  const loadingRenderer = useCallback((params) => {
    if (params.value !== undefined) {
      return params.value
    } else {
      return '<img src="https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/images/loading.gif">'
    }
  }, [])

  const gridOptions = useMemo<GridOptions>(
    () => ({
      cacheBlockSize: 20,
      components: { loadingRenderer },
      defaultColDef: {
        resizable: true,
      },
      infiniteInitialRowCount: 1,
      onGridReady,
      paginationPageSize: 100,
      rowBuffer: 0,
      rowModelType: 'infinite',
    }),
    []
  )

  return (
  <>
  {test}

    <div className="ag-theme-alpine" style={{ height: 400, width: 620 }}>
      <AgGridReact gridOptions={gridOptions} modules={[InfiniteRowModelModule]}>

        <AgGridColumn field="time" width={150}></AgGridColumn>
        <AgGridColumn field="age" width={150}></AgGridColumn>
        <AgGridColumn field="num" width={150}></AgGridColumn>

      </AgGridReact>
    </div>
  </>
  )
}

export default TerminalTable

안녕하세요 고수분들

infinite 스크롤을 사용하려고 ag-grid 사용해서 테이블을 구현하려 하고 있습니다

코드 안에서 data 값을 정해주면 문제없이 잘 돌아가는데

props 값을 받아와서 테이블의 data 값으로 넣어주면 빈 테이블만 뜨고 data 값이 안뜨네요

그래서 props를 받아오기 전에 테이블이 먼저 처리돼서 그런걸까? 추측하고 있습니다

이상한 것은 그렇게 data 값 없는 빈 테이블을 띄어놓은 상태에서

테이블의 부모컴포넌트에서 테이블 위치를 이동한 다음 컴파일하면

테이블의 위치가 바뀐 상태로 data값이 잘 들어가서 표현됩니다

하지만 다시 f5를 누르면 빈 테이블만 나오고요

혹시 이런 경우 어떤식으로 해결하면 좋을 지 조언 부탁드립니다 ㅠㅠ