table not update when add new row

[DatTN95]

i using virtualized infinite scrolling, but i have a problem
when i add new row into data, table not update.
i checked state data and can see it added, but not show in table
Pls help me, this is my code

import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
import { useState, useRef } from 'react';
import { Table } from 'react-bootstrap';
import { useVirtualizer } from '@tanstack/react-virtual'

const VirtualTable = ({ data, columns, tbHeight }) => {
    const [sorting, setSorting] = useState([]);

    const table = useReactTable({
        data: data || [],
        columns: columns,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        getSortedRowModel: getSortedRowModel(),
        state: {
            sorting: sorting
        },
        onSortingChange: setSorting
    });

    const { rows } = table.getRowModel();
    const visibleColumns = table.getVisibleLeafColumns();
    const tableContainerRef = useRef(null);

    const columnVirtualizer = useVirtualizer({
        count: visibleColumns.length,
        estimateSize: (index) => visibleColumns[index].getSize(),
        getScrollElement: () => tableContainerRef.current,
        horizontal: true,
        overscan: 3
    });

    const rowVirtualizer = useVirtualizer({
        count: rows.length,
        estimateSize: () => 33,
        getScrollElement: () => tableContainerRef.current,
        measureElement:
            typeof window !== 'undefined' &&
                navigator.userAgent.indexOf('Firefox') === -1
                ? (element) => element?.getBoundingClientRect().height
                : undefined,
        overscan: 5,
    });

    const virtualColumns = columnVirtualizer.getVirtualItems();
    const virtualRows = rowVirtualizer.getVirtualItems();

    return (
        <>
            <div ref={tableContainerRef} style={{ overflow: 'auto', height: tbHeight }}>
                <Table striped bordered hover className='align-middle'>
                    <thead style={{ display: 'grid', position: 'sticky', top: 0, zIndex: 1 }}>
                        {table.getHeaderGroups().map(headerGroup => (
                            <tr key={headerGroup.id} style={{ display: 'flex', width: '100%' }}>
                                {virtualColumns.map(vc => {
                                    const header = headerGroup.headers[vc.index]
                                    return (
                                        <th key={header.id} style={{ display: 'flex', width: header.column.columnDef.size }}>
                                            <div {...{ className: header.column.getCanSort() ? 'cursor-pointer select-none' : '', onClick: header.column.getToggleSortingHandler() }}>
                                                {flexRender(
                                                    header.column.columnDef.header,
                                                    header.getContext()
                                                )}
                                                {
                                                    { asc: <i className='mdi mdi-arrow-up-bold text-primary fs-6 middle-align'></i>, desc: <i className='mdi mdi-arrow-down-bold text-primary fs-6 middle-align'></i> }
                                                    [header.column.getIsSorted() ?? null]
                                                }
                                            </div>
                                        </th>
                                    )
                                })}
                            </tr>
                        ))}
                    </thead>

                    <tbody style={{ display: 'grid', height: tbHeight, position: 'relative' }} >
                        {virtualRows.map(virtualRow => {
                            const row = rows[virtualRow.index]
                            const visibleCells = row.getVisibleCells()

                            return (
                                <tr data-index={virtualRow.index} ref={node => rowVirtualizer.measureElement(node)} key={row.id} style={{ display: 'flex', position: 'absolute', transform: `translateY(${virtualRow.start}px)`, width: '100%' }}>
                                    {virtualColumns.map(vc => {
                                        const cell = visibleCells[vc.index]
                                        return (
                                            <td key={cell.id} style={{ display: 'flex', width: cell.column.columnDef.size }}>
                                                {flexRender(
                                                    cell.column.columnDef.cell,
                                                    cell.getContext()
                                                )}
                                            </td>
                                        )
                                    })}
                                </tr>
                            )
                        })}
                    </tbody>
            </Table>
            </div>
        </>
    )
}

export default VirtualTable;

[DatTN95]

after adjust it's working, i will closed this post