I have an array of items, each item has its keys and values.I displayed my data as shown in the provided image.My problem now, I want that each value with the same key in each row be aligned with each other and also be aligned with the corresponding header.Note: I don't want to set a fixed width for each column.As values for the same key are not equal in content's width, I want that all values for the same key as well as the corresponding header take the same width as the largest value content.Any help ?
const [data, setData] = useState([ { id: 1, champ1: "1111", champ2: "http:...", champ3: "champ3", champ4: "nom prenom", champ5: "value", champ6: "validation", }, { id: 2, champ1: "1111", champ2: "http:...", champ3: "champ........", champ4: "nom prenom......", champ5: "value", champ6: "validation en attente de....", }, { id: 3, champ1: "1111", champ2: "http:...", champ3: "champ3", champ4: "nom prenom", champ5: "value", champ6: "en cours......", },]);return (<ScrollView style={styles.container} horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={true} contentContainerStyle={{ flexGrow: 1, justifyContent: "center", }}><FlatList data={data} keyExtractor={(item) => item.id.toString()} ListHeaderComponent={() => (<View style={[ styles.rowContainer, { borderBottomColor: colors.titleColor }, ]}><View style={styles.column}><Text style={styles.header}>ID</Text></View><View style={styles.column}><Text style={styles.header}>Champ1</Text></View><View style={styles.column}><Text style={styles.header}>Champ2</Text></View><View style={styles.column}><Text style={styles.header}>Champ3</Text></View><View style={styles.column}><Text style={styles.header}>Champ4</Text></View><View style={styles.column}><Text style={styles.header}>Champ5</Text></View><View style={styles.column}><Text style={styles.header}>Champ6</Text></View></View> )} renderItem={({ item, index }) => (<View style={[ styles.rowContainer, { backgroundColor: index % 2 === 0 ? "white" : colors.backgroundColor, }, ]}> {item && Object.entries(item).map(([key, value], index) => (<React.Fragment key={index}> {key === "id" && (<View key={key} style={styles.column}><Text style={[styles.itemText]}> {value}</Text></View> )} {key === "champ1" && (<View key={key} style={styles.column}><Text style={[styles.itemText]}> {" "} {value && value.toString().length > 4 ? `${value.toString().substring(0, 4)}...` : value}</Text></View> )} {key === "champ2" && (<View key={key} style={[styles.column]}><TouchableOpacity style={{ flexDirection: "row", alignItems: "center", }} onPress={() => {}}><Text>test img</Text><FeatherIcon name="chevron-down" size={20} color={colors.greyColor} /></TouchableOpacity></View> )} {key === "champ3" && (<View key={key} style={styles.column}><Text style={styles.itemText}>{value} </Text></View> )} {key === "champ4" && (<View key={key} style={styles.column}><Text style={styles.itemText}> {value}</Text></View> )} {key === "champ5" && (<View key={key} style={styles.column}><Text style={styles.itemText}> {value}</Text></View> )} {key === "champ6" && (<View key={key} style={[ styles.column, { borderRadius: 10, alignItems: "center", }, ]}><TouchableOpacity style={{ flexDirection: "row", alignItems: "center", paddingRight: 5, }} onPress={() => {}}><View style={[ { flex: 1, alignItems: "center", backgroundColor: value === "validation" ? "#E3C900" : value === "commande prête en attente de ..." ? "#001586" : "grey", borderRadius: 50, }, ]}><Text style={[ { padding: 5 }, styles.itemText, { color: "white" }, ]}> {" "} {value}</Text></View><FeatherIcon name="chevron-down" size={20} color={colors.greyColor} /></TouchableOpacity></View> )}</React.Fragment> ))}</View> )} /></ScrollView>);const styles = StyleSheet.create({ container: { margin: 10, }, header: { fontSize: 16, fontWeight: "bold", color: colors.titleColor, }, column: { flex: 1, paddingHorizontal: 10, }, rowContainer: { flexDirection: "row", alignItems: "center", padding: 5, borderBottomWidth: 1, borderBottomColor: colors.colorlineSeparationList, }, itemText: { fontSize: 15, }, paddingHorizontal: { paddingHorizontal: 10, },}); 
