qcast-front/src/components/management/popup/PlanRequestPopQGrid.jsx

63 lines
1.5 KiB
JavaScript

import React from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { AgGridReact } from 'ag-grid-react'
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-quartz.css'
export default function PlanRequestPopQGrid(props) {
const { gridData, gridColumns, isPageable = true } = props
const [rowData, setRowData] = useState(null)
const [gridApi, setGridApi] = useState(null)
const [colDefs, setColDefs] = useState(gridColumns)
const defaultColDef = useMemo(() => {
return {
flex: 1,
minWidth: 100,
sortable: false,
suppressMovable: false,
resizable: false,
suppressSizeToFit: false,
}
}, [])
const rowBuffer = 100
useEffect(() => {
gridData ? setRowData(gridData) : ''
}, [gridData])
const onGridReady = useCallback(
(params) => {
setGridApi(params.api)
gridData ? setRowData(gridData) : ''
},
[gridData],
)
//부모로 선택한 설계의뢰정보 보내기
const onSelectionChanged = () => {
const selectedData = gridApi.getSelectedRows()
props.getSelectedRowdata(selectedData)
}
return (
<div className="ag-theme-quartz" style={{ height: 350 }}>
<AgGridReact
onGridReady={onGridReady}
rowBuffer={rowBuffer}
rowData={rowData}
columnDefs={colDefs}
defaultColDef={defaultColDef}
rowSelection={'singleRow'}
pagination={isPageable}
onSelectionChanged={onSelectionChanged}
/>
</div>
)
}