agracio/ts-react-json-table

Simple React table component to display JSON data.

ts-react-json-table's Issues

Adding `data-` attribute to table cells

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.

No typings in npm package?

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.

Rightmost columns not visible in wide tables

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?

Question of ts-react-json-table usage

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

Feature request: Sticky header

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?

"cannot convert undefined or null to object" error

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.

Ignores the 'columns' definition

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

Possibility of editing a column field but still retaining all the columns

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": "[phone]","color": "green"},
  {"id": 80616,"name": "Hanson Perry","age": 36,"phone": "[phone]","color": "brown"},
  {"id": 77621,"name": "Brandi Long","age": 20,"phone": "[phone]","color": "gray"},
  {"id": 81299,"name": "Tonia Sykes","age": 38,"phone": "[phone]","color": "blue"},
  {"id": 14225,"name": "Leach Durham","age": 23,"phone": "[phone]","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).

cellClass function - rowData parameter not full row

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

Can we use <Jsontable> within reac components? Invariant Violation: View config not found for name tr

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