0

I achieved both fixed first column and rest of the columns with horizontal scroll by using native react flatlist component. But im unable to apply headers sticky.

<ScrollView horizontal={false} height={300} nestedScrollEnabled> 
{teamStatsData.fetchingData ? <StatsTableLoader height={500} /> :      
  <View style={{flexDirection:"row"}}>
    {teamStatsData.teamStatsData && 
      <FlatList
        data={teamStatsData.teamStatsData}
        renderItem={renderData2}
        keyExtractor={(item) => item.team.id}
        ListHeaderComponent={headersLeft}
        stickyHeaderIndices={[0]}
      />
    }
    {teamStatsData.teamStatsData && 
    <ScrollView horizontal nestedScrollEnabled style={{borderRightWidth:10, borderRightColor:"black"}}>
      <FlatList
        data={teamStatsData.teamStatsData}
        renderItem={selectedPosition.value=="batting" ? renderHitterData : renderPitcherData}
        keyExtractor={(item) => item.team.id}        
        scrollEnabled
        ListHeaderComponent={selectedPosition.value=="batting" ? headersHitterRight : headersPitcherRight }
        stickyHeaderIndices={[0]}
      />
    </ScrollView>
    }
  </View>

}

avinash akula
  • 121
  • 1
  • 3

0 Answers0