Align elements in a flatlist table with its header react native

Question

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,
  },
});