Есть кто реализовывал выпадающие строки в react-table? Интересует, чтобы при

Question

Есть кто реализовывал выпадающие строки в react-table? Интересует, чтобы при

открытии одной строки другая сворачивалась и была возможность просмотра только одной группы подстрок. Пробовал autoResetExpanded, но успеха ноль. Сталкивался кто с таким, как решали эту задачу?

#frontend #javascript #programming #react.js #russian

0

19.06.2023

9 ответов

27 просмотров

Delonge1

Артём
я года 2 назад такое делал. нашёл записи, вроде вс...

А у вас не подлагивает таблица на 50+ строках?

0

28.07.2023

/ /

Delonge1
А у вас не подлагивает таблица на 50+ строках?

у меня нет

0

28.07.2023

Vladimir Voronov

Ниче ты поднял историю

0

28.07.2023

Delonge1

/ /
у меня нет

Понял, а рил тайма нет случайно?

0

28.07.2023

Виктор Кремко

Vladimir Voronov
Ниче ты поднял историю

с популярностью нашего города

0

28.07.2023

/ /

Delonge1
Понял, а рил тайма нет случайно?

а я на тдшках таблица сверстал в хтмле, все работает

0

28.07.2023

Delonge1

/ /
а я на тдшках таблица сверстал в хтмле, все работа...

Ну react-table v7 же юзаете?

0

28.07.2023

/ /

Delonge1
Ну react-table v7 же юзаете?

такое ток есть, пойдет?

0

28.07.2023

Артём · Accepted Answer

я года 2 назад такое делал. нашёл записи, вроде всё должно работать .... import React, { useState } from 'react'; import { useTable, useExpanded } from 'react-table'; function Table() { const [expandedRows, setExpandedRows] = useState([]); const data = [ { name: 'John', age: 30 }, { name: 'Jane', age: 25 }, { name: 'Sam', age: 35 } // ... ]; const columns = [ { Header: 'Name', accessor: 'name' }, { Header: 'Age', accessor: 'age' } // ... ]; const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, state: { expanded } } = useTable( { columns, data }, useExpanded ); const toggleRow = (row) => { const rowIndex = expandedRows.indexOf(row); if (rowIndex > -1) { setExpandedRows((prevRows) => [ ...prevRows.slice(0, rowIndex), ...prevRows.slice(rowIndex + 1) ]); } else { setExpandedRows((prevRows) => [...prevRows, row]); } }; return ( <table {...getTableProps()}> <thead> {headerGroups.map((headerGroup) => ( <tr {...headerGroup.getHeaderGroupProps()}> {headerGroup.headers.map((column) => ( <th {...column.getHeaderProps()}>{column.render('Header')}</th> ))} </tr> ))} </thead> <tbody {...getTableBodyProps()}> {rows.map((row) => { prepareRow(row); const isExpanded = expandedRows.includes(row); return ( <React.Fragment key={row.getRowProps().key}> <tr {...row.getRowProps()}> {row.cells.map((cell) => ( <td {...cell.getCellProps()}>{cell.render('Cell')}</td> ))} </tr> {isExpanded && ( <tr> <td colSpan={columns.length}> {/* Развернутое содержимое строки */} Дополнительная информация для строки {row.original.name} </td> </tr> )} </React.Fragment> ); })} </tbody> </table> ); } export default Table;

169 похожих чатов

Есть кто реализовывал выпадающие строки в react-table? Интересует, чтобы при

9 ответов

Похожие вопросы