ReportTable component

[diegoevangelisti]

Is your feature request related to a problem? Please describe.

Need a ReportTable component for the mobile dashboard.

Describe the solution you'd like

A component similar the ReportTable created here: https://github.com/openmsupply/mobile/blob/49d8ab764c85ec5e35699661da92aad8c3e1b03a/src/widgets/ReportChart.js

Implementation

As above.

Describe alternatives you've considered

N/A

Additional context

N/A

[diegoevangelisti]

@joshxg
Regarding this one, I am going to create ReportTableCell, ReportTableRow and ReportTable components, so I reckon the best way is to add a couple of issues to split those tasks. I am working on it right now.

[diegoevangelisti]

@joshxg almost done with this one (I reckon) but maybe you can give me a hand to understand how const renderItem = ({ item, rowIndex }) => { ... } is receiving { item, rowIndex } because I can't see renderItem having those arguments when making the call. Thanks!
Btw this is the function I'm mentioning:

export const ReportTable = ({ rows, header }) => {

  const renderItem = ({ item, rowIndex }) => {
    return <ReportRow rowData={item} rowIndex={rowIndex} />;
  };

  const renderHeader = () => {
    return <ReportRow rowData={header} isHeader rowIndex={0} />;
  };

  // TODO: KeyExtractor should be altered to not use the index.
  render() {
    return (
      <View style={localStyles.container}>
        {renderHeader()}
        <FlatList
          data={rows}
          renderItem={renderItem}
          keyExtractor={(_, rowIndex) => `${rowIndex}`}
        />
      </View>
    );
  }
}

[josh-griffin]

https://facebook.github.io/react-native/docs/flatlist#renderitem

FlatList will call the renderItem function you pass as a prop for every element in data.

For example:

const renderItem = (props) => {
    const {item, index} = props;
    const {id, value} = item;
    return <View><Text>{index}:</Text>{id} -- <Text><Text>Value</Text></View>
}
<FlatList data={[{id: 1, value: "test one"}, {id:2, value: "test two"}]} renderItem={renderItem}/>

This will return a list looking like:

0: 1 -- test one
1: 2 -- test two

---

I dunno if thats clear.. I'll give another try:

FlatList will call the renderItem function passed like:

const list = data.map((datum, index) => renderItem({item: datum[index], index: index, ...})

and will render the list (obviously more complicated, but general idea)

[diegoevangelisti]

That's perfect, I've got it! Great how FlatList works and with these props (like renderItem) makes everything much easier.😄