Example?

[cvongrim]

Is there any example code for getting this to work? I am running into some issues trying to get this to set up.

[Chris-Petty]

We're really busy with other projects at the moment so I won't be adding an example at this point, though you are well right that there should be one.

The best I can do is show you working examples from our main projects:

• Simple(ish) example
• Convoluted example

[Kabijoy]

I am trying to use your code. but I get an error like as "utilities doesn't exists". I want to use thie with sorting.

[cvongrim]

Perfect, those examples helped a lot. Thanks.

[edmofro]

@Kabijoy did you npm install? There's not a lot to go off in your question...

[Kabijoy]

yes I have npm and react-native with all dependency plug-ins.

I followed this url https://github.com/infinitered/ignite

[Kabijoy]

How can I call the method in renderRow function?

I have a function, named "refreshData()". And I call this function from renderRow Method like as below. but I got the error like as "_this2.refreshData is not a function. (In ‘_this.refreshData()’ , ‘_this.refreshData’ in undefined)" when I clicked the Row

Code:

import React from 'react' import { View, Text, ListView, div, AppState, NetInfo, Image, AlertIOS ,Icon, TextInput, Metrics, ActivityIndicatorIOS,StyleSheet, TouchableWithoutFeedback, SwitchIOS, Modal, TouchableHighlight, ScrollView, TouchableOpacity,h1} from 'react-native'

import { DataTable, Cell, CheckableCell, EditableCell, Header, HeaderCell, Row, Expansion, TableButton} from 'react-native-data-table';

class TransactionHistory extends React.Component { constructor (props) { super(props) const dataObjects = [ {title: 'First Title', description: 'First Description'}, {title: 'Second Title', description: 'Second Description'}, ] const rowHasChanged = (r1, r2) => r1 !== r2

    // DataSource configured
const ds = new ListView.DataSource({rowHasChanged})

this.state = { dataSource: ds.cloneWithRows(dataObjects),
loaded: true }; this.refreshData = this.refreshData.bind(this); }

refreshData() { gridCount = appDataServices.getGridCount() if(gridCount.gridCount > 1){ gridCount = gridCount.gridCount; } else{ gridCount = 1; } //alert(gridCount) }

renderHeader() { return ( <Header style={{color:'#000', backgroundColor: '#cdcdcd', padding: 12, paddingLeft: 25, fontWeight: 'bold'}}> <HeaderCell key={1} isAscending={true} text={'Transaction #'} textStyle={{fontWeight: 'bold'}} /> <HeaderCell key={2} isAscending={true} text={'By'} textStyle={{fontWeight: 'bold'}} />

  </Header>

)

}

_renderRow (rowData) { return ( <Row onPress={()=>{this.refreshData()}} > <Cell>{rowData.title}</Cell> <Cell>{rowData.description}</Cell> </Row> ) }

render () { return (
<DataTable dataSource={this.state.dataSource} renderRow={this._renderRow} renderHeader = {this.renderHeader} pageSize={5} style= {{backgroundColor: '#FFFFFF', height: 640, marginLeft: 55, marginRight: 55, borderRightWidth: 1, borderLeftWidth:1, borderBottomWidth: 1, borderColor:'#ccc' }} />

) } }

[edmofro]

You've bound refreshData but not _renderRow. Try adding

this._renderRow = this._renderRow.bind(this);

[Kabijoy]

thanks a lot it working.. As well as how can I get the sorting from Headercell same as bootstrab datatable ? And I cant able to see the sorting Images too.. how can I solve this?

[Chris-Petty]

I don't know what ignite does, it may not have installed the dependancies for the vector icons used for the sorting arrows (what I'm assuming you mean by images). Just running npm install (or the yarn equivalent if that's your dealio) would give us peace of mind. Make an issue with screenshots if it persists.

As for bootstrap style arrows, I assume you mean like here. We don't directly support them, the current iteration of this module is basically coded to suit our projects' needs and design.

Best case would be to make another issue for changing the rendered icon. My suggestion for a PR with that would be for props (type: string) to be added to headerCell.js that allow for selecting other icons from fontAwesome. Make default props the current icons. More hardcore would be refactoring for passing through the icon object itself but I'm not going elaborate/think about it, got things to do!

[Chris-Petty]

This should still be under new issue.

You should use Markdown to get decent code syntax and indentation when you post it around github to make it more readable.

For instance:

_renderRow (rowData) {
  return (
    <Row onPress={()=>{this.refreshData()}} >
      {rowData.title}
      {rowData.description}
  )
}

To go the extra mile, use rnplay.org (this will get you some more love in many repos).

Your renderRow return probably doesn't work as you don't have a closing JSX tag for the <Row> component. If you run a linter in your code editor/project, it'll pick up this kind of mistake for you!

Your renderHeader function currently has no body in the return. You need to use the components provided by this library to define the header. (Pretty sure linter will catch this too)

appDataServices is undefined as far as I can tell, so I don't imagine your row onPress function works. (Linter would definitely get this too)

[Kabijoy]

How to hide ascending descending icons, if we have any options to hide on particular headercell?

[edmofro]

@Kabijoy any column with sortable: false won't have icons, but also won't be sortable.

[sussol-bot]

Rewrite data table

[ghost]

why do all this, write all the readme and make the code public if you won't put even a simplest example on how to use it

[airam666]

an example of usage should be in the readme unless you don't want anyone to use this. or maybe you don't want anyone to use it for real. It's not been updated in a while after all

[Chris-Petty]

Sorry - I've always been optimistic that we'd find time to maintain this project, but unfortunately we rarely do react-native work these days and our one project that really utilises this package has essentially forked it anyway.

I'll set about updating upfront places that this package is deprecated.