react-table

React-Table with hooks looses focus on input inside table?

由 ≯℡__Kan透↙ 提交于 2019-12-11 19:45:39
问题 CodeSandBox: https://codesandbox.io/embed/react-table-editable-content-ggvcy When attempting to handle input into React-table my input is losing focus so i can only type 1 character at a time. How can i fix my render cycle to allow input? Edit: I accidently updated the sandbox with the working version of code although it has another bug: How to capture react events during a refresh update due to a focus onBlur change? 回答1: The issue is quite sneaky: when you pass a "Cell" render prop to react

Search box filtering does not return the searched result- React+ react-table+ filter

由 烂漫一生 提交于 2019-12-11 18:25:59
问题 I am using react-table as data-grid. I am implementing table based search filtering. The filtering does not seem like working , as a result its returning empty results. I do not where I am going wrong. Can someone help? Help would be appreciated Data format let data =[ {id: 1, val1: "45GFSDSD", val2: "AKFHFDH83E3HHYE"}, {id: 2, val1: "46FDGDGDGDG", val2: "AKFHFDH83E3HFGD"}, {id: 3, val1: "56FDGGFGF", val2: "AERTFDH83E3HHYD"} ] Component code import * as React from 'react'; import ReactTable

React 'this' undefined when adding table row

由 久未见 提交于 2019-12-11 16:49:20
问题 I'm attempting to add a new row of data to a table that occurs when a user inputs text into a field and clicks a button. The button click is tied to a function (AddNewRow) which sends the data to a controller and then adds a new row to the table with the data. The data is sent to the controller correctly and if the page is refreshed the new row is showing (because of the get request after mount) but the problem is the table doesn't update dynamically. I keep getting a console error saying

Dynamically setting show property of react-table does not show or hide columns viceversa

由 醉酒当歌 提交于 2019-12-11 05:26:02
问题 I am using react-table for the data-grid purpose. I am implementing a settings icon which shows the list of columns and based on the selection, the column gets shown or hidden. I am manipulating "show" property of columns object for this. While the property is getting set properly, there is no such change in the table. Can someone help me with this. But when I set the property directly(in App component) it works. Where am I going wrong? Code Sandbox: https://codesandbox.io/s/blue-cherry-di3ub

React table with static header on browser scroll [closed]

由 a 夏天 提交于 2019-12-10 09:24:26
问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed last year . Is there a table component for react, which would have fixed header while browser scrollbar scrolls it's long body? (The table height grows as user clicks "Load more"). Here's a code sample: https://codesandbox.io/s/rm0x6lmypm The table header should remain static on browser scroll. 回答1: Ok, I have made some

React Context Menu on react table using react-contexify

由 末鹿安然 提交于 2019-12-07 14:37:12
问题 I have a project that I am using react table with but also need a context menu to popup on right click of the row in the react table. The only thing I cant get is the selected row data. Because I have to wrap the entire react table in the context menu component, props returns just the main react table component and not active row. Here is my code. <ContextMenuProvider id="menu_id"> <ReactTable data={items} columns={columns} showPagination={false} getTdProps={(state, rowInfo, column, instance)

React Context Menu on react table using react-contexify

由 那年仲夏 提交于 2019-12-05 18:32:49
I have a project that I am using react table with but also need a context menu to popup on right click of the row in the react table. The only thing I cant get is the selected row data. Because I have to wrap the entire react table in the context menu component, props returns just the main react table component and not active row. Here is my code. <ContextMenuProvider id="menu_id"> <ReactTable data={items} columns={columns} showPagination={false} getTdProps={(state, rowInfo, column, instance) => { return { onClick: (e, handleOriginal) => { const activeItem = rowInfo.original this.getDetails

React table with static header on browser scroll [closed]

由 徘徊边缘 提交于 2019-12-05 17:13:37
Closed. This question is off-topic . It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed last year . Is there a table component for react, which would have fixed header while browser scrollbar scrolls it's long body? (The table height grows as user clicks "Load more"). Here's a code sample: https://codesandbox.io/s/rm0x6lmypm The table header should remain static on browser scroll. Ok, I have made some horrible css changes, now it seems to work as needed: https://codesandbox.io/s/18kqoyjq8j Basically I added

react-table custom cell component that references several row properties

由 不想你离开。 提交于 2019-12-04 20:00:32
问题 I need to implement table sorting by column so am rewriting my react table component using react-table's ReactTable component. One of table cells will contain a link and needs to access more one row property. So far, the link column code looks like: { Header: "Name", accessor: "name", Cell: cellInfo => ( <Link className="scenarioDetailLink" to={cellInfo.row.linkDestination} id={cellInfo.row.linkName}>{cellInfo.row.name}</Link> ) }, It results in elements like this: The generated anchor

How to do word-wrap for data using react-table?

由 家住魔仙堡 提交于 2019-12-04 01:56:10
I am using https://react-table.js.org/#/story/readme for displaying table from server response. But for column data with long length, its showing ellipsis. I am not finding a way for wrapping it, so that full data is displayed. In the doc, they have mentioned style prop, but I am not able to figure it out. I tried below, but it did not work. <ReactTable data={respDataArr} columns={columns} style={{overflow:'wrap'}} /> Can someone suggest please what change should I do? You'll want to use the css property white-space: unset; find the column you want to have wrap text and add the following as a
订阅 react-table