agracio / ts-react-json-table Goto Github PK
View Code? Open in Web Editor NEWSimple React table component to display JSON data.
License: MIT License
Simple React table component to display JSON data.
License: MIT License
In react json table, the cellClass function returns the full rowData item.
In ts-react-json-table, the cellClass function appears to be returning only the current cell value, not the entire row.
Am I missing something?
Thanks,
James
Hey, I was excited to see this lib, but upon first attempt at getting it to work, it completely ignores the columns definition.
simple example will not work.
var items = [
{ name: 'Louise', age: 27, color: 'red' },
{ name: 'Margaret', age: 15, color: 'blue'},
{ name: 'Lisa', age:34, color: 'yellow'}
];
var columns = [
'name',
{key: 'age', label: 'Age'},
{key: 'color', label: 'Colourful', cell: function( item, columnKey ){
return <span style={{color: item.color}}>{item.color} testing</span>;
}}
];
...
render() {
//const { rows } = this.state;
return (
<JsonTable rows={items} colums={columns} />
);
}
are you not supporting this like the 'react-json-table' ? working codepen here:
https://codepen.io/arqex/pen/waJREq?editors=0110
thanks
Is there a way to add a data-
attribute to the <td>
s on the columns and populate it with the respective header value for each column?
That way the table would be able to do this: https://codepen.io/MuTLY/pen/GRRpVPy
(*) Resize the browser to see that table in action.
Hi!
Thanks for this great component!
I'm using this library to render my JSON in form of tables.A fairly common operation from me is to add links to particular columns.I can use columns
for that,which I am.
The problem is I want to render every other field too.This,I think is only possible if I mention all the column names in column prop along with edited fields.Is there a better way?
Following code explains better-
var items = [
{"id": 75950,"name": "Louella Wallace","age": 24,"phone": "+44 (0)203 437 7302","color": "green"},
{"id": 80616,"name": "Hanson Perry","age": 36,"phone": "+44 (0)203 279 3708","color": "brown"},
{"id": 77621,"name": "Brandi Long","age": 20,"phone": "+44 (0)203 319 4880","color": "gray"},
{"id": 81299,"name": "Tonia Sykes","age": 38,"phone": "+44 (0)208 328 3671","color": "blue"},
{"id": 14225,"name": "Leach Durham","age": 23,"phone": "+44 (0)208 280 9572","color": "green"}
];
var columns = [
{key: 'color', label: 'Colourful', cell: function( row, columnKey ){
return <span style={{color: row.color}}>{row.color}</span>;
}}
];
ReactDOM.render( <JsonTable className="table table-striped" rows = {items} columns={columns} / > ,
document.getElementById('container')
);
In above code,I want to list all the columns without listing their names(Since there are host of them in my usecase).
I am new to React and just learn to use ts-react-json-table component. I have a question. When I hardcode the json string in setReturnedJson function, the table displays well. But when I parse the variable called cleanedJson string which is the same string as hard coded string into setReturnedJson(cleanedJson), I am getting the error: TypeError: this.props.rows.map is not a function. Please see the attached code and the screenshot.
Since I have to use onSubmit function to send a soap request to the backend web service in order to get back an xml response, I need the xml2js component to convert it into json data, and then display the data into the table. Would you please help me to figure out how should I call setReturnedJson function using the cleanedJson string?
I appreciate your help very much.
ScreenshotFor_ts-react-json-table_Component_Issue.docx
JsonToTable_ts_Example.zip
Invariant Violation: View config not found for name tr
This error is located at:
in tr (created by GridHeaderRow)
in GridHeaderRow (created by GridHeader)
in thead (created by GridHeader)
in GridHeader (created by JsonTable)
in table (created by JsonTable)
in div (created by JsonTable)
in div (created by JsonTable)
in JsonTable (at HomeScreen.js:78)
in RCTView (at View.js:60)
in View (at HomeScreen.js:69)
in RCTView (at View.js:60)
in View (at ScrollView.js:791)
in RCTScrollView (at ScrollView.js:887)
in ScrollView (at HomeScreen.js:57)
in RCTView (at View.js:60)
in View (at HomeScreen.js:56)
in HomeScreen (at SceneView.js:10)
in SceneView (at StackViewLayout.js:428)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:427)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:426)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at StackViewCard.js:12)
in Card (at createPointerEventsContainer.js:28)
in Container (at StackViewLayout.js:488)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:385)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:384)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:58)
in RCTView (at View.js:60)
in View (at Transitioner.js:146)
in Transitioner (at StackView.js:22)
in StackView (at createNavigator.js:96)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:372)
in NavigationContainer (at SceneView.js:10)
in SceneView (at createTabNavigator.js:10)
in RCTView (at View.js:60)
in View (at ResourceSavingScene.js:14)
in RCTView (at View.js:60)
in View (at ResourceSavingScene.js:10)
in ResourceSavingScene (at createBottomTabNavigator.js:79)
in RCTView (at View.js:60)
in View (at createBottomTabNavigator.js:70)
in RCTView (at View.js:60)
in View (at createBottomTabNavigator.js:69)
in TabNavigationView (at createTabNavigator.js:80)
in NavigationView (at createNavigator.js:96)
in Navigator (at createNavigationContainer.js:372)
in NavigationContainer (at SceneView.js:10)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:96)
in Navigator (at createNavigationContainer.js:372)
in NavigationContainer (at RootNavigation.js:24)
in RootNavigation (at App.js:26)
in RCTView (at View.js:60)
in View (at App.js:24)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
get$1
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:14126:6
createInstance
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:14295:27
completeWork
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10097:14
completeUnitOfWork
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12769:10
performUnitOfWork
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12941:32
workLoop
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12953:43
renderRoot
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12996:17
performWorkOnRoot
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13632:34
performWork
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13545:26
performSyncWork
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13506:16
requestWork
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13392:6
scheduleWorkImpl
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13259:24
scheduleWork
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13207:28
enqueueSetState
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:6224:19
setState
C:\Users\FTorres\Kscope18Expo\node_modules\react\cjs\react.development.js:242:31
_handleFinishLoading
C:\Users\FTorres\Kscope18Expo\App.js:55:18
_callee$
C:\Users\FTorres\Kscope18Expo\node_modules\expo\src\launch\AppLoading.js:61:8
tryCatch
C:\Users\FTorres\Kscope18Expo\node_modules\regenerator-runtime\runtime.js:62:44
invoke
C:\Users\FTorres\Kscope18Expo\node_modules\regenerator-runtime\runtime.js:296:30
C:\Users\FTorres\Kscope18Expo\node_modules\regenerator-runtime\runtime.js:114:28
tryCatch
C:\Users\FTorres\Kscope18Expo\node_modules\regenerator-runtime\runtime.js:62:44
invoke
C:\Users\FTorres\Kscope18Expo\node_modules\regenerator-runtime\runtime.js:152:28
C:\Users\FTorres\Kscope18Expo\node_modules\regenerator-runtime\runtime.js:162:19
tryCallOne
C:\Users\FTorres\Kscope18Expo\node_modules\promise\setimmediate\core.js:37:14
C:\Users\FTorres\Kscope18Expo\node_modules\promise\setimmediate\core.js:123:25
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:295:23
_callTimer
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152:6
_callImmediatesPass
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:200:17
callImmediates
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:464:11
__callImmediates
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:327:4
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:145:6
__guardSafe
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314:6
flushedQueue
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:144:17
invokeCallbackAndReturnFlushedQueue
C:\Users\FTorres\Kscope18Expo\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:140:11
Do you already support a way of keeping the header visible while body cells may be scrolled vertically? If not, would you please add this?
Although the package itself is written in Typescript, it seems there no typings so one cannot just use it in another Typescript project?
Or am I missing something?
@types/ts-react-json-table doesn't seem to exist.
I have one of these tables that is 1300px wide, and the rightmost columns aren't visible due to the overflow: hidden on the outermost div of the JsonTable render. There is no id nor class on this rendered div, so I can't override this style.
Can you suggest another way?
RowDataPacket { bname: null, lname: null, aname: null, areaid: null, status: null, name: 'Osram 1', panellabel: null, voltageid: null } ], pagination: { current: 0, perPage: 10, previous: null, next: 1 } } TypeError: Cannot convert undefined or null to object at JsonTable.createColumns (/home/min/src/react2/node_modules/ts-react-json-table/src/grid.tsx:74:30) at JsonTable.render (/home/min/src/react2/node_modules/ts-react-json-table/src/grid.tsx:29:29) at processChild (/home/min/src/react2/node_modules/react-dom/cjs/react-dom-server.node.development.js:2207:18) at resolve (/home/min/src/react2/node_modules/react-dom/cjs/react-dom-server.node.development.js:2064:5) at ReactDOMServerRenderer.render (/home/min/src/react2/node_modules/react-dom/cjs/react-dom-server.node.development.js:2383:22) at ReactDOMServerRenderer.read (/home/min/src/react2/node_modules/react-dom/cjs/react-dom-server.node.development.js:2357:19) at Object.renderToStaticMarkup (/home/min/src/react2/node_modules/react-dom/cjs/react-dom-server.node.development.js:2740:25) at View.renderFile [as engine] (/home/min/src/react2/node_modules/express-react-views/index.js:68:32) at View.render (/home/min/src/react2/node_modules/express/lib/view.js:135:8) at tryRender (/home/min/src/react2/node_modules/express/lib/application.js:640:10) at EventEmitter.render (/home/min/src/react2/node_modules/express/lib/application.js:592:3) at ServerResponse.render (/home/min/src/react2/node_modules/express/lib/response.js:1008:7) at /home/min/src/react2/app/standard.js:263:5 at tryCatcher (/home/min/src/react2/node_modules/bluebird/js/release/util.js:16:23) at Promise._settlePromiseFromHandler (/home/min/src/react2/node_modules/bluebird/js/release/promise.js:512:31) at Promise._settlePromise (/home/min/src/react2/node_modules/bluebird/js/release/promise.js:569:18)
Below is my code.
<JsonTable rows={this.props.responsePayload} />)
May I know what I can do to fix it? Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.