Adaptive Cells Width Doesn't work when ScrollView Horizontal is true

[ShivamJoker]

How can we auto adjust the width of cells ?

When I enable the horizontal in Scroll View the tables becomes like this but without that it looks good. I tried everything which I could by seeing your examples but couldn't get it to work.

here is the code

<View style={styles.outPutContainer}>
            <ScrollView horizontal>
              <View>
                <ScrollView>
                  <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
                    <Row
                      data={dbHeader}
                      style={styles.head}
                      textStyle={styles.headerText}
                    />
                    <Rows data={dbData} textStyle={styles.rowTxt} />
                  </Table>
                </ScrollView>
              </View>
            </ScrollView>
 </View>
// style

outPutContainer: {
    flex: 1,
    padding: 5,
    backgroundColor: '#fff',
    marginBottom: 50,
  },

  head: {
    height: 40,
    backgroundColor: '#f1f8ff',
  },
  headerText: {
    margin: 6,
    textAlign: 'center',
    textTransform: 'capitalize',
  },
  rowTxt: {
    margin: 6,
    textTransform: 'capitalize',
  },

Please help me Thanks for the awesome Library!

[EyadAyman658]

any news on this issue?

[ShivamJoker]

@EyadAyman658 this is how I did

https://github.com/ShivamJoker/SQL-Playground/blob/master/src/utils/utils.tsx#L6

[Bilal-Abdeen]

It seems that to get horizontal scrolling to work, columns need to have predefined widths! It seems that you can either have flexible (auto-adjusting) column width OR horizontal scrolling (but not both). Please, refer to https://github.com/Gil2015/react-native-table-component#example3 for horizontal scrolling.