How to save a queryData populated from a column cell.

[jhans04]

I want to pass a row queryData to on click of edit menu panel on side of each row. I am populating a queryData inside a column using row.original data. My problem is I am unable to save the queryData to pass to customRowOptions

Data that is getting passed is below
{
href: {
pathname: '/templates/created',
query: { id: '', name: '', tags: '', content: '' },
as: '/templates/created'
},
text: 'edit',
icon: {
'$$typeof': Symbol(react.element),
type: [Function: EditPencil],
}
}

import {
ReactElement,
useCallback,
useState,
useMemo,
useRef,
useEffect,
} from 'react'

type fetchProps = {
pageSize: number
pageIndex: number
}

type templateDataProps = {
id: string
name: string
tags: string|string[]
content: string
}

type tagsProp = {
id: string
name: string
}

let queryData:templateDataProps = {
id: '',
name: '',
tags: '',
content: ''
}

const TableTemp= () => {
const defaultPageIndex = 0
const defaultPageSize = 25
const fetchIdRef = useRef(0)
const skipResetRef = useRef(false)
const router = useRouter()
const template = router.query
let queryData:templateDataProps = {
id: '',
name: '',
tags: '',
content: ''
}

const tableCols = useMemo(
() => [
{
Header: t('tables:templates.sms.tableHeads.id'),
accessor: 'id',
Cell: (cell: { row: { index: number } }) => {
return cell.row.index + 1
},
},
{
Header: t('tables:templates.sms.tableHeads.templateName'),
accessor: 'name',
Cell: (cell: {
value: string
row: { original: templateDataProps }
}) => (
queryData={
id: cell.row.original.id,
name: cell.row.original.name,
content: cell.row.original.content,
tags:
(cell.row.original.tags) !== null
? (cell.row.original.tags as string[]).map(
(item) => (item as unknown as tagsProp).name
)
: '',
},
<Link
href={{
pathname: '/templates/sms/create-template',
query: queryData
}}
as={'/templates/sms/create-template'}>
{cell.value}

),
},
{
Header: t('tables:templates.sms.tableHeads.tags'),
accessor: 'tags',
Cell: (cell: { value: [] }) => ,
},
{
Header: t('tables:templates.sms.tableHeads.createdOn'),
accessor: 'created_at',
},

],
[]

)

const getCellValue = (cell: { value: any })=>{
console.log(cell.value)
}

const [templateData, setTemplateData] = useState([])
const [loading, setLoading] = useState(false)
const [opened, setOpened] = useState(false)

])

useEffect(() => {
skipResetRef.current = false
}, [])

const fetchTemplateData = useCallback(
({ pageSize, pageIndex }: fetchProps) => {
skipResetRef.current = true
const fetchId = ++fetchIdRef.current
setLoading(true)
if (fetchId === fetchIdRef.current) {
if (
searchTemplateInput.length <= 0 &&
String(createdByFilter).length <= 0
) {
fetcher(
getData()
)
-
-
-
}
}
}
},
[searchTemplateInput, createdByFilter]
)
// Populate table data with filter or search options
useDebounce(
() => {
if (
searchTemplateInput.length >= 0 ||
(String(createdByFilter).length > 0 && createdByFilter !== 'all')
) {
-
-
-
)

return (
<>

<title>{${t('sms.title')} - Webex Reach}</title>

  <Header />

  <Container>
  
              <TableWrapper className="mt-7">
                <Table
                  columns={tableCols}
                  data={templateData}
                  fetchData={fetchTemplateData}
                  initialState={{
                    sortBy: [
                      {
                        id: 'created_at',
                        desc: true,
                      },
                    ],
                    pageIndex: defaultPageIndex,
                    pageSize: defaultPageSize,
                  }}
                  
                  loading={loading}
                  pageCount={totalPageCount}
                  skipReset={skipResetRef.current}
                  sticky
                
                  **customRowOptions={[{
                    href:
                    {
                      pathname:'/templates/sms/create-template',
                      query:queryData,
                      as:'/templates/sms/create-template'
                  },
                 text:'edit',
                 icon:<EditPencil/>
                  }]}**
                />
              </TableWrapper>
                 -   
                 -
                 -
  </Container>
</>

)
}

}

export default TableTemp