Блог

У меня есть компонент таблицы реакций внутри компонента. Данные для таблицы взяты из хранилища redux. У меня есть кнопка для экспорта данных в excel в родительском компоненте, и мне нужно получить доступ к текущим отфильтрованным, отсортированным или сгруппированным строкам в дочернем компоненте таблицы реакций для экспорта.

     const App = () => {

        const columns = React.useMemo(
            () => [
              {
                Header: 'ID',
                accessor: 'id',
              }, etc...
            ],[]);

        const myData = useSelector((state) => state.myData.myData);
        const data = React.useMemo(() => myData, [myData]);           

        const [rowsToExport, setRowsToExport] = useState([]);
        <CSVLink filename='table.csv' data={tableInstance.current.rows}>
            <button>Export</button>
        </CSVLink>
        
        return <Table columns={columns} data={data} ref={tableInstance} />
    }

    const Table =  React.forwardRef(({columns, data}, ref) => {
        const instance = useTable({columns, data});
        React.useImperativeHandle(ref, () => instance);
    })
 

У меня есть ссылка на мой экземпляр таблицы, но при загрузке страницы ссылка CSV не работает из-за того, что ссылка на экземпляр таблицы равна нулю. Я использую react-csv. Как я могу разместить ссылку CSV в родительском компоненте и заполнить ее последними строками из моего экземпляра таблицы.