Can you write an OutputTable component with '@tanstack/react-table', that will output the results in an editable table. This is an example of the new format to use when creating tables. We're also using next.js if that matters.

heres and example table from their documentation, please use this as a guide.:
import React from 'react'
import ReactDOM from 'react-dom/client'

//
import './index.css'

//
import {
 Column,
 Table,
 ColumnDef,
 useReactTable,
 getCoreRowModel,
 getFilteredRowModel,
 getPaginationRowModel,
 flexRender,
 RowData,
} from '@tanstack/react-table'
import { makeData, Person } from './makeData'

declare module '@tanstack/react-table' {
 interface TableMeta {
 updateData: (rowIndex: number, columnId: string, value: unknown) => void
 }
}

// Give our default column cell renderer editing superpowers!
const defaultColumn: Partial> = {
 cell: ({ getValue, row: { index }, column: { id }, table }) => {
 const initialValue = getValue()
 // We need to keep and update the state of the cell normally
 const [value, setValue] = React.useState(initialValue)

 // When the input is blurred, we'll call our table meta's updateData function
 const onBlur = () => {
 table.options.meta?.updateData(index, id, value)
 }

 // If the initialValue is changed external, sync it up with our state
 React.useEffect(() => {
 setValue(initialValue)
 }, [initialValue])

 return (
 setValue(e.target.value)}
 onBlur={onBlur}
 />
 )
 },
}

function useSkipper() {
 const shouldSkipRef = React.useRef(true)
 const shouldSkip = shouldSkipRef.current

 // Wrap a function with this to skip a pagination reset temporarily
 const skip = React.useCallback(() => {
 shouldSkipRef.current = false
 }, [])

 React.useEffect(() => {
 shouldSkipRef.current = true
 })

 return [shouldSkip, skip] as const
}

function App() {
 const rerender = React.useReducer(() => ({}), {})[1]

 const columns = React.useMemo[]>(
 () => [
 {
 header: 'Name',
 footer: props => props.column.id,
 columns: [
 {
 accessorKey: 'firstName',
 footer: props => props.column.id,
 },
 {
 accessorFn: row => row.lastName,
 id: 'lastName',
 header: () => Last Name,
 footer: props => props.column.id,
 },
 ],
 },
 {
 header: 'Info',
 footer: props => props.column.id,
 columns: [
 {
 accessorKey: 'age',
 header: () => 'Age',
 footer: props => props.column.id,
 },
 {
 header: 'More Info',
 columns: [
 {
 accessorKey: 'visits',
 header: () => Visits,
 footer: props => props.column.id,
 },
 {
 accessorKey: 'status',
 header: 'Status',
 footer: props => props.column.id,
 },
 {
 accessorKey: 'progress',
 header: 'Profile Progress',
 footer: props => props.column.id,
 },
 ],
 },
 ],
 },
 ],
 []
 )

 const [data, setData] = React.useState(() => makeData(1000))
 const refreshData = () => setData(() => makeData(1000))

 const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper()

 const table = useReactTable({
 data,
 columns,
 defaultColumn,
 getCoreRowModel: getCoreRowModel(),
 getFilteredRowModel: getFilteredRowModel(),
 getPaginationRowModel: getPaginationRowModel(),
 autoResetPageIndex,
 // Provide our updateData function to our table meta
 meta: {
 updateData: (rowIndex, columnId, value) => {
 // Skip age index reset until after next rerender
 skipAutoResetPageIndex()
 setData(old =>
 old.map((row, index) => {
 if (index === rowIndex) {
 return {
 ...old[rowIndex]!,
 [columnId]: value,
 }
 }
 return row
 })
 )
 },
 },
 debugTable: true,
 })

 return (
 
 
 
 {table.getHeaderGroups().map(headerGroup => (
 |
 {headerGroup.headers.map(header => {
 return (
  
 {header.isPlaceholder ? null : (
 
 {flexRender(
 header.column.columnDef.header,
 header.getContext()
 )}
 {header.column.getCanFilter() ? (
 
 
 
 ) : null}
 
 )}
  |
 )
 })}
 

 ))}
 
 {table.getRowModel().rows.map(row => {
 return (
 |
 {row.getVisibleCells().map(cell => {
 return (
  
 {flexRender(
 cell.column.columnDef.cell,
 cell.getContext()
 )}
  |
 )
 })}
 

 )
 })}
 

 
 
 table.setPageIndex(0)}
 disabled={!table.getCanPreviousPage()}
 >
 {'<<'}
 
 table.previousPage()}
 disabled={!table.getCanPreviousPage()}
 >
 {'<'}
 
 table.nextPage()}
 disabled={!table.getCanNextPage()}
 >
 {'>'}
 
 table.setPageIndex(table.getPageCount() - 1)}
 disabled={!table.getCanNextPage()}
 >
 {'>>'}
 
 
 Page
**{table.getState().pagination.pageIndex + 1} of{' '}
 {table.getPageCount()}** 

 
 | Go to page:
 {
 const page = e.target.value ? Number(e.target.value) - 1 : 0
 table.setPageIndex(page)
 }}
 className="border p-1 rounded w-16"
 />
 
 {
 table.setPageSize(Number(e.target.value))
 }}
 >
 {[10, 20, 30, 40, 50].map(pageSize => (
 
 ))}
 
 
 {table.getRowModel().rows.length} Rows
 
 rerender()}>Force Rerender
 
 
 refreshData()}>Refresh Data
 

 )
}
function Filter({
 column,
 table,
}: {
 column: Column
 table: Table
}) {
 const firstValue = table
 .getPreFilteredRowModel()
 .flatRows[0]?.getValue(column.id)

 const columnFilterValue = column.getFilterValue()

 return typeof firstValue === 'number' ? (
 
 
 column.setFilterValue((old: [number, number]) => [
 e.target.value,
 old?.[1],
 ])
 }
 placeholder={`Min`}
 className="w-24 border shadow rounded"
 />
 
 column.setFilterValue((old: [number, number]) => [
 old?.[0],
 e.target.value,
 ])
 }
 placeholder={`Max`}
 className="w-24 border shadow rounded"
 />
 
 ) : (
 column.setFilterValue(e.target.value)}
 placeholder={`Search...`}
 className="w-36 border shadow rounded"
 />
 )
}

const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')

ReactDOM.createRoot(rootElement).render(
 
 
 
)
결과를 편집 가능한 테이블로 출력하는 출력 테이블 컴포넌트를 '@tanstack/react-table'로 작성할 수 있습니다. 이것은 테이블을 만들 때 사용할 새로운 형식의 예시입니다. 또한 중요한 경우 next.js를 사용하고 있습니다.여기 문서에서 예제 테이블을 참고하시기 바랍니다:'react'에서 React를 임포트합니다.'react-dom/client'에서 ReactDOM을 임포트합니다.//import './index.css'//import { Column, Table, ColumnDef, useReactTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, flexRender, RowData,}를 '@tanstack/react-table'에서 가져옵니다.'./makeData'에서 { makeData, Person }를 임포트합니다.선언 모듈 '@tanstack/react-table' { 인터페이스 TableMeta { updateData: (rowIndex: 숫자, columnId: 문자열, value: 알 수 없음) => void }}// 기본 열 셀 렌더러 편집에 강력한 기능을 부여하세요!const defaultColumn: Partial> = { cell: ({ getValue, row: { index }, column: { id }, table }) => { const initialValue = getValue() // 셀의 상태를 정상적으로 유지하고 업데이트해야 합니다. const [value, setValue] = React.useState(initialValue) // 입력이 흐릿해지면 테이블 메타의 updateData 함수를 호출합니다. const onBlur = () => { table.options.meta?.updateData(index, id, value) } // 초기값이 외부에서 변경되면 state와 동기화합니다. React.useEffect(() => { setValue(initialValue) }, [initialValue]) 반환 ( setValue(e.target.value)} onBlur={onBlur} /> ) },}함수 useSkipper() { const shouldSkipRef = React.useRef(true) const shouldSkip = shouldSkipRef.current // 함수를 이것으로 감싸서 일시적으로 페이지 재설정을 건너뛰게 합니다. const skip = React.useCallback(() => { shouldSkipRef.current = false }, []) React.useEffect(() => { shouldSkipRef.current = true }) 반환 [shouldSkip, skip] as const}함수 App() { const rerender = React.useReducer(() => ({}), {})[1] const columns = React.useMemo[]>( () => [ { header: 'Name', footer: props => props.column.id, columns: [ { accessorKey: 'firstName', footer: props => props.column.id, }, { accessorFn: row => row.lastName, id: 'lastName', header: () => 성, footer: props => props.column.id, }, ], }, { header: '정보', 바닥글: props => props.column.id, columns: [ { accessorKey: 'age', header: () => '나이', footer: props => props.column.id, }, { header: '추가 정보', 칼럼: [ { accessorKey: '방문', header: () => 방문 횟수, 바닥글: props => props.column.id, }, { accessorKey: 'status', header: '상태', 바닥글: props => props.column.id, }, { accessorKey: 'progress', header: '프로필 진행', 바닥글: props => props.column.id, }, ], }, ], }, ], [] ) const [data, setData] = React.useState(() => makeData(1000)) const refreshData = () => setData(() => makeData(1000)) const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper() const table = useReactTable({ data, columns, defaultColumn, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), autoResetPageIndex, // 테이블 메타에 updateData 함수를 제공합니다. meta: { updateData: (rowIndex, columnId, value) => { // 다음 렌더링 이후까지 연령 인덱스 재설정 건너뛰기 skipAutoResetPageIndex() setData(old => old.map((행, 인덱스) => { if (index === rowIndex) { return { ...old[rowIndex]!, [columnId]: value, } } 행 반환 }) ) }, }, debugTable: true, }) 반환 (    {table.getHeaderGroups().map(headerGroup => ( | {headerGroup.headers.map(header => { 반환 (   {header.isPlaceholder ? null : (  {flexRender( header.column.columnDef.header, header.getContext() )} {header.column.getCanFilter() ? (    ) : null}  )}  | ) })}  ))}  {table.getRowModel().rows.map(row => { 반환 ( | {row.getVisibleCells().map(cell => { return (   {flexRender( cell.column.columnDef.cell, cell.getContext() )}  | ) })}  ) })}    table.setPageIndex(0)} disabled={!table.getCanPreviousPage()} > {'<<'}  table.previousPage()} disabled={!table.getCanPreviousPage()} > {'<'}  table.nextPage()} disabled={!table.getCanNextPage()} > {'>'}  table.setPageIndex(table.getPageCount() - 1)} disabled={!table.getCanNextPage()} > {'>>'}   Page**{table.getState().pagination.pageIndex + 1} of{' '} {table.getPageCount()}**   | 페이지로 이동합니다: { const page = e.target.value ? Number(e.target.value) - 1 : 0 table.setPageIndex(page) }} className="테두리 p-1 둥근 w-16" />  { table.setPageSize(Number(e.target.value)) }} > {[10, 20, 30, 40, 50].map(pageSize => (  ))}   {table.getRowModel().rows.length} 행  rerender()}>강제 렌더링   refreshData()}>데이터 새로고침  )}함수 필터({ column, table,}: { column: 칼럼 테이블: 테이블}) { const firstValue = table .getPreFilteredRowModel() .flatRows[0]?.getValue(column.id) const columnFilterValue = column.getFilterValue() 반환 typeof firstValue === '숫자' ? (   column.setFilterVa